Improve UI (#84)

packages/DApp/src/App.tsx

@@ -36,7 +36,7 @@ const Page = styled.div`
 const PageContent = styled.div`
   height: 100%;
   max-width: 996px;
-  padding: 96px 30px 0;
+  padding: 96px 30px 32px;
   margin: 0 auto;
   position: relative;
 `

packages/DApp/src/assets/images/arrowDown.svg

@@ -1,3 +1,3 @@
-<svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0.46967 0.46967C0.762563 0.176777 1.23744 0.176777 1.53033 0.46967L5.64645 4.58579C5.84171 4.78105 6.15829 4.78105 6.35355 4.58579L10.4697 0.46967C10.7626 0.176777 11.2374 0.176777 11.5303 0.46967C11.8232 0.762563 11.8232 1.23744 11.5303 1.53033L6.88388 6.17678C6.39573 6.66493 5.60427 6.66493 5.11612 6.17678L0.46967 1.53033C0.176777 1.23744 0.176777 0.762563 0.46967 0.46967Z" fill="#8C21BA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.46967 9.46967C6.76256 9.17678 7.23744 9.17678 7.53033 9.46967L11.6464 13.5858C11.8417 13.781 12.1583 13.781 12.3536 13.5858L16.4697 9.46967C16.7626 9.17678 17.2374 9.17678 17.5303 9.46967C17.8232 9.76256 17.8232 10.2374 17.5303 10.5303L12.8839 15.1768C12.3957 15.6649 11.6043 15.6649 11.1161 15.1768L6.46967 10.5303C6.17678 10.2374 6.17678 9.76256 6.46967 9.46967Z" fill="#8C21BA"/>
 </svg>

packages/DApp/src/assets/images/filter.svg

@@ -1,5 +1,5 @@
-<svg width="18" height="10" viewBox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 8.25C6.58579 8.25 6.25 8.58579 6.25 9C6.25 9.41421 6.58579 9.75 7 9.75H11C11.4142 9.75 11.75 9.41421 11.75 9C11.75 8.58579 11.4142 8.25 11 8.25H7Z" fill="#8C21BA"/>
+<path d="M10 15.25C9.58579 15.25 9.25 15.5858 9.25 16C9.25 16.4142 9.58579 16.75 10 16.75H14C14.4142 16.75 14.75 16.4142 14.75 16C14.75 15.5858 14.4142 15.25 14 15.25H10Z" fill="#8C21BA"/>
-<path d="M3.25 5C3.25 4.58579 3.58579 4.25 4 4.25H14C14.4142 4.25 14.75 4.58579 14.75 5C14.75 5.41421 14.4142 5.75 14 5.75H4C3.58579 5.75 3.25 5.41421 3.25 5Z" fill="#8C21BA"/>
+<path d="M6.25 12C6.25 11.5858 6.58579 11.25 7 11.25H17C17.4142 11.25 17.75 11.5858 17.75 12C17.75 12.4142 17.4142 12.75 17 12.75H7C6.58579 12.75 6.25 12.4142 6.25 12Z" fill="#8C21BA"/>
-<path d="M0.25 1C0.25 0.585787 0.585786 0.25 1 0.25H17C17.4142 0.25 17.75 0.585787 17.75 1C17.75 1.41421 17.4142 1.75 17 1.75H1C0.585786 1.75 0.25 1.41421 0.25 1Z" fill="#8C21BA"/>
+<path d="M3.25 8C3.25 7.58579 3.58579 7.25 4 7.25H20C20.4142 7.25 20.75 7.58579 20.75 8C20.75 8.41421 20.4142 8.75 20 8.75H4C3.58579 8.75 3.25 8.41421 3.25 8Z" fill="#8C21BA"/>
 </svg>

packages/DApp/src/components/Card.tsx

@@ -16,7 +16,6 @@ import { useContractFunction } from '@usedapp/core'
 import { useContracts } from '../hooks/useContracts'
 import { getVotingWinner } from '../helpers/voting'
 import { useVotesAggregate } from '../hooks/useVotesAggregate'
-import rightIcon from '../assets/images/arrowRight.svg'
 import { VoteAnimatedModal } from './card/VoteAnimatedModal'
 import voting from '../helpers/voting'
 import { DetailedVotingRoom } from '../models/smartContract'
@@ -30,6 +29,8 @@ export const CardCommunity = ({ community, showRemoveButton }: CardCommunityProp
   const [showRemoveModal, setShowRemoveModal] = useState(false)
   const [showConfirmModal, setShowConfirmModal] = useState(false)
 
+  const isDisabled = community.votingHistory.length === 0
+
   const setNewModal = (val: boolean) => {
     setShowConfirmModal(val)
     setShowRemoveModal(false)
@@ -98,7 +99,9 @@ export const CardCommunity = ({ community, showRemoveButton }: CardCommunityProp
       <CardLinks>
         <LinkExternal>Visit community</LinkExternal>
         <LinkExternal>Etherscan</LinkExternal>
-        <LinkInternal onClick={() => setShowHistoryModal(true)}>Voting history</LinkInternal>
+        <LinkInternal onClick={() => setShowHistoryModal(true)} disabled={isDisabled}>
+          Voting history
+        </LinkInternal>
       </CardLinks>
     </CardCommunityBlock>
   )
@@ -178,21 +181,13 @@ export const CardVote = ({ room, hideModalFunction }: CardVoteProps) => {
       )}
       {winner ? (
         <CardHeadingEndedVote>
-          SNT holders have decided{' '}
+          SNT holders have decided <b>{winner == 1 ? voteConstants.against.verb : voteConstants.for.verb}</b> this
-          <b>
+          community to the directory!
-            <u>{winner == 1 ? voteConstants.against.verb : voteConstants.for.verb}</u>
-          </b>{' '}
-          this community to the directory!
         </CardHeadingEndedVote>
       ) : hideModalFunction ? (
         <CardHeading />
       ) : (
-        <CardVoteTop>
+        <CardHeading>{voteConstants.question}</CardHeading>
-          <CardHeading>{voteConstants.question}</CardHeading>
-          {votes.length > 0 && vote && vote.timeLeft > 0 && (
-            <VoteSendingBtn onClick={() => send(votes)}> {votes.length} votes need saving</VoteSendingBtn>
-          )}
-        </CardVoteTop>
       )}
       <div>
         <VoteChart vote={vote} voteWinner={winner} />
@@ -223,6 +218,12 @@ export const CardVote = ({ room, hideModalFunction }: CardVoteProps) => {
             </VoteBtn>
           </VotesBtns>
         )}
+
+        {votes.length > 0 && vote && vote.timeLeft > 0 && (
+          <CardVoteBottom>
+            <VoteSendingBtn onClick={() => send(votes)}> {votes.length} votes need saving</VoteSendingBtn>
+          </CardVoteBottom>
+        )}
       </div>
     </CardVoteBlock>
   )
@@ -280,15 +281,17 @@ const CardLogo = styled.img`
   height: 64px !important;
   border-radius: 50%;
 `
-const CardVoteTop = styled.div`
+const CardVoteBottom = styled.div`
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-end;
   align-items: center;
 `
 
 export const CardHeading = styled.h2`
   font-weight: bold;
   font-size: 17px;
+  line-height: 24px;
+  text-align: center;
 `
 
 const CardTop = styled.div`
@@ -298,12 +301,12 @@ const CardTop = styled.div`
   line-height: 24px;
 `
 
-const VoteSendingBtn = styled.button`
+export const VoteSendingBtn = styled.button`
-  padding-right: 28px;
-  font-size: 12px;
   font-weight: 500;
-  line-height: 20px;
+  font-size: 15px;
-  position: relative;
+  line-height: 22px;
+  margin-top: 24px;
+  margin-bottom: -16px;
   color: ${Colors.VioletDark};
 
   &:hover {
@@ -313,18 +316,6 @@ const VoteSendingBtn = styled.button`
   &:active {
     color: ${Colors.VioletDark};
   }
-
-  &::after {
-    content: '';
-    width: 24px;
-    height: 24px;
-    position: absolute;
-    top: 50%;
-    right: 0;
-    transform: translateY(-50%);
-    background-image: url(${rightIcon});
-    background-size: cover;
-  }
 `
 
 const RemoveBtn = styled.button`
@@ -336,10 +327,13 @@ const RemoveBtn = styled.button`
 `
 
 const CardHeadingEndedVote = styled.p`
+  max-width: 290px;
+  align-self: center;
   font-weight: normal;
-  font-size: 17px;
+  font-size: 15px;
-  line-height: 24px;
+  line-height: 22px;
   margin-bottom: 18px;
+  text-align: center;
 `
 const CardText = styled.p`
   line-height: 22px;

packages/DApp/src/components/Filter.tsx

@@ -44,7 +44,10 @@ export const FilterList = ({ value, setValue, options }: FilterListProps) => {
 const Filter = styled.button`
   display: flex;
   align-items: center;
-  padding: 0 9px;
+  height: 36px;
+  position: relative;
+  padding-left: 5px;
+  padding-right: 1px;
   font-weight: 500;
   font-size: 15px;
   line-height: 22px;
@@ -53,7 +56,6 @@ const Filter = styled.button`
   border-radius: 14px;
   appearance: none;
   outline: none;
-  position: relative;
 
   &:focus,
   &:active {
@@ -68,13 +70,14 @@ const Select = styled.div`
 `
 const SelectTrigger = styled.div`
   position: relative;
-  width: 175px;
+  min-width: 167px;
-  padding: 0 22px 0 25px;
+  padding: 0 28px;
+  box-sizing: border-box;
 
   &::before {
     content: '';
-    width: 18px;
+    width: 24px;
-    height: 10px;
+    height: 24px;
     position: absolute;
     top: 50%;
     left: 0;
@@ -84,8 +87,8 @@ const SelectTrigger = styled.div`
 
   &::after {
     content: '';
-    width: 12px;
+    width: 24px;
-    height: 7px;
+    height: 24px;
     position: absolute;
     top: 50%;
     right: 0;
@@ -96,8 +99,8 @@ const SelectTrigger = styled.div`
 const SelectOptions = styled.div`
   position: absolute;
   display: block;
-  top: calc(100% + 7px);
+  width: 175px;
-  left: 0;
+  top: calc(100% + 11px);
   right: 0;
   opacity: 0;
   visibility: hidden;
@@ -107,7 +110,6 @@ const SelectOptions = styled.div`
   border-radius: 16px 4px 16px 16px;
 
   &.opened {
-    margin-right: -10px;
     opacity: 1;
     background: ${Colors.White};
     visibility: visible;

packages/DApp/src/components/Input.tsx

@@ -20,6 +20,7 @@ export const Input = styled.input`
 
 export const Search = styled(Input)`
   width: 270px;
+  height: 36px;
   padding: 6px 36px;
   font-size: 15px;
   line-height: 22px;

packages/DApp/src/components/Link.tsx

@@ -27,9 +27,11 @@ export const LinkExternal = styled.a`
     background-size: contain;
   }
 `
-export const LinkInternal = styled.a`
+export const LinkInternal = styled.button`
   color: ${Colors.VioletDark};
   font-weight: 500;
+  font-size: 15px;
+  line-height: 22px;
 
   &:hover {
     color: ${Colors.Violet};
@@ -38,4 +40,8 @@ export const LinkInternal = styled.a`
   &:active {
     color: ${Colors.VioletDark};
   }
+
+  &:disabled {
+    color: ${Colors.GrayDisabledDark};
+  }
 `

packages/DApp/src/components/PageBar.tsx

@@ -47,6 +47,7 @@ const PageBarPlaceholder = styled.div<PageBarPlaceholderProps>`
 const PageBarContainer = styled.div`
   display: flex;
   justify-content: space-between;
+  align-items: center;
   margin: 0 auto;
 `
 

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

@@ -2,28 +2,26 @@ import React, { useState } from 'react'
 import styled from 'styled-components'
 import { Colors, ColumnFlexDiv } from '../../constants/styles'
 import { addCommas } from '../../helpers/addCommas'
-import { LinkInternal } from '../Link'
+import { CardHeading, CardVoteBlock, VoteBtn, VoteSendingBtn } from '../Card'
-import rightIcon from '../../assets/images/arrowRight.svg'
-import { CardHeading, CardVoteBlock, VoteBtn } from '../Card'
 import { CommunityDetail } from '../../models/community'
 import { Modal } from '../Modal'
 import { FeatureModal } from './FeatureModal'
 import { VoteConfirmModal } from './VoteConfirmModal'
 import { OngoingVote } from './OngoingVote'
-import { useEthers } from '@usedapp/core'
+import { useContractFunction, useEthers } from '@usedapp/core'
 import { useContracts } from '../../hooks/useContracts'
 import { useContractCall } from '@usedapp/core'
-
+import { useVotesAggregate } from '../../hooks/useVotesAggregate'
+import { votingFromRoom } from '../../helpers/voting'
 interface CardFeatureProps {
   community: CommunityDetail
   heading: string
-  text: string
   icon: string
   sum?: number
   timeLeft?: string
 }
 
-export const CardFeature = ({ community, heading, text, icon, sum, timeLeft }: CardFeatureProps) => {
+export const CardFeature = ({ community, heading, icon, sum, timeLeft }: CardFeatureProps) => {
   const { account } = useEthers()
   const [showFeatureModal, setShowFeatureModal] = useState(false)
   const [showConfirmModal, setShowConfirmModal] = useState(false)
@@ -33,6 +31,7 @@ export const CardFeature = ({ community, heading, text, icon, sum, timeLeft }: C
     setShowConfirmModal(val)
     setShowFeatureModal(false)
   }
+
   const { votingContract } = useContracts()
   const [roomNumber] =
     useContractCall({
@@ -42,38 +41,37 @@ export const CardFeature = ({ community, heading, text, icon, sum, timeLeft }: C
       args: [community.publicKey],
     }) ?? []
 
-  const room = useContractCall({
+  const { votes } = useVotesAggregate(roomNumber)
+  const { send } = useContractFunction(votingContract, 'castVotes')
+
+  const votingRoom = useContractCall({
     abi: votingContract.interface,
     address: votingContract.address,
     method: 'votingRoomMap',
     args: [roomNumber],
   }) as any
 
+  let currentVoting
+  if (votingRoom) {
+    currentVoting = { ...votingFromRoom(votingRoom), room: roomNumber }
+  }
+
   return (
     <CardVoteBlock style={{ backgroundColor: `${Colors.GrayLight}` }}>
-      <FeatureTop>
+      <CardHeading style={{ fontWeight: timeLeft ? 'normal' : 'bold', fontSize: timeLeft ? '15px' : '17px' }}>
-        <CardHeading>{heading}</CardHeading>
+        {heading}
-        {roomNumber > 0 && room && (
+      </CardHeading>
-          <div>
-            {showOngoingVote && (
-              <OngoingVote
-                community={community}
-                setShowOngoingVote={setShowOngoingVote}
-                room={{ ...room, room: roomNumber }}
-              />
-            )}
-            <CardLinkFeature onClick={() => setShowOngoingVote(true)}>Ongoing vote for removal</CardLinkFeature>
-          </div>
-        )}
-      </FeatureTop>
 
       <FeatureVote>
-        <p>{text}</p>
+        <FeatureIcon>{icon}</FeatureIcon>
-        <p style={{ fontSize: '24px' }}>{icon}</p>
 
         {timeLeft && <span>{timeLeft}</span>}
 
-        {sum && <span style={{ fontWeight: 'normal' }}>{addCommas(sum)} SNT</span>}
+        {sum && (
+          <FeatureText>
+            <span>{addCommas(sum)}</span> SNT votes for this community
+          </FeatureText>
+        )}
       </FeatureVote>
       <div>
         {showFeatureModal && (
@@ -90,48 +88,49 @@ export const CardFeature = ({ community, heading, text, icon, sum, timeLeft }: C
           Feature this community! <span style={{ fontSize: '20px' }}>⭐️</span>
         </FeatureBtn>
       </div>
+
+      {currentVoting && (
+        <FeatureBottom>
+          {showOngoingVote && (
+            <OngoingVote community={community} setShowOngoingVote={setShowOngoingVote} room={votingRoom} />
+          )}
+          <VoteSendingBtn onClick={() => setShowOngoingVote(true)}>Removal vote in progress</VoteSendingBtn>
+          {votes.length > 0 && currentVoting && currentVoting?.timeLeft > 0 && (
+            <VoteSendingBtn onClick={() => send(votes)}> {votes.length} votes need saving</VoteSendingBtn>
+          )}
+        </FeatureBottom>
+      )}
     </CardVoteBlock>
   )
 }
 
-const CardLinkFeature = styled(LinkInternal)`
+const FeatureBottom = styled.div`
-  padding-right: 28px;
-  font-size: 12px;
-  line-height: 20px;
-  position: relative;
-
-  &::after {
-    content: '';
-    width: 24px;
-    height: 24px;
-    position: absolute;
-    top: 50%;
-    right: 0;
-    transform: translateY(-50%);
-    background-image: url(${rightIcon});
-    background-size: cover;
-  }
-`
-const FeatureTop = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
 `
 
+const FeatureIcon = styled.p`
+  font-size: 24px;
+  margin-bottom: 8px;
+`
+
 const FeatureBtn = styled(VoteBtn)`
   width: 100%;
 `
 const FeatureVote = styled(ColumnFlexDiv)`
-  margin: 45px auto 32px;
+  margin: 32px auto;
-  max-width: 290px;
+  max-width: 330px;
   text-align: center;
 
-  & > p {
+  & > span {
-    font-size: 17px;
+    font-weight: bold;
-    line-height: 18px;
+    font-size: 15px;
-    margin-bottom: 8px;
+    line-height: 22px;
-  }
+  }
-
+`
+
+const FeatureText = styled.p`
   & > span {
     font-weight: bold;
     font-size: 15px;

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

@@ -71,7 +71,7 @@ export function ProposeModal({
               availableAmount={availableAmount}
               setProposingAmount={setProposingAmount}
               proposingAmount={proposingAmount}
-              disabled={!communityFound || !proposingAmount}
+              disabled={!communityFound}
             />
           </VoteProposeWrap>
         )}

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

@@ -61,7 +61,6 @@ export function RemoveAmountPicker({ community, availableAmount, setShowConfirmM
         availableAmount={availableAmount}
         setProposingAmount={setProposingAmount}
         proposingAmount={proposingAmount}
-        disabled={disabled}
       />
       <VoteConfirmBtn disabled={disabled} onClick={() => setShowConfirmModal(true)}>
         Confirm vote to remove community

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

@@ -39,7 +39,6 @@ export function VoteModal({
         availableAmount={availableAmount}
         setProposingAmount={setProposingAmount}
         proposingAmount={proposingAmount}
-        disabled={disabled}
       />
 
       <VoteConfirmBtn

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

@@ -17,9 +17,8 @@ export const DirectoryCardSkeleton = () => {
             <Skeleton width="50%" />
           </CardHeader>
           <Column>
-            <Skeleton width="160px" height="18px" />
             <span>⭐️</span>
-            <Skeleton width="120px" height="22px" />
+            <Skeleton width="200px" height="22px" />
           </Column>
           <SkeletonButton />
         </CardVoteBlock>
@@ -30,6 +29,7 @@ export const DirectoryCardSkeleton = () => {
 
 const CardHeader = styled.div`
   display: flex;
+  justify-content: center;
   width: 100%;
   margin-bottom: 54px;
 `
@@ -40,7 +40,7 @@ const SkeletonButton = styled(Skeleton)`
 
 const Column = styled(ColumnFlexDiv)`
   justify-content: space-between;
-  height: 80px;
+  height: 60px;
   margin-bottom: 32px;
 
   span {

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

@@ -13,7 +13,6 @@ import { useConfig } from '../../providers/config'
 import { Colors } from '../../constants/styles'
 import { WeeklyFeature } from '../WeeklyFeature'
 import { DirectoryCardSkeleton } from './DirectoryCardSkeleton'
-
 interface DirectoryCardProps {
   community: CommunityDetail
 }
@@ -36,8 +35,7 @@ function DirectoryCard({ community }: DirectoryCardProps) {
       <CardVoteWrap style={{ backgroundColor: `${Colors.GrayLight}` }}>
         <CardFeature
           community={community}
-          heading="Feature this community?"
+          heading={timeLeft ? 'This community has to wait until it can be featured again' : 'Weekly Feature vote'}
-          text={timeLeft ? 'This community has to wait until it can be featured again' : 'Weekly Feature vote'}
           icon={timeLeft ? '⏳' : '⭐'}
           sum={community.directoryInfo.featureVotes?.toNumber()}
           timeLeft={timeLeft}

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

@@ -15,7 +15,7 @@ export interface VoteProposingProps {
   availableAmount: number
   setProposingAmount: (show: number) => void
   proposingAmount: number
-  disabled: boolean
+  disabled?: boolean
 }
 
 export function VotePropose({

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

@@ -42,6 +42,7 @@ export const VotingCardSkeleton = () => {
 
 const CardHeader = styled.div`
   display: flex;
+  justify-content: center;
   width: 100%;
   margin-bottom: 54px;
 `

packages/DApp/src/helpers/fomatTimeLeft.ts

@@ -1,5 +1,5 @@
 import timeConvert from 'humanize-duration'
 
 export function formatTimeLeft(timeLeft: number) {
-  return timeConvert(timeLeft, { largest: 1, round: true }) + (timeLeft < 0 ? ' ago' : ' left')
+  return timeLeft > 0 ? timeConvert(timeLeft, { largest: 1, round: true }) + ' left' : 'Vote ended'
 }

packages/DApp/test/formatTimeLeft.test.ts

@@ -12,12 +12,12 @@ describe('formatTimeLeft', () => {
     expect(formatTimeLeft(172800000)).to.eq('2 days left')
   })
   it('seconds ago', () => {
-    expect(formatTimeLeft(-10000)).to.eq('10 seconds ago')
+    expect(formatTimeLeft(-10000)).to.eq('Vote ended')
   })
   it('hours ago', () => {
-    expect(formatTimeLeft(-8000000)).to.eq('2 hours ago')
+    expect(formatTimeLeft(-8000000)).to.eq('Vote ended')
   })
   it('days ago', () => {
-    expect(formatTimeLeft(-172800000)).to.eq('2 days ago')
+    expect(formatTimeLeft(-172800000)).to.eq('Vote ended')
   })
 })