From f0c122c485a96779e1341cabf264f7054d7596f5 Mon Sep 17 00:00:00 2001 From: Yasuaki Uechi Date: Wed, 5 Feb 2020 20:47:03 +0900 Subject: [PATCH] fix: cosmetic changes --- web/src/components/Suggestion.tsx | 6 +++--- web/src/components/Welcome.tsx | 16 +++++++++------- 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/web/src/components/Suggestion.tsx b/web/src/components/Suggestion.tsx index bb6f099..bdc513e 100644 --- a/web/src/components/Suggestion.tsx +++ b/web/src/components/Suggestion.tsx @@ -218,14 +218,14 @@ const Icon = styled(Item)` border-radius: 4px; font-size: 1.3rem; user-select: none; - background: #1066ff; + background: #5610ff; transition: background 0.1s ease-out; &:hover { - background: #3a79ea; + background: #723df3; } &:active { - background: #669dfd; + background: #a17ff5; } `; diff --git a/web/src/components/Welcome.tsx b/web/src/components/Welcome.tsx index 28c675f..a397598 100644 --- a/web/src/components/Welcome.tsx +++ b/web/src/components/Welcome.tsx @@ -33,7 +33,7 @@ const Welcome: React.FC = () => {
{t('title')}
{t('description')} -
Try with these queries
+
Try these queries
namae @@ -155,7 +155,7 @@ const Text = styled.p` const Hero = styled.div``; const ExampleQueries = styled.div` - margin: 50px 0 50px; + margin: 30px 0 0; `; const List = styled.div` @@ -171,32 +171,34 @@ const List = styled.div` `; const ColorfulList = styled.div` + margin-top: 100px; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; - font-size: 1rem; ${mobile} { flex-direction: column; + margin-top: 50px; + padding: 20px; } - padding: 20px; - margin-top: 50px; + padding: 50px 20vw 50px 20vw; color: white; background-image: linear-gradient(180deg, #a57bf3 0%, #4364e1 100%); `; const ListItem = styled.div` - margin: 15px; + margin: 30px 15px; display: flex; align-items: center; - font-size: 1.2rem; + font-size: 1.5rem; line-height: 1em; ${mobile} { margin: 10px 0; + font-size: 1.2rem; } svg {