Mobile UI (#151)

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)`

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) {

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;
+  }
 `

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;

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;

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;