From 6113bfe6a5c8606e820a755022e10dfc15b9c9b5 Mon Sep 17 00:00:00 2001 From: Yasuaki Uechi Date: Wed, 7 Aug 2019 13:38:37 +0900 Subject: [PATCH] fix: new color scheme --- web/src/components/Cards.js | 39 +++++++++++++++++++++++++------------ 1 file changed, 27 insertions(+), 12 deletions(-) diff --git a/web/src/components/Cards.js b/web/src/components/Cards.js index db8f0b9..b8f020e 100644 --- a/web/src/components/Cards.js +++ b/web/src/components/Cards.js @@ -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"> - {icon} + {icon} {link ? ( {content} @@ -172,8 +181,10 @@ class ErrorBoundary extends React.Component { animation="shift" duration="200"> - - + + + + Error @@ -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;