From b937d77d2646ae35fff5b37e04bad2fe5581e302 Mon Sep 17 00:00:00 2001
From: Maria Rushkova <66270386+mrushkova@users.noreply.github.com>
Date: Tue, 7 Sep 2021 13:55:39 +0200
Subject: [PATCH] Responsive cards (#55)

---
 .../src/components/Buttons.tsx                |  1 -
 .../src/components/ProposalCard.tsx           | 33 +++++----
 .../src/components/ProposalInfo.tsx           | 27 ++++++-
 .../src/components/ProposalList.tsx           | 33 ++++++++-
 .../ProposalVoteCard/ProposalVote.tsx         | 74 +++++++++++++++----
 .../components/ProposalVoteCard/VoteChart.tsx | 32 ++++++--
 6 files changed, 160 insertions(+), 40 deletions(-)

diff --git a/packages/proposal-components/src/components/Buttons.tsx b/packages/proposal-components/src/components/Buttons.tsx
index a9e99e8..82b03b7 100644
--- a/packages/proposal-components/src/components/Buttons.tsx
+++ b/packages/proposal-components/src/components/Buttons.tsx
@@ -49,7 +49,6 @@ export const VoteBtnFor = styled(VoteBtn)`
     background: #F3FFF8;
 `
 export const VoteSendingBtn = styled(Btn)`
-  margin-top: 24px;
   padding: 0;
   color: #0f3595;
   height: auto;
diff --git a/packages/proposal-components/src/components/ProposalCard.tsx b/packages/proposal-components/src/components/ProposalCard.tsx
index c2eaa58..d35a3ea 100644
--- a/packages/proposal-components/src/components/ProposalCard.tsx
+++ b/packages/proposal-components/src/components/ProposalCard.tsx
@@ -3,17 +3,20 @@ import styled from 'styled-components'
 import { ProposalInfo } from './ProposalInfo'
 import { ProposalVote } from './ProposalVoteCard/ProposalVote'
 
-export function ProposalCard() {
+interface ProposalCardProps {
+  heading: string
+  text: string
+  address: string
+  vote?: number
+  voteWinner?: number
+  hideModalFunction?: (val: boolean) => void
+}
+
+export function ProposalCard({ heading, text, address, vote, voteWinner }: ProposalCardProps) {
   return (
     <Card>
-      <ProposalInfo
-        heading={'This is a very long, explainative and sophisticated title for a proposal.'}
-        text={
-          'This is a longer description of the proposal. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum rutrum sodales. Nullam mattis fermentum libero, non volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum rutrum sodales. Nullam mattis fermentum libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum rutrum sodales. Nullam mattis fermentum libero.'
-        }
-        address={'#'}
-      />
-      <ProposalVote vote={2345678} voteWinner={2} />
+      <ProposalInfo heading={heading} text={text} address={address} />
+      <ProposalVote vote={vote} voteWinner={voteWinner} address={address} />
     </Card>
   )
 }
@@ -21,17 +24,19 @@ export function ProposalCard() {
 export const Card = styled.div`
   display: flex;
   align-items: stretch;
-  margin-top: 24px;
+  margin-bottom: 24px;
 
   @media (max-width: 768px) {
     flex-direction: column;
-    margin-top: 0;
-    padding: 16px 0 32px;
-    border-bottom: 1px solid #e0e0e0;
+    box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.15);
   }
+
   @media (max-width: 600px) {
-    padding-bottom: 16px;
+    padding-bottom: 24px;
+    box-shadow: none;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
   }
+
   &:not:first-child {
     @media (max-width: 768px) {
       border-top: 1px solid #e0e0e0;
diff --git a/packages/proposal-components/src/components/ProposalInfo.tsx b/packages/proposal-components/src/components/ProposalInfo.tsx
index 2c2737a..37b99dd 100644
--- a/packages/proposal-components/src/components/ProposalInfo.tsx
+++ b/packages/proposal-components/src/components/ProposalInfo.tsx
@@ -13,7 +13,9 @@ export function ProposalInfo({ heading, text, address }: ProposalInfoProps) {
     <Card>
       <CardHeading>{heading}</CardHeading>
       <CardText>{text}</CardText>
-      <ViewLink address={address} />
+      <CardViewLink>
+        <ViewLink address={address} />
+      </CardViewLink>
     </Card>
   )
 }
@@ -21,6 +23,7 @@ export function ProposalInfo({ heading, text, address }: ProposalInfoProps) {
 export const Card = styled.div`
   display: flex;
   flex-direction: column;
+  justify-content: space-between;
   align-items: center;
   width: 50%;
   padding: 24px;
@@ -34,21 +37,41 @@ export const Card = styled.div`
     box-shadow: none;
     padding-bottom: 0;
   }
+
   @media (max-width: 600px) {
     padding: 0;
   }
 `
 
 const CardHeading = styled.div`
-  height: 56px;
   font-weight: bold;
   font-size: 22px;
   line-height: 24px;
   margin-bottom: 8px;
+  align-self: flex-start;
+
+  @media (max-width: 600px) {
+    font-size: 17px;
+  }
 `
 
 const CardText = styled.div`
   font-size: 13px;
   line-height: 18px;
   margin-bottom: 16px;
+
+  @media (max-width: 600px) {
+    height: 56px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+  }
+`
+
+const CardViewLink = styled.div`
+  @media (max-width: 768px) {
+    display: none;
+  }
 `
diff --git a/packages/proposal-components/src/components/ProposalList.tsx b/packages/proposal-components/src/components/ProposalList.tsx
index 612fb15..caf0ee1 100644
--- a/packages/proposal-components/src/components/ProposalList.tsx
+++ b/packages/proposal-components/src/components/ProposalList.tsx
@@ -1,6 +1,37 @@
 import React from 'react'
+import styled from 'styled-components'
 import { ProposalCard } from './ProposalCard'
 
 export function ProposalList() {
-  return <ProposalCard />
+  return (
+    <List>
+      <ProposalCard
+        heading={'This is a very long, explainative and sophisticated title for a proposal.'}
+        text={
+          'This is a longer description of the proposal. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum rutrum sodales. Nullam mattis fermentum libero, non volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum rutrum sodales. Nullam mattis fermentum libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum rutrum sodales. Nullam mattis fermentum libero.'
+        }
+        address={'#'}
+        vote={2345678}
+        voteWinner={2}
+      />
+      <ProposalCard
+        heading={'Short proposal title'}
+        text={
+          'This is a shorter description of the proposal. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum rutrum sodales.'
+        }
+        address={'#'}
+      />
+    </List>
+  )
 }
+
+const List = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+
+  @media (max-width: 425px) {
+    padding-top: 118px;
+  }
+`
diff --git a/packages/proposal-components/src/components/ProposalVoteCard/ProposalVote.tsx b/packages/proposal-components/src/components/ProposalVoteCard/ProposalVote.tsx
index ce4f68b..250ba8d 100644
--- a/packages/proposal-components/src/components/ProposalVoteCard/ProposalVote.tsx
+++ b/packages/proposal-components/src/components/ProposalVoteCard/ProposalVote.tsx
@@ -4,14 +4,16 @@ import { useEthers } from '@usedapp/core'
 import { FinalBtn, VoteBtnAgainst, VoteBtnFor } from '../Buttons'
 import { VoteSubmitButton } from './VoteSubmitButton'
 import { VoteChart } from './VoteChart'
+import { ViewLink } from '../ViewLink'
 
 interface ProposalVoteProps {
-  vote: number
+  vote?: number
   voteWinner?: number
+  address: string
   hideModalFunction?: (val: boolean) => void
 }
 
-export function ProposalVote({ vote, voteWinner, hideModalFunction }: ProposalVoteProps) {
+export function ProposalVote({ vote, voteWinner, address, hideModalFunction }: ProposalVoteProps) {
   const { account } = useEthers()
   const [showVoteModal, setShowVoteModal] = useState(false)
 
@@ -19,18 +21,26 @@ export function ProposalVote({ vote, voteWinner, hideModalFunction }: ProposalVo
     <Card>
       {voteWinner ? <CardHeading>Proposal {voteWinner == 1 ? 'rejected' : 'passed'}</CardHeading> : <CardHeading />}
 
-      <VoteChart votesFor={1865567} votesAgainst={1740235} timeLeft={48} voteWinner={2} />
+      <VoteChart votesFor={1865567} votesAgainst={1740235} timeLeft={4855555577} voteWinner={voteWinner} />
 
-      {voteWinner ? (
-        <FinalBtn disabled={!account}>Finalize the vote</FinalBtn>
-      ) : (
-        <VotesBtns>
-          <VoteBtnAgainst disabled={!account}>Vote Against</VoteBtnAgainst>
-          <VoteBtnFor disabled={!account}>Vote For</VoteBtnFor>
-        </VotesBtns>
-      )}
+      <CardButtons>
+        {voteWinner ? (
+          <FinalBtn disabled={!account}>Finalize the vote</FinalBtn>
+        ) : (
+          <VotesBtns>
+            <VoteBtnAgainst disabled={!account}>Vote Against</VoteBtnAgainst>
+            <VoteBtnFor disabled={!account}>Vote For</VoteBtnFor>
+          </VotesBtns>
+        )}
+      </CardButtons>
 
-      <CardVoteBottom>{vote && <VoteSubmitButton votes={vote} disabled={!account} />}</CardVoteBottom>
+      <CardVoteBottom>
+        <CardViewLink>
+          {' '}
+          <ViewLink address={address} />
+        </CardViewLink>
+        {vote && <VoteSubmitButton votes={vote} disabled={!account} />}
+      </CardVoteBottom>
     </Card>
   )
 }
@@ -38,6 +48,7 @@ export function ProposalVote({ vote, voteWinner, hideModalFunction }: ProposalVo
 export const Card = styled.div`
   display: flex;
   flex-direction: column;
+  justify-content: space-between;
   align-items: center;
   width: 50%;
   padding: 24px;
@@ -50,12 +61,12 @@ export const Card = styled.div`
     box-shadow: none;
     border-radius: unset;
     background-color: unset;
-    padding-bottom: 0;
+    padding-top: 0;
   }
 
   @media (max-width: 600px) {
     flex-direction: column;
-    padding: 16px 0 0;
+    padding: 0;
     border-bottom: none;
   }
 `
@@ -67,6 +78,24 @@ export const CardHeading = styled.h2`
   line-height: 24px;
   margin: 0;
   margin-bottom: 15px;
+
+  @media (max-width: 768px) {
+    font-size: 15px;
+    line-height: 22px;
+    margin-bottom: 6px;
+  }
+
+  @media (max-width: 600px) {
+    display: none;
+  }
+`
+
+const CardButtons = styled.div`
+  width: 100%;
+
+  @media (max-width: 600px) {
+    display: none;
+  }
 `
 
 export const VotesBtns = styled.div`
@@ -83,4 +112,21 @@ const CardVoteBottom = styled.div`
   display: flex;
   justify-content: flex-end;
   align-items: center;
+  width: 100%;
+  margin-top: 24px;
+
+  @media (max-width: 768px) {
+    justify-content: space-between;
+  }
+
+  @media (max-width: 600px) {
+    display: none;
+  }
+`
+const CardViewLink = styled.div`
+  display: none;
+
+  @media (max-width: 768px) {
+    display: block;
+  }
 `
diff --git a/packages/proposal-components/src/components/ProposalVoteCard/VoteChart.tsx b/packages/proposal-components/src/components/ProposalVoteCard/VoteChart.tsx
index ff8cbe2..a5d1ea2 100644
--- a/packages/proposal-components/src/components/ProposalVoteCard/VoteChart.tsx
+++ b/packages/proposal-components/src/components/ProposalVoteCard/VoteChart.tsx
@@ -66,7 +66,13 @@ export function VoteChart({
             alignItems: mobileVersion ? 'flex-start' : 'center',
           }}
         >
-          <VoteIcon src={voteWinner === 1 ? crossWinnerIcon : crossIcon} width={voteWinner === 1 ? '18px' : '14px'} />
+          <VoteIcon
+            src={voteWinner === 1 ? crossWinnerIcon : crossIcon}
+            width={voteWinner === 1 ? '18px' : '14px'}
+            style={{
+              marginLeft: mobileVersion ? '10px' : '0',
+            }}
+          />
           <span>
             {' '}
             {isAnimation && proposingAmount && selectedVote && selectedVote === 0 ? (
@@ -77,14 +83,20 @@ export function VoteChart({
             <span style={{ fontWeight: 'normal' }}>ABC</span>
           </span>
         </VoteBox>
-        <TimeLeft className={selectedVote ? '' : 'notModal'}>{formatTimeLeft(timeLeft)}</TimeLeft>
+        {!voteWinner && <TimeLeft className={selectedVote ? '' : 'notModal'}>{formatTimeLeft(timeLeft)}</TimeLeft>}
         <VoteBox
           style={{
             filter: voteWinner && voteWinner === 1 ? 'grayscale(1)' : 'none',
-            alignItems: mobileVersion ? 'flex-start' : 'center',
+            alignItems: mobileVersion ? 'flex-end' : 'center',
           }}
         >
-          <VoteIcon src={voteWinner === 2 ? checkWinnerIcon : checkIcon} width={voteWinner === 2 ? '24px' : '18px'} />
+          <VoteIcon
+            src={voteWinner === 2 ? checkWinnerIcon : checkIcon}
+            width={voteWinner === 2 ? '24px' : '18px'}
+            style={{
+              marginRight: mobileVersion ? '10px' : '0',
+            }}
+          />
           <span>
             {' '}
             {isAnimation && proposingAmount && selectedVote && selectedVote === 1 ? (
@@ -116,6 +128,10 @@ const Votes = styled.div`
   width: 100%;
   position: relative;
 
+  @media (max-width: 768px) {
+    margin-bottom: 24px;
+  }
+
   @media (max-width: 600px) {
     margin-bottom: 0;
   }
@@ -170,11 +186,11 @@ const TimeLeft = styled.div`
 
   &.notModal {
     @media (max-width: 768px) {
-      top: -16px;
+      top: -27px;
     }
 
     @media (max-width: 600px) {
-      top: unset;
+      display: none;
     }
   }
 `
@@ -203,9 +219,9 @@ const VoteGraphBarWrap = styled.div`
     @media (max-width: 768px) {
       position: absolute;
       width: 65%;
-      top: 50%;
+      top: 4px;
       left: 50%;
-      transform: translate(-50%, -50%);
+      transform: translateX(-50%);
     }
 
     @media (max-width: 600px) {