Add styles & disconnect (#25)

2021-08-30 09:29:46 +02:00 · 2021-08-30 09:29:46 +02:00 · b8514f972a
parent e52d3f9119
commit b8514f972a
12 changed files with 348 additions and 154 deletions
--- a/packages/example/src/components/TopBar.tsx
+++ b/packages/example/src/components/TopBar.tsx
@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import styled from 'styled-components'
 import { useEthers, shortenAddress } from '@usedapp/core'
 type TopBarProps = {
@ -7,24 +7,37 @@ type TopBarProps = {
 }

 export function TopBar({ logo, title }: TopBarProps) {
-  const { activateBrowserWallet, account } = useEthers()
+  const { activateBrowserWallet, deactivate, account } = useEthers()
+  const [isOpened, setIsOpened] = useState(false)

  return (
    <Wrapper>
-      <Logo style={{ backgroundImage: `url(${logo})` }} />
-      <TitleWrapper>
-        {title.split(' ').map((text) => (
-          <div>{text}</div>
-        ))}
-      </TitleWrapper>
-      {account ? (
-        <AccountDiv>
-          <GreenDot />
-          <>{shortenAddress(account)}</>
-        </AccountDiv>
-      ) : (
-        <Button onClick={() => activateBrowserWallet()}>Connect</Button>
-      )}
+      <ContentWrapper>
+        <Logo style={{ backgroundImage: `url(${logo})` }} />
+        <TitleWrapper>
+          {title.split(' ').map((text) => (
+            <div>{text}</div>
+          ))}
+        </TitleWrapper>
+        {account ? (
+          <AccountWrap>
+            <Account
+              onClick={(e) => {
+                e.stopPropagation()
+                setIsOpened(!isOpened)
+              }}
+            >
+              <GreenDot />
+              <>{shortenAddress(account)}</>
+            </Account>
+            <ButtonDisconnect className={isOpened ? 'opened' : undefined} onClick={() => deactivate()}>
+              Disconnect
+            </ButtonDisconnect>
+          </AccountWrap>
+        ) : (
+          <Button onClick={() => activateBrowserWallet()}>Connect</Button>
+        )}
+      </ContentWrapper>
    </Wrapper>
  )
 }
@ -36,25 +49,26 @@ const GreenDot = styled.div`
  background: #4ebc60;
  margin-right: 5px;
 `
+const AccountWrap = styled.div`
+  position: relative;
+`

-const AccountDiv = styled.div`
-  width: 130px;
-  height: 44px;
+const Account = styled.button`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
  background: #ffffff;
  border: 1px solid #eef2f5;
  box-sizing: border-box;
  border-radius: 21px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 0px 12px;
-  margin: auto;
-  margin-right: 40px;
-  font-family: Inter;
-  font-style: normal;
+  padding: 11px 12px 11px 17px;
  font-weight: 500;
  font-size: 13px;
  line-height: 22px;
+
+  &:hover {
+    border: 1px solid #ffb571;
+  }
 `

 const TitleWrapper = styled.div`
@ -70,24 +84,97 @@ const TitleWrapper = styled.div`
 `

 const Button = styled.button`
+  padding: 10px 28px;
+  background-color: #ffb571;
+  color: #ffffff;
+  font-weight: bold;
+  font-size: 15px;
+  line-height: 24px;
  border-radius: 8px;
  border: 0px;
-  margin: auto;
-  margin-right: 40px;
-  height: 44px;
-  width: 117px;
+  outline: none;
+
+  &:not(:disabled):hover {
+    background: #a53607;
+  }
+
+  &:not(:disabled):active {
+    background: #f4b77e;
+  }
+
+  &:disabled {
+    background: #888888;
+    filter: grayscale(1);
+  }
+
+  @media (max-width: 600px) {
+    padding: 3px 28px;
+  }
+`
+
+const ButtonDisconnect = styled.button`
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  font-weight: 500;
+  font-size: 15px;
+  line-height: 22px;
+  text-align: center;
+  padding: 15px 32px;
+  color: #a53607;
+  background: #ffffff;
+  border: 1px solid #eef2f5;
+  border-radius: 16px 4px 16px 16px;
+  box-shadow: 0px 2px 16px rgba(0, 9, 26, 0.12);
+  transition: all 0.3s;
+  outline: none;
+
+  &:hover {
+    background: #a53607;
+    color: #ffffff;
+  }
+
+  &:active {
+    background: #f4b77e;
+    color: #ffffff;
+  }
+
+  &.opened {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+    z-index: 10;
+  }
 `

 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;
+
+  @media (max-width: 600px) {
+    height: 64px;
+  }
+`
+const ContentWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 32px 40px;
+  max-width: 1440px;
+  margin: 0 auto;
+  width: 100%;
+
+  @media (max-width: 600px) {
+    padding: 16px;
+    padding-left: 24px;
+  }
 `
--- a/packages/example/src/index.html
+++ b/packages/example/src/index.html
@ -4,9 +4,9 @@
    <link rel="icon" href="/favicon.ico" />
    <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 rel="icon" type="image/svg+xml" sizes="any" href="../src/assets/images/pollingIcon.svg" />
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
-    <title>waku voting example</title>
+    <title>Polling Dapp</title>
  </head>
  <body>
    <div id="root"></div>
--- a/packages/example/src/index.tsx
+++ b/packages/example/src/index.tsx
@ -27,13 +27,23 @@ const config = {
 export const GlobalStyle = createGlobalStyle`
  * {
    box-sizing: border-box;
-     }
+  }

  body, html, #root {
    margin: 0;
    width: 100%;
    height: 100%;
  }
+
+  html {
+    font-family: 'Inter', 'sans-serif';
+    font-style: normal;
+  }
+
+  a, 
+  button {
+    cursor: pointer;
+  }
 `

 const Page = styled.div`
--- a/packages/react-components/src/WakuPolling/Poll.tsx
+++ b/packages/react-components/src/WakuPolling/Poll.tsx
@ -82,29 +82,33 @@ export function Poll({ poll, wakuVoting, signer }: PollProps) {
 }

 const VotingWrapper = styled.div`
-  margin-left: 46px;
-  margin-top: 38px;
+  width: 100%;
+  margin-top: 40px;
 `

 const PollWrapper = styled.div`
  display: flex;
-  width: 442px;
+  width: 344px;
  flex-direction: column;
-  box-shadow: 0px 2px 12px 0px #000000;
-  border-radius: 5px;
+  align-items: center;
+  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.15);
+  border-radius: 6px;
  background-color: #fbfbfe;
  margin-bottom: 24px;
+  padding: 32px;
 `

 const PollTitle = styled.div`
-  margin-top: 32px;
  width: 100%;
  text-align: center;
  font-weight: bold;
  font-size: 22px;
+  line-height: 24px;
 `

 const PollAnswersWrapper = styled.div`
  display: flex;
  flex-direction: column;
+  align-self: flex-start;
+  width: 100%;
 `
--- a/packages/react-components/src/WakuPolling/PollCreation.tsx
+++ b/packages/react-components/src/WakuPolling/PollCreation.tsx
@ -6,6 +6,7 @@ import { PollType } from '@status-waku-voting/core/dist/esm/src/types/PollType'
 import WakuVoting from '@status-waku-voting/core'
 import { Input } from '../components/Input'
 import addIcon from '../assets/svg/addIcon.svg'
+import closeButton from '../assets/svg/close.svg'
 import { SmallButton } from '../components/misc/Buttons'

 function getLocaleIsoTime(dateTime: Date) {
@ -29,12 +30,12 @@ export function PollCreation({ signer, wakuVoting, setShowPollCreation }: PollCr

  return (
    <NewPollBoxWrapper onClick={(e) => e.stopPropagation()}>
-      <BoxWrapper>
-        <NewPollBox>
-          <NewPollBoxTitle>
-            Create a poll
-            <CloseNewPollBoxButton onClick={() => setShowPollCreation(false)}>X</CloseNewPollBoxButton>
-          </NewPollBoxTitle>
+      <NewPollBox>
+        <NewPollBoxTitle>
+          Create a poll
+          <CloseNewPollBoxButton onClick={() => setShowPollCreation(false)} />
+        </NewPollBoxTitle>
+        <PollForm>
          <Input
            label={'Question or title of the poll'}
            placeholder={'E.g. What is your favourite color?'}
@ -58,12 +59,17 @@ export function PollCreation({ signer, wakuVoting, setShowPollCreation }: PollCr
              />
            ))}
          </AnswersWraper>
-          <NewOptionButton onClick={() => setAnswers((answers) => [...answers, ''])}>
+          <NewOptionButton
+            onClick={(e) => {
+              e.preventDefault()
+              setAnswers((answers) => [...answers, ''])
+            }}
+          >
            Add another option
-            <AddIcon />
          </NewOptionButton>
          <SmallButton
-            onClick={async () => {
+            onClick={async (e) => {
+              e.preventDefault()
              await wakuVoting?.createTimedPoll(
                signer,
                question,
@ -75,76 +81,116 @@ export function PollCreation({ signer, wakuVoting, setShowPollCreation }: PollCr
              setShowPollCreation(false)
            }}
          >
-            Send
+            Create a poll
          </SmallButton>
-        </NewPollBox>
-      </BoxWrapper>
+        </PollForm>
+      </NewPollBox>
    </NewPollBoxWrapper>
  )
 }

-const AddIcon = styled.div`
-  width: 20px;
-  height: 20px;
-  background-image: url(${addIcon});
-  margin-left: 10px;
-`
-
-const CloseNewPollBoxButton = styled.div`
-  width: 5px;
-  margin-right: 5px;
-  margin-left: auto;
-  font-weight: bold;
-  color: red;
+const CloseNewPollBoxButton = styled.button`
+  width: 24px;
+  height: 24px;
+  background-image: url(${closeButton});
+  background-color: transparent;
+  border: none;
 `

 const NewPollBoxTitle = styled.div`
  display: flex;
+  justify-content: space-between;
  font-style: normal;
  font-weight: bold;
  font-size: 17px;
  line-height: 24px;
 `

-const NewOptionButton = styled.div`
-  margin-top: 33px;
-  margin-bottom: 33px;
-  margin-left: auto;
-  margin-right: auto;
+const NewOptionButton = styled.button`
  display: flex;
-  font-family: 'Inter, sans-serif';
-  font-style: normal;
-  font-weight: normal;
+  position: relative;
  font-size: 15px;
  line-height: 22px;
+  margin: 32px 0;
+  padding-right: 30px;
+  color: #a53607;
+  background-color: transparent;
+  border: none;
+
+  &:hover {
+    color: #f4b77e;
+  }
+
+  &:active {
+    color: #a53607;
+  }
+
+  &:after {
+    content: '';
+    display: inline-block;
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    height: 20px;
+    width: 20px;
+    background-color: #a53607;
+    -webkit-mask-size: cover;
+    mask-size: cover;
+    background-image: none;
+    -webkit-mask-image: url(${addIcon});
+    mask-image: ${addIcon};
+  }
+
+  &:hover::after {
+    background-color: #f4b77e;
+  }
 `

 const AnswersWraper = styled.div`
-  margin-left: 64px;
-  margin-right: 64px;
+  max-width: 340px;
+  width: 100%;
 `

 const NewPollBox = styled.div`
  display: flex;
  flex-direction: column;
+  justify-content: space-between;
  background-color: white;
-  padding: 20px;
+  padding: 24px 24px 32px;
  box-shadow: 10px 10px 31px -2px #a3a1a1;
  border-radius: 5px;
  overflow: auto;
  z-index: 8;
  width: 468px;
-`

-const BoxWrapper = styled.div`
-  position: absolute;
-  marign-bottom: 100px;
-  left: 0px;
-  top: 0px;
+  @media (max-width: 600px) {
+    padding: 16px 16px 32px;
+  }
 `

 const NewPollBoxWrapper = styled.div`
-  position: relative;
-  top: 50px;
-  left: calc(50% - 234px);
+  height: 100vh;
+  width: 100%;
+  position: fixed;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+  z-index: 9999;
+  transition: all 0.3s;
+  overflow: auto;
+
+  @media (max-width: 600px) {
+    padding: 16px;
+  }
+`
+const PollForm = styled.form`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: 15px;
+  line-height: 22px;
 `
--- a/packages/react-components/src/WakuPolling/PollList.tsx
+++ b/packages/react-components/src/WakuPolling/PollList.tsx
@ -55,7 +55,7 @@ export function PollList({ wakuVoting, signer }: PollListProps) {
 }
 const PollListWrapper = styled.div`
  display: flex;
-  margin: 10px;
+  width: 100%;
 `

 const ColumnWrapper = styled.div`
--- a/packages/react-components/src/WakuPolling/PollResults.tsx
+++ b/packages/react-components/src/WakuPolling/PollResults.tsx
@ -27,8 +27,10 @@ export function PollResults({ poll, selectedVote }: PollResultsProps) {
              } ${percentage}%, rgba(255,255,255,0) ${percentage}%)`,
            }}
          >
-            <PollAnswerText>{answer.text}</PollAnswerText>
-            {selectedVote === idx && <CheckCircle />}
+            <PollAnswerWrapper>
+              <PollAnswerText>{answer.text}</PollAnswerText>
+              {selectedVote === idx && <CheckCircle />}
+            </PollAnswerWrapper>
            <VoteCount>{`${percentage}%`}</VoteCount>
          </PollAnswer>
        )
@ -42,59 +44,51 @@ export function PollResults({ poll, selectedVote }: PollResultsProps) {
  )
 }

-const CheckCircle = styled.div`
-  width: 14px;
-  height: 14px;
-  margin-top: auto;
-  margin-bottom: auto;
-  margin-left: 8px;
-  background-image: url(${checkCircle});
-`
-
 const Wrapper = styled.div`
-  margin-left: 77px;
  margin-top: 32px;
-  width: 288px;
-`
-
-const ResultInfoWrapper = styled.div`
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: 32px;
-  margin-top: 32px;
-  font-style: normal;
-  font-weight: normal;
-  font-size: 15px;
-  line-height: 22px;
-  text-align: center;
-`
-
-const VoteCount = styled.div`
-  margin-left: auto;
-  margin-top: auto;
-  margin-bottom: auto;
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 16px;
-  font-family: 'Inter, sans-serif';
 `

 const PollAnswer = styled.div`
  display: flex;
+  justify-content: space-between;
+  align-items: center;
  margin-bottom: 16px;
-  height: 40px;
-  font-family: 'Inter, sans-serif';
-`
-
-const PollAnswerText = styled.div`
-  height: 100%;
-  margin-top: 12px;
-  margin-bottom: 12px;
-  margin-left: 8px;
-  font-weight: 500;
+  padding: 8px 0 8px 8px;
  font-size: 16px;
  line-height: 16px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+`
+
+const PollAnswerWrapper = styled.div`
+  display: flex;
+`
+const PollAnswerText = styled.div`
+  display: inline-block;
+  height: 100%;
+  font-weight: 500;
  align-items: center;
  letter-spacing: 1.5px;
  text-transform: uppercase;
 `
+
+const VoteCount = styled.div`
+  font-weight: 400;
+`
+
+const CheckCircle = styled.div`
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  margin-left: 8px;
+  background-image: url(${checkCircle});
+`
+
+const ResultInfoWrapper = styled.div`
+  margin-top: 32px;
+  font-size: 15px;
+  line-height: 22px;
+  text-align: center;
+`
--- a/packages/react-components/src/WakuPolling/index.tsx
+++ b/packages/react-components/src/WakuPolling/index.tsx
@ -35,23 +35,49 @@ function WakuPolling({ appName, signer }: WakuPollingProps) {

 const CreatePollButton = styled(Button)`
  width: 343px;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: 44px;
-  margin-top: 49px;
  background-color: #ffb571;
  color: #ffffff;
+  font-weight: bold;
+  font-size: 15px;
+  line-height: 24px;
+  padding: 10px 125.5px;
+  margin-bottom: 48px;

-  &:hover {
-    border: 1px solid #a53607;
+  &:not(:disabled):hover {
+    background: #a53607;
+  }
+
+  &:not(:disabled):active {
+    background: #f4b77e;
+  }
+
+  &:disabled {
+    background: #888888;
+    filter: grayscale(1);
+  }
+
+  @media (max-width: 425px) {
+    position: absolute;
+    bottom: 0;
+    z-index: 10;
+    margin-bottom: 16px;
+    width: calc(100% - 32px);
+    padding: 0;
  }
 `

 const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
-  overflow: auto;
+  align-items: center;
+  max-width: 1082px;
  height: 100%;
+  margin: 0 auto;
+  padding: 50px 0;
+
+  @media (max-width: 600px) {
+    padding: 32px 16px;
+  }
 `

 export default WakuPolling
--- a/packages/react-components/src/assets/svg/close.svg
+++ b/packages/react-components/src/assets/svg/close.svg
@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.4697 17.5303C16.7626 17.8232 17.2374 17.8232 17.5303 17.5303C17.8232 17.2374 17.8232 16.7626 17.5303 16.4697L13.4142 12.3536C13.219 12.1583 13.219 11.8417 13.4142 11.6464L17.5303 7.53033C17.8232 7.23744 17.8232 6.76256 17.5303 6.46967C17.2374 6.17678 16.7626 6.17678 16.4697 6.46967L12.3536 10.5858C12.1583 10.781 11.8417 10.781 11.6464 10.5858L7.53033 6.46967C7.23744 6.17678 6.76256 6.17678 6.46967 6.46967C6.17678 6.76256 6.17678 7.23744 6.46967 7.53033L10.5858 11.6464C10.781 11.8417 10.781 12.1583 10.5858 12.3536L6.46967 16.4697C6.17678 16.7626 6.17678 17.2374 6.46967 17.5303C6.76256 17.8232 7.23744 17.8232 7.53033 17.5303L11.6464 13.4142C11.8417 13.219 12.1583 13.219 12.3536 13.4142L16.4697 17.5303Z" fill="#A53607"/>
+</svg>
--- a/packages/react-components/src/components/Input.tsx
+++ b/packages/react-components/src/components/Input.tsx
@ -22,15 +22,25 @@ const StyledInput = styled.input`
  border: 0px;
  height: 44px;
  padding-left: 20px;
-  font-weight: 400px;
  font-size: 15px;
-  font-family: 'Inter, sans-serif';
+  border: 1px solid #eef2f5;
+  outline: none;
+
+  &::placeholder {
+    font-size: 15px;
+    line-height: 22px;
+  }
+
+  &:active,
+  &:focus {
+    border: 1px solid #ffb571;
+    caret-color: #ffb571;
+  }
 `

 const LabelWrapper = styled.div`
-  font-weight: 400px;
  font-size: 15px;
-  font-family: 'Inter, sans-serif';
+  line-height: 22px;
  margin-bottom: 10px;
 `

@ -38,4 +48,5 @@ const InputWrapper = styled.div`
  display: flex;
  flex-direction: column;
  margin-top: 32px;
+  width: 100%;
 `
--- a/packages/react-components/src/components/misc/Buttons.tsx
+++ b/packages/react-components/src/components/misc/Buttons.tsx
@ -11,11 +11,21 @@ export const SmallButton = styled(Button)`
  width: 187px;
  background-color: #fff7ed;
  color: #a53607;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: 32px;
+  font-weight: 500;
+  font-size: 15px;
+  line-height: 22px;
+  transition: all 0.3s;

-  &:hover {
-    border: 1px solid #a53607;
+  &:not(:disabled):hover {
+    background: #ffe4db;
+  }
+
+  &:not(:disabled):active {
+    background: #fffcf7;
+  }
+
+  &:disabled {
+    background: #f3f3f3;
+    color: #939ba1;
  }
 `
--- a/packages/react-components/src/components/radioGroup/RadioButton.tsx
+++ b/packages/react-components/src/components/radioGroup/RadioButton.tsx
@ -28,20 +28,23 @@ const Circle = styled.div`
  border-radius: 50%;
  width: 24px;
  height: 24px;
+  box-shadow: 0px 1px 2px rgba(31, 41, 55, 0.08);
+  flex-shrink: 0;

  &.icon {
-    border: 1px solid rgba(255, 255, 255, 1);
    background-image: url(${checkIcon});
    background-size: cover;
+    border: 1px solid #ffb571;
  }

  &:hover {
-    border: 1px solid #a53607;
+    border: 1px solid #ffb571;
+    border-radius: 50%;
  }
 `

 const TextWrapper = styled.div`
-  margin-left: 20px;
-  width: 300px;
+  margin-left: 16px;
  font-size: 22px;
+  line-height: 24px;
 `