diff --git a/web/src/App.js b/web/src/App.js
index 6f9f1ff..eedfa39 100644
--- a/web/src/App.js
+++ b/web/src/App.js
@@ -4,7 +4,9 @@ import styled, { createGlobalStyle } from 'styled-components'
import { useDeferredState } from './hooks/state'
import { mobile } from './util/css'
+import Welcome from './components/Welcome'
import Footer from './components/Footer'
+import { Cards, CardContainer } from './components/Cards'
import GithubCard from './components/cards/GithubCard'
import DomainCard from './components/cards/DomainCard'
@@ -38,9 +40,8 @@ export default function App() {
- {queryGiven && (
+ {queryGiven ? (
- Result for {query}
@@ -55,6 +56,8 @@ export default function App() {
+ ) : (
+
)}
@@ -63,12 +66,28 @@ export default function App() {
}
const GlobalStyle = createGlobalStyle`
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+html {
+ font-size: 16px;
+}
+
body {
background: #ffffff;
${mobile} {
background: #f5f5f5;
}
+
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+ 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+ sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
}
`
@@ -89,8 +108,8 @@ const InputContainer = styled.div`
transform: translateY(40px);
padding: 20px;
background: #ffffff;
- box-shadow: 0 10px 20px 0 #3c94fa;
- border-radius: 4px;
+ box-shadow: 0 10px 20px 0 #c7dcf7;
+ border-radius: 20px;
${mobile} {
transform: translateY(20px);
@@ -112,48 +131,20 @@ const Logo = styled.div`
const Input = styled.input.attrs({
type: 'text',
- placeholder: ['awesome-library', 'stunning-package', 'magnificent-app'][
- Math.floor(Math.random() * 3)
- ],
+ placeholder: 'search',
autocomplete: 'off',
autocorrect: 'off',
autocapitalize: 'off',
spellcheck: 'false',
})`
width: 100%;
+ border: none;
outline: none;
text-align: center;
- font-size: 5rem;
font-family: monospace;
- border: none;
+ font-size: 5rem;
${mobile} {
- font-size: 2rem;
- }
-`
-
-const Cards = styled.div`
- margin-top: 40px;
-`
-
-const CardHeader = styled.div`
- margin-bottom: 20px;
- font-size: 1.2rem;
- font-weight: bold;
- text-align: center;
-
- ${mobile} {
- padding-left: 20px;
- text-align: left;
- }
-`
-const CardContainer = styled.div`
- display: flex;
- flex-direction: row;
- justify-content: center;
- flex-wrap: wrap;
-
- ${mobile} {
- flex-direction: column;
+ font-size: 1.5rem;
}
`
diff --git a/web/src/components/Cards.js b/web/src/components/Cards.js
index 8bf4285..f1f0871 100644
--- a/web/src/components/Cards.js
+++ b/web/src/components/Cards.js
@@ -32,11 +32,26 @@ export function Card({ title, nameList, alternativeList = [], children }) {
)
}
+export const Cards = styled.div`
+ margin-top: 40px;
+`
+
+export const CardContainer = styled.div`
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ flex-wrap: wrap;
+
+ ${mobile} {
+ flex-direction: column;
+ }
+`
+
const CardWrapper = styled.div`
- margin-bottom: 40px;
padding: 40px;
${mobile} {
+ margin-bottom: 40px;
padding: 0px;
}
`
diff --git a/web/src/components/Footer.js b/web/src/components/Footer.js
index a209908..909b07c 100644
--- a/web/src/components/Footer.js
+++ b/web/src/components/Footer.js
@@ -8,19 +8,19 @@ export default function Footer() {
return (
- Made by U with{' '}
+ Made by U with{' '}
☕️
-
-
+
+
{' '}
-
+
)
}
@@ -31,4 +31,18 @@ const Container = styled.footer`
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 0.8em;
+ display: flex;
+ align-items: stretch;
+ justify-content: center;
+`
+
+const Links = styled.div`
+ margin-left: 15px;
+ display: flex;
+ align-items: flex-end;
+
+ a {
+ margin-right: 5px;
+ color: black;
+ }
`
diff --git a/web/src/components/Welcome.js b/web/src/components/Welcome.js
new file mode 100644
index 0000000..a7378ad
--- /dev/null
+++ b/web/src/components/Welcome.js
@@ -0,0 +1,109 @@
+import React from 'react'
+import styled from 'styled-components'
+
+import { FaMapSigns } from 'react-icons/fa'
+import { FaGithub } from 'react-icons/fa'
+import { FaNpm } from 'react-icons/fa'
+import { FaPython } from 'react-icons/fa'
+import { IoIosBeer } from 'react-icons/io'
+import { DiRust } from 'react-icons/di'
+import { FaJsSquare } from 'react-icons/fa'
+import { FaAws } from 'react-icons/fa'
+import { FaTwitter } from 'react-icons/fa'
+import { FaSlack } from 'react-icons/fa'
+
+import { mobile } from '../util/css'
+
+export default function Welcome() {
+ return (
+
+ name your brand new project
+
+ namæ helps you by searching around package registries and domains to see
+ if your desired name is already taken.
+
+
+
+
+ Domains
+
+
+ GitHub Organization
+
+
+ npm
+
+
+ PyPI
+
+
+ Homebrew
+
+
+ crates.io (Rust)
+
+
+ js.org
+
+
+ AWS S3 Bucket
+
+
+ Twitter
+
+
+ Slack
+
+
+
+
+ )
+}
+
+const Container = styled.div`
+ text-align: center;
+ padding: 0 40px;
+ font-size: 1.5rem;
+ line-height: 1.6em;
+
+ ${mobile} {
+ text-align: left;
+ }
+`
+
+const Header = styled.h1`
+ font-size: 2em;
+ padding: 10px 0 40px;
+`
+
+const List = styled.div`
+ margin-top: 40px;
+ padding: 20px;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: center;
+ background-image: linear-gradient(180deg, #ec7951 0%, #f03054 100%);
+ color: white;
+ border-radius: 4px;
+ font-size: 1rem;
+
+ ${mobile} {
+ flex-direction: column;
+ }
+`
+
+const ListItem = styled.div`
+ margin: 15px;
+ display: flex;
+ align-items: center;
+ line-height: 1rem;
+
+ ${mobile} {
+ margin: 10px 0;
+ }
+
+ svg {
+ margin-right: 5px;
+ }
+`
diff --git a/web/src/index.css b/web/src/index.css
deleted file mode 100644
index f164af2..0000000
--- a/web/src/index.css
+++ /dev/null
@@ -1,19 +0,0 @@
-* {
- box-sizing: border-box;
- margin: 0;
- padding: 0;
-}
-
-body {
- margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
- sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
- monospace;
-}
diff --git a/web/src/index.js b/web/src/index.js
index f1bae16..c62b1c9 100644
--- a/web/src/index.js
+++ b/web/src/index.js
@@ -1,13 +1,12 @@
import React from 'react'
import ReactDOM from 'react-dom'
import ReactGA from 'react-ga'
-import './index.css'
import App from './App'
-import * as serviceWorker from './serviceWorker'
+// import * as serviceWorker from './serviceWorker'
ReactDOM.render(, document.getElementById('root'))
ReactGA.initialize('UA-28919359-15')
ReactGA.pageview(window.location.pathname + window.location.search)
-serviceWorker.unregister()
+// serviceWorker.unregister()
diff --git a/yarn.lock b/yarn.lock
index fd48021..25a6613 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7401,6 +7401,11 @@ pnp-webpack-plugin@1.2.1:
dependencies:
ts-pnp "^1.0.0"
+popper.js@^1.11.1:
+ version "1.15.0"
+ resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.15.0.tgz#5560b99bbad7647e9faa475c6b8056621f5a4ff2"
+ integrity sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA==
+
portfinder@^1.0.9:
version "1.0.21"
resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.21.tgz#60e1397b95ac170749db70034ece306b9a27e324"
@@ -8451,6 +8456,13 @@ react-spinners@^0.5.13:
prop-types "^15.5.10"
recompose "0.27.1 - 0.30.0"
+react-tippy@^1.2.3:
+ version "1.2.3"
+ resolved "https://registry.yarnpkg.com/react-tippy/-/react-tippy-1.2.3.tgz#8aef183ec4986ca7c5c556465013d95196fecfd8"
+ integrity sha512-cEmhw29DbVP33n9ayo0nLzibuSz6o0A77cZtzno7zGsfOH8tUEGai/8a7TXRIKHPYDooW8iJkJBIPDnxmEu00g==
+ dependencies:
+ popper.js "^1.11.1"
+
react@^16.8.6:
version "16.8.6"
resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"