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:
parent
d417f6f7cd
commit
d29f2ceffc
@ -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",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"title": "その名前、もう取られてる？",
|
||||
"description": "namae をつかって、思いついた「名前」が被っていないか調べよう。",
|
||||
"title": "その名前、もう使われてる？",
|
||||
"description": "あなたの新しいアプリやライブラリにつける「名前」が被っていないか調べましょう。",
|
||||
"placeholder": "検索",
|
||||
"providers": {
|
||||
"domains": "ドメイン",
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
`;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -14,7 +14,7 @@ i18n
|
||||
backends: [LocalStorageBackend, XHR],
|
||||
backendOptions: [
|
||||
{
|
||||
versions: {en: '1.8', ja: '1.8'},
|
||||
versions: {en: '1.9', ja: '1.9'},
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user