From d29f2ceffc6754600554d20793795e49e0daa5e5 Mon Sep 17 00:00:00 2001 From: Yasuaki Uechi Date: Thu, 6 Feb 2020 13:16:30 +0900 Subject: [PATCH] fix: redesign ui --- web/public/locales/en/translation.json | 4 +- web/public/locales/ja/translation.json | 4 +- web/src/App.tsx | 3 +- web/src/components/Form.tsx | 18 +++---- web/src/components/Suggestion.tsx | 5 +- web/src/components/Welcome.tsx | 52 ++++++++++++------- web/src/components/cards/core.tsx | 52 ++++++++++++------- .../components/cards/providers/Domains.tsx | 4 +- web/src/util/i18n.ts | 2 +- 9 files changed, 85 insertions(+), 59 deletions(-) diff --git a/web/public/locales/en/translation.json b/web/public/locales/en/translation.json index 73e74b3..954b86d 100644 --- a/web/public/locales/en/translation.json +++ b/web/public/locales/en/translation.json @@ -1,6 +1,6 @@ { - "title": "name new project", - "description": "Check availability of your new app name candidates for major registries at once.", + "title": "Grab a slick name for your new app", + "description": "Check availability of your new project for major registries at once.", "placeholder": "search", "providers": { "domains": "Domains", diff --git a/web/public/locales/ja/translation.json b/web/public/locales/ja/translation.json index 97f0e0f..c33cefd 100644 --- a/web/public/locales/ja/translation.json +++ b/web/public/locales/ja/translation.json @@ -1,6 +1,6 @@ { - "title": "その名前、もう取られてる？", - "description": "namae をつかって、思いついた「名前」が被っていないか調べよう。", + "title": "その名前、もう使われてる？", + "description": "あなたの新しいアプリやライブラリにつける「名前」が被っていないか調べましょう。", "placeholder": "検索", "providers": { "domains": "ドメイン", diff --git a/web/src/App.tsx b/web/src/App.tsx index af1cc96..86df7e0 100644 --- a/web/src/App.tsx +++ b/web/src/App.tsx @@ -76,13 +76,14 @@ const GlobalStyle = createGlobalStyle` } html { - font-size: 16px; + font-size: 100%; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + line-height: 1.625em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: #ffffff; diff --git a/web/src/components/Form.tsx b/web/src/components/Form.tsx index 4daa2bc..b0c69ee 100644 --- a/web/src/components/Form.tsx +++ b/web/src/components/Form.tsx @@ -82,14 +82,16 @@ const Form: React.FC<{ export default Form; const InputContainer = styled.div` + padding: 30px; transform: translateY(40px); - padding: 20px; + border-radius: 50px; + box-shadow: 0 10px 50px 0 #858efb; background: #ffffff; - box-shadow: 0 10px 20px 0 #c7dcf7; - border-radius: 20px; ${mobile} { + padding: 20px; transform: translateY(20px); + border-radius: 30px; } `; @@ -97,7 +99,7 @@ const Logo = styled.div` margin-bottom: 5px; text-align: center; font-family: 'Montserrat', sans-serif; - font-weight: bold; + font-weight: 900; font-size: 20px; color: #4a90e2; cursor: pointer; @@ -132,13 +134,7 @@ const InputView = styled.input.attrs({ text-align: center; font-family: 'Montserrat', monospace; font-weight: 600; - font-size: 5rem; - line-height: 1.2em; - transition: opacity 100ms ease-out; - - &:hover { - opacity: 0.9; - } + font-size: 6rem; ${mobile} { font-size: 2rem; diff --git a/web/src/components/Suggestion.tsx b/web/src/components/Suggestion.tsx index 1de30f6..84360d1 100644 --- a/web/src/components/Suggestion.tsx +++ b/web/src/components/Suggestion.tsx @@ -109,6 +109,7 @@ const modifiers: Modifier[] = [ (word): string => `Super${lower(word)}`, (word): string => `Semantic${capitalize(word)}`, (word): string => `Up${lower(word)}`, + (word): string => `Un${lower(word)}`, (word): string => `Wunder${lower(germanify(word))}`, (word): string => `Zen${capitalize(word)}`, (word): string => njoin('Many', lower(word)), @@ -250,13 +251,13 @@ const Item = styled.div` cursor: pointer; font-weight: bold; font-family: monospace; - font-size: 1.2rem; + font-size: 1.5rem; border-bottom: 1px dashed black; color: black; ${mobile} { margin-right: 0; - font-size: 1.1rem; + font-size: 1.3rem; } `; diff --git a/web/src/components/Welcome.tsx b/web/src/components/Welcome.tsx index a1b6f93..753cb49 100644 --- a/web/src/components/Welcome.tsx +++ b/web/src/components/Welcome.tsx @@ -47,9 +47,9 @@ const Welcome: React.FC = () => { return ( -
{t('title')}
- {t('description')} - + {t('title')} + {t('description')} +
{t('exampleQueries')}
{queries.map((query) => ( @@ -58,9 +58,9 @@ const Welcome: React.FC = () => { ))} - + - + {t('providers.domains')} @@ -124,45 +124,55 @@ const Welcome: React.FC = () => { {t('providers.nta')} - + ); }; export default Welcome; const Container = styled.div` + margin-top: 60px; padding-bottom: 40px; text-align: center; font-size: 1.5rem; - line-height: 1.6em; ${mobile} { + margin-top: 0px; text-align: left; - padding-right: 40px; - padding-left: 40px; font-size: 1.2rem; } `; -const Header = styled.h1` - font-size: 3.5em; - line-height: 1em; +const HeroTitle = styled.h1` padding-bottom: 30px; + line-height: 1em; + font-size: 4rem; + font-weight: 700; ${mobile} { - font-size: 3em; + font-size: 2.5em; } `; -const Text = styled.p` +const HeroText = styled.p` font-size: 1.2em; + font-weight: 300; color: #3c3c3c; `; -const Hero = styled.div``; +const Hero = styled.div` + margin-right: 20vw; + margin-left: 20vw; -const ExampleQueries = styled.div` - margin: 30px 0 0; + ${mobile} { + margin: inherit; + padding-right: 20px; + padding-left: 20px; + } +`; + +const ButtonContainer = styled.div` + margin: 30px 0 0 0; `; const List = styled.div` @@ -170,6 +180,7 @@ const List = styled.div` flex-direction: row; flex-wrap: wrap; justify-content: center; + font-size: 1rem; ${mobile} { @@ -177,7 +188,7 @@ const List = styled.div` } `; -const ColorfulList = styled.div` +const HighlightedList = styled.div` margin-top: 100px; width: 100%; display: flex; @@ -193,11 +204,12 @@ const ColorfulList = styled.div` padding: 50px 20vw 50px 20vw; color: white; - background-image: linear-gradient(180deg, #a57bf3 0%, #4364e1 100%); + /* background-image: linear-gradient(180deg, #a57bf3 0%, #4364e1 100%); */ + background: #342d3e; `; const ListItem = styled.div` - margin: 30px 15px; + margin: 20px 25px; display: flex; align-items: center; font-size: 1.5rem; diff --git a/web/src/components/cards/core.tsx b/web/src/components/cards/core.tsx index 0d38943..e2bb19e 100644 --- a/web/src/components/cards/core.tsx +++ b/web/src/components/cards/core.tsx @@ -198,13 +198,13 @@ export const Result: React.FC<{ ? COLORS.available : COLORS.unavailable; return ( - - + + {icon} @@ -214,10 +214,14 @@ export const Result: React.FC<{ content )} - {availability === true ? : null} + {availability === true ? ( + + {' '} + + ) : null} - - + + ); }; @@ -290,6 +294,8 @@ const ErrorHandler: React.FC = ({children}) => ( const CardContainer = styled.div` padding: 40px; + font-size: 1rem; + line-height: 1rem; ${mobile} { margin-bottom: 40px; @@ -299,11 +305,14 @@ const CardContainer = styled.div` const CardTitle = styled.div` margin-bottom: 15px; - font-size: 1rem; + font-size: 1em; font-weight: bold; ${mobile} { - padding-left: 20px; + padding: 0 20px; + margin-bottom: 20px; + font-size: 1.2rem; + font-weight: 600; } `; @@ -312,9 +321,10 @@ const CardContent = styled.div` ${mobile} { padding: 20px; - box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1); + box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1); background: white; border-radius: 0; + font-size: 1.2em; } `; @@ -330,9 +340,7 @@ const Button = styled.div` `; const ResultContainer = styled.div` - display: flex; - align-items: center; - margin-top: 8px; + padding: 4px 0; `; const ResultIcon = styled.div` @@ -349,12 +357,20 @@ const ResultItem = styled.div` const ResultName = styled.div` margin-left: 6px; - line-height: 1em; font-family: monospace; - font-size: 1rem; a { text-decoration: none; color: inherit; } `; + +const AvailableIcon = styled.div` + margin-top: 2px; + margin-left: 3px; + padding: 0; + width: 15px; + text-align: center; + font-size: 13px; + height: 15px; +`; diff --git a/web/src/components/cards/providers/Domains.tsx b/web/src/components/cards/providers/Domains.tsx index 179e13d..2a9a109 100644 --- a/web/src/components/cards/providers/Domains.tsx +++ b/web/src/components/cards/providers/Domains.tsx @@ -1,6 +1,6 @@ import React from 'react'; import {useTranslation} from 'react-i18next'; -import {FaMapSigns} from 'react-icons/fa'; +import {MdDomain} from 'react-icons/md'; import {Card, Repeater, DedicatedAvailability} from '../core'; @@ -26,7 +26,7 @@ const DomainCard: React.FC<{query: string}> = ({query}) => { message="Go to Domainr.com" service="domain" link={`https://domainr.com/?q=${name}`} - icon={} + icon={} /> )} diff --git a/web/src/util/i18n.ts b/web/src/util/i18n.ts index 9d70951..4e34ace 100644 --- a/web/src/util/i18n.ts +++ b/web/src/util/i18n.ts @@ -14,7 +14,7 @@ i18n backends: [LocalStorageBackend, XHR], backendOptions: [ { - versions: {en: '1.8', ja: '1.8'}, + versions: {en: '1.9', ja: '1.9'}, }, ], },