From e9a609840bf9f657c182abeed5ae091d3200bcdb Mon Sep 17 00:00:00 2001
From: Szymon Szlachtowicz <38212223+Szymx95@users.noreply.github.com>
Date: Tue, 24 Aug 2021 12:10:11 +0200
Subject: [PATCH] Add top bar (#22)

---
 packages/example/src/assets/assets.d.ts       | 14 +++++
 .../example/src/assets/images/pollingIcon.svg | 16 ++++++
 packages/example/src/components/TopBar.tsx    | 56 +++++++++++++++++++
 packages/example/src/index.html               |  1 +
 packages/example/src/pages/Poling.tsx         | 16 +++++-
 .../src/components/radioGroup/RadioGroup.tsx  |  1 -
 6 files changed, 101 insertions(+), 3 deletions(-)
 create mode 100644 packages/example/src/assets/assets.d.ts
 create mode 100644 packages/example/src/assets/images/pollingIcon.svg
 create mode 100644 packages/example/src/components/TopBar.tsx

diff --git a/packages/example/src/assets/assets.d.ts b/packages/example/src/assets/assets.d.ts
new file mode 100644
index 0000000..4ce4da1
--- /dev/null
+++ b/packages/example/src/assets/assets.d.ts
@@ -0,0 +1,14 @@
+declare module '*.svg' {
+  const url: string
+  export default url
+}
+
+declare module '*.jpg' {
+  const url: string
+  export default url
+}
+
+declare module '*.png' {
+  const url: string
+  export default url
+}
diff --git a/packages/example/src/assets/images/pollingIcon.svg b/packages/example/src/assets/images/pollingIcon.svg
new file mode 100644
index 0000000..ac67eb5
--- /dev/null
+++ b/packages/example/src/assets/images/pollingIcon.svg
@@ -0,0 +1,16 @@
+<svg width="32" height="30" viewBox="0 0 32 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.75 1.875C1.68756 1.875 0 3.56244 0 5.625C0 7.68744 1.68756 9.375 3.75 9.375C5.81244 9.375 7.5 7.68744 7.5 5.625C7.5 3.56244 5.81244 1.875 3.75 1.875Z" fill="#FF6C6C"/>
+<path d="M0 5.625H7.5C7.5 7.68744 5.81244 9.375 3.75 9.375C1.68756 9.375 0 7.68744 0 5.625Z" fill="#E63950"/>
+<path d="M10.3125 1.875H32V9.375H10.3125V1.875Z" fill="#FF6C6C"/>
+<path d="M10.3125 5.625H32V9.375H10.3125V5.625Z" fill="#E63950"/>
+<path d="M10.3125 11.25H20.75V18.75H10.3125V11.25Z" fill="#97DE3D"/>
+<path d="M3.75 11.25C1.68756 11.25 0 12.9374 0 15C0 17.0624 1.68756 18.75 3.75 18.75C5.81244 18.75 7.5 17.0624 7.5 15C7.5 12.9374 5.81244 11.25 3.75 11.25Z" fill="#97DE3D"/>
+<path d="M0 15H7.5C7.5 17.0624 5.81244 18.75 3.75 18.75C1.68756 18.75 0 17.0624 0 15Z" fill="#59C36A"/>
+<path d="M10.3125 15H20.75V18.75H10.3125V15Z" fill="#59C36A"/>
+<path d="M10.3125 20.625H28.25V28.125H10.3125V20.625Z" fill="#FED843"/>
+<path d="M3.75 20.625C1.68756 20.625 0 22.3124 0 24.375C0 26.4374 1.68756 28.125 3.75 28.125C5.81244 28.125 7.5 26.4374 7.5 24.375C7.5 22.3124 5.81244 20.625 3.75 20.625Z" fill="#FED843"/>
+<path d="M0 24.375H7.5C7.5 26.4374 5.81244 28.125 3.75 28.125C1.68756 28.125 0 26.4374 0 24.375Z" fill="#FABE2C"/>
+<path d="M10.3125 24.375H28.25V28.125H10.3125V24.375Z" fill="#FABE2C"/>
+<path d="M9.375 0H11.25V30H9.375V0Z" fill="#474F54"/>
+<path d="M9.375 15H11.25V30H9.375V15Z" fill="#32393F"/>
+</svg>
diff --git a/packages/example/src/components/TopBar.tsx b/packages/example/src/components/TopBar.tsx
new file mode 100644
index 0000000..efc8039
--- /dev/null
+++ b/packages/example/src/components/TopBar.tsx
@@ -0,0 +1,56 @@
+import React from 'react'
+import styled from 'styled-components'
+
+type TopBarProps = {
+  logo: string
+  title: string
+}
+
+export function TopBar({ logo, title }: TopBarProps) {
+  return (
+    <Wrapper>
+      <Logo style={{ backgroundImage: `url(${logo})` }} />
+      <TitleWrapper>
+        {title.split(' ').map((text) => (
+          <div>{text}</div>
+        ))}
+      </TitleWrapper>
+      <Button>Connect</Button>
+    </Wrapper>
+  )
+}
+
+const TitleWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin: auto;
+  margin-left: 8px;
+  font-family: Inter;
+  font-style: italic;
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 17px;
+`
+
+const Button = styled.button`
+  border-radius: 8px;
+  border: 0px;
+  margin: auto;
+  margin-right: 40px;
+  height: 44px;
+  width: 117px;
+`
+
+const Logo = styled.div`
+  height: 30px;
+  width: 32px;
+  margin-left: 40px;
+  margin-top: auto;
+  margin-bottom: auto;
+`
+
+const Wrapper = styled.div`
+  height: 96px;
+  background: #fbfcfe;
+  display: flex;
+`
diff --git a/packages/example/src/index.html b/packages/example/src/index.html
index 74087fc..f58c32f 100644
--- a/packages/example/src/index.html
+++ b/packages/example/src/index.html
@@ -5,6 +5,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1" />
     <link rel="icon" type="image/svg+xml" sizes="any" href="/favicon.ico" />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
     <title>waku voting example</title>
   </head>
   <body>
diff --git a/packages/example/src/pages/Poling.tsx b/packages/example/src/pages/Poling.tsx
index 3272da3..d71b499 100644
--- a/packages/example/src/pages/Poling.tsx
+++ b/packages/example/src/pages/Poling.tsx
@@ -1,6 +1,18 @@
 import React from 'react'
 import { WakuPolling } from '@status-waku-voting/react-components'
-
+import styled from 'styled-components'
+import { TopBar } from '../components/TopBar'
+import pollingIcon from '../assets/images/pollingIcon.svg'
 export function Polling() {
-  return <WakuPolling appName={'testApp_'} />
+  return (
+    <Wrapper>
+      <TopBar logo={pollingIcon} title={'Polling Dapp'} />
+      <WakuPolling appName={'testApp_'} />
+    </Wrapper>
+  )
 }
+
+const Wrapper = styled.div`
+  height: 100%;
+  width: 100%;
+`
diff --git a/packages/react-components/src/components/radioGroup/RadioGroup.tsx b/packages/react-components/src/components/radioGroup/RadioGroup.tsx
index 42ef742..5ccd545 100644
--- a/packages/react-components/src/components/radioGroup/RadioGroup.tsx
+++ b/packages/react-components/src/components/radioGroup/RadioGroup.tsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import styled from 'styled-components'
 import { RadioButton } from './RadioButton'
 
 type RadioGroupProps = {