feat: arrow button to navigate to machines on dashboard

new-lamassu-admin/src/pages/Dashboard/SystemStatus/MachinesTable.js

@@ -13,6 +13,7 @@ import { Status } from 'src/components/Status'
 import { Label2, TL2 } from 'src/components/typography'
 // import { ReactComponent as TxInIcon } from 'src/styling/icons/direction/cash-in.svg'
 import { ReactComponent as TxOutIcon } from 'src/styling/icons/direction/cash-out.svg'
+import { ReactComponent as MachineLinkIcon } from 'src/styling/icons/month arrows/right.svg'
 
 import styles from './MachinesTable.styles'
 
@@ -99,10 +100,19 @@ const MachinesTable = ({ machines, numToRender }) => {
               return (
                 <TableRow
                   onClick={() => redirect(machine)}
-                  className={classnames(classes.row, classes.clickableRow)}
+                  className={classnames(classes.row)}
                   key={machine.deviceId + idx}>
-                  <StyledCell align="left">
+                  <StyledCell
+                    align="left"
+                    className={classes.machineNameWrapper}>
                     <TL2>{machine.name}</TL2>
+                    <MachineLinkIcon
+                      className={classnames(
+                        classes.machineRedirectIcon,
+                        classes.clickableRow
+                      )}
+                      onClick={() => redirect(machine)}
+                    />
                   </StyledCell>
                   <StyledCell>
                     <Status status={machine.statuses[0]} />

new-lamassu-admin/src/pages/Dashboard/SystemStatus/MachinesTable.styles.js

@@ -87,6 +87,14 @@ const styles = {
     marginBottom: 0,
     padding: 0,
     textAlign: 'center'
+  },
+  machineNameWrapper: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  machineRedirectIcon: {
+    marginLeft: 10
   }
 }