fix: redesign ui

web/public/locales/en/translation.json

@@ -1,6 +1,6 @@
 {
-  "title": "name new project",
+  "title": "Grab a slick name for your new app",
-  "description": "Check availability of your new app name candidates for major registries at once.",
+  "description": "Check availability of your new project for major registries at once.",
   "placeholder": "search",
   "providers": {
     "domains": "Domains",

web/public/locales/ja/translation.json

@@ -1,6 +1,6 @@
 {
-  "title": "その名前、もう取られてる？",
+  "title": "その名前、もう使われてる？",
-  "description": "namae をつかって、思いついた「名前」が被っていないか調べよう。",
+  "description": "あなたの新しいアプリやライブラリにつける「名前」が被っていないか調べましょう。",
   "placeholder": "検索",
   "providers": {
     "domains": "ドメイン",

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;

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;
+  font-size: 6rem;
-  line-height: 1.2em;
-  transition: opacity 100ms ease-out;
-
-  &:hover {
-    opacity: 0.9;
-  }
 
   ${mobile} {
     font-size: 2rem;

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;
   }
 `;
 

web/src/components/Welcome.tsx

@@ -47,9 +47,9 @@ const Welcome: React.FC = () => {
   return (
     <Container>
       <Hero>
-        <Header>{t('title')}</Header>
+        <HeroTitle>{t('title')}</HeroTitle>
-        <Text>{t('description')}</Text>
+        <HeroText>{t('description')}</HeroText>
-        <ExampleQueries>
+        <ButtonContainer>
           <h5>{t('exampleQueries')}</h5>
           <List>
             {queries.map((query) => (
@@ -58,9 +58,9 @@ const Welcome: React.FC = () => {
               </ListButton>
             ))}
           </List>
-        </ExampleQueries>
+        </ButtonContainer>
       </Hero>
-      <ColorfulList>
+      <HighlightedList>
         <ListItem>
           <FaMapSigns /> {t('providers.domains')}
         </ListItem>
@@ -124,45 +124,55 @@ const Welcome: React.FC = () => {
         <ListItem>
           <FaBuilding /> {t('providers.nta')}
         </ListItem>
-      </ColorfulList>
+      </HighlightedList>
     </Container>
   );
 };
 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`
+const HeroTitle = styled.h1`
-  font-size: 3.5em;
-  line-height: 1em;
   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`
+  ${mobile} {
-  margin: 30px 0 0;
+    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;

web/src/components/cards/core.tsx

@@ -198,13 +198,13 @@ export const Result: React.FC<{
       ? COLORS.available
       : COLORS.unavailable;
   return (
-    <ResultContainer>
     <Tooltip
       title={message}
       position="bottom"
       arrow={true}
       animation="shift"
       duration="200">
+      <ResultContainer>
         <ResultItem color={itemColor}>
           <ResultIcon>{icon}</ResultIcon>
           <ResultName>
@@ -214,10 +214,14 @@ export const Result: React.FC<{
               content
             )}
           </ResultName>
-          {availability === true ? <IoIosFlash /> : null}
+          {availability === true ? (
+            <AvailableIcon>
+              <IoIosFlash />{' '}
+            </AvailableIcon>
+          ) : null}
         </ResultItem>
-      </Tooltip>
       </ResultContainer>
+    </Tooltip>
   );
 };
 
@@ -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;
+  padding: 4px 0;
-  align-items: center;
-  margin-top: 8px;
 `;
 
 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;
+`;

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={<FaMapSigns />}
+            icon={<MdDomain />}
           />
         )}
       </Repeater>

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'},
         },
       ],
     },