lamassu/lamassu-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: set IconButton stroke colors to comet

Browse source 
fix: replaced edit buttons of the BooleanPropertiesTable component and
Contact Info and Terms & Conditions pages
This commit is contained in:
Liordino Neto 2020-10-28 00:36:54 -03:00 • committed by Josh Harvey
parent a1cc7cad13
commit fbd075723a
5 changed files with 40 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

12
new-lamassu-admin/src/components/booleanPropertiesTable/BooleanPropertiesTable.js
View file

@ -6,7 +6,7 @@ import React, { useState, memo } from 'react'
import * as Yup from 'yup' import * as Yup from 'yup'
import PromptWhenDirty from 'src/components/PromptWhenDirty' import PromptWhenDirty from 'src/components/PromptWhenDirty'
import { Link } from 'src/components/buttons' import { Link, IconButton } from 'src/components/buttons'
import { RadioGroup } from 'src/components/inputs/formik' import { RadioGroup } from 'src/components/inputs/formik'
import { Table, TableBody, TableRow, TableCell } from 'src/components/table' import { Table, TableBody, TableRow, TableCell } from 'src/components/table'
import { H4 } from 'src/components/typography' import { H4 } from 'src/components/typography'
@ -70,11 +70,11 @@ const BooleanPropertiesTable = memo(
</Link> </Link>
</div> </div>
) : ( ) : (
<div className={classes.transparentButton}> <IconButton
<button disabled={disabled} onClick={() => setEditing(true)}> className={classes.transparentButton}
{disabled ? <EditIconDisabled /> : <EditIcon />} onClick={() => setEditing(true)}>
</button> {disabled ? <EditIconDisabled /> : <EditIcon />}
</div> </IconButton>
)} )}
</div> </div>
<PromptWhenDirty /> <PromptWhenDirty />

11
new-lamassu-admin/src/components/buttons/IconButton.js
View file

@ -1,6 +1,8 @@
import { makeStyles, IconButton as IconB } from '@material-ui/core' import { makeStyles, IconButton as IconB } from '@material-ui/core'
import React from 'react' import React from 'react'
import { comet } from 'src/styling/variables'
const styles = { const styles = {
label: ({ size }) => ({ label: ({ size }) => ({
width: size, width: size,
@ -12,6 +14,15 @@ const styles = {
}, },
'&:hover': { '&:hover': {
backgroundColor: 'inherit' backgroundColor: 'inherit'
},
'&:hover rect': {
stroke: comet
},
'&:hover polygon': {
stroke: comet
},
'&:hover path': {
stroke: comet
} }
} }
} }

12
new-lamassu-admin/src/pages/OperatorInfo/ContactInfo.js
View file

@ -9,7 +9,7 @@ import * as Yup from 'yup'
import ErrorMessage from 'src/components/ErrorMessage' import ErrorMessage from 'src/components/ErrorMessage'
import PromptWhenDirty from 'src/components/PromptWhenDirty' import PromptWhenDirty from 'src/components/PromptWhenDirty'
import { Link } from 'src/components/buttons' import { Link, IconButton } from 'src/components/buttons'
import Switch from 'src/components/inputs/base/Switch' import Switch from 'src/components/inputs/base/Switch'
import { TextInput } from 'src/components/inputs/formik' import { TextInput } from 'src/components/inputs/formik'
import { P, H4, Info3, Label1, Label2, Label3 } from 'src/components/typography' import { P, H4, Info3, Label1, Label2, Label3 } from 'src/components/typography'
@ -210,11 +210,11 @@ const ContactInfo = ({ wizard }) => {
<div className={classes.rowWrapper}> <div className={classes.rowWrapper}>
<H4>Info card</H4> <H4>Info card</H4>
{!editing && ( {!editing && (
<div className={classes.transparentButton}> <IconButton
<button onClick={() => setEditing(true)}> className={classes.transparentButton}
<EditIcon /> onClick={() => setEditing(true)}>
</button> <EditIcon />
</div> </IconButton>
)} )}
</div> </div>
<Formik <Formik

20
new-lamassu-admin/src/pages/OperatorInfo/OperatorInfo.styles.js
View file

@ -7,16 +7,18 @@ const { p } = typographyStyles
const styles = { const styles = {
header: { header: {
display: 'flex', display: 'flex',
'& > p': { alignItems: 'center',
marginTop: 0 position: 'relative',
flex: 'wrap'
},
transparentButton: {
'& > *': {
margin: 'auto 12px'
}, },
'& > div': { '& button': {
marginLeft: 20, border: 'none',
'& > button': { backgroundColor: 'transparent',
border: 'none', cursor: 'pointer'
backgroundColor: 'transparent',
cursor: 'pointer'
}
} }
}, },
section: { section: {

12
new-lamassu-admin/src/pages/OperatorInfo/TermsConditions.js
View file

@ -9,7 +9,7 @@ import * as Yup from 'yup'
import ErrorMessage from 'src/components/ErrorMessage' import ErrorMessage from 'src/components/ErrorMessage'
import PromptWhenDirty from 'src/components/PromptWhenDirty' import PromptWhenDirty from 'src/components/PromptWhenDirty'
import { Link } from 'src/components/buttons' import { Link, IconButton } from 'src/components/buttons'
import { Switch } from 'src/components/inputs' import { Switch } from 'src/components/inputs'
import { TextInput } from 'src/components/inputs/formik' import { TextInput } from 'src/components/inputs/formik'
import { H4, Info2, Info3, Label2, Label3 } from 'src/components/typography' import { H4, Info2, Info3, Label2, Label3 } from 'src/components/typography'
@ -190,11 +190,11 @@ const TermsConditions = () => {
<div className={classes.header}> <div className={classes.header}>
<Info2>Info card</Info2> <Info2>Info card</Info2>
{!editing && ( {!editing && (
<div className={classes.transparentButton}> <IconButton
<button onClick={() => setEditing(true)}> className={classes.transparentButton}
<EditIcon /> onClick={() => setEditing(true)}>
</button> <EditIcon />
</div> </IconButton>
)} )}
</div> </div>
<Formik <Formik