status-im
/
community-dapp
mirror of https://github.com/status-im/community-dapp.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add and improve card styles (#49) 

* Align tags

* Add CardLogo wrap

* Add green dot to Account

* Change CardVote layout
This commit is contained in:
Maria Rushkova 2021-06-22 13:05:27 +02:00 committed by GitHub
parent 78cf8e1187
commit d57ba3c209
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 71 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
packages/DApp/src/components/Card.tsx
View File

@ -67,7 +67,11 @@ export const CardCommunity = ({ community, showRemoveButton }: CardCommunityProp
</Modal> </Modal>
)} )}
<Community> <Community>
<CardLogo src={community.icon} alt={`${community.name} logo`} /> <CardLogoWrap>
{' '}
<CardLogo src={community.icon} alt={`${community.name} logo`} />
</CardLogoWrap>
<CommunityInfo> <CommunityInfo>
<CardTop> <CardTop>
<CardHeading>{community.name}</CardHeading> <CardHeading>{community.name}</CardHeading>
@ -131,47 +135,49 @@ export const CardVote = ({ community }: CardVoteProps) => {
) : ( ) : (
<CardHeading>{voteConstants.question}</CardHeading> <CardHeading>{voteConstants.question}</CardHeading>
)} )}
<VoteChart vote={vote} voteWinner={winner} /> <div>
<VoteChart vote={vote} voteWinner={winner} />
{winner ? ( {winner ? (
<VoteBtnFinal> <VoteBtnFinal>
Finalize the vote <span>✍️</span> Finalize the vote <span>✍️</span>
</VoteBtnFinal> </VoteBtnFinal>
) : ( ) : (
<VotesBtns> <VotesBtns>
{showVoteModal && ( {showVoteModal && (
<Modal heading={`${vote?.type} ${community.name} ?`} setShowModal={setShowVoteModal}> <Modal heading={`${vote?.type} ${community.name} ?`} setShowModal={setShowVoteModal}>
<VoteModal <VoteModal
vote={vote} vote={vote}
selectedVote={selectedVoted} selectedVote={selectedVoted}
availableAmount={65245346} availableAmount={65245346}
setShowConfirmModal={setNext} setShowConfirmModal={setNext}
/>{' '} />{' '}
</Modal> </Modal>
)} )}
{showConfirmModal && ( {showConfirmModal && (
<Modal setShowModal={setShowConfirmModal}> <Modal setShowModal={setShowConfirmModal}>
<VoteConfirmModal community={community} selectedVote={selectedVoted} setShowModal={setNext} /> <VoteConfirmModal community={community} selectedVote={selectedVoted} setShowModal={setNext} />
</Modal> </Modal>
)} )}
<VoteBtn <VoteBtn
onClick={() => { onClick={() => {
setSelectedVoted(voteConstants.against) setSelectedVoted(voteConstants.against)
setShowVoteModal(true) setShowVoteModal(true)
}} }}
> >
{voteConstants.against.text} <span>{voteConstants.against.icon}</span> {voteConstants.against.text} <span>{voteConstants.against.icon}</span>
</VoteBtn> </VoteBtn>
<VoteBtn <VoteBtn
onClick={() => { onClick={() => {
setSelectedVoted(voteConstants.for) setSelectedVoted(voteConstants.for)
setShowVoteModal(true) setShowVoteModal(true)
}} }}
> >
{voteConstants.for.text} <span>{voteConstants.for.icon}</span> {voteConstants.for.text} <span>{voteConstants.for.icon}</span>
</VoteBtn> </VoteBtn>
</VotesBtns> </VotesBtns>
)} )}
</div>
</CardVoteBlock> </CardVoteBlock>
) )
} }
@ -204,12 +210,18 @@ const CommunityInfo = styled.div`
flex-direction: column; flex-direction: column;
` `
const CardLogoWrap = styled.div`
width: 64px !important;
height: 64px !important;
object-fit: cover;
margin-right: 16px;
`
const CardLogo = styled.img` const CardLogo = styled.img`
width: 64px !important; width: 64px !important;
height: 64px !important; height: 64px !important;
border-radius: 50%; border-radius: 50%;
margin-right: 16px;
` `
export const CardHeading = styled.h2` export const CardHeading = styled.h2`
font-weight: bold; font-weight: bold;
font-size: 17px; font-size: 17px;
@ -246,7 +258,7 @@ const CardTags = styled.div`
flex-wrap: wrap; flex-wrap: wrap;
` `
const Tag = styled.div` const Tag = styled.div`
margin: 5px; margin: 0 8px 8px 0;
padding: 0 10px; padding: 0 10px;
border: 1px solid ${Colors.VioletDark}; border: 1px solid ${Colors.VioletDark};
box-sizing: border-box; box-sizing: border-box;

16
packages/DApp/src/components/top/TopBar.tsx
View File

@ -118,12 +118,26 @@ const ButtonConnect = styled(StatusConnectButton)`
padding: 10px 27px; padding: 10px 27px;
` `
const Account = styled.button` const Account = styled.button`
position: relative;
font-weight: 500; font-weight: 500;
font-size: 13px; font-size: 13px;
line-height: 22px; line-height: 22px;
color: ${Colors.Black}; color: ${Colors.Black};
padding: 11px 12px 11px 17px; padding: 11px 12px 11px 28px;
background: ${Colors.White}; background: ${Colors.White};
border: 1px solid ${Colors.GrayBorder}; border: 1px solid ${Colors.GrayBorder};
border-radius: 21px; 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%;
}
` `

1
packages/DApp/src/constants/styles.ts
View File

@ -17,6 +17,7 @@ export const Colors = {
GreyTextDisabled: '#B1B1B1', GreyTextDisabled: '#B1B1B1',
GrayLight: '#FBFCFE', GrayLight: '#FBFCFE',
GrayBorder: '#EEF2F5', GrayBorder: '#EEF2F5',
Green: '#4EBC60',
ShadowCard: '0px 2px 12px rgba(0, 0, 0, 0.15)', ShadowCard: '0px 2px 12px rgba(0, 0, 0, 0.15)',
} }