Add react routing (#21)

packages/example/src/index.tsx

@@ -1,7 +1,10 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { WakuPolling } from '@status-waku-voting/react-components'
+
 import styled, { createGlobalStyle } from 'styled-components'
+import { Polling } from './pages/Poling'
+import { BrowserRouter } from 'react-router-dom'
+import { Redirect, Route, Switch } from 'react-router'
 
 export const GlobalStyle = createGlobalStyle`
   * {
@@ -22,7 +25,12 @@ const Page = styled.div`
 ReactDOM.render(
   <Page>
     <GlobalStyle />
-    <WakuPolling appName={'testApp_'} />
+    <BrowserRouter>
+      <Switch>
+        <Route exact path="/" render={() => <Redirect to="/polling" />} />
+        <Route exact path="/polling" component={Polling} />
+      </Switch>
+    </BrowserRouter>
   </Page>,
   document.getElementById('root')
 )

packages/example/src/pages/Poling.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import { WakuPolling } from '@status-waku-voting/react-components'
+
+export function Polling() {
+  return <WakuPolling appName={'testApp_'} />
+}

packages/react-components/src/WakuPolling/PollCreation.tsx

@@ -132,7 +132,7 @@ const NewPollBox = styled.div`
   box-shadow: 10px 10px 31px -2px #a3a1a1;
   border-radius: 5px;
   overflow: auto;
-  z-index: 5;
+  z-index: 8;
   width: 468px;
 `
 

packages/react-components/src/WakuPolling/PollResults.tsx

@@ -19,13 +19,17 @@ export function PollResults({ poll, selectedVote }: PollResultsProps) {
           percentage = answer.votes.mul(1000).div(poll.numberOfVotes).toNumber() / 10
         }
         return (
-          <PollAnswer key={idx}>
-            <ColorBar style={{ backgroundColor: colors.next().value ?? '', width: `${percentage}%` }} />
-            <Transparent>
-              <PollAnswerText>{answer.text}</PollAnswerText>
-              {selectedVote === idx && <CheckCircle />}
-              <VoteCount>{`${percentage}%`}</VoteCount>
-            </Transparent>
+          <PollAnswer
+            key={idx}
+            style={{
+              background: `linear-gradient(90deg, ${
+                colors.next().value ?? ''
+              } ${percentage}%, rgba(255,255,255,0) ${percentage}%)`,
+            }}
+          >
+            <PollAnswerText>{answer.text}</PollAnswerText>
+            {selectedVote === idx && <CheckCircle />}
+            <VoteCount>{`${percentage}%`}</VoteCount>
           </PollAnswer>
         )
       })}
@@ -47,23 +51,6 @@ const CheckCircle = styled.div`
   background-image: url(${checkCircle});
 `
 
-const Transparent = styled.div`
-  width: 100%;
-  height: 100%;
-  display: flex;
-  z-index: 2;
-`
-
-const ColorBar = styled.div`
-  width: 100%;
-  height: 100%;
-  border-radius: 2px;
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  z-index: 1;
-`
-
 const Wrapper = styled.div`
   margin-left: 77px;
   margin-top: 32px;
@@ -96,7 +83,6 @@ const PollAnswer = styled.div`
   display: flex;
   margin-bottom: 16px;
   height: 40px;
-  position: relative;
   font-family: 'Inter, sans-serif';
 `