Add topbar header (#48)

packages/polling-page/src/components/WakuPolling.tsx

@@ -5,14 +5,16 @@ import styled from 'styled-components'
 import { PollList, PollCreation } from '@status-waku-voting/polling-components'
 import { JsonRpcSigner } from '@ethersproject/providers'
 import { useWakuPolling } from '@status-waku-voting/polling-hooks'
-import { Modal, Networks, Button } from '@status-waku-voting/react-components'
+import { Modal, Networks, CreateButton } from '@status-waku-voting/react-components'
+import { Theme } from '@status-waku-voting/react-components/dist/esm/src/style/themes'
 
 type WakuPollingProps = {
   appName: string
   signer: JsonRpcSigner | undefined
+  theme: Theme
 }
 
-export function WakuPolling({ appName, signer }: WakuPollingProps) {
+export function WakuPolling({ appName, signer, theme }: WakuPollingProps) {
   const { activateBrowserWallet, account } = useEthers()
   const [showPollCreation, setShowPollCreation] = useState(false)
   const [selectConnect, setSelectConnect] = useState(false)
@@ -23,11 +25,12 @@ export function WakuPolling({ appName, signer }: WakuPollingProps) {
         <PollCreation signer={signer} wakuPolling={wakuPolling} setShowPollCreation={setShowPollCreation} />
       )}
       {account ? (
-        <CreatePollButton disabled={!signer} onClick={() => setShowPollCreation(true)}>
+        <CreateButton theme={theme} disabled={!signer} onClick={() => setShowPollCreation(true)}>
           Create a poll
-        </CreatePollButton>
+        </CreateButton>
       ) : (
-        <CreatePollButton
+        <CreateButton
+          theme={theme}
           onClick={() => {
             if ((window as any).ethereum) {
               activateBrowserWallet()
@@ -35,7 +38,7 @@ export function WakuPolling({ appName, signer }: WakuPollingProps) {
           }}
         >
           Connect to vote
-        </CreatePollButton>
+        </CreateButton>
       )}
       {selectConnect && (
         <Modal heading="Connect" setShowModal={setSelectConnect}>
@@ -48,30 +51,6 @@ export function WakuPolling({ appName, signer }: WakuPollingProps) {
   )
 }
 
-const CreatePollButton = styled(Button)`
-  width: 343px;
-  background-color: #ffb571;
-  color: #ffffff;
-  font-weight: bold;
-  font-size: 15px;
-  line-height: 24px;
-  margin-bottom: 48px;
-  &:not(:disabled):hover {
-    background: #a53607;
-  }
-  &:not(:disabled):active {
-    background: #f4b77e;
-  }
-  @media (max-width: 425px) {
-    position: fixed;
-    bottom: 0;
-    z-index: 10;
-    margin-bottom: 16px;
-    width: calc(100% - 32px);
-    padding: 0;
-  }
-`
-
 const Wrapper = styled.div`
   display: flex;
   flex-direction: column;

packages/polling-page/src/index.tsx

@@ -42,7 +42,7 @@ export function Polling() {
         account={account}
         deactivate={deactivate}
       />
-      <WakuPolling appName={'testApp_'} signer={signer} />
+      <WakuPolling theme={orangeTheme} appName={'testApp_'} signer={signer} />
     </Wrapper>
   )
 }

packages/proposal-components/src/components/Proposal.tsx

@@ -1,5 +1,31 @@
 import React from 'react'
+import styled from 'styled-components'
+import { ProposalHeader } from './ProposalHeader'
+import { blueTheme } from '@status-waku-voting/react-components/dist/esm/src/style/themes'
 
 export function Proposal() {
-  return <div>Proposal</div>
+  return (
+    <ProposalWrapper>
+      <ProposalHeader theme={blueTheme} />
+    </ProposalWrapper>
+  )
 }
+
+const ProposalWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 1000px;
+  position: relative;
+  margin: 0 auto;
+  padding: 150px 32px 50px;
+  width: 100%;
+
+  @media (max-width: 600px) {
+    padding: 132px 16px 32px;
+  }
+
+  @media (max-width: 425px) {
+    padding: 64px 16px 84px;
+  }
+`

packages/proposal-components/src/components/ProposalHeader.tsx

@@ -0,0 +1,94 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import { useEthers } from '@usedapp/core'
+import { Modal, Networks, CreateButton } from '@status-waku-voting/react-components'
+import { Theme } from '@status-waku-voting/react-components/dist/esm/src/style/themes'
+
+type ProposalHeaderProps = {
+  theme: Theme
+}
+
+export function ProposalHeader({ theme }: ProposalHeaderProps) {
+  const { activateBrowserWallet, account } = useEthers()
+  const [showProposeCreation, setShowProposeCreation] = useState(false)
+  const [selectConnect, setSelectConnect] = useState(false)
+
+  return (
+    <Wrapper>
+      <Header>
+        <Heading>Your voice has real power</Heading>
+        <HeaderText>
+          Take part in a decentralised governance by voting on proposals provided by community or creating your own.
+        </HeaderText>
+      </Header>
+      {account ? (
+        <CreateButton theme={theme} onClick={() => setShowProposeCreation(true)}>
+          Create proposal
+        </CreateButton>
+      ) : (
+        <CreateButton
+          theme={theme}
+          onClick={() => {
+            if ((window as any).ethereum) {
+              activateBrowserWallet()
+            } else setSelectConnect(true)
+          }}
+        >
+          Connect to vote
+        </CreateButton>
+      )}
+      {selectConnect && (
+        <Modal heading="Connect" setShowModal={setSelectConnect}>
+          <Networks />
+        </Modal>
+      )}
+    </Wrapper>
+  )
+}
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`
+const Header = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  max-width: 680px;
+
+  @media (max-width: 425px) {
+    position: fixed;
+    padding: 12px 16px 0;
+    width: 100%;
+    background: #f8faff;
+  }
+`
+
+const Heading = styled.h1`
+  font-weight: bold;
+  font-size: 28px;
+  line-height: 38px;
+  letter-spacing: -0.4px;
+  margin: 0;
+  margin-bottom: 8px;
+
+  @media (max-width: 425px) {
+    font-size: 22px;
+    line-height: 30px;
+  }
+`
+
+const HeaderText = styled.p`
+  font-size: 22px;
+  line-height: 32px;
+  margin: 0;
+  margin-bottom: 24px;
+
+  @media (max-width: 425px) {
+    font-size: 13px;
+    line-height: 18px;
+    margin-bottom: 16px;
+  }
+`

packages/react-components/src/components/TopBar.tsx

@@ -20,7 +20,7 @@ export function TopBar({ logo, title, theme, activate, deactivate, account }: To
   const [selectConnect, setSelectConnect] = useState(false)
 
   return (
-    <Wrapper>
+    <Wrapper theme={theme}>
       <ContentWrapper>
         <Logo style={{ backgroundImage: `url(${logo})` }} />
         <TitleWrapper>
@@ -95,7 +95,11 @@ const Logo = styled.div`
   width: 32px;
 `
 
-const Wrapper = styled.div`
+interface WrapperProps {
+  theme: Theme
+}
+
+const Wrapper = styled.div<WrapperProps>`
   display: flex;
   height: 96px;
   width: 100%;
@@ -106,6 +110,10 @@ const Wrapper = styled.div`
   @media (max-width: 600px) {
     height: 64px;
   }
+
+  @media (max-width: 425px) {
+    background-color: ${({ theme }) => theme.backgroundColor};
+  }
 `
 const ContentWrapper = styled.div`
   display: flex;

packages/react-components/src/components/misc/Buttons.tsx

@@ -1,5 +1,6 @@
 import styled, { css } from 'styled-components'
 import { Theme } from '../../style/themes'
+
 export const Button = styled.button`
   height: 44px;
   border-radius: 8px;
@@ -60,6 +61,35 @@ export const ConnectButton = styled(Button)<ConnectButtonProps>`
     background: ${({ theme }) => theme.activeBackgroundColor};
   }
 `
+interface CreateButtonProps {
+  theme: Theme
+}
+
+export const CreateButton = styled(Button)<CreateButtonProps>`
+  width: 343px;
+  background-color: ${({ theme }) => theme.primaryColor};
+  color: #ffffff;
+  font-weight: bold;
+  font-size: 15px;
+  line-height: 24px;
+  margin-bottom: 48px;
+
+  &:not(:disabled):hover {
+    background: ${({ theme }) => theme.secondaryColor};
+  }
+  &:not(:disabled):active {
+    background: ${({ theme }) => theme.activeBackgroundColor};
+  }
+
+  @media (max-width: 425px) {
+    position: fixed;
+    bottom: 0;
+    z-index: 10;
+    margin-bottom: 16px;
+    width: calc(100% - 32px);
+    padding: 0;
+  }
+`
 
 interface AccountProps {
   theme: Theme

packages/react-components/src/index.tsx

@@ -3,7 +3,7 @@ import { Input } from './components/Input'
 import { Networks } from './components/Networks'
 import { TopBar } from './components/TopBar'
 import { RadioGroup } from './components/radioGroup'
-import { Button, SmallButton, ConnectButton, ButtonDisconnect, Account } from './components/misc/Buttons'
+import { Button, SmallButton, ConnectButton, CreateButton, ButtonDisconnect, Account } from './components/misc/Buttons'
 import { colorRouletteGenerator } from './style/colors'
 import { GlobalStyle } from './style/GlobalStyle'
 import checkCircleIcon from './assets/svg/checkCircle.svg'
@@ -23,6 +23,7 @@ export {
   Button,
   SmallButton,
   ConnectButton,
+  CreateButton,
   ButtonDisconnect,
   Account,
   colorRouletteGenerator,

packages/react-components/src/style/themes.ts

@@ -3,6 +3,7 @@ export type Theme = {
   secondaryColor: string
   activeTextColor: string
   activeBackgroundColor: string
+  backgroundColor: string
 }
 
 export const orangeTheme: Theme = {
@@ -10,6 +11,7 @@ export const orangeTheme: Theme = {
   secondaryColor: '#a53607',
   activeTextColor: '#ffffff',
   activeBackgroundColor: '#f4b77e',
+  backgroundColor: '#fbfcfe',
 }
 
 export const blueTheme: Theme = {
@@ -17,6 +19,7 @@ export const blueTheme: Theme = {
   secondaryColor: '#0f3595',
   activeTextColor: '#7e98f4',
   activeBackgroundColor: '#7e98f4',
+  backgroundColor: '#f8faff',
 }
 
 export default { orangeTheme, blueTheme }