From e222226787d1262065dfb3a1e172533d2689f8b1 Mon Sep 17 00:00:00 2001
From: Maria Rushkova <66270386+mrushkova@users.noreply.github.com>
Date: Fri, 23 Jul 2021 14:04:11 +0200
Subject: [PATCH] Mobile UI (#151)

---
 packages/DApp/src/components/Button.tsx       |  4 +++
 packages/DApp/src/components/Card.tsx         | 14 ++++++----
 packages/DApp/src/components/Input.tsx        |  5 ++++
 packages/DApp/src/components/Rules.tsx        |  2 +-
 .../DApp/src/components/card/ProposeModal.tsx |  4 +++
 packages/DApp/src/pagesMobile/VotesMobile.tsx | 28 ++++++++++++-------
 6 files changed, 41 insertions(+), 16 deletions(-)

diff --git a/packages/DApp/src/components/Button.tsx b/packages/DApp/src/components/Button.tsx
index ee5b7da..72e24ee 100644
--- a/packages/DApp/src/components/Button.tsx
+++ b/packages/DApp/src/components/Button.tsx
@@ -31,6 +31,10 @@ export const ButtonPrimary = styled(Button)`
 export const ProposeButton = styled(ButtonPrimary)`
   padding: 10px 0;
   width: 343px;
+
+  @media (max-width: 600px) {
+    width: 100%;
+  }
 `
 
 export const ButtonSecondary = styled(Button)`
diff --git a/packages/DApp/src/components/Card.tsx b/packages/DApp/src/components/Card.tsx
index 9747b7c..6074a4f 100644
--- a/packages/DApp/src/components/Card.tsx
+++ b/packages/DApp/src/components/Card.tsx
@@ -9,13 +9,17 @@ export const Card = styled.div`
   @media (max-width: 768px) {
     flex-direction: column;
     margin-top: 0;
-    padding: 16px 0;
-    border-top: 1px solid #e0e0e0;
+    padding: 16px 0 32px;
+    border-bottom: 1px solid #e0e0e0;
   }
 
-  &:last-child {
+  @media (max-width: 600px) {
+    padding-bottom: 16px;
+  }
+
+  &:not:first-child {
     @media (max-width: 768px) {
-      border-bottom: 1px solid #e0e0e0;
+      border-top: 1px solid #e0e0e0;
     }
   }
 `
@@ -54,8 +58,8 @@ export const CardVoteWrap = styled.div`
     width: 100%;
     box-shadow: none;
     border-radius: unset;
-    border-bottom: 1px solid #e0e0e0;
     background-color: unset;
+    padding-bottom: 0;
   }
 
   @media (max-width: 600px) {
diff --git a/packages/DApp/src/components/Input.tsx b/packages/DApp/src/components/Input.tsx
index f76df8d..73a7fd3 100644
--- a/packages/DApp/src/components/Input.tsx
+++ b/packages/DApp/src/components/Input.tsx
@@ -32,4 +32,9 @@ export const Search = styled(Input)`
   background-size: 24px 24px;
   background-repeat: no-repeat;
   background-position: center left 10px;
+
+  @media (max-width: 375px) {
+    width: 80%;
+    margin-right: 8px;
+  }
 `
diff --git a/packages/DApp/src/components/Rules.tsx b/packages/DApp/src/components/Rules.tsx
index a82b89e..b81ad3c 100644
--- a/packages/DApp/src/components/Rules.tsx
+++ b/packages/DApp/src/components/Rules.tsx
@@ -75,7 +75,7 @@ const VotingRules = styled.div`
   }
 
   @media (max-width: 600px) {
-    padding: 0;
+    padding: 182px 16px 16px;
     background-color: unset;
     border: none;
     box-shadow: none;
diff --git a/packages/DApp/src/components/card/ProposeModal.tsx b/packages/DApp/src/components/card/ProposeModal.tsx
index 26d1c03..216a364 100644
--- a/packages/DApp/src/components/card/ProposeModal.tsx
+++ b/packages/DApp/src/components/card/ProposeModal.tsx
@@ -102,6 +102,10 @@ export const ProposingInfo = styled.div`
   justify-content: space-between;
   align-items: center;
 
+  @media (max-width: 600px) {
+    max-width: 525px;
+  }
+
   & > span {
     font-size: 24px;
     line-height: 32px;
diff --git a/packages/DApp/src/pagesMobile/VotesMobile.tsx b/packages/DApp/src/pagesMobile/VotesMobile.tsx
index 15bc132..2f1c417 100644
--- a/packages/DApp/src/pagesMobile/VotesMobile.tsx
+++ b/packages/DApp/src/pagesMobile/VotesMobile.tsx
@@ -13,8 +13,11 @@ import { VotingSortingOptions } from '../constants/SortingOptions'
 import { VotingCardCover } from '../componentsMobile/VotingCardCover'
 import { ButtonPrimary } from '../components/Button'
 import { useHistory } from 'react-router'
+import { useEthers } from '@usedapp/core'
+import { ConnectButton } from '../components/ConnectButton'
 
 export function VotesMobile() {
+  const { account } = useEthers()
   const [sortedBy, setSortedBy] = useState(VotingSortingEnum.EndingSoonest)
   const [voteType, setVoteType] = useState('')
   const [filterKeyword, setFilterKeyword] = useState('')
@@ -51,29 +54,34 @@ export function VotesMobile() {
         {roomsToShow.length === 0 && empty && <VotingEmpty />}
         {roomsToShow.length === 0 && !empty && <SearchEmpty />}
       </VotingCardsWrapper>
+
       <ProposeButtonWrapper>
-        <ProposeButton onClick={() => history.push('/propose')}>Propose community</ProposeButton>
+        {account ? (
+          <ProposeButton onClick={() => history.push('/propose')}>Propose community</ProposeButton>
+        ) : (
+          <ConnectButton />
+        )}
       </ProposeButtonWrapper>
     </div>
   )
 }
 
-const ProposeButton = styled(ButtonPrimary)`
-  margin: auto;
-  width: 100%;
-  padding: 10px 0;
-  text-align: center;
-`
-const ProposeButtonWrapper = styled.div`
-  display: flex;
+export const ProposeButtonWrapper = styled.div`
   position: fixed;
   padding: 0 16px;
   bottom: 15px;
   width: 100%;
 `
 
+export const ProposeButton = styled(ButtonPrimary)`
+  margin: auto;
+  width: 100%;
+  padding: 10px 0;
+  text-align: center;
+`
+
 const VotingCardsWrapper = styled.div`
-  padding: 307px 16px 16px;
+  padding: 307px 16px 68px;
 
   @media (max-width: 340px) {
     padding-top: 320px;