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 (
-
+
-
+
)
@@ -50,7 +50,7 @@ const VoteGraph = styled.div`
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`
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;
diff --git a/packages/DApp/src/constants/styles.ts b/packages/DApp/src/constants/styles.ts
index c91f1d8..28a1045 100644
--- a/packages/DApp/src/constants/styles.ts
+++ b/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',
diff --git a/packages/DApp/src/constants/voteTypes.ts b/packages/DApp/src/constants/voteTypes.ts
index acdc411..7a825f3 100644
--- a/packages/DApp/src/constants/voteTypes.ts
+++ b/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: '🗑',