uetchy/namae
1
0
Fork 0
mirror of https://github.com/uetchy/namae.git synced 2025-03-17 12:30:32 +09:00
Code Issues Releases Activity

fix: new color scheme

Browse Source
This commit is contained in:
uetchy 2019-08-07 13:38:37 +09:00
parent f3c01ac77f
commit 6113bfe6a5
1 changed files with 27 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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