Tablet mode (#101)

packages/DApp/src/components/Button.tsx

@@ -78,8 +78,4 @@ export const VoteBtn = styled(ButtonSecondary)`
   & > span {
     font-size: 20px;
   }
-
-  @media (max-width: 768px) {
-    width: 305px;
-  }
 `

packages/DApp/src/components/Card.tsx

@@ -25,6 +25,7 @@ export const CardCommunityWrap = styled.div`
     margin: 0;
     border: none;
     box-shadow: none;
+    padding-bottom: 0;
   }
 `
 export const CardVoteWrap = styled.div`

packages/DApp/src/components/PageBar.tsx

@@ -58,7 +58,7 @@ const StyledPageBar = styled.div`
   z-index: 110;
 
   @media (max-width: 900px) {
-    padding: 24px 32px 16px;
+    padding: 24px 0 16px;
   }
 
   &.isFixed {

packages/DApp/src/components/card/CardCommunity.tsx

@@ -70,6 +70,7 @@ export const CardCommunity = ({ community, showRemoveButton, customHeading }: Ca
         <CardLogoWrap>
           {' '}
           <CardLogo src={community.icon} alt={`${community.name} logo`} />
+          {community.directoryInfo && showRemoveButton && <RemoveBtnMobile onClick={() => setShowRemoveModal(true)} />}
         </CardLogoWrap>
 
         <CommunityInfo>
@@ -116,15 +117,29 @@ const CommunityInfo = styled.div`
 `
 
 const CardLogoWrap = styled.div`
-  width: 64px !important;
-  height: 64px !important;
+  width: 64px;
+  height: 64px;
   object-fit: cover;
   margin-right: 16px;
+
+  @media (max-width: 768px) {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    width: 40px;
+    height: 76px;
+  }
 `
 const CardLogo = styled.img`
   width: 64px !important;
   height: 64px !important;
   border-radius: 50%;
+
+  @media (max-width: 768px) {
+    width: 40px !important;
+    height: 40px !important;
+  }
 `
 
 const CardTop = styled.div`
@@ -140,6 +155,17 @@ const RemoveBtn = styled.button`
   margin-left: 16px;
   background-image: url(${binIcon});
   background-size: cover;
+
+  @media (max-width: 768px) {
+    display: none;
+  }
+`
+
+const RemoveBtnMobile = styled(RemoveBtn)`
+  @media (max-width: 768px) {
+    display: block;
+    margin-left: 0;
+  }
 `
 
 const CardText = styled.p`

packages/DApp/src/components/card/CardVote/CardVote.tsx

@@ -96,7 +96,7 @@ export const CardVote = ({ room, hideModalFunction }: CardVoteProps) => {
         <CardHeading>{voteConstants.question}</CardHeading>
       )}
       <div>
-        <VoteChart vote={vote} voteWinner={winner} />
+        <VoteChart vote={vote} voteWinner={winner} tabletMode={hideModalFunction} />
 
         {winner ? (
           <VoteBtnFinal onClick={() => finalizeVoting.send(room.roomNumber)} disabled={!account}>
@@ -110,6 +110,7 @@ export const CardVote = ({ room, hideModalFunction }: CardVoteProps) => {
                 setSelectedVoted(voteConstants.against)
                 setShowVoteModal(true)
               }}
+              style={{ width: hideModalFunction ? '187px' : '305px' }}
             >
               {voteConstants.against.text} <span>{voteConstants.against.icon}</span>
             </VoteBtn>
@@ -119,6 +120,7 @@ export const CardVote = ({ room, hideModalFunction }: CardVoteProps) => {
                 setSelectedVoted(voteConstants.for)
                 setShowVoteModal(true)
               }}
+              style={{ width: hideModalFunction ? '187px' : '305px' }}
             >
               {voteConstants.for.text} <span>{voteConstants.for.icon}</span>
             </VoteBtn>
@@ -141,7 +143,7 @@ const CardHeadingEndedVote = styled.p`
   text-align: center;
 
   @media (max-width: 768px) {
-    display: none;
+    max-width: 100%;
   }
 `
 

packages/DApp/src/components/votes/VoteChart.tsx

@@ -14,9 +14,17 @@ export interface VoteChartProps {
   proposingAmount?: number
   selectedVote?: VoteType
   isAnimation?: boolean
+  tabletMode?: (val: boolean) => void
 }
 
-export function VoteChart({ vote, voteWinner, proposingAmount, selectedVote, isAnimation }: VoteChartProps) {
+export function VoteChart({
+  vote,
+  voteWinner,
+  proposingAmount,
+  selectedVote,
+  isAnimation,
+  tabletMode,
+}: VoteChartProps) {
   const voteConstants = voteTypes[vote.type]
 
   const votesFor = vote.voteFor.toNumber()
@@ -51,7 +59,7 @@ export function VoteChart({ vote, voteWinner, proposingAmount, selectedVote, isA
             <span style={{ fontWeight: 'normal' }}>SNT</span>
           </span>
         </VoteBox>
-        <TimeLeft>{formatTimeLeft(vote.timeLeft)}</TimeLeft>
+        <TimeLeft className={selectedVote ? '' : 'notModal'}>{formatTimeLeft(vote.timeLeft)}</TimeLeft>
         <VoteBox style={{ filter: voteWinner && voteWinner === 1 ? 'grayscale(1)' : 'none' }}>
           <p style={{ fontSize: voteWinner === 2 ? '42px' : '24px', marginTop: voteWinner === 1 ? '18px' : '0' }}>
             {voteConstants.for.icon}
@@ -67,7 +75,7 @@ export function VoteChart({ vote, voteWinner, proposingAmount, selectedVote, isA
           </span>
         </VoteBox>
       </VotesChart>
-      <VoteGraphBarWrap className={selectedVote ? '' : 'notModal'}>
+      <VoteGraphBarWrap className={selectedVote || tabletMode ? '' : 'notModal'}>
         <VoteGraphBar
           graphWidth={graphWidth}
           balanceWidth={balanceWidth}
@@ -123,8 +131,10 @@ const TimeLeft = styled.div`
   letter-spacing: 0.1px;
   color: ${Colors.GreyText};
 
-  @media (max-width: 768px) {
-    top: 0;
+  &.notModal {
+    @media (max-width: 768px) {
+      top: 0;
+    }
   }
 `
 
@@ -134,7 +144,7 @@ const VoteGraphBarWrap = styled.div`
   &.notModal {
     @media (max-width: 768px) {
       position: absolute;
-      top: 60%;
+      top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
     }

packages/DApp/src/pages/Info.tsx

@@ -78,6 +78,10 @@ const VotingRules = styled.div`
   background-color: ${Colors.VioletSecondaryLight};
   box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
   border-radius: 6px;
+
+  @media (max-width: 768px) {
+    max-width: 524px;
+  }
 `
 
 const RulesHeading = styled.p`