status-im/visual-identity
2
0
Fork 0
mirror of https://github.com/status-im/visual-identity.git synced 2025-02-08 10:44:33 +00:00
Code Issues Projects Releases Wiki Activity

make slider handle bigger

Browse Source 
in order to make it an easier target on mobile
This commit is contained in:
Barry Gitarts 2018-07-01 13:32:12 -04:00
parent e5f880680d
commit 091d69f1dd
1 changed files with 6 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/components/simple-voting/PollsList.js
View File

@ -17,6 +17,10 @@ const styles = {
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
alignItems: 'center', alignItems: 'center',
},
thumb: {
width: '24px',
height: '24px'
} }
}; };
@ -112,6 +116,7 @@ class Poll extends PureComponent {
const { fromWei } = web3.utils; const { fromWei } = web3.utils;
const maxValue = Math.floor(Math.sqrt(balance)); const maxValue = Math.floor(Math.sqrt(balance));
const buttonText = originalValue != 0 && value != originalValue ? 'Change Vote' : 'Vote'; const buttonText = originalValue != 0 && value != originalValue ? 'Change Vote' : 'Vote';
console.log(classes)
return ( return (
<Card> <Card>
<CardContent> <CardContent>
@ -124,7 +129,7 @@ class Poll extends PureComponent {
</Typography> </Typography>
</CardContent> </CardContent>
<CardActions className={classes.card}> <CardActions className={classes.card}>
<Slider style={{ width: '95%' }} disabled={disableVote} value={value || 0} min={0} max={maxValue} step={1} onChange={this.handleChange} /> <Slider style={{ width: '95%' }} classes={{ thumb: classes.thumb }} disabled={disableVote} value={value || 0} min={0} max={maxValue} step={1} onChange={this.handleChange} />
{isSubmitting ? <CircularProgress /> : <Button variant="contained" disabled={disableVote} color="primary" onClick={this.handleClick}>{buttonText}</Button>} {isSubmitting ? <CircularProgress /> : <Button variant="contained" disabled={disableVote} color="primary" onClick={this.handleClick}>{buttonText}</Button>}
</CardActions> </CardActions>
</Card> </Card>