Tablet mode card UI (#107)

packages/DApp/src/components/Button.tsx

@@ -69,13 +69,18 @@ export const VotesBtns = styled.div`
   width: 100%;
 `
 export const VoteBtn = styled(ButtonSecondary)`
-  width: 187px;
-  padding: 11px 46px;
+  width: 44%;
+  padding: 11px 0;
   font-weight: 500;
   font-size: 15px;
   line-height: 22px;
+  text-align: center;
 
   & > span {
     font-size: 20px;
   }
+
+  @media (max-width: 768px) {
+    width: 48%;
+  }
 `

packages/DApp/src/components/Card.tsx

@@ -1,4 +1,5 @@
 import styled from 'styled-components'
+import { Colors } from '../constants/styles'
 
 export const Card = styled.div`
   display: flex;
@@ -35,12 +36,14 @@ export const CardVoteWrap = styled.div`
   padding: 24px 24px 32px;
   box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
   border-radius: 6px 0px 0px 6px;
+  background-color: ${Colors.GrayLight};
 
   @media (max-width: 768px) {
     width: 100%;
     box-shadow: none;
     border-radius: unset;
     border-bottom: 1px solid #e0e0e0;
+    background-color: unset;
   }
 `
 export const CardVoteBlock = styled.div`
@@ -48,6 +51,11 @@ export const CardVoteBlock = styled.div`
   flex-direction: column;
   justify-content: space-between;
   width: 100%;
+  background-color: ${Colors.GrayLight};
+
+  @media (max-width: 768px) {
+    background-color: unset;
+  }
 `
 
 export const CardHeading = styled.h2`

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

@@ -14,10 +14,17 @@ interface CardCommunityProps {
   community: CommunityDetail
   showRemoveButton?: boolean
   customHeading?: string
+  customStyle?: boolean
   currentVoting?: CurrentVoting
 }
 
-export const CardCommunity = ({ community, showRemoveButton, customHeading, currentVoting }: CardCommunityProps) => {
+export const CardCommunity = ({
+  community,
+  showRemoveButton,
+  customHeading,
+  customStyle,
+  currentVoting,
+}: CardCommunityProps) => {
   const { account } = useEthers()
 
   const [showHistoryModal, setShowHistoryModal] = useState(false)
@@ -32,7 +39,7 @@ export const CardCommunity = ({ community, showRemoveButton, customHeading, curr
   }
 
   return (
-    <CardCommunityBlock>
+    <CardCommunityBlock className={customStyle ? 'notModal' : ''}>
       {showHistoryModal && (
         <Modal heading={`${community.name} voting history`} setShowModal={setShowHistoryModal}>
           <VoteHistoryTable>
@@ -74,7 +81,9 @@ export const CardCommunity = ({ community, showRemoveButton, customHeading, curr
         <CardLogoWrap>
           {' '}
           <CardLogo src={community.icon} alt={`${community.name} logo`} />
-          {community.directoryInfo && showRemoveButton && <RemoveBtnMobile onClick={() => setShowRemoveModal(true)} />}
+          {community.directoryInfo && showRemoveButton && !currentVoting && (
+            <RemoveBtnMobile onClick={() => setShowRemoveModal(true)} disabled={!account} />
+          )}
         </CardLogoWrap>
 
         <CommunityInfo>
@@ -94,7 +103,7 @@ export const CardCommunity = ({ community, showRemoveButton, customHeading, curr
           </CardTags>
         </CommunityInfo>
       </Community>
-      <CardLinks>
+      <CardLinks className={customStyle ? 'notModal' : ''}>
         <LinkExternal>Visit community</LinkExternal>
         <LinkExternal>Etherscan</LinkExternal>
         <LinkInternal onClick={() => setShowHistoryModal(true)} disabled={isDisabled}>
@@ -110,6 +119,12 @@ export const CardCommunityBlock = styled.div`
   flex-direction: column;
   justify-content: space-between;
   width: 100%;
+
+  &.notModal {
+    @media (max-width: 768px) {
+      align-items: flex-end;
+    }
+  }
 `
 
 const Community = styled.div`
@@ -162,6 +177,10 @@ const RemoveBtn = styled.button`
   background-image: url(${binIcon});
   background-size: cover;
 
+  &:disabled {
+    filter: grayscale(1);
+  }
+
   @media (max-width: 768px) {
     display: none;
   }
@@ -173,9 +192,6 @@ const RemoveBtnMobile = styled(RemoveBtn)`
   @media (max-width: 768px) {
     display: block;
     margin-left: 0;
-  
-    &:disabled {
-    filter: grayscale(1);
   }
 `
 
@@ -206,9 +222,10 @@ export const CardLinks = styled.div`
   font-size: 15px;
   line-height: 22px;
 
-  @media (max-width: 768px) {
-    width: auto;
-    margin-left: 80px;
+  &.notModal {
+    @media (max-width: 768px) {
+      max-width: calc(100% - 60px);
+    }
   }
 `
 

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

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import styled from 'styled-components'
-import { Colors, ColumnFlexDiv } from '../../constants/styles'
+import { ColumnFlexDiv } from '../../constants/styles'
 import { addCommas } from '../../helpers/addCommas'
 import { CardHeading, CardVoteBlock } from '../Card'
 import { CommunityDetail, CurrentVoting } from '../../models/community'
@@ -35,7 +35,7 @@ export const CardFeature = ({ community, heading, icon, sum, timeLeft, currentVo
   }
 
   return (
-    <CardVoteBlock style={{ backgroundColor: `${Colors.GrayLight}` }}>
+    <CardVoteBlock>
       <CardHeading style={{ fontWeight: timeLeft ? 'normal' : 'bold', fontSize: timeLeft ? '15px' : '17px' }}>
         {heading}
       </CardHeading>

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

@@ -110,7 +110,6 @@ 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>
@@ -120,7 +119,6 @@ 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>

packages/DApp/src/components/directory/DirectoryCards.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { Card, CardCommunityWrap, CardVoteWrap } from '../Card'
 import { CardCommunity } from '../card/CardCommunity'
 import { CardFeature } from '../card/CardFeature'
@@ -8,7 +8,6 @@ import { FilterList } from '../Filter'
 import { Search } from '../Input'
 import { PageBar } from '../PageBar'
 import { DirectorySortingOptions } from '../../constants/SortingOptions'
-import { Colors } from '../../constants/styles'
 import { WeeklyFeature } from '../WeeklyFeature'
 import { DirectoryCardSkeleton } from './DirectoryCardSkeleton'
 import { useDirectoryCommunities } from '../../hooks/useDirectoryCommunities'
@@ -21,6 +20,21 @@ interface DirectoryCardProps {
 }
 
 function DirectoryCard({ community }: DirectoryCardProps) {
+  const [customStyle, setCustomStyle] = useState(true)
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth < 769) {
+        setCustomStyle(true)
+      } else {
+        setCustomStyle(false)
+      }
+    }
+
+    window.addEventListener('resize', handleResize)
+    return () => window.removeEventListener('resize', handleResize)
+  }, [window.innerWidth])
+
   if (!community.directoryInfo) {
     return <div />
   }
@@ -50,9 +64,14 @@ function DirectoryCard({ community }: DirectoryCardProps) {
     <Card>
       <CardCommunityWrap>
         &nbsp;
-        <CardCommunity community={community} showRemoveButton={true} currentVoting={currentVoting} />
+        <CardCommunity
+          community={community}
+          showRemoveButton={true}
+          currentVoting={currentVoting}
+          customStyle={customStyle}
+        />
       </CardCommunityWrap>
-      <CardVoteWrap style={{ backgroundColor: `${Colors.GrayLight}` }}>
+      <CardVoteWrap>
         <CardFeature
           community={community}
           heading={timeLeft ? 'This community has to wait until it can be featured again' : 'Weekly Feature vote'}

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

@@ -9,13 +9,18 @@ interface VotingCardProps {
 }
 
 export function VotingCard({ room }: VotingCardProps) {
-  const [customHeading, setCustomHeading] = useState<string | undefined>(undefined)
+  const heading = window.innerWidth < 769 ? `Add ${room.details.name}?` : ''
+  const [customHeading, setCustomHeading] = useState<string | undefined>(heading)
+  const [customStyle, setCustomStyle] = useState(true)
+
   useEffect(() => {
     const handleResize = () => {
       if (window.innerWidth < 769) {
         setCustomHeading(`Add ${room.details.name}?`)
+        setCustomStyle(true)
       } else {
         setCustomHeading(undefined)
+        setCustomStyle(false)
       }
     }
 
@@ -27,7 +32,7 @@ export function VotingCard({ room }: VotingCardProps) {
     <Card>
       <CardCommunityWrap>
         {' '}
-        <CardCommunity community={room.details} customHeading={customHeading} />
+        <CardCommunity community={room.details} customHeading={customHeading} customStyle={customStyle} />
       </CardCommunityWrap>
       <CardVoteWrap>
         {' '}