UI improvements (#78)

packages/DApp/src/components/Card.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import styled from 'styled-components'
-import { Colors, ColumnFlexDiv } from '../constants/styles'
+import { Colors } from '../constants/styles'
 import { ButtonSecondary } from '../components/Button'
 import { CommunityDetail } from '../models/community'
 import { LinkExternal, LinkInternal } from './Link'
@@ -35,7 +35,7 @@ export const CardCommunity = ({ community, showRemoveButton }: CardCommunityProp
   }
 
   return (
-    <ColumnFlexDiv>
+    <CardCommunityBlock>
       {showHistoryModal && (
         <Modal heading={`${community.name} voting history`} setShowModal={setShowHistoryModal}>
           <VoteHistoryTable>
@@ -60,7 +60,7 @@ export const CardCommunity = ({ community, showRemoveButton }: CardCommunityProp
       )}
       {showRemoveModal && (
         <Modal
-          heading="Remove from Communities directory?"
+          heading="Remove from directory?"
           setShowModal={(val: boolean) => {
             setShowRemoveModal(val)
           }}
@@ -99,7 +99,7 @@ export const CardCommunity = ({ community, showRemoveButton }: CardCommunityProp
         <LinkExternal>Etherscan</LinkExternal>
         <LinkInternal onClick={() => setShowHistoryModal(true)}>Voting history</LinkInternal>
       </CardLinks>
-    </ColumnFlexDiv>
+    </CardCommunityBlock>
   )
 }
 
@@ -231,7 +231,17 @@ export const Card = styled.div`
   align-items: stretch;
   margin-top: 24px;
 `
+
+export const CardCommunityBlock = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+`
+
 export const CardCommunityWrap = styled.div`
+  display: flex;
+  align-items: stretch;
   width: 50%;
   margin: 13px 0;
   padding: 24px 24px 16px;

packages/DApp/src/components/Input.tsx

@@ -5,7 +5,7 @@ import searchIcon from '../assets/images/search.svg'
 export const Input = styled.input`
   max-width: 420px;
   padding: 11px 20px;
-  background: ${Colors.GrayBorder};
+  background: #f0f1f3;
   color: ${Colors.Black};
   border-radius: 8px;
   border: 1px solid ${Colors.GrayBorder};

packages/DApp/src/components/WeeklyFeature.tsx

@@ -33,11 +33,7 @@ const View = styled.div`
 
   span {
     font-weight: 400;
-    margin-right: 6px;
+    margin: 0 6px 0 8px;
     color: rgba(255, 255, 255, 0.5);
   }
-
-  img {
-    margin-right: 8px;
-  }
 `

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

@@ -13,7 +13,7 @@ interface FeatureModalProps {
 }
 
 export function FeatureModal({ community, availableAmount, setShowConfirmModal }: FeatureModalProps) {
-  const [proposingAmount, setProposingAmount] = useState(availableAmount)
+  const [proposingAmount, setProposingAmount] = useState(0)
   const disabled = proposingAmount === 0
 
   return (

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

@@ -14,7 +14,7 @@ interface RemoveAmountPickerProps {
 }
 
 export function RemoveAmountPicker({ community, availableAmount, setShowConfirmModal }: RemoveAmountPickerProps) {
-  const [proposingAmount, setProposingAmount] = useState(availableAmount)
+  const [proposingAmount, setProposingAmount] = useState(0)
   const lastVote = community.votingHistory[community.votingHistory.length - 1]
   const lastVoteDate = lastVote.date
   const disabled = proposingAmount === 0
@@ -63,7 +63,9 @@ export function RemoveAmountPicker({ community, availableAmount, setShowConfirmM
         proposingAmount={proposingAmount}
         disabled={disabled}
       />
-      <VoteConfirmBtn onClick={() => setShowConfirmModal(true)}>Confirm vote to remove community</VoteConfirmBtn>
+      <VoteConfirmBtn disabled={disabled} onClick={() => setShowConfirmModal(true)}>
+        Confirm vote to remove community
+      </VoteConfirmBtn>
     </VoteProposeWrap>
   )
 }

packages/DApp/src/components/skeleton/CommunitySkeleton.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import { ColumnFlexDiv } from '../../constants/styles'
+import { CardCommunityBlock, CardLinks } from '../Card'
-import { CardLinks } from '../Card'
 import { LinkExternal, LinkInternal } from '../Link'
 import { Skeleton } from '../skeleton/Skeleton'
 import { TagsSkeletonList } from '../skeleton/TagSkeleton'
@@ -9,7 +8,7 @@ import { TextBlock } from '../skeleton/TextSkeleton'
 
 export const CommunitySkeleton = () => {
   return (
-    <ColumnFlexDiv>
+    <CardCommunityBlock>
       {' '}
       <CardRow>
         <AvatarSkeleton />
@@ -24,7 +23,7 @@ export const CommunitySkeleton = () => {
         <StyledExternalLink>Etherscan</StyledExternalLink>
         <StyledInternalink>Voting history </StyledInternalink>
       </CardLinks>
-    </ColumnFlexDiv>
+    </CardCommunityBlock>
   )
 }
 

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

@@ -22,15 +22,15 @@ export function VoteChart({ vote, voteWinner, proposingAmount, selectedVote, isA
   const votesFor = vote.voteFor.toNumber()
   const votesAgainst = vote.voteAgainst.toNumber()
   const voteSum = votesFor + votesAgainst
-  const graphWidth = (100 * votesAgainst) / voteSum
+  const graphWidth = (100 * votesAgainst) / voteSum - 3
 
   let balanceWidth = graphWidth
 
   if (proposingAmount && selectedVote) {
     balanceWidth =
       selectedVote.type === 0
-        ? (100 * (votesAgainst + proposingAmount)) / (voteSum + proposingAmount)
+        ? (100 * (votesAgainst + proposingAmount)) / (voteSum + proposingAmount) - 3
-        : (100 * votesAgainst) / (voteSum + proposingAmount)
+        : (100 * votesAgainst) / (voteSum + proposingAmount) - 3
   }
 
   return (
@@ -77,6 +77,7 @@ const VotesChart = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
+  position: relative;
   margin-bottom: 13px;
 `
 
@@ -99,7 +100,11 @@ const VoteBox = styled.div`
   }
 `
 
-const TimeLeft = styled.p`
+const TimeLeft = styled.div`
+  position: absolute;
+  top: 50%;
+  left: calc(50%);
+  transform: translateX(-50%);
   font-size: 12px;
   line-height: 16px;
   letter-spacing: 0.1px;

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

@@ -22,7 +22,7 @@ export interface VoteGraphBarProps {
   isAnimation?: boolean
 }
 
-export function VoteGraphBar({ graphWidth, balanceWidth, isAnimation }: VoteGraphBarProps) {
+export function VoteGraphBar({ graphWidth, balanceWidth, voteWinner, isAnimation }: VoteGraphBarProps) {
   const markerWidth: number = balanceWidth ? balanceWidth : 3
   const votesWidth: number = graphWidth ? graphWidth : 3
   const [keyFrames, setKeyFrames] = useState('')
@@ -38,9 +38,9 @@ export function VoteGraphBar({ graphWidth, balanceWidth, isAnimation }: VoteGrap
   }, [isAnimation, votesWidth])
 
   return (
-    <VoteGraph>
+    <VoteGraph theme={{ voteWinner }}>
       <style children={keyFrames} />
-      <VoteGraphAgainst style={style} />
+      <VoteGraphAgainst theme={{ voteWinner }} style={style} />
       <VoteBalance style={{ width: `${markerWidth}%` }} />
     </VoteGraph>
   )
@@ -50,7 +50,7 @@ const VoteGraph = styled.div<VoteGraphBarProps>`
   position: relative;
   width: 100%;
   height: 16px;
-  background-color: ${({ voteWinner }) => (voteWinner && voteWinner === 1 ? Colors.GrayDisabledLight : Colors.BlueBar)};
+  background-color: ${({ theme }) => (theme.voteWinner === 1 ? Colors.GrayDisabledLight : Colors.BlueBar)};
   border-radius: 10px;
   padding-top: 5px;
 
@@ -73,7 +73,7 @@ const VoteGraphAgainst = styled.div<VoteGraphBarProps>`
   top: 0;
   width: 3%;
   height: 16px;
-  background-color: ${({ voteWinner }) => (voteWinner && voteWinner === 2 ? Colors.GrayDisabledLight : Colors.Orange)};
+  background-color: ${({ theme }) => (theme.voteWinner === 2 ? Colors.GrayDisabledLight : Colors.Orange)};
   border-radius: 10px 0 0 10px;
   transition: width 2s;
   z-index: 2;

packages/DApp/src/constants/styles.ts

@@ -14,7 +14,7 @@ export const Colors = {
   Orange: '#FFE6CF',
   GrayOverlay: '#E5E5E5',
   GrayDisabledDark: '#888888',
-  GrayDisabledLight: '#F3F3F3',
+  GrayDisabledLight: '#EAEBED',
   GreyText: '#939BA1',
   GreyTextDisabled: '#B1B1B1',
   GrayLight: '#FBFCFE',

packages/DApp/src/constants/voteTypes.ts

@@ -16,7 +16,7 @@ type Vote = {
 
 export const voteTypes: Vote = {
   Add: {
-    question: 'Add to Communities directory?',
+    question: 'Add to directory?',
     for: {
       type: 1,
       icon: '👍',
@@ -34,7 +34,7 @@ export const voteTypes: Vote = {
   },
 
   Remove: {
-    question: 'Remove from Communities directory?',
+    question: 'Remove from directory?',
     for: {
       type: 1,
       icon: '🗑',