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

Change VoteFilter layout (#82)

This commit is contained in:
Maria Rushkova 2021-07-05 10:37:22 +02:00 committed by GitHub
parent f016099642
commit 27e3c26ee1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 40 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
packages/DApp/src/components/votes/VotingCards.tsx
View File

@ -3,7 +3,7 @@ import { VotingSortingEnum } from '../../models/community'
import styled from 'styled-components' import styled from 'styled-components'
import { FilterList } from '../Filter' import { FilterList } from '../Filter'
import { PageBar } from '../PageBar' import { PageBar } from '../PageBar'
import { ButtonSecondary } from '../Button' import { ButtonPrimary } from '../Button'
import { Colors } from '../../constants/styles' import { Colors } from '../../constants/styles'
import { VotingCard } from './VotingCard' import { VotingCard } from './VotingCard'
import { Search } from '../Input' import { Search } from '../Input'
@ -34,15 +34,20 @@ export function VotingCards() {
/> />
<VoteFilter> <VoteFilter>
<span>Vote types:</span> <span>Vote types:</span>
<VoteType className={voteType == '' ? 'selected' : 'notSelected'} onClick={() => setVoteType('')}> <VoteTypeWrapper>
All <VoteType className={voteType == '' ? 'selected' : 'notSelected'} onClick={() => setVoteType('')}>
</VoteType> All
<VoteType className={voteType == 'Add' ? 'selected' : 'notSelected'} onClick={() => setVoteType('Add')}> </VoteType>
Add <VoteType className={voteType == 'Add' ? 'selected' : 'notSelected'} onClick={() => setVoteType('Add')}>
</VoteType> Add
<VoteType className={voteType == 'Remove' ? 'selected' : 'notSelected'} onClick={() => setVoteType('Remove')}> </VoteType>
Remove <VoteType
</VoteType> className={voteType == 'Remove' ? 'selected' : 'notSelected'}
onClick={() => setVoteType('Remove')}
>
Remove
</VoteType>
</VoteTypeWrapper>
</VoteFilter> </VoteFilter>
<FilterList value={sortedBy} setValue={setSortedBy} options={VotingSortingOptions} /> <FilterList value={sortedBy} setValue={setSortedBy} options={VotingSortingOptions} />
</PageBar> </PageBar>
@ -57,18 +62,40 @@ const VoteFilter = styled.div`
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
width: 315px; width: 310px;
color: ${Colors.VioletDark}; color: ${Colors.VioletDark};
` `
const VoteType = styled(ButtonSecondary)` const VoteTypeWrapper = styled.div`
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
color: ${Colors.VioletDark}; width: 220px;
background-color: ${Colors.VioletSecondaryLight};
padding: 4px;
border-radius: 8px;
`
const VoteType = styled(ButtonPrimary)`
display: flex;
justify-content: space-between;
background-color: ${Colors.Violet};
color: ${Colors.White};
line-height: 22px; line-height: 22px;
font-weight: 500;
padding: 5px 12px; padding: 5px 12px;
&:not(:disabled):active,
&:not(:disabled):focus {
background: ${Colors.Violet};
}
&:not(:disabled):hover {
background: ${Colors.VioletDark};
color: ${Colors.White};
}
&.notSelected { &.notSelected {
background: none; background: none;
color: ${Colors.VioletDark};
} }
` `