Responsive cards (#55)

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;

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;

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

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

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

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