Feat: new profit change icons

new-lamassu-admin/src/pages/Dashboard/Alerts/Alerts.js

@@ -2,6 +2,7 @@ import { useQuery } from '@apollo/react-hooks'
 import Button from '@material-ui/core/Button'
 import Grid from '@material-ui/core/Grid'
 import { makeStyles } from '@material-ui/core/styles'
+import classnames from 'classnames'
 import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React from 'react'
@@ -46,6 +47,11 @@ const Alerts = ({ onReset, onExpand, size }) => {
   )(data?.machines ?? [])
   const alertsLength = alerts.length
 
+  const alertsTableContainerClasses = {
+    [classes.alertsTableContainer]: !showAllItems,
+    [classes.expandedAlertsTableContainer]: showAllItems
+  }
+
   return (
     <>
       <div className={classes.container}>
@@ -63,7 +69,10 @@ const Alerts = ({ onReset, onExpand, size }) => {
           </Label1>
         )}
       </div>
-      <Grid container spacing={1}>
+      <Grid
+        className={classnames(alertsTableContainerClasses)}
+        container
+        spacing={1}>
         <Grid item xs={12} className={classes.alertsTableMargin}>
           <AlertsTable
             numToRender={showAllItems ? alerts.length : NUM_TO_RENDER}

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

@@ -63,6 +63,20 @@ const styles = {
   },
   alertsTableMargin: {
     marginTop: -30
+  },
+  alertsTableContainer: {
+    height: 220,
+    overflowX: 'hidden',
+    overflowY: 'auto'
+  },
+  expandedAlertsTableContainer: {
+    minHeight: 476,
+    overflowX: 'hidden',
+    overflowY: 'auto'
+  },
+  centerLabel: {
+    marginTop: 40,
+    marginBottom: 0
   }
 }
 

new-lamassu-admin/src/pages/Dashboard/Footer/Footer.js

@@ -36,7 +36,7 @@ const Footer = () => {
   const [delayedExpand, setDelayedExpand] = useState(null)
 
   const classes = useStyles({
-    bigFooter: R.keys(data?.cryptoRates?.withCommissions).length < 8,
+    bigFooter: R.keys(data?.cryptoRates?.withCommissions).length > 8,
     expanded
   })
 
@@ -84,7 +84,7 @@ const Footer = () => {
     const localeLanguage = data.config.locale_languages[0]
 
     return (
-      <Grid key={key} item xs={3} className={classes.footerItemContainer}>
+      <Grid key={key} item xs={3}>
         <Label2 className={classes.label}>
           {data.cryptoCurrencies[idx].display}
         </Label2>
@@ -122,10 +122,12 @@ const Footer = () => {
   }
 
   return (
+    <>
       <div
-      onMouseEnter={handleMouseEnter}
+        className={classes.mouseWatcher}
         onMouseLeave={handleMouseLeave}
-      className={classes.footer}>
+        onMouseEnter={handleMouseEnter}
+      />
       <div className={classes.content}>
         {!loading && data && (
           <Grid container spacing={1}>
@@ -137,7 +139,8 @@ const Footer = () => {
           </Grid>
         )}
       </div>
-    </div>
+      <div className={classes.footer} />
+    </>
   )
 }
 

new-lamassu-admin/src/pages/Dashboard/Footer/Footer.styles.js

@@ -18,14 +18,15 @@ const styles = {
     marginLeft: spacer * 3
   },
   footer: ({ expanded, bigFooter }) => ({
-    height: expanded
+    height:
-      ? bigFooter
+      expanded && bigFooter
+        ? spacer * 12 * 3 + spacer * 3
+        : expanded
         ? spacer * 12 * 2 + spacer * 2
-        : spacer * 12 * 3 + spacer * 3
         : spacer * 12,
-    position: 'fixed',
     left: 0,
     bottom: 0,
+    position: 'fixed',
     width: '100vw',
     backgroundColor: white,
     textAlign: 'left',
@@ -37,17 +38,28 @@ const styles = {
   },
   content: {
     width: 1200,
-    margin: '0 auto',
     backgroundColor: white,
-    marginTop: 4
+    zIndex: 1
   },
-  footerContainer: {
+  footerContainer: ({ expanded, bigFooter }) => ({
     marginLeft: spacer * 5,
-    marginBottom: spacer * 2
+    height: 100,
-  },
+    marginTop: expanded && bigFooter ? -300 : expanded ? -200 : -100,
-  footerItemContainer: {
+    overflow: !expanded && 'hidden'
-    marginBottom: 18
+  }),
-  }
+  mouseWatcher: ({ expanded, bigFooter }) => ({
+    position: 'fixed',
+    bottom: 0,
+    left: 0,
+    width: '100vw',
+    height:
+      expanded && bigFooter
+        ? spacer * 12 * 3 + spacer * 3
+        : expanded
+        ? spacer * 12 * 2 + spacer * 2
+        : spacer * 12,
+    zIndex: 2
+  })
 }
 
 export default styles

new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.js

@@ -9,8 +9,9 @@ import * as R from 'ramda'
 import React, { useState } from 'react'
 
 import { Label1, Label2 } from 'src/components/typography/index'
-import { ReactComponent as TriangleDown } from 'src/styling/icons/arrow/triangle_down.svg'
+import { ReactComponent as PercentDownIcon } from 'src/styling/icons/dashboard/down.svg'
-import { ReactComponent as TriangleUp } from 'src/styling/icons/arrow/triangle_up.svg'
+import { ReactComponent as PercentNeutralIcon } from 'src/styling/icons/dashboard/equal.svg'
+import { ReactComponent as PercentUpIcon } from 'src/styling/icons/dashboard/up.svg'
 import { fromNamespace } from 'src/utils/config'
 
 import PercentageChart from './Graphs/PercentageChart'
@@ -130,6 +131,7 @@ const SystemPerformance = () => {
     const thisTimePeriodProfit = getProfit(transactionsToShow)
     const previousTimePeriodProfit = getProfit(transactionsLastTimePeriod)
 
+    if (thisTimePeriodProfit === previousTimePeriodProfit) return 0
     if (previousTimePeriodProfit === 0) return 100
 
     return Math.round(
@@ -155,6 +157,22 @@ const SystemPerformance = () => {
 
   const percentChange = getPercentChange()
 
+  console.log(percentChange)
+
+  const percentageClasses = {
+    [classes.percentDown]: percentChange < 0,
+    [classes.percentUp]: percentChange > 0,
+    [classes.percentNeutral]: percentChange === 0
+  }
+
+  const getPercentageIcon = () => {
+    if (percentChange === 0)
+      return <PercentNeutralIcon className={classes.directionIcon} />
+    if (percentChange > 0)
+      return <PercentUpIcon className={classes.directionIcon} />
+    return <PercentDownIcon className={classes.directionIcon} />
+  }
+
   return (
     <>
       <Nav handleSetRange={setSelectedRange} />
@@ -193,15 +211,8 @@ const SystemPerformance = () => {
                     data?.config.locale_fiatCurrency
                   }`}
                 </div>
-                <div
+                <div className={classnames(percentageClasses)}>
-                  className={
+                  {getPercentageIcon()}
-                    percentChange <= 0 ? classes.percentDown : classes.percentUp
-                  }>
-                  {percentChange <= 0 ? (
-                    <TriangleDown className={classes.percentDown} />
-                  ) : (
-                    <TriangleUp className={classes.percentUp} />
-                  )}{' '}
                   {`${percentChange}%`}
                 </div>
               </div>

new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.styles.js

@@ -8,7 +8,8 @@ import {
   spring4,
   tomato,
   java,
-  neon
+  neon,
+  comet
 } from 'src/styling/variables'
 
 const styles = {
@@ -84,6 +85,12 @@ const styles = {
     color: tomato,
     height: 13
   },
+  percentNeutral: {
+    fontSize: fontSize3,
+    fontFamily: fontSecondary,
+    fontWeight: 700,
+    color: comet
+  },
   profitContainer: {
     display: 'flex',
     justifyContent: 'space-between',
@@ -91,7 +98,8 @@ const styles = {
     position: 'relative'
   },
   gridContainer: {
-    marginTop: 30
+    marginTop: 30,
+    height: 225
   },
   inSquare: {
     width: 8,
@@ -114,6 +122,12 @@ const styles = {
   },
   dirLabContMargin: {
     marginRight: 20
+  },
+  directionIcon: {
+    width: 16,
+    height: 16,
+    marginBottom: -2,
+    marginRight: 4
   }
 }
 

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

@@ -40,7 +40,8 @@ const styles = {
     }
   },
   buttonLabel: {
-    textAlign: 'center',
+    position: 'absolute',
+    bottom: 160,
     marginBottom: 0
   },
   upperButtonLabel: {
@@ -74,7 +75,12 @@ const styles = {
     display: 'inline'
   },
   machinesTableContainer: {
-    marginTop: 23
+    marginTop: 10,
+    height: 230
+  },
+  expandedMachinesTableContainer: {
+    marginTop: 10,
+    height: 442
   }
 }
 

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

@@ -2,7 +2,9 @@ import { useQuery } from '@apollo/react-hooks'
 import Button from '@material-ui/core/Button'
 import Grid from '@material-ui/core/Grid'
 import { makeStyles } from '@material-ui/core/styles'
+import classnames from 'classnames'
 import gql from 'graphql-tag'
+import * as R from 'ramda'
 import React from 'react'
 
 import { cardState as cardState_ } from 'src/components/CollapsibleCard'
@@ -50,8 +52,13 @@ const SystemStatus = ({ onReset, onExpand, size }) => {
   const classes = useStyles()
   const { data, loading } = useQuery(GET_DATA)
 
+  const machines = R.path(['machines'])(data) ?? []
   const showAllItems = size === cardState_.EXPANDED
 
+  const machinesTableContainerClasses = {
+    [classes.machinesTableContainer]: !showAllItems,
+    [classes.expandedMachinesTableContainer]: showAllItems
+  }
   // const uptime = data?.uptime ?? [{}]
   return (
     <>
@@ -99,15 +106,13 @@ const SystemStatus = ({ onReset, onExpand, size }) => {
           <Grid
             container
             spacing={1}
-            className={classes.machinesTableContainer}>
+            className={classnames(machinesTableContainerClasses)}>
             <Grid item xs={12}>
               <MachinesTable
-                numToRender={
+                numToRender={showAllItems ? Infinity : NUM_TO_RENDER}
-                  showAllItems ? data?.machines.length : NUM_TO_RENDER
+                machines={machines}
-                }
-                machines={data?.machines ?? []}
               />
-              {!showAllItems && data.machines.length > NUM_TO_RENDER && (
+              {!showAllItems && machines.length > NUM_TO_RENDER && (
                 <>
                   <Label1 className={classes.buttonLabel}>
                     <Button
@@ -116,7 +121,7 @@ const SystemStatus = ({ onReset, onExpand, size }) => {
                       disableRipple
                       disableFocusRipple
                       className={classes.button}>
-                      {`Show all (${data.machines.length})`}
+                      {`Show all (${machines.length})`}
                     </Button>
                   </Label1>
                 </>

new-lamassu-admin/src/routing/routes.js

@@ -301,7 +301,7 @@ const Routes = () => {
   return (
     <Switch>
       <Route exact path="/">
-        <Redirect to={{ pathname: '/transactions' }} />
+        <Redirect to={{ pathname: '/dashboard' }} />
       </Route>
       <Route path={'/dashboard'}>
         <Transition

new-lamassu-admin/src/styling/icons/dashboard/down.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="icon/label/icon/down" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group-6">
+            <circle id="Oval" fill="#FFECEB" cx="6" cy="6" r="6"></circle>
+            <g id="Group-5" transform="translate(6.096194, 6.096194) rotate(-315.000000) translate(-6.096194, -6.096194) translate(2.596194, 3.096194)" stroke="#FF584A">
+                <polyline id="Path-2" points="3.15780333 -4.54747351e-13 6.15780333 2.82998193 3.15780333 5.65996386"></polyline>
+                <line x1="5.42178888" y1="2.82998193" x2="-5.45696821e-13" y2="2.82998193" id="Path-3"></line>
+            </g>
+        </g>
+    </g>
+</svg>

new-lamassu-admin/src/styling/icons/dashboard/equal.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="icon/label/icon/equal" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group-6" fill="#EBEFFF">
+            <circle id="Oval" cx="6" cy="6" r="6"></circle>
+        </g>
+        <g id="Group" transform="translate(4.000000, 4.000000)" stroke="#5F668A" stroke-linecap="square">
+            <line x1="0" y1="1" x2="4" y2="1" id="Line-12"></line>
+            <line x1="0" y1="3" x2="4" y2="3" id="Line-12"></line>
+        </g>
+    </g>
+</svg>

new-lamassu-admin/src/styling/icons/dashboard/up.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="icon/label/icon/up" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group-6">
+            <circle id="Oval" fill="#ECFBEF" cx="6" cy="6" r="6"></circle>
+            <g id="Group-5" transform="translate(6.096194, 6.096194) rotate(-45.000000) translate(-6.096194, -6.096194) translate(2.596194, 3.096194)" stroke="#00CD5A">
+                <polyline id="Path-2" points="3.15780333 -4.54747351e-13 6.15780333 2.82998193 3.15780333 5.65996386"></polyline>
+                <line x1="5.42178888" y1="2.82998193" x2="-5.45696821e-13" y2="2.82998193" id="Path-3"></line>
+            </g>
+        </g>
+    </g>
+</svg>