diff --git a/new-lamassu-admin/src/components/layout/Header.js b/new-lamassu-admin/src/components/layout/Header.js index f4748b79..eb7a2662 100644 --- a/new-lamassu-admin/src/components/layout/Header.js +++ b/new-lamassu-admin/src/components/layout/Header.js @@ -60,7 +60,9 @@ const Header = memo(({ tree }) => {
-
+
history.push('/dashboard')} + className={classnames(classes.logo, classes.logoLink)}>

Lamassu Admin

diff --git a/new-lamassu-admin/src/components/layout/Header.styles.js b/new-lamassu-admin/src/components/layout/Header.styles.js index 978c1ad9..145c8545 100644 --- a/new-lamassu-admin/src/components/layout/Header.styles.js +++ b/new-lamassu-admin/src/components/layout/Header.styles.js @@ -20,7 +20,7 @@ if (version === 8) { subheaderHeight = spacer * 7 } -export default { +const styles = { header: { backgroundColor: primaryColor, color: white, @@ -164,5 +164,10 @@ export default { '& > svg': { marginRight: 16 } + }, + logoLink: { + cursor: 'pointer' } } + +export default styles diff --git a/new-lamassu-admin/src/pages/Dashboard/Alerts/Alerts.styles.js b/new-lamassu-admin/src/pages/Dashboard/Alerts/Alerts.styles.js index 10ad2e6f..d7040367 100644 --- a/new-lamassu-admin/src/pages/Dashboard/Alerts/Alerts.styles.js +++ b/new-lamassu-admin/src/pages/Dashboard/Alerts/Alerts.styles.js @@ -5,7 +5,7 @@ import { primaryColor } from 'src/styling/variables' -export default { +const styles = { label: { margin: 0, color: offColor @@ -62,3 +62,4 @@ export default { } } } +export default styles diff --git a/new-lamassu-admin/src/pages/Dashboard/Dashboard.styles.js b/new-lamassu-admin/src/pages/Dashboard/Dashboard.styles.js index 32902fa9..d60f9646 100644 --- a/new-lamassu-admin/src/pages/Dashboard/Dashboard.styles.js +++ b/new-lamassu-admin/src/pages/Dashboard/Dashboard.styles.js @@ -2,7 +2,7 @@ import typographyStyles from 'src/components/typography/styles' import { spacer, white, primaryColor } from 'src/styling/variables' const { label1 } = typographyStyles -export default { +const styles = { root: { flexGrow: 1, marginBottom: 108 @@ -60,3 +60,5 @@ export default { } } } + +export default styles diff --git a/new-lamassu-admin/src/pages/Dashboard/Footer/Footer.js b/new-lamassu-admin/src/pages/Dashboard/Footer/Footer.js index b78fc010..0aa3b446 100644 --- a/new-lamassu-admin/src/pages/Dashboard/Footer/Footer.js +++ b/new-lamassu-admin/src/pages/Dashboard/Footer/Footer.js @@ -1,15 +1,14 @@ import { useQuery } from '@apollo/react-hooks' import { makeStyles } from '@material-ui/core' -import Button from '@material-ui/core/Button' import Grid from '@material-ui/core/Grid' import gql from 'graphql-tag' import * as R from 'ramda' import React, { useState, useEffect } from 'react' -import { Label1, Label2 } from 'src/components/typography' +import { Label2 } 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 { white } from 'src/styling/variables' +import { white, spacer } from 'src/styling/variables' import { fromNamespace } from 'src/utils/config' import styles from './Footer.styles' @@ -32,31 +31,19 @@ const useStyles = makeStyles(styles) const Footer = () => { const { data, loading } = useQuery(GET_DATA) const [expanded, setExpanded] = useState(false) - const [showExpandBtn, setShowExpandBtn] = useState(false) - const [buttonName, setButtonName] = useState('Show all') + const [canExpand, setCanExpand] = useState(false) + const [delayedExpand, setDelayedExpand] = useState(null) const classes = useStyles() useEffect(() => { if (data && data.rates && data.rates.withCommissions) { const numItems = R.keys(data.rates.withCommissions).length if (numItems > 4) { - setShowExpandBtn(true) - setButtonName(`Show all (${numItems})`) + setCanExpand(true) } } }, [data]) - const toggleExpand = () => { - if (expanded) { - const numItems = R.keys(data.rates.withCommissions).length - setExpanded(false) - setButtonName(`Show all (${numItems})`) - } else { - setExpanded(true) - setButtonName(`Show less`) - } - } - const wallets = fromNamespace('wallets')(data?.config) const renderFooterItem = key => { @@ -127,55 +114,58 @@ const Footer = () => { const makeFooterExpandedClass = () => { return { - overflow: 'scroll', - // 88px for base height, then add 100 px for each row of items. Each row has 4 items. 5 items makes 2 rows so 288px of height height: - 88 + Math.ceil(R.keys(data.rates.withCommissions).length / 4) * 100, + R.keys(data.rates.withCommissions).length < 8 + ? spacer * 12 * 2 + spacer * 2 + : spacer * 12 * 3 + spacer * 3, maxHeight: '50vh', position: 'fixed', left: 0, bottom: 0, width: '100vw', backgroundColor: white, - textAlign: 'left', - boxShadow: '0px -1px 10px 0px rgba(50, 50, 50, 0.1)' + textAlign: 'left' } } + const expand = () => { + if (canExpand) { + setExpanded(true) + } + } + + const shrink = () => { + setExpanded(false) + } + const handleMouseEnter = () => { + setDelayedExpand( + setTimeout(() => { + expand() + }, 300) + ) + } + + const handleMouseLeave = () => { + clearTimeout(delayedExpand) + shrink() + } + return ( <>
{!loading && data && ( - <> - - - {R.keys(data.rates.withCommissions).map(key => - renderFooterItem(key) - )} - - {/* {renderFooterItem(R.keys(data.rates.withCommissions)[0])} */} - {showExpandBtn && ( - - - + + + {R.keys(data.rates.withCommissions).map(key => + renderFooterItem(key) )} - + )}
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 7b3b0f1d..31032dbd 100644 --- a/new-lamassu-admin/src/pages/Dashboard/Footer/Footer.styles.js +++ b/new-lamassu-admin/src/pages/Dashboard/Footer/Footer.styles.js @@ -4,11 +4,12 @@ import { offColor, errorColor, primaryColor, - white + white, + spacer } from 'src/styling/variables' const { label1 } = typographyStyles -export default { +const styles = { label: { color: offColor }, @@ -67,7 +68,7 @@ export default { width: '100vw', backgroundColor: white, textAlign: 'left', - height: 88, + height: spacer * 12, boxShadow: '0px -1px 10px 0px rgba(50, 50, 50, 0.1)' }, content: { @@ -92,5 +93,11 @@ export default { marginLeft: 6 }, marginTop: -20 + }, + footerContainer: { + marginLeft: spacer * 5, + marginBottom: spacer * 2 } } + +export default styles diff --git a/new-lamassu-admin/src/pages/Dashboard/RightSide.js b/new-lamassu-admin/src/pages/Dashboard/RightSide.js index 5d1b08c4..5345c0d4 100644 --- a/new-lamassu-admin/src/pages/Dashboard/RightSide.js +++ b/new-lamassu-admin/src/pages/Dashboard/RightSide.js @@ -2,7 +2,7 @@ import Grid from '@material-ui/core/Grid' import { makeStyles } from '@material-ui/core/styles' import React, { useState } from 'react' -import Alerts from './Alerts' +// import Alerts from './Alerts' import styles from './Dashboard.styles' import SystemStatus from './SystemStatus' const useStyles = makeStyles(styles) @@ -28,14 +28,14 @@ const RightSide = () => { return ( <> - + {/*
-
+
*/}
{ const classes = useStyles() - const [value, setValue] = React.useState(50) - const handleChange = (event, newValue) => { - setValue(newValue) - } + + const value = 50 const buildPercentageView = (value, direction) => { switch (direction) { @@ -72,24 +69,15 @@ const PercentageChart = () => { return ( <> -
- {/* - {` ${value}%`} */} {buildPercentageView(value, 'cashIn')}
- {/* - {` ${100 - value}%`} */} {buildPercentageView(100 - value, 'cashOut')}
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 14ef4d19..a916e8dc 100644 --- a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.styles.js +++ b/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.styles.js @@ -9,7 +9,7 @@ import { linkSecondaryColor } from 'src/styling/variables' -export default { +const styles = { titleWrapper: { display: 'flex', justifyContent: 'space-between', @@ -78,3 +78,5 @@ export default { color: linkSecondaryColor } } + +export default styles 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 c57c60e5..3c2060a6 100644 --- a/new-lamassu-admin/src/pages/Dashboard/SystemStatus/MachinesTable.styles.js +++ b/new-lamassu-admin/src/pages/Dashboard/SystemStatus/MachinesTable.styles.js @@ -5,7 +5,7 @@ import { primaryColor } from 'src/styling/variables' -export default { +const styles = { label: { margin: 0, color: offColor @@ -35,7 +35,7 @@ export default { statusHeader: { marginLeft: 2 }, - table: { + /* table: { maxHeight: 440, '&::-webkit-scrollbar': { width: 7 @@ -44,6 +44,18 @@ export default { backgroundColor: offColor, borderRadius: 5 } + }, */ + // temporary, when notifications are enabled delete this one and decomment above + table: { + maxHeight: 465, + minHeight: 465, + '&::-webkit-scrollbar': { + width: 7 + }, + '&::-webkit-scrollbar-thumb': { + backgroundColor: offColor, + borderRadius: 5 + } }, tableBody: { overflow: 'auto' @@ -52,3 +64,5 @@ export default { marginTop: 0 } } + +export default styles diff --git a/new-lamassu-admin/src/pages/Dashboard/SystemStatus/SystemStatus.js b/new-lamassu-admin/src/pages/Dashboard/SystemStatus/SystemStatus.js index ce09c467..27a9e82c 100644 --- a/new-lamassu-admin/src/pages/Dashboard/SystemStatus/SystemStatus.js +++ b/new-lamassu-admin/src/pages/Dashboard/SystemStatus/SystemStatus.js @@ -1,11 +1,11 @@ import { useQuery } from '@apollo/react-hooks' -import Button from '@material-ui/core/Button' +// import Button from '@material-ui/core/Button' import Grid from '@material-ui/core/Grid' import { makeStyles } from '@material-ui/core/styles' import gql from 'graphql-tag' import React, { useState, useEffect } from 'react' -import ActionButton from 'src/components/buttons/ActionButton' +// import ActionButton from 'src/components/buttons/ActionButton' import { H4, TL2, Label1 } from 'src/components/typography' import MachinesTable from './MachinesTable' @@ -14,7 +14,7 @@ import styles from './MachinesTable.styles' const useStyles = makeStyles(styles) // number of machines in the table to render on page load -const NUM_TO_RENDER = 3 +// const NUM_TO_RENDER = 3 const GET_DATA = gql` query getData { @@ -49,23 +49,23 @@ const SystemStatus = ({ cardState, setRightSideState }) => { const classes = useStyles() const { data, loading } = useQuery(GET_DATA) const [showAllItems, setShowAllItems] = useState(false) - const [showExpandButton, setShowExpandButton] = useState(false) - const [numToRender, setNumToRender] = useState(NUM_TO_RENDER) + // const [showExpandButton, setShowExpandButton] = useState(false) + // const [numToRender, setNumToRender] = useState(NUM_TO_RENDER) useEffect(() => { - if (showAllItems) { + /* if (showAllItems) { setShowExpandButton(false) setNumToRender(data?.machines.length) } else if (data && data?.machines.length > numToRender) { setShowExpandButton(true) - } + } */ if (cardState.cardSize === 'small' || cardState.cardSize === 'default') { setShowAllItems(false) - setNumToRender(NUM_TO_RENDER) + // setNumToRender(NUM_TO_RENDER) } - }, [cardState.cardSize, data, numToRender, showAllItems]) + }, [cardState.cardSize, data, /* numToRender, */ showAllItems]) - const reset = () => { + /* const reset = () => { setShowAllItems(false) setNumToRender(NUM_TO_RENDER) setRightSideState({ @@ -81,7 +81,7 @@ const SystemStatus = ({ cardState, setRightSideState }) => { systemStatus: { cardSize: 'big', buttonName: 'Show less' }, alerts: { cardSize: 'small', buttonName: 'Show alerts' } }) - } + } */ // placeholder data if (data) { @@ -92,8 +92,9 @@ const SystemStatus = ({ cardState, setRightSideState }) => { return ( <>
-

System status

- {(showAllItems || cardState.cardSize === 'small') && ( +

System status

{' '} +
+ {/* {(showAllItems || cardState.cardSize === 'small') && ( <> { )} -
+
*/} {!loading && cardState.cardSize !== 'small' && ( <> @@ -127,21 +128,22 @@ const SystemStatus = ({ cardState, setRightSideState }) => { server version - console.log('Upgrade button clicked')}> Update to v10.6.0 - + */} - {showExpandButton && ( + {/* {showExpandButton && ( <> - )} + )} */} diff --git a/new-lamassu-admin/src/pages/Machines/MachineComponents/Cassettes/Cassettes.styles.js b/new-lamassu-admin/src/pages/Machines/MachineComponents/Cassettes/Cassettes.styles.js index 8b574172..1c1e80b1 100644 --- a/new-lamassu-admin/src/pages/Machines/MachineComponents/Cassettes/Cassettes.styles.js +++ b/new-lamassu-admin/src/pages/Machines/MachineComponents/Cassettes/Cassettes.styles.js @@ -1,6 +1,8 @@ -export default { +const styles = { cashbox: { width: 80, height: 36 } } + +export default styles diff --git a/new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/DataTable.styles.js b/new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/DataTable.styles.js index 838dbad8..de57aca7 100644 --- a/new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/DataTable.styles.js +++ b/new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/DataTable.styles.js @@ -1,6 +1,6 @@ import { zircon } from 'src/styling/variables' -export default { +const styles = { expandButton: { outline: 'none', border: 'none', @@ -41,3 +41,5 @@ export default { flexDirection: 'column' }) } + +export default styles diff --git a/new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/DetailsCard.styles.js b/new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/DetailsCard.styles.js index 277bcfd2..71969897 100644 --- a/new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/DetailsCard.styles.js +++ b/new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/DetailsCard.styles.js @@ -3,7 +3,7 @@ import { offColor } from 'src/styling/variables' const { p } = typographyStyles -export default { +const styles = { wrapper: { display: 'flex', flexDirection: 'column', @@ -82,3 +82,5 @@ export default { width: 215 } } + +export default styles diff --git a/new-lamassu-admin/src/pages/Machines/Machines.styles.js b/new-lamassu-admin/src/pages/Machines/Machines.styles.js index bf6373c6..efbb6492 100644 --- a/new-lamassu-admin/src/pages/Machines/Machines.styles.js +++ b/new-lamassu-admin/src/pages/Machines/Machines.styles.js @@ -6,7 +6,7 @@ import { comet } from 'src/styling/variables' -export default { +const styles = { grid: { flex: 1, height: '100%' @@ -71,3 +71,5 @@ export default { marginRight: 8 } } + +export default styles diff --git a/new-lamassu-admin/src/routing/routes.js b/new-lamassu-admin/src/routing/routes.js index 1738e937..eb6deab2 100644 --- a/new-lamassu-admin/src/routing/routes.js +++ b/new-lamassu-admin/src/routing/routes.js @@ -51,18 +51,18 @@ const useStyles = makeStyles({ }) const tree = [ - { + /* { key: 'dashboard', label: 'Dashboard', route: '/dashboard', component: Dashboard - }, - { + }, */ + /* { key: 'machines', label: 'Machines', route: '/machines', component: Machines - }, + }, */ { key: 'transactions', label: 'Transactions', @@ -315,6 +315,8 @@ const Routes = () => { + +