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 (
<Container>
<Hero>
- <Header>{t('title')}</Header>
- <Text>{t('description')}</Text>
- <ExampleQueries>
+ <HeroTitle>{t('title')}</HeroTitle>
+ <HeroText>{t('description')}</HeroText>
+ <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`
- 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 (
- <ResultContainer>
- <Tooltip
- title={message}
- position="bottom"
- arrow={true}
- animation="shift"
- duration="200">
+ <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>
+ </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;
- 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={<FaMapSigns />}
+ icon={<MdDomain />}
/>
)}
</Repeater>
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'},
},
],
},