1
0
mirror of https://github.com/uetchy/namae.git synced 2025-03-17 04:30:31 +09:00

fix: redesign ui

This commit is contained in:
uetchy 2020-02-06 13:16:30 +09:00
parent d417f6f7cd
commit d29f2ceffc
9 changed files with 85 additions and 59 deletions

View File

@ -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",

View File

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

View File

@ -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;

View File

@ -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;

View File

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

View File

@ -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;

View File

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

View File

@ -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>

View File

@ -14,7 +14,7 @@ i18n
backends: [LocalStorageBackend, XHR],
backendOptions: [
{
versions: {en: '1.8', ja: '1.8'},
versions: {en: '1.9', ja: '1.9'},
},
],
},