diff --git a/packages/DApp/src/components/Card.tsx b/packages/DApp/src/components/Card.tsx index 7497264..025973f 100644 --- a/packages/DApp/src/components/Card.tsx +++ b/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 ( - + {showHistoryModal && ( @@ -60,7 +60,7 @@ export const CardCommunity = ({ community, showRemoveButton }: CardCommunityProp )} {showRemoveModal && ( { setShowRemoveModal(val) }} @@ -99,7 +99,7 @@ export const CardCommunity = ({ community, showRemoveButton }: CardCommunityProp Etherscan setShowHistoryModal(true)}>Voting history - + ) } @@ -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; diff --git a/packages/DApp/src/components/Input.tsx b/packages/DApp/src/components/Input.tsx index 5b9e964..d3479d3 100644 --- a/packages/DApp/src/components/Input.tsx +++ b/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}; diff --git a/packages/DApp/src/components/WeeklyFeature.tsx b/packages/DApp/src/components/WeeklyFeature.tsx index 40c089b..ed867ea 100644 --- a/packages/DApp/src/components/WeeklyFeature.tsx +++ b/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; - } ` diff --git a/packages/DApp/src/components/card/FeatureModal.tsx b/packages/DApp/src/components/card/FeatureModal.tsx index 5d7169b..f760730 100644 --- a/packages/DApp/src/components/card/FeatureModal.tsx +++ b/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 ( diff --git a/packages/DApp/src/components/card/RemoveAmountPicker.tsx b/packages/DApp/src/components/card/RemoveAmountPicker.tsx index ad4685b..b1d31c2 100644 --- a/packages/DApp/src/components/card/RemoveAmountPicker.tsx +++ b/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} /> - setShowConfirmModal(true)}>Confirm vote to remove community + setShowConfirmModal(true)}> + Confirm vote to remove community + ) } diff --git a/packages/DApp/src/components/skeleton/CommunitySkeleton.tsx b/packages/DApp/src/components/skeleton/CommunitySkeleton.tsx index bf16b8d..594fdd6 100644 --- a/packages/DApp/src/components/skeleton/CommunitySkeleton.tsx +++ b/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 { CardLinks } from '../Card' +import { CardCommunityBlock, 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 ( - + {' '} @@ -24,7 +23,7 @@ export const CommunitySkeleton = () => { Etherscan Voting history - + ) } diff --git a/packages/DApp/src/components/votes/VoteChart.tsx b/packages/DApp/src/components/votes/VoteChart.tsx index b59f47d..8d2d67b 100644 --- a/packages/DApp/src/components/votes/VoteChart.tsx +++ b/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) / (voteSum + proposingAmount) + ? (100 * (votesAgainst + proposingAmount)) / (voteSum + proposingAmount) - 3 + : (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; diff --git a/packages/DApp/src/components/votes/VoteGraphBar.tsx b/packages/DApp/src/components/votes/VoteGraphBar.tsx index f5d488b..ee06270 100644 --- a/packages/DApp/src/components/votes/VoteGraphBar.tsx +++ b/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 ( - +