diff --git a/new-lamassu-admin/src/pages/Dashboard/Alerts/Alerts.js b/new-lamassu-admin/src/pages/Dashboard/Alerts/Alerts.js
index 9c96df9d..707f73a6 100644
--- a/new-lamassu-admin/src/pages/Dashboard/Alerts/Alerts.js
+++ b/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 (
<>
@@ -63,7 +69,10 @@ const Alerts = ({ onReset, onExpand, size }) => {
)}
-
+
{
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 (
-
+
{data.cryptoCurrencies[idx].display}
@@ -122,10 +122,12 @@ const Footer = () => {
}
return (
-
+ <>
+
{!loading && data && (
@@ -137,7 +139,8 @@ const Footer = () => {
)}
-
+
+ >
)
}
diff --git a/new-lamassu-admin/src/pages/Dashboard/Footer/Footer.styles.js b/new-lamassu-admin/src/pages/Dashboard/Footer/Footer.styles.js
index e6a9b657..b2766a68 100644
--- a/new-lamassu-admin/src/pages/Dashboard/Footer/Footer.styles.js
+++ b/new-lamassu-admin/src/pages/Dashboard/Footer/Footer.styles.js
@@ -18,14 +18,15 @@ const styles = {
marginLeft: spacer * 3
},
footer: ({ expanded, bigFooter }) => ({
- height: expanded
- ? bigFooter
+ height:
+ expanded && bigFooter
+ ? spacer * 12 * 3 + spacer * 3
+ : expanded
? spacer * 12 * 2 + spacer * 2
- : spacer * 12 * 3 + spacer * 3
- : spacer * 12,
- position: 'fixed',
+ : spacer * 12,
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
- },
- footerItemContainer: {
- marginBottom: 18
- }
+ height: 100,
+ marginTop: expanded && bigFooter ? -300 : expanded ? -200 : -100,
+ overflow: !expanded && 'hidden'
+ }),
+ 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
diff --git a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.js b/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.js
index 8acd5b77..f96b7e00 100644
--- a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.js
+++ b/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 TriangleUp } from 'src/styling/icons/arrow/triangle_up.svg'
+import { ReactComponent as PercentDownIcon } from 'src/styling/icons/dashboard/down.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
+ if (percentChange > 0)
+ return
+ return
+ }
+
return (
<>
@@ -193,15 +211,8 @@ const SystemPerformance = () => {
data?.config.locale_fiatCurrency
}`}
-
- {percentChange <= 0 ? (
-
- ) : (
-
- )}{' '}
+
+ {getPercentageIcon()}
{`${percentChange}%`}
diff --git a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.styles.js b/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.styles.js
index 0c87aad2..831a2cfa 100644
--- a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.styles.js
+++ b/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
}
}
diff --git a/new-lamassu-admin/src/pages/Dashboard/SystemStatus/MachinesTable.styles.js b/new-lamassu-admin/src/pages/Dashboard/SystemStatus/MachinesTable.styles.js
index 9492f096..574bf476 100644
--- a/new-lamassu-admin/src/pages/Dashboard/SystemStatus/MachinesTable.styles.js
+++ b/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
}
}
diff --git a/new-lamassu-admin/src/pages/Dashboard/SystemStatus/SystemStatus.js b/new-lamassu-admin/src/pages/Dashboard/SystemStatus/SystemStatus.js
index 189c0902..a97661c7 100644
--- a/new-lamassu-admin/src/pages/Dashboard/SystemStatus/SystemStatus.js
+++ b/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 }) => {
+ className={classnames(machinesTableContainerClasses)}>
- {!showAllItems && data.machines.length > NUM_TO_RENDER && (
+ {!showAllItems && machines.length > NUM_TO_RENDER && (
<>
>
diff --git a/new-lamassu-admin/src/routing/routes.js b/new-lamassu-admin/src/routing/routes.js
index d7714a12..8d8285ac 100644
--- a/new-lamassu-admin/src/routing/routes.js
+++ b/new-lamassu-admin/src/routing/routes.js
@@ -301,7 +301,7 @@ const Routes = () => {
return (
-
+
+
\ No newline at end of file
diff --git a/new-lamassu-admin/src/styling/icons/dashboard/equal.svg b/new-lamassu-admin/src/styling/icons/dashboard/equal.svg
new file mode 100644
index 00000000..c277c866
--- /dev/null
+++ b/new-lamassu-admin/src/styling/icons/dashboard/equal.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/new-lamassu-admin/src/styling/icons/dashboard/up.svg b/new-lamassu-admin/src/styling/icons/dashboard/up.svg
new file mode 100644
index 00000000..74bb17cb
--- /dev/null
+++ b/new-lamassu-admin/src/styling/icons/dashboard/up.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file