1
0
mirror of https://github.com/uetchy/namae.git synced 2025-03-17 04:30:31 +09:00

fix: new color scheme

This commit is contained in:
uetchy 2019-08-07 13:38:37 +09:00
parent f3c01ac77f
commit 6113bfe6a5

View File

@ -1,14 +1,19 @@
import React, { useState, Suspense } from 'react'
import React, { useState, useEffect, Suspense } from 'react'
import styled from 'styled-components'
import { mobile } from '../util/css'
import useFetch from 'fetch-suspense'
import { Tooltip } from 'react-tippy'
import 'react-tippy/dist/tippy.css'
import BarLoader from 'react-spinners/BarLoader'
import { GoInfo } from 'react-icons/go'
import { Tooltip } from 'react-tippy'
import { ExternalLink } from './Links'
import 'react-tippy/dist/tippy.css'
import { mobile } from '../util/css'
const COLORS = {
available: '#6e00ff',
unavailable: 'darkgrey',
error: '#ff388b',
}
export function Card({ title, children }) {
return (
@ -37,6 +42,10 @@ export function Repeater({ items = [], moreItems = [], children }) {
setRevealAlternatives(true)
}
useEffect(() => {
setRevealAlternatives(false)
}, [items, moreItems])
return (
<>
{items.map((name) => (
@ -76,7 +85,7 @@ export function DedicatedAvailability({
message={message}
link={link}
icon={icon}
color={response.availability ? 'green' : 'red'}
color={response.availability ? COLORS.available : COLORS.unavailable}
prefix={prefix}
suffix={suffix}
/>
@ -106,7 +115,7 @@ export function ExistentialAvailability({
message={message}
link={link}
icon={icon}
color={availability ? 'green' : 'red'}
color={availability ? COLORS.available : COLORS.unavailable}
prefix={prefix}
suffix={suffix}
/>
@ -138,7 +147,7 @@ export const Result = ({
animation="shift"
duration="200">
<ResultItem color={color}>
{icon}
<ResultIcon>{icon}</ResultIcon>
<ResultName>
{link ? (
<ExternalLink href={link}>{content}</ExternalLink>
@ -172,8 +181,10 @@ class ErrorBoundary extends React.Component {
animation="shift"
duration="200">
<ResultContainer>
<ResultItem>
<GoInfo />
<ResultItem color={COLORS.error}>
<ResultIcon>
<GoInfo />
</ResultIcon>
<ResultName>Error</ResultName>
</ResultItem>
</ResultContainer>
@ -239,12 +250,15 @@ const Button = styled.div`
`
const ResultContainer = styled.div`
min-height: 1em;
display: flex;
align-items: center;
margin-top: 8px;
`
const ResultIcon = styled.div`
width: 1em;
`
const ResultItem = styled.div`
display: flex;
flex-direction: row;
@ -255,6 +269,7 @@ const ResultItem = styled.div`
const ResultName = styled.div`
margin-left: 6px;
line-height: 1em;
font-family: monospace;
font-size: 1rem;