fix: moved button and label to TitleSection and added status icon

new-lamassu-admin/src/components/layout/TitleSection.js

@@ -4,13 +4,21 @@ 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 styles from './TitleSection.styles'
 
 const useStyles = makeStyles(styles)
 
-const TitleSection = ({ className, title, error, labels, children }) => {
+const TitleSection = ({
+  className,
+  title,
+  error,
+  labels,
+  button,
+  children
+}) => {
   const classes = useStyles()
   return (
     <div className={classnames(classes.titleWrapper, className)}>
@@ -19,6 +27,15 @@ const TitleSection = ({ className, title, error, labels, children }) => {
         {error && (
           <ErrorMessage className={classes.error}>Failed to save</ErrorMessage>
         )}
+        {button && (
+          <SubpageButton
+            className={classes.subpageButton}
+            Icon={button.icon}
+            InverseIcon={button.inverseIcon}
+            toggle={button.toggle}>
+            {button.text}
+          </SubpageButton>
+        )}
       </div>
       <Box display="flex" flexDirection="row">
         {(labels ?? []).map(({ icon, label }, idx) => (

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

@@ -6,11 +6,15 @@ export default {
     flexDirection: 'row'
   },
   titleAndButtonsContainer: {
-    display: 'flex'
+    display: 'flex',
+    alignItems: 'center'
   },
   error: {
     marginLeft: 12
   },
+  subpageButton: {
+    marginLeft: 12
+  },
   icon: {
     marginRight: 6
   },

new-lamassu-admin/src/pages/Commissions/Commissions.js

@@ -1,13 +1,12 @@
 import { useQuery, useMutation } from '@apollo/react-hooks'
-import { makeStyles, Box } from '@material-ui/core'
 import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 
-import { SubpageButton } from 'src/components/buttons'
 import TitleSection from 'src/components/layout/TitleSection'
 import { ReactComponent as ExeceptionViewIcon } from 'src/styling/icons/circle buttons/exception-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'
 
 import CommissionsDetails from './components/CommissionsDetails'
@@ -34,36 +33,7 @@ const SAVE_CONFIG = gql`
   }
 `
 
-const styles = {
-  titleWrapper: {
-    display: 'flex',
-    alignItems: 'center',
-    flexDirection: 'row'
-  },
-  subpageButton: {
-    marginLeft: 12
-  },
-  colorLabel: {
-    display: 'flex',
-    flexDirection: 'row',
-    alignSelf: 'flex-end',
-    alignItems: 'center',
-    marginLeft: 'auto',
-    '& div': {
-      width: 12,
-      height: 12,
-      borderRadius: 3,
-      marginRight: 8,
-      backgroundColor: '#44e188'
-    }
-  }
-}
-
-const useStyles = makeStyles(styles)
-
 const Commissions = ({ name: SCREEN_KEY }) => {
-  const classes = useStyles()
-
   const [showMachines, setShowMachines] = useState(false)
   const { data } = useQuery(GET_DATA)
   const [saveConfig, { error }] = useMutation(SAVE_CONFIG, {
@@ -109,24 +79,28 @@ const Commissions = ({ name: SCREEN_KEY }) => {
     return saveConfig({ variables: { config } })
   }
 
+  const labels = showMachines
+    ? [
+        {
+          label: 'Override value',
+          icon: <OverrideLabelIcon />
+        }
+      ]
+    : []
+
   return (
     <>
-      <Box className={classes.titleWrapper}>
-        <TitleSection title="Commissions" />
-        <SubpageButton
-          className={classes.subpageButton}
-          Icon={ListingViewIcon}
-          InverseIcon={ExeceptionViewIcon}
-          toggle={setShowMachines}>
-          List view
-        </SubpageButton>
-        {showMachines && (
-          <div className={classes.colorLabel}>
-            <div className={classes.greenSquare} />
-            <span>Override value</span>
-          </div>
-        )}
-      </Box>
+      <TitleSection
+        title="Commissions"
+        labels={labels}
+        button={{
+          text: 'List view',
+          icon: ListingViewIcon,
+          inverseIcon: ExeceptionViewIcon,
+          toggle: setShowMachines
+        }}
+      />
+
       {!showMachines && (
         <CommissionsDetails
           config={config}

new-lamassu-admin/src/styling/icons/status/spring2.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12" height="12" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <rect width="12" height="12" rx="3" ry="3" fill="#44e188"/>
+</svg>