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

fix: simplify layout by using TitleSection

Browse source
This commit is contained in:
Mauricio Navarro Miranda 2020-04-24 04:10:14 -05:00
parent bba2427de6
commit 0adecf02f0
3 changed files with 17 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

3
new-lamassu-admin/src/components/layout/TitleSection.js
View file

@ -8,7 +8,7 @@ import styles from './TitleSection.styles'
const useStyles = makeStyles(styles) const useStyles = makeStyles(styles)
const TitleSection = ({ title, error }) => { const TitleSection = ({ title, error, labels }) => {
const classes = useStyles() const classes = useStyles()
return ( return (
<div className={classes.titleWrapper}> <div className={classes.titleWrapper}>
@ -18,6 +18,7 @@ const TitleSection = ({ title, error }) => {
<ErrorMessage className={classes.error}>Failed to save</ErrorMessage> <ErrorMessage className={classes.error}>Failed to save</ErrorMessage>
)} )}
</div> </div>
<div className={classes.headerLabels}>{labels}</div>
</div> </div>
) )
} }

5
new-lamassu-admin/src/components/layout/TitleSection.styles.js
View file

@ -1,3 +1,5 @@
import { mainStyles } from 'src/pages/Transactions/Transactions.styles'
export default { export default {
titleWrapper: { titleWrapper: {
display: 'flex', display: 'flex',
@ -10,5 +12,6 @@ export default {
}, },
error: { error: {
marginLeft: 12 marginLeft: 12
} },
headerLabels: mainStyles.headerLabels
} }

22
new-lamassu-admin/src/pages/maintenance/Cashboxes.js
View file

@ -1,10 +1,8 @@
import { useQuery, useMutation } from '@apollo/react-hooks' import { useQuery, useMutation } from '@apollo/react-hooks'
import { makeStyles } from '@material-ui/core'
import { gql } from 'apollo-boost' import { gql } from 'apollo-boost'
import React, { useState } from 'react' import React, { useState } from 'react'
import * as Yup from 'yup' import * as Yup from 'yup'
import Title from 'src/components/Title'
import { Table as EditableTable } from 'src/components/editableTable' import { Table as EditableTable } from 'src/components/editableTable'
import { import {
CashIn, CashIn,
@ -12,7 +10,7 @@ import {
CashOutFormik, CashOutFormik,
CashInFormik CashInFormik
} from 'src/components/inputs/cashbox/Cashbox' } from 'src/components/inputs/cashbox/Cashbox'
import { mainStyles } from 'src/pages/Transactions/Transactions.styles' import TitleSection from 'src/components/layout/TitleSection'
import { ReactComponent as ErrorIcon } from 'src/styling/icons/status/tomato.svg' import { ReactComponent as ErrorIcon } from 'src/styling/icons/status/tomato.svg'
const ValidationSchema = Yup.object().shape({ const ValidationSchema = Yup.object().shape({
@ -88,11 +86,8 @@ const RESET_CASHOUT_BILLS = gql`
} }
` `
const useStyles = makeStyles(mainStyles)
const Cashboxes = () => { const Cashboxes = () => {
const [machines, setMachines] = useState([]) const [machines, setMachines] = useState([])
const classes = useStyles()
useQuery(GET_MACHINES_AND_CONFIG, { useQuery(GET_MACHINES_AND_CONFIG, {
onCompleted: data => onCompleted: data =>
@ -188,15 +183,16 @@ const Cashboxes = () => {
return ( return (
<> <>
<div className={classes.titleWrapper}> <TitleSection
<div className={classes.titleAndButtonsContainer}> title="Cashboxes"
<Title>Cashboxes</Title> labels={
</div> <>
<div className={classes.headerLabels}>
<ErrorIcon /> <ErrorIcon />
<span>Action required</span> <span>Action required</span>
</div> </>
</div> }
/>
<EditableTable <EditableTable
name="cashboxes" name="cashboxes"
enableEdit enableEdit