add active styles for settings menu
This commit is contained in:
parent
e6025e42ce
commit
7dd15740a0
|
@ -0,0 +1,9 @@
|
||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
const Threshold = () => {
|
||||||
|
return <div>
|
||||||
|
This will change the threshold
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Threshold
|
|
@ -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>
|
||||||
|
|
|
@ -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,
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue