add active styles for settings menu

This commit is contained in:
Mikhail Mikheev 2019-06-17 14:35:58 +04:00
parent e6025e42ce
commit 7dd15740a0
3 changed files with 39 additions and 22 deletions

View File

@ -0,0 +1,9 @@
import React from 'react'
const Threshold = () => {
return <div>
This will change the threshold
</div>
}
export default Threshold

View File

@ -1,5 +1,6 @@
// @flow // @flow
import * as React from 'react' import * as React from 'react'
import cn from 'classnames'
import { withStyles } from '@material-ui/core/styles' import { withStyles } from '@material-ui/core/styles'
import Block from '~/components/layout/Block' import Block from '~/components/layout/Block'
import Col from '~/components/layout/Col' import Col from '~/components/layout/Col'
@ -7,10 +8,12 @@ import Row from '~/components/layout/Row'
import RemoveSafeModal from './RemoveSafeModal' import RemoveSafeModal from './RemoveSafeModal'
import Paragraph from '~/components/layout/Paragraph' import Paragraph from '~/components/layout/Paragraph'
import Hairline from '~/components/layout/Hairline' import Hairline from '~/components/layout/Hairline'
import Threshold from './Threshold'
import { styles } from './style' import { styles } from './style'
type State = { type State = {
showRemoveSafe: boolean, showRemoveSafe: boolean,
menuOptionIndex: number,
} }
type Props = { type Props = {
@ -44,11 +47,7 @@ class Settings extends React.Component<Props, State> {
render() { render() {
const { showRemoveSafe, menuOptionIndex } = this.state const { showRemoveSafe, menuOptionIndex } = this.state
const { const {
classes, classes, granted, etherScanLink, safeAddress, safeName,
granted,
etherScanLink,
safeAddress,
safeName,
} = this.props } = this.props
return ( return (
@ -73,21 +72,33 @@ class Settings extends React.Component<Props, State> {
<Block className={classes.root}> <Block className={classes.root}>
<Col xs={3} layout="column"> <Col xs={3} layout="column">
<Block className={classes.menu}> <Block className={classes.menu}>
<Row className={classes.menuOption} onClick={this.handleChange(1)}> <Row
className={cn(classes.menuOption, menuOptionIndex === 1 && classes.active)}
onClick={this.handleChange(1)}
>
Safe name Safe name
</Row> </Row>
<Hairline /> <Hairline />
{granted && ( {granted && (
<React.Fragment> <React.Fragment>
<Row className={classes.menuOption} onClick={this.handleChange(2)}> <Row
className={cn(classes.menuOption, menuOptionIndex === 2 && classes.active)}
onClick={this.handleChange(2)}
>
Owners Owners
</Row> </Row>
<Hairline /> <Hairline />
<Row className={classes.menuOption} onClick={this.handleChange(3)}> <Row
className={cn(classes.menuOption, menuOptionIndex === 3 && classes.active)}
onClick={this.handleChange(3)}
>
Required confirmations Required confirmations
</Row> </Row>
<Hairline /> <Hairline />
<Row className={classes.menuOption} onClick={this.handleChange(4)}> <Row
className={cn(classes.menuOption, menuOptionIndex === 4 && classes.active)}
onClick={this.handleChange(4)}
>
Modules Modules
</Row> </Row>
<Hairline /> <Hairline />
@ -97,18 +108,10 @@ class Settings extends React.Component<Props, State> {
</Col> </Col>
<Col xs={9} layout="column"> <Col xs={9} layout="column">
<Block className={classes.container}> <Block className={classes.container}>
{menuOptionIndex === 1 && ( {menuOptionIndex === 1 && <p>To be done</p>}
<p>To be done</p> {granted && menuOptionIndex === 2 && <p>To be done</p>}
)} {granted && menuOptionIndex === 3 && <Threshold />}
{granted && menuOptionIndex === 2 && ( {granted && menuOptionIndex === 4 && <p>To be done</p>}
<p>To be done</p>
)}
{granted && menuOptionIndex === 3 && (
<p>To be done</p>
)}
{granted && menuOptionIndex === 4 && (
<p>To be done</p>
)}
</Block> </Block>
</Col> </Col>
</Block> </Block>

View File

@ -1,6 +1,6 @@
// @flow // @flow
import { import {
sm, md, lg, border, sm, md, lg, border, secondary, bolderFont,
} from '~/theme/variables' } from '~/theme/variables'
export const styles = (theme: Object) => ({ export const styles = (theme: Object) => ({
@ -22,6 +22,11 @@ export const styles = (theme: Object) => ({
alignItems: 'center', alignItems: 'center',
cursor: 'pointer', cursor: 'pointer',
}, },
active: {
backgroundColor: '#f4f4f9',
color: secondary,
fontWeight: bolderFont,
},
container: { container: {
padding: lg, padding: lg,
}, },