Change results layout (#30)

packages/example/src/index.tsx

@@ -36,7 +36,7 @@ export const GlobalStyle = createGlobalStyle`
   }
 
   html {
-    font-family: 'Inter', 'sans-serif';
+    font-family: Inter;
     font-style: normal;
   }
 

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

@@ -82,8 +82,8 @@ export function Poll({ poll, wakuVoting, signer }: PollProps) {
 }
 
 const VotingWrapper = styled.div`
-  width: 100%;
   margin-top: 40px;
+  margin-left: 32px;
 `
 
 const PollWrapper = styled.div`

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

@@ -64,14 +64,14 @@ const PollAnswer = styled.div`
 
 const PollAnswerWrapper = styled.div`
   display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  max-width: 65%;
 `
 const PollAnswerText = styled.div`
   display: inline-block;
-  height: 100%;
-  font-weight: 500;
-  align-items: center;
   letter-spacing: 1.5px;
-  text-transform: uppercase;
+  word-break: break-word;
 `
 
 const VoteCount = styled.div`
@@ -84,6 +84,7 @@ const CheckCircle = styled.div`
   height: 14px;
   margin-left: 8px;
   background-image: url(${checkCircle});
+  flex-shrink: 0;
 `
 
 const ResultInfoWrapper = styled.div`

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

@@ -91,10 +91,11 @@ const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  max-width: 1082px;
+  max-width: 1146px;
   position: relative;
   margin: 0 auto;
-  padding: 150px 0 50px;
+  padding: 150px 32px 50px;
+  width: 100%;
 
   @media (max-width: 600px) {
     padding: 132px 16px 32px;

packages/react-components/src/components/radioGroup/RadioButton.tsx

@@ -47,4 +47,5 @@ const TextWrapper = styled.div`
   margin-left: 16px;
   font-size: 22px;
   line-height: 24px;
+  word-break: break-word;
 `