Add header (#5)

* Add global styles

* Add header

* Change button cursor

* Add btn states styles

* Delete DS_Store

* Add header styles

* Remove .DS_Store

* Add global colors

* Add Button component

* Change button component

* Change nav animation

* Delete import

* Add button styles

* Add Page Info

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 dist
 yarn-error.log
+.DS_Store

src/App.tsx

@@ -3,7 +3,8 @@ import { Redirect, Route, Switch } from 'react-router'
 import { BrowserRouter } from 'react-router-dom'
 
 import styled from 'styled-components'
-import { TopBar } from './components/TopBar'
+import { GlobalStyle } from './providers/GlobalStyle'
+import { TopBar } from './components/top/TopBar'
 import { Votes } from './pages/Votes'
 import { Directory } from './pages/Directory'
 import { Info } from './pages/Info'
@@ -12,6 +13,7 @@ export function App() {
   return (
     <Page>
       <BrowserRouter>
+        <GlobalStyle />
         <TopBar />
         <Switch>
           <Route exact path="/votes" component={Votes} />

src/components/Button.tsx

@@ -0,0 +1,44 @@
+import styled from 'styled-components'
+import { Colors } from '../constants/styles'
+
+export const Button = styled.button`
+  color: ${Colors.White};
+  border-radius: 8px;
+`
+
+export const ButtonPrimary = styled(Button)`
+  background: ${Colors.Violet};
+  font-weight: bold;
+  font-size: 15px;
+  line-height: 24px;
+
+  &:not(:disabled):hover {
+    background: ${Colors.VioletDark};
+  }
+
+  &:not(:disabled):active,
+  &:not(:disabled):focus {
+    background: ${Colors.VioletLight};
+  }
+
+  &:disabled {
+    background: ${Colors.GrayDisabledDark};
+  }
+`
+export const ButtonSecondary = styled(Button)`
+  background: ${Colors.VioletSecondary};
+  line-height: 24px;
+
+  &:not(:disabled):hover {
+    background: ${Colors.VioletSecondaryDark};
+  }
+
+  &:not(:disabled):active,
+  &:not(:disabled):focus {
+    background: ${Colors.VioletSecondaryLight};
+  }
+
+  &:disabled {
+    background: ${Colors.GrayDisabledLight};
+  }
+`

src/components/PageInfo.tsx

@@ -0,0 +1,60 @@
+import React from 'react'
+import styled from 'styled-components'
+import { useEthers } from '@usedapp/core'
+import { ButtonPrimary } from '../components/Button'
+
+interface PageInfoProps {
+  heading: string
+  text: string
+}
+
+export const PageInfo = ({ heading, text }: PageInfoProps) => (
+  <InfoBlock>
+    <InfoHeading>{heading}</InfoHeading>
+    <InfoText>{text}</InfoText>
+  </InfoBlock>
+)
+
+export function InfoBtn() {
+  const { account, activateBrowserWallet } = useEthers()
+
+  return account ? (
+    <InfoButton onClick={() => activateBrowserWallet()}>Connect to Vote</InfoButton>
+  ) : (
+    <InfoButton onClick={() => activateBrowserWallet()}>Propose community</InfoButton>
+  )
+}
+
+export const InfoWrap = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 693px;
+  padding: 48px 0;
+  margin: 0 auto;
+`
+
+const InfoBlock = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`
+
+const InfoHeading = styled.h1`
+  font-weight: bold;
+  font-size: 28px;
+  line-height: 38px;
+  letter-spacing: -0.4px;
+  margin-bottom: 8px;
+`
+
+const InfoText = styled.p`
+  font-size: 22px;
+  text-align: center;
+  line-height: 32px;
+  margin-bottom: 24px;
+`
+const InfoButton = styled(ButtonPrimary)`
+  padding: 10px 0;
+  width: 343px;
+`

src/components/TopBar.tsx

@@ -1,33 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-import { NavLink } from 'react-router-dom'
-import { useEthers, shortenAddress } from '@usedapp/core'
-
-export function TopBar() {
-  const { account, activateBrowserWallet } = useEthers()
-
-  return (
-    <Header>
-      <StyledNavLink activeClassName="active-page" to="/votes">
-        Votes
-      </StyledNavLink>
-      <StyledNavLink activeClassName="active-page" to="/directory">
-        Directory
-      </StyledNavLink>
-      <StyledNavLink activeClassName="active-page" to="/info">
-        Info
-      </StyledNavLink>
-      {account ? (
-        <div>{shortenAddress(account)}</div>
-      ) : (
-        <button onClick={() => activateBrowserWallet()}>Activate browser wallet</button>
-      )}
-    </Header>
-  )
-}
-
-const Header = styled.header`
-  backgorund-color: grey;
-`
-
-const StyledNavLink = styled(NavLink)``

src/components/top/Logo.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import styled from 'styled-components'
+
+export function Logo() {
+  return (
+    <LogoBox>
+      <LogoIcon>🗳️</LogoIcon>
+      <LogoText>Community Directory Curation DApp</LogoText>
+    </LogoBox>
+  )
+}
+
+const LogoBox = styled.div`
+  display: flex;
+  align-items: center;
+  width: 236px;
+`
+const LogoIcon = styled.span`
+  font-size: 48px;
+  line-height: 38px;
+`
+
+const LogoText = styled.p`
+  font-weight: 600;
+  font-size: 17px;
+  line-height: 18px;
+  margin-left: 8px;
+`

src/components/top/TopBar.tsx

@@ -0,0 +1,124 @@
+import React from 'react'
+import styled from 'styled-components'
+import { NavLink } from 'react-router-dom'
+import { useEthers, shortenAddress } from '@usedapp/core'
+import { Logo } from './Logo'
+import { ButtonPrimary } from '../../components/Button'
+import { Colors } from '../../constants/styles'
+import { Animation } from '../../constants/animation'
+
+export function TopBar() {
+  const { account, activateBrowserWallet } = useEthers()
+
+  return (
+    <Header>
+      <Logo />
+      <MenuContent>
+        <nav>
+          <NavLinks>
+            <NavItem>
+              <StyledNavLink activeClassName="active-page" to="/votes">
+                Votes
+              </StyledNavLink>
+            </NavItem>
+            <NavItem>
+              <StyledNavLink activeClassName="active-page" to="/directory">
+                Directory
+              </StyledNavLink>
+            </NavItem>
+            <NavItem>
+              <StyledNavLink activeClassName="active-page" to="/info">
+                Info
+              </StyledNavLink>
+            </NavItem>
+          </NavLinks>
+        </nav>
+
+        {account ? (
+          <Account>{shortenAddress(account)}</Account>
+        ) : (
+          <ButtonConnect onClick={() => activateBrowserWallet()}>Connect</ButtonConnect>
+        )}
+      </MenuContent>
+    </Header>
+  )
+}
+
+const Header = styled.header`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 96px;
+  padding: 0 40px;
+  background-color: ${Colors.GrayLight};
+  border-bottom: 1px solid rgba(189, 93, 226, 0.15);
+`
+
+const MenuContent = styled.div`
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+  justify-content: space-between;
+  flex: 1;
+  max-width: 780px;
+  background-color: ${Colors.GrayLight};
+`
+
+const NavLinks = styled.ul`
+  display: flex;
+  align-self: stre
+  height:100%;
+  color: ${Colors.Black};
+`
+
+const NavItem = styled.li`
+  width: 124px;
+  text-align: center;
+
+  & + & {
+    margin-left: 64px;
+  }
+`
+
+const StyledNavLink = styled(NavLink)`
+  position: relative;
+  color: ${Colors.Black};
+  font-size: 17px;
+  line-height: 18px;
+  padding: 39px 0 37px;
+
+  &:hover {
+    color: ${Colors.Violet};
+  }
+
+  &:active {
+    color: ${Colors.Black};
+  }
+
+  &.active-page::after {
+    content: '';
+    width: 124px;
+    height: 2px;
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: ${Colors.Violet};
+    bacground-position: center;
+    border-radius: 1px;
+    animation: ${Animation} 0.25s linear;
+  }
+`
+const ButtonConnect = styled(ButtonPrimary)`
+  padding: 10px 27px;
+`
+const Account = styled.button`
+  font-weight: 500;
+  font-size: 13px;
+  line-height: 22px;
+  color: ${Colors.Black};
+  padding: 11px 12px 11px 17px;
+  background: ${Colors.White};
+  border: 1px solid ${Colors.GrayBorder};
+  border-radius: 21px;
+`

src/constants/animation.ts

@@ -0,0 +1,8 @@
+import { keyframes } from 'styled-components'
+
+export function Animation() {
+  return keyframes`
+    0% { transform: translateX(-50%) scaleX(0); }
+    100% { transform: translateX(-50%) scaleX(100%); }
+`
+}

src/constants/styles.ts

@@ -0,0 +1,22 @@
+export const Colors = {
+  White: '#FFFFFF',
+  Black: '#000000',
+  Violet: '#BD5DE2',
+  VioletDark: '#8C21BA',
+  VioletLight: '#D37EF4',
+  VioletSecondary: '#FAEDFF',
+  VioletSecondaryDark: '#F6DBFF',
+  VioletSecondaryLight: '#FDF7FF',
+  BlueLink: '#4360DF',
+  BlueBar: '#D6E0FF',
+  Orange: '#FFE6CF',
+  GrayOverlay: '#E5E5E5',
+  GrayDisabledDark: '#888888',
+  GrayDisabledLight: '#F3F3F3',
+  GreyText: '#939BA1',
+  GrayLight: '#FBFCFE',
+  GrayBorder: '#EEF2F5',
+  ShadowCard: '0px 2px 12px rgba(0, 0, 0, 0.15)',
+}
+
+export const Font = 'Inter, sans-serif'

src/index.html

@@ -1,14 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Status</title>
-	<link rel="preconnect" href="https://fonts.gstatic.com">
-	<link href="https://fonts.googleapis.com/css2?family=Inter&family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
-</head>
-<body>
-  <div id="root"></div>
-  <noscript>You need to enable JavaScript to run this app.</noscript>
-</body>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Status</title>
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+  </body>
 </html>

src/pages/Directory.tsx

@@ -1,5 +1,15 @@
 import React from 'react'
+import { InfoBtn, InfoWrap, PageInfo } from '../components/PageInfo'
 
 export function Directory() {
-  return <div>Directory</div>
+  return (
+    <InfoWrap>
+      <PageInfo
+        heading="Current directory"
+        text="Vote on your favourite communities being included in 
+      Weekly Featured Communities"
+      />
+      <InfoBtn />
+    </InfoWrap>
+  )
 }

src/pages/Info.tsx

@@ -1,5 +1,13 @@
 import React from 'react'
+import { InfoWrap, PageInfo } from '../components/PageInfo'
 
 export function Info() {
-  return <div>Info</div>
+  return (
+    <InfoWrap>
+      <PageInfo
+        heading="What is this DApp about?"
+        text="This DApp allows SNT holders determine which communities should be included in the Status Communities directory"
+      />
+    </InfoWrap>
+  )
 }

src/pages/Votes.tsx

@@ -1,5 +1,14 @@
 import React from 'react'
+import { InfoWrap, InfoBtn, PageInfo } from '../components/PageInfo'
 
 export function Votes() {
-  return <div>Votes</div>
+  return (
+    <InfoWrap>
+      <PageInfo
+        heading="Ongoing Votes"
+        text="Help curate the Status Communities directory by voting which communities should be included"
+      />
+      <InfoBtn />
+    </InfoWrap>
+  )
 }

src/providers/GlobalStyle.tsx

@@ -0,0 +1,71 @@
+import { createGlobalStyle } from 'styled-components'
+import { Colors, Font } from '../constants/styles'
+
+export const GlobalStyle = createGlobalStyle`
+  * {
+    box-sizing: border-box;
+     }
+  body, html {
+    margin: 0;
+    width: 100%;
+    height: 100%;
+    background-color: ${Colors.White};
+    color: ${Colors.Black};
+    font-family: ${Font};
+    font-weight: normal;
+    font-size: 15px;
+  }
+
+  html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	vertical-align: baseline;
+}
+
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+
+body {
+	line-height: 1;
+}
+
+ol, ul {
+	list-style: none;
+}
+
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+button {
+	border: none;
+	background: none;
+  cursor:pointer;
+}
+a {
+	text-decoration: none;
+}
+`