diff --git a/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.styles.js b/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.styles.js index d87ee123..2dff1eb2 100644 --- a/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.styles.js +++ b/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.styles.js @@ -18,7 +18,7 @@ const cashboxStyles = { cashbox: { borderColor: colorPicker, backgroundColor: colorPicker, - height: 34, + height: 118, width: 80, border: '2px solid', textAlign: 'end', diff --git a/new-lamassu-admin/src/pages/Notifications/Notifications.js b/new-lamassu-admin/src/pages/Notifications/Notifications.js index c2b54edd..454aba78 100644 --- a/new-lamassu-admin/src/pages/Notifications/Notifications.js +++ b/new-lamassu-admin/src/pages/Notifications/Notifications.js @@ -36,6 +36,8 @@ const SAVE_CONFIG = gql` } ` +const FIELDS_WIDTH = 130 + const Notifications = ({ name: SCREEN_KEY }) => { const [section, setSection] = useState(null) const [error, setError] = useState(null) @@ -97,19 +99,19 @@ const Notifications = ({ name: SCREEN_KEY }) => {
- +
- +
- - + +
) diff --git a/new-lamassu-admin/src/pages/Notifications/sections/CryptoBalanceAlerts.js b/new-lamassu-admin/src/pages/Notifications/sections/CryptoBalanceAlerts.js index b2739d74..270a9edb 100644 --- a/new-lamassu-admin/src/pages/Notifications/sections/CryptoBalanceAlerts.js +++ b/new-lamassu-admin/src/pages/Notifications/sections/CryptoBalanceAlerts.js @@ -11,7 +11,7 @@ const HIGH_BALANCE_KEY = 'cryptoHighBalance' const useStyles = makeStyles(styles) -const CryptoBalanceAlerts = ({ section }) => { +const CryptoBalanceAlerts = ({ section, fieldWidth }) => { const classes = useStyles() const { @@ -37,6 +37,7 @@ const CryptoBalanceAlerts = ({ section }) => { editing={isEditing(LOW_BALANCE_KEY)} disabled={isDisabled(LOW_BALANCE_KEY)} setEditing={it => setEditing(LOW_BALANCE_KEY, it)} + width={fieldWidth} />
@@ -53,6 +54,7 @@ const CryptoBalanceAlerts = ({ section }) => { editing={isEditing(HIGH_BALANCE_KEY)} disabled={isDisabled(HIGH_BALANCE_KEY)} setEditing={it => setEditing(HIGH_BALANCE_KEY, it)} + width={fieldWidth} />
) diff --git a/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.js b/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.js index 769ff9fd..a7ddf3b6 100644 --- a/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.js +++ b/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.js @@ -5,6 +5,7 @@ import * as Yup from 'yup' import { TL2 } from 'src/components/typography' +import { Cashbox } from '../../../components/inputs/cashbox/Cashbox' import NotificationsCtx from '../NotificationsContext' import Header from '../components/EditHeader' import EditableNumber from '../components/EditableNumber' @@ -13,20 +14,13 @@ import styles from './FiatBalanceAlerts.styles.js' const useStyles = makeStyles(styles) -const schema = Yup.object().shape({ - fiatBalanceCassette1: Yup.number() - .integer() - .min(0) - .required(), - fiatBalanceCassette2: Yup.number() - .integer() - .min(0) - .required() -}) - const NAME = 'fiatBalanceAlerts' -const FiatBalance = ({ section }) => { +const FiatBalance = ({ + section, + max = Number.MAX_SAFE_INTEGER, + fieldWidth = 80 +}) => { const { isEditing, isDisabled, setEditing, data, save } = useContext( NotificationsCtx ) @@ -34,6 +28,27 @@ const FiatBalance = ({ section }) => { const editing = isEditing(NAME) + const schema = Yup.object().shape({ + fiatBalanceCassette1: Yup.number() + .integer() + .min(0) + .max(max) + .required(), + fiatBalanceCassette2: Yup.number() + .integer() + .min(0) + .max(max) + .required() + }) + + const fiatBalanceCassette1Percent = data?.fiatBalanceCassette1 + ? (100 * data?.fiatBalanceCassette1) / max + : 0 + + const fiatBalanceCassette2Percent = data?.fiatBalanceCassette2 + ? (100 * data?.fiatBalanceCassette2) / max + : 0 + return ( { />
- Cassette 1 (Top) - (x === '' ? '-' : x)} - decoration="notes" - /> +
+ +
+ Cassette 1 (Top) + (x === '' ? '-' : x)} + decoration="notes" + width={fieldWidth} + /> +
+
-
- Cassette 2 (Bottom) - (x === '' ? '-' : x)} - decoration="notes" - /> +
+ +
+ Cassette 2 (Bottom) + (x === '' ? '-' : x)} + decoration="notes" + width={fieldWidth} + /> +
diff --git a/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.styles.js b/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.styles.js index e649ae30..e655567e 100644 --- a/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.styles.js +++ b/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.styles.js @@ -6,9 +6,20 @@ export default { marginBottom: 36 }, first: { - width: 200 + width: 236 }, title: { marginTop: 0 + }, + row: { + width: 183, + display: 'grid', + gridTemplateColumns: 'repeat(2,1fr)', + gridTemplateRows: '1fr', + gridColumnGap: 18, + gridRowGap: 0 + }, + col2: { + width: 136 } } diff --git a/new-lamassu-admin/src/pages/Notifications/sections/TransactionAlerts.js b/new-lamassu-admin/src/pages/Notifications/sections/TransactionAlerts.js index 9d985a24..303fbc3d 100644 --- a/new-lamassu-admin/src/pages/Notifications/sections/TransactionAlerts.js +++ b/new-lamassu-admin/src/pages/Notifications/sections/TransactionAlerts.js @@ -4,13 +4,14 @@ import SingleFieldEditableNumber from '../components/SingleFieldEditableNumber' const NAME = 'highValueTransaction' -const TransactionAlerts = ({ section }) => { +const TransactionAlerts = ({ section, fieldWidth }) => { return ( ) }