fix: commissions UI

fix: remove logs

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,

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}
+            <Info1 className={classes.buttonText}>{button.text}</Info1>
           </SubpageButton>
         )}
       </div>

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
   },

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 && (

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
     }