diff --git a/packages/DApp/src/components/Card.tsx b/packages/DApp/src/components/Card.tsx index 6ab20e3..6839d9e 100644 --- a/packages/DApp/src/components/Card.tsx +++ b/packages/DApp/src/components/Card.tsx @@ -67,7 +67,11 @@ export const CardCommunity = ({ community, showRemoveButton }: CardCommunityProp )} - + + {' '} + + + {community.name} @@ -131,47 +135,49 @@ export const CardVote = ({ community }: CardVoteProps) => { ) : ( {voteConstants.question} )} - +
+ - {winner ? ( - - Finalize the vote ✍️ - - ) : ( - - {showVoteModal && ( - - {' '} - - )} - {showConfirmModal && ( - - - - )} - { - setSelectedVoted(voteConstants.against) - setShowVoteModal(true) - }} - > - {voteConstants.against.text} {voteConstants.against.icon} - - { - setSelectedVoted(voteConstants.for) - setShowVoteModal(true) - }} - > - {voteConstants.for.text} {voteConstants.for.icon} - - - )} + {winner ? ( + + Finalize the vote ✍️ + + ) : ( + + {showVoteModal && ( + + {' '} + + )} + {showConfirmModal && ( + + + + )} + { + setSelectedVoted(voteConstants.against) + setShowVoteModal(true) + }} + > + {voteConstants.against.text} {voteConstants.against.icon} + + { + setSelectedVoted(voteConstants.for) + setShowVoteModal(true) + }} + > + {voteConstants.for.text} {voteConstants.for.icon} + + + )} +
) } @@ -204,12 +210,18 @@ const CommunityInfo = styled.div` flex-direction: column; ` +const CardLogoWrap = styled.div` + width: 64px !important; + height: 64px !important; + object-fit: cover; + margin-right: 16px; +` const CardLogo = styled.img` width: 64px !important; height: 64px !important; border-radius: 50%; - margin-right: 16px; ` + export const CardHeading = styled.h2` font-weight: bold; font-size: 17px; @@ -246,7 +258,7 @@ const CardTags = styled.div` flex-wrap: wrap; ` const Tag = styled.div` - margin: 5px; + margin: 0 8px 8px 0; padding: 0 10px; border: 1px solid ${Colors.VioletDark}; box-sizing: border-box; diff --git a/packages/DApp/src/components/top/TopBar.tsx b/packages/DApp/src/components/top/TopBar.tsx index ed4260f..5aadefd 100644 --- a/packages/DApp/src/components/top/TopBar.tsx +++ b/packages/DApp/src/components/top/TopBar.tsx @@ -118,12 +118,26 @@ const ButtonConnect = styled(StatusConnectButton)` padding: 10px 27px; ` const Account = styled.button` + position: relative; font-weight: 500; font-size: 13px; line-height: 22px; color: ${Colors.Black}; - padding: 11px 12px 11px 17px; + padding: 11px 12px 11px 28px; background: ${Colors.White}; border: 1px solid ${Colors.GrayBorder}; border-radius: 21px; + + &::before { + content: ''; + width: 6px; + height: 6px; + position: absolute; + top: 50%; + left: 17px; + transform: translate(-50%, -50%); + background-color: ${Colors.Green}; + bacground-position: center; + border-radius: 50%; + } ` diff --git a/packages/DApp/src/constants/styles.ts b/packages/DApp/src/constants/styles.ts index 710c17e..365d502 100644 --- a/packages/DApp/src/constants/styles.ts +++ b/packages/DApp/src/constants/styles.ts @@ -17,6 +17,7 @@ export const Colors = { GreyTextDisabled: '#B1B1B1', GrayLight: '#FBFCFE', GrayBorder: '#EEF2F5', + Green: '#4EBC60', ShadowCard: '0px 2px 12px rgba(0, 0, 0, 0.15)', }