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

fix: cross icon replace

Browse source 
fix: space between switch buttons and label
fix: switch button shadow
feat: change CoinATMRadar fields to table
refactor: css classes
This commit is contained in:
Sérgio Salgado 2021-06-12 03:09:57 +01:00 • committed by Josh Harvey
parent 2a9e2c1714
commit ddfd5e1309
12 changed files with 126 additions and 249 deletions
Download patch file Download diff file Expand all files Collapse all files

3
new-lamassu-admin/src/components/inputs/base/Switch.js
View file

@ -38,7 +38,8 @@ const useStyles = makeStyles(theme => ({
}
},
'&$focusVisible $thumb': {
border: '6px solid #fff'
border: '6px solid #fff',
boxShadow: '0 0 4px 0 rgba(0,0,0,0.24)'
}
},
thumb: {

42
new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar/CoinATMRadar.js → new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar.js
View file

@ -4,13 +4,14 @@ import gql from 'graphql-tag'
import React, { memo } from 'react'
import { Tooltip } from 'src/components/Tooltip'
import { BooleanPropertiesTable } from 'src/components/booleanPropertiesTable'
import { Switch } from 'src/components/inputs'
import { H4, P, Label2 } from 'src/components/typography'
import { fromNamespace, toNamespace, namespaces } from 'src/utils/config'
import { mainStyles } from './CoinATMRadar.styles'
import { global } from './OperatorInfo.styles'
const useStyles = makeStyles(mainStyles)
const useStyles = makeStyles(global)
const GET_CONFIG = gql`
query getData {
@ -28,21 +29,21 @@ const Row = memo(({ title, disabled = false, checked, save, label }) => {
const classes = useStyles()
return (
<div className={classes.rowWrapper}>
<div className={classes.rowTextAndSwitch}>
<div className={classes.switchRow}>
<P>{title}</P>
<div className={classes.switch}>
<Switch
disabled={disabled}
checked={checked}
onChange={event => save && save(event.target.checked)}
/>
</div>
{label && <Label2>{label}</Label2>}
</div>
</div>
)
})
const CoinATMRadar = memo(() => {
const CoinATMRadar = memo(({ wizard }) => {
const classes = useStyles()
const { data } = useQuery(GET_CONFIG)
@ -63,7 +64,7 @@ const CoinATMRadar = memo(() => {
return (
<div className={classes.content}>
<div>
<div className={classes.titleWrapper}>
<div className={classes.header}>
<H4>Coin ATM Radar share settings</H4>
<Tooltip width={304}>
<P>
@ -85,18 +86,21 @@ const CoinATMRadar = memo(() => {
save={value => save({ active: value })}
label={coinAtmRadarConfig.active ? 'Yes' : 'No'}
/>
<H4>{'Machine info'}</H4>
<Row
title={'Commissions'}
disabled={!coinAtmRadarConfig.active}
checked={coinAtmRadarConfig.commissions}
save={value => save({ commissions: value })}
/>
<Row
title={'Limits and verification'}
disabled={!coinAtmRadarConfig.active}
checked={coinAtmRadarConfig.limitsAndVerification}
save={value => save({ limitsAndVerification: value })}
<BooleanPropertiesTable
editing={wizard}
title="Machine info"
data={coinAtmRadarConfig}
elements={[
{
name: 'commissions',
display: 'Commissions'
},
{
name: 'limitsAndVerification',
display: 'Limits and verification'
}
]}
save={save}
/>
</div>
</div>

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

@ -1,43 +0,0 @@
import baseStyles from 'src/pages/Logs.styles'
const { button } = baseStyles
const mainStyles = {
button,
content: {
display: 'flex'
},
transparentButton: {
'& > *': {
margin: 'auto 10px'
},
'& button': {
border: 'none',
backgroundColor: 'transparent',
cursor: 'pointer'
}
},
titleWrapper: {
display: 'flex',
alignItems: 'center',
flex: 'wrap'
},
rowWrapper: {
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between'
},
rowTextAndSwitch: {
display: 'flex',
flex: 'wrap',
alignItems: 'center',
justifyContent: 'space-between',
width: 285
},
popoverContent: {
width: 272,
padding: [[10, 15]]
}
}
export { mainStyles }

3
new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar/index.js
View file

@ -1,3 +0,0 @@
import CoinATMRadar from './CoinATMRadar'
export default CoinATMRadar

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

@ -18,10 +18,7 @@ import { ReactComponent as WarningIcon } from 'src/styling/icons/warning-icon/co
import { fontSize5 } from 'src/styling/variables'
import { fromNamespace, toNamespace, namespaces } from 'src/utils/config'
import {
styles as globalStyles,
contactInfoStyles
} from './OperatorInfo.styles'
import { global } from './OperatorInfo.styles'
const FIELD_WIDTH = 280
@ -98,9 +95,7 @@ const SAVE_CONFIG = gql`
}
`
const styles = R.merge(globalStyles, contactInfoStyles)
const contactUseStyles = makeStyles(styles)
const contactUseStyles = makeStyles(global)
const ContactInfo = ({ wizard }) => {
const classes = contactUseStyles()
@ -189,10 +184,10 @@ const ContactInfo = ({ wizard }) => {
return (
<>
<div className={classes.rowWrapper}>
<div className={classes.header}>
<H4>Contact information</H4>
</div>
<div className={classes.rowWrapper}>
<div className={classes.switchRow}>
<P>Info card enabled?</P>
<div className={classes.switch}>
<Switch
@ -207,7 +202,7 @@ const ContactInfo = ({ wizard }) => {
</div>
</div>
<div className={classes.section}>
<div className={classes.rowWrapper}>
<div className={classes.header}>
<H4>Info card</H4>
{!editing && (
<IconButton
@ -275,11 +270,7 @@ const ContactInfo = ({ wizard }) => {
<Link color="secondary" type="reset">
Cancel
</Link>
{error && (
<ErrorMessage className={classes.errorMessage}>
Failed to save changes
</ErrorMessage>
)}
{error && <ErrorMessage>Failed to save changes</ErrorMessage>}
</>
)}
</div>

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

@ -1,26 +1,15 @@
import typographyStyles from 'src/components/typography/styles'
import theme from 'src/styling/theme'
import { offColor } from 'src/styling/variables'
const { p } = typographyStyles
const styles = {
const global = {
content: {
display: 'flex'
},
header: {
display: 'flex',
alignItems: 'center',
position: 'relative',
flex: 'wrap'
},
transparentButton: {
'& > *': {
margin: 'auto 12px'
},
'& button': {
border: 'none',
backgroundColor: 'transparent',
cursor: 'pointer'
}
},
section: {
marginBottom: 52
},
@ -37,55 +26,23 @@ const styles = {
switchRow: {
display: 'flex',
alignItems: 'center',
marginBottom: 28,
width: 600
position: 'relative',
flex: 'wrap',
justifyContent: 'space-between',
width: 396
},
switch: {
display: 'flex',
alignItems: 'center',
marginLeft: 120
alignItems: 'center'
},
submit: {
justifyContent: 'flex-start',
alignItems: 'center',
height: 19,
padding: [[0, 4, 4, 4]],
'& > button': {
marginRight: 40
}
},
singleButton: {
marginTop: 50,
paddingLeft: 0
}
}
const contactInfoStyles = {
infoMessage: {
display: 'flex',
marginBottom: 52,
'& > p': {
width: 330,
color: offColor,
marginTop: 4,
marginLeft: 16
}
},
radioButtonsRow: {
height: 60,
marginBottom: 14
},
radioButtons: {
display: 'flex',
flexDirection: 'row',
paddingLeft: 4
},
rowWrapper: {
display: 'flex',
alignItems: 'center',
position: 'relative',
flex: 'wrap'
},
transparentButton: {
'& > *': {
margin: 'auto 12px'
@ -95,20 +52,15 @@ const contactInfoStyles = {
backgroundColor: 'transparent',
cursor: 'pointer'
}
}
}
const termsConditionsStyles = {
enable: {
display: 'flex',
alignItems: 'center',
marginBottom: 22 - theme.spacing(1),
'& > span:first-child': {
extend: p,
marginRight: 116 - theme.spacing(1)
},
'& > span:last-child': {
marginLeft: 4
infoMessage: {
display: 'flex',
marginBottom: 52,
'& > p': {
width: 330,
color: offColor,
marginTop: 4,
marginLeft: 16
}
}
}
@ -160,4 +112,4 @@ const fieldStyles = {
}
}
export { styles, contactInfoStyles, termsConditionsStyles, fieldStyles }
export { global, fieldStyles }

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

@ -9,9 +9,9 @@ import { Switch } from 'src/components/inputs'
import { H4, P, Label2 } from 'src/components/typography'
import { fromNamespace, toNamespace, namespaces } from 'src/utils/config'
import { mainStyles } from './ReceiptPrinting.styles'
import { global } from './OperatorInfo.styles'
const useStyles = makeStyles(mainStyles)
const useStyles = makeStyles(global)
const GET_CONFIG = gql`
query getData {
@ -45,12 +45,12 @@ const ReceiptPrinting = memo(({ wizard }) => {
return (
<>
<div className={classes.rowWrapper}>
<div className={classes.header}>
<H4>Receipt options</H4>
</div>
<div className={classes.rowWrapper}>
<div className={classes.switchRow}>
<P>Enable receipt printing?</P>
<div className={classes.switchWrapper}>
<div className={classes.switch}>
<Switch
checked={receiptPrintingConfig.active}
onChange={event =>
@ -66,9 +66,9 @@ const ReceiptPrinting = memo(({ wizard }) => {
})
}
/>
</div>
<Label2>{receiptPrintingConfig.active ? 'Yes' : 'No'}</Label2>
</div>
</div>
<BooleanPropertiesTable
editing={wizard}
title={'Visible on the receipt (options)'}

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

@ -1,14 +0,0 @@
const mainStyles = {
rowWrapper: {
display: 'flex',
alignItems: 'center',
position: 'relative',
flex: 'wrap'
},
switchWrapper: {
display: 'flex',
marginLeft: 120
}
}
export { mainStyles }

3
new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting/index.js
View file

@ -1,3 +0,0 @@
import ReceiptPrinting from './ReceiptPrinting'
export default ReceiptPrinting

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

@ -12,15 +12,11 @@ import PromptWhenDirty from 'src/components/PromptWhenDirty'
import { Link, IconButton } from 'src/components/buttons'
import { Switch } from 'src/components/inputs'
import { TextInput } from 'src/components/inputs/formik'
import { H4, Info2, Info3, Label2, Label3 } from 'src/components/typography'
import { H4, Info2, Info3, Label2, Label3, P } from 'src/components/typography'
import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/enabled.svg'
import { fromNamespace, toNamespace, namespaces } from 'src/utils/config'
import {
styles as globalStyles,
termsConditionsStyles,
fieldStyles
} from './OperatorInfo.styles'
import { global, fieldStyles } from './OperatorInfo.styles'
const useFieldStyles = makeStyles(fieldStyles)
@ -50,7 +46,7 @@ const Field = ({
{!editing && (
<>
<Label3>{label}</Label3>
<Info3 className={classes.multiLineText}>{value}</Info3>
<Info3>{value}</Info3>
</>
)}
{editing && (
@ -85,9 +81,7 @@ const SAVE_CONFIG = gql`
}
`
const styles = R.merge(globalStyles, termsConditionsStyles)
const useTermsConditionsStyles = makeStyles(styles)
const useTermsConditionsStyles = makeStyles(global)
const TermsConditions = () => {
const [error, setError] = useState(null)
@ -171,12 +165,12 @@ const TermsConditions = () => {
return (
<>
<div className={classes.rowWrapper}>
<div className={classes.header}>
<H4>Terms &amp; Conditions</H4>
</div>
<div className={classes.section}>
<div className={classes.enable}>
<span>Show on screen</span>
<div className={classes.switchRow}>
<P>Show on screen</P>
<div className={classes.switch}>
<Switch
checked={showOnScreen}
onChange={event =>
@ -187,6 +181,7 @@ const TermsConditions = () => {
/>
<Label2>{showOnScreen ? 'Yes' : 'No'}</Label2>
</div>
</div>
<div className={classes.header}>
<Info2>Info card</Info2>
{!editing && (
@ -234,17 +229,12 @@ const TermsConditions = () => {
<Link color="secondary" type="reset">
Cancel
</Link>
{error && (
<ErrorMessage className={classes.errorMessage}>
Failed to save changes
</ErrorMessage>
)}
{error && <ErrorMessage>Failed to save changes</ErrorMessage>}
</>
)}
</div>
</Form>
</Formik>
</div>
</>
)
}

15
new-lamassu-admin/src/styling/icons/table/false.svg
View file

@ -1,11 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
<desc>Created with Sketch.</desc>
<g id="icon/table/false" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group-4" stroke="#FF584A" stroke-width="4">
<line x1="13.5" y1="0.5" x2="0.995667" y2="13.004333" id="Line-7"></line>
<line x1="13.5" y1="0.5" x2="0.995667" y2="13.004333" id="Line-7" transform="translate(7.000000, 7.000000) scale(-1, 1) translate(-7.000000, -7.000000) "></line>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Group</title>
<g id="↳↳-Coin-ATM-Radar" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="operator-info_v4-CAR#1" transform="translate(-832.000000, -608.000000)" fill="#FF584A" fill-rule="nonzero">
<g id="Group" transform="translate(832.000000, 608.000000)">
<polygon id="Line-7" points="13.0484874 0 16 2.95151255 2.95151255 16 0 13.0484874"></polygon>
<polygon id="Line-7" transform="translate(8.000000, 8.000000) scale(-1, 1) translate(-8.000000, -8.000000) " points="13.0484874 0 16 2.95151255 2.95151255 16 0 13.0484874"></polygon>
</g>
</g>
</g>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 727 B

After

Width:  |  Height:  |  Size: 858 B

Before After
Before After

1
new-lamassu-admin/src/styling/icons/table/true.svg
View file

@ -1,6 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="14px" viewBox="0 0 16 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
<title>icon/table/true</title>
<desc>Created with Sketch.</desc>
<g id="icon/table/true" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M4.17451294,13.3251347 L0.599425104,9.29667256 C-0.199808368,8.3960844 -0.199808368,6.94040225 0.599425104,6.03981409 C1.39865858,5.13922593 2.69051421,5.13922593 3.48974768,6.03981409 L5.61967423,8.439847 L12.5102523,0.675441122 C13.3094858,-0.225147041 14.6033855,-0.225147041 15.4005749,0.675441122 C16.1998084,1.57372599 16.1998084,3.03171143 15.4005749,3.93229959 L7.06483552,13.3251347 C6.66624082,13.7742771 6.14295752,14 5.61967423,14 C5.09639093,14 4.57310763,13.7742771 4.17451294,13.3251347 Z" id="Fill-1" fill="#48F694"></path>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 951 B

After

Width:  |  Height:  |  Size: 986 B

Before After
Before After