diff --git a/src/App.js b/src/App.js
index e0474ad..803059b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,5 +1,7 @@
import React from 'react'
import styled, { createGlobalStyle } from 'styled-components'
+import { FaTwitter, FaGlobe } from 'react-icons/fa'
+
import { useDeferredState } from './hooks/state'
import { CardHolder } from './components/Card'
import GithubCard from './components/GithubCard'
@@ -32,17 +34,18 @@ export default function App() {
return (
<>
-
- namae.dev — name your new project
+
+
{query && query.length > 0 ? (
Result for {query}
@@ -60,17 +63,46 @@ export default function App() {
) : null}
+
>
)
}
-const Logo = styled.div`
- margin: 15px;
+const Header = styled.header`
text-align: center;
`
+const Logo = styled.div`
+ margin: 15px 0 5px;
+ font-family: sans-serif;
+ font-weight: bold;
+`
+
+const SubHeader = styled.div`
+ font-size: 0.8em;
+ font-style: italic;
+`
+
const Input = styled.input`
width: 100%;
+ margin-top: 20px;
padding: 20px;
outline: none;
font-size: 4rem;
@@ -93,3 +125,11 @@ const ResultHeader = styled.div`
font-size: 1.2rem;
font-weight: bold;
`
+
+const Footer = styled.footer`
+ margin-top: 40px;
+ text-align: center;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+ Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+ font-size: 0.8em;
+`