From 44980bbf9c8551babe6ba7689cab5a1045e2b8b2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9rgio=20Salgado?= Date: Wed, 17 Feb 2021 14:06:51 +0000 Subject: [PATCH] fix: commissions UI fix: remove logs --- .../buttons/SubpageButton.styles.js | 3 ++- .../src/components/layout/TitleSection.js | 4 ++-- .../components/layout/TitleSection.styles.js | 6 ++++++ .../src/pages/Commissions/Commissions.js | 15 +++++++++++-- .../src/pages/Commissions/helper.js | 21 ++++++++++++++++++- 5 files changed, 43 insertions(+), 6 deletions(-) diff --git a/new-lamassu-admin/src/components/buttons/SubpageButton.styles.js b/new-lamassu-admin/src/components/buttons/SubpageButton.styles.js index 8280c1f3..f3672d2b 100644 --- a/new-lamassu-admin/src/components/buttons/SubpageButton.styles.js +++ b/new-lamassu-admin/src/components/buttons/SubpageButton.styles.js @@ -33,7 +33,8 @@ export default { } }, buttonIconActiveLeft: { - marginRight: 12 + marginRight: 12, + marginLeft: 4 }, buttonIconActiveRight: { marginRight: 5, diff --git a/new-lamassu-admin/src/components/layout/TitleSection.js b/new-lamassu-admin/src/components/layout/TitleSection.js index 4b7555fe..d778fd19 100644 --- a/new-lamassu-admin/src/components/layout/TitleSection.js +++ b/new-lamassu-admin/src/components/layout/TitleSection.js @@ -5,7 +5,7 @@ import React from 'react' import ErrorMessage from 'src/components/ErrorMessage' import Title from 'src/components/Title' import { SubpageButton } from 'src/components/buttons' -import { Label1 } from 'src/components/typography' +import { Info1, Label1 } from 'src/components/typography' import styles from './TitleSection.styles' @@ -33,7 +33,7 @@ const TitleSection = ({ Icon={button.icon} InverseIcon={button.inverseIcon} toggle={button.toggle}> - {button.text} + {button.text} )} diff --git a/new-lamassu-admin/src/components/layout/TitleSection.styles.js b/new-lamassu-admin/src/components/layout/TitleSection.styles.js index 7b03e635..9928105a 100644 --- a/new-lamassu-admin/src/components/layout/TitleSection.styles.js +++ b/new-lamassu-admin/src/components/layout/TitleSection.styles.js @@ -1,3 +1,5 @@ +import { backgroundColor } from 'src/styling/variables' + export default { titleWrapper: { display: 'flex', @@ -15,6 +17,10 @@ export default { subpageButton: { marginLeft: 12 }, + buttonText: { + color: `${backgroundColor}`, + fontSize: 15 + }, icon: { marginRight: 6 }, diff --git a/new-lamassu-admin/src/pages/Commissions/Commissions.js b/new-lamassu-admin/src/pages/Commissions/Commissions.js index c4fcb89c..d220621a 100644 --- a/new-lamassu-admin/src/pages/Commissions/Commissions.js +++ b/new-lamassu-admin/src/pages/Commissions/Commissions.js @@ -1,10 +1,11 @@ import { useQuery, useMutation } from '@apollo/react-hooks' +import { makeStyles } from '@material-ui/core' import gql from 'graphql-tag' import * as R from 'ramda' import React, { useState } from 'react' import TitleSection from 'src/components/layout/TitleSection' -import { ReactComponent as ExeceptionViewIcon } from 'src/styling/icons/circle buttons/exception-view/white.svg' +import { ReactComponent as ReverseListingViewIcon } from 'src/styling/icons/circle buttons/listing-view/white.svg' import { ReactComponent as ListingViewIcon } from 'src/styling/icons/circle buttons/listing-view/zodiac.svg' import { ReactComponent as OverrideLabelIcon } from 'src/styling/icons/status/spring2.svg' import { fromNamespace, toNamespace, namespaces } from 'src/utils/config' @@ -12,6 +13,14 @@ import { fromNamespace, toNamespace, namespaces } from 'src/utils/config' import CommissionsDetails from './components/CommissionsDetails' import CommissionsList from './components/CommissionsList' +const styles = { + listViewButton: { + marginLeft: 4 + } +} + +const useStyles = makeStyles(styles) + const GET_DATA = gql` query getData { config @@ -37,6 +46,7 @@ const removeCoinFromOverride = crypto => override => }) const Commissions = ({ name: SCREEN_KEY }) => { + const classes = useStyles() const [showMachines, setShowMachines] = useState(false) const [error, setError] = useState(null) const { data } = useQuery(GET_DATA) @@ -102,9 +112,10 @@ const Commissions = ({ name: SCREEN_KEY }) => { button={{ text: 'List view', icon: ListingViewIcon, - inverseIcon: ExeceptionViewIcon, + inverseIcon: ReverseListingViewIcon, toggle: setShowMachines }} + iconClassName={classes.listViewButton} /> {!showMachines && ( diff --git a/new-lamassu-admin/src/pages/Commissions/helper.js b/new-lamassu-admin/src/pages/Commissions/helper.js index 1d58e358..29373827 100644 --- a/new-lamassu-admin/src/pages/Commissions/helper.js +++ b/new-lamassu-admin/src/pages/Commissions/helper.js @@ -39,7 +39,12 @@ const cashOutHeader = ( const getView = (data, code, compare) => it => { if (!data) return '' - return R.compose(R.prop(code), R.find(R.propEq(compare ?? 'code', it)))(data) + // The following boolean should come undefined if it is rendering an unpaired machine + const hasValue = R.find(R.propEq(compare ?? 'code', it))(data) + + return hasValue + ? R.compose(R.prop(code), R.find(R.propEq(compare ?? 'code', it)))(data) + : 'Unpaired machine' } const displayCodeArray = data => it => { @@ -63,6 +68,12 @@ const onCryptoChange = (prev, curr, setValue) => { setValue(curr) } +const boldStyle = () => { + return { + fontWeight: 'bold' + } +} + const getOverridesFields = (getData, currency, auxElements) => { const machineData = [ALL_MACHINES].concat(getData(['machines'])) const rawCryptos = getData(['cryptoCurrencies']) @@ -105,6 +116,7 @@ const getOverridesFields = (getData, currency, auxElements) => { input: NumberInput, textAlign: 'right', suffix: '%', + textStyle: boldStyle, inputProps: { decimalPlaces: 3 } @@ -117,6 +129,7 @@ const getOverridesFields = (getData, currency, auxElements) => { input: NumberInput, textAlign: 'right', suffix: '%', + textStyle: boldStyle, inputProps: { decimalPlaces: 3 } @@ -129,6 +142,7 @@ const getOverridesFields = (getData, currency, auxElements) => { doubleHeader: 'Cash-in only', textAlign: 'right', suffix: currency, + textStyle: boldStyle, inputProps: { decimalPlaces: 2 } @@ -141,6 +155,7 @@ const getOverridesFields = (getData, currency, auxElements) => { doubleHeader: 'Cash-in only', textAlign: 'right', suffix: currency, + textStyle: boldStyle, inputProps: { decimalPlaces: 2 } @@ -158,6 +173,7 @@ const mainFields = currency => [ editingAlign: 'right', input: NumberInput, suffix: '%', + textStyle: boldStyle, inputProps: { decimalPlaces: 3 } @@ -171,6 +187,7 @@ const mainFields = currency => [ editingAlign: 'right', input: NumberInput, suffix: '%', + textStyle: boldStyle, inputProps: { decimalPlaces: 3 } @@ -185,6 +202,7 @@ const mainFields = currency => [ editingAlign: 'right', input: NumberInput, suffix: currency, + textStyle: boldStyle, inputProps: { decimalPlaces: 2 } @@ -199,6 +217,7 @@ const mainFields = currency => [ editingAlign: 'right', input: NumberInput, suffix: currency, + textStyle: boldStyle, inputProps: { decimalPlaces: 2 }