From 9f4bf1de7b278225dfe8c3ef1a9a46d3a93546d3 Mon Sep 17 00:00:00 2001 From: Rafael Taranto Date: Thu, 8 May 2025 16:22:10 +0100 Subject: [PATCH] partial: second batch of components --- .../NotificationCenter/NotificationCenter.jsx | 16 +- .../NotificationCenter.module.css | 145 ++++++++++++++ .../NotificationCenter.styles.js | 144 -------------- .../NotificationCenter/NotificationRow.jsx | 6 +- .../src/components/inputs/base/Checkbox.jsx | 48 +---- .../src/components/inputs/base/CodeInput.jsx | 23 +-- .../inputs/base/CodeInput.module.css | 14 ++ .../inputs/base/CodeInput.styles.js | 27 --- .../src/components/inputs/base/RadioGroup.jsx | 34 +--- .../inputs/formik/CashCassetteInput.jsx | 15 +- .../inputs/formik/TextInput.styles.js | 36 ---- .../src/components/layout/Header.jsx | 60 +++--- .../src/components/layout/Header.module.css | 175 +++++++++++++++++ .../src/components/layout/Header.styles.js | 182 ------------------ .../src/components/layout/Section.jsx | 12 +- .../src/components/layout/Section.styles.js | 12 -- .../src/components/layout/Sidebar.jsx | 32 ++- .../src/components/layout/Sidebar.module.css | 106 ++++++++++ .../src/components/layout/Sidebar.styles.js | 107 ---------- .../src/components/layout/TitleSection.jsx | 28 ++- .../components/layout/TitleSection.styles.js | 31 --- .../machineActions/DiagnosticsModal.jsx | 28 ++- .../machineActions/MachineActions.jsx | 19 +- .../machineActions/MachineActions.styles.js | 61 ------ .../single-row-table/SingleRowTable.jsx | 42 ++-- .../single-row-table/SingleRowTable.styles.js | 41 ---- .../src/components/table/EmptyTable.jsx | 21 +- .../src/components/table/Table.jsx | 18 +- .../src/components/table/TableCell.jsx | 17 +- .../src/components/table/TableHeader.jsx | 4 +- .../src/components/table/TableRow.jsx | 48 +---- .../src/components/tables/DataTable.jsx | 37 ++-- .../src/components/tables/DataTable.styles.js | 50 ----- .../src/components/tables/Stripes.jsx | 11 -- new-lamassu-admin/src/styling/theme.js | 10 + 35 files changed, 616 insertions(+), 1044 deletions(-) create mode 100644 new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.module.css delete mode 100644 new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.styles.js create mode 100644 new-lamassu-admin/src/components/inputs/base/CodeInput.module.css delete mode 100644 new-lamassu-admin/src/components/inputs/base/CodeInput.styles.js delete mode 100644 new-lamassu-admin/src/components/inputs/formik/TextInput.styles.js create mode 100644 new-lamassu-admin/src/components/layout/Header.module.css delete mode 100644 new-lamassu-admin/src/components/layout/Header.styles.js delete mode 100644 new-lamassu-admin/src/components/layout/Section.styles.js create mode 100644 new-lamassu-admin/src/components/layout/Sidebar.module.css delete mode 100644 new-lamassu-admin/src/components/layout/Sidebar.styles.js delete mode 100644 new-lamassu-admin/src/components/layout/TitleSection.styles.js delete mode 100644 new-lamassu-admin/src/components/machineActions/MachineActions.styles.js delete mode 100644 new-lamassu-admin/src/components/single-row-table/SingleRowTable.styles.js delete mode 100644 new-lamassu-admin/src/components/tables/DataTable.styles.js delete mode 100644 new-lamassu-admin/src/components/tables/Stripes.jsx diff --git a/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.jsx b/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.jsx index f0eef5d5..6e971d55 100644 --- a/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.jsx +++ b/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.jsx @@ -1,5 +1,4 @@ -import { useQuery, useMutation, gql } from "@apollo/client"; -import { makeStyles } from '@mui/styles' +import { useQuery, useMutation, gql } from '@apollo/client' import * as R from 'ramda' import React, { useState, useEffect } from 'react' import ActionButton from 'src/components/buttons/ActionButton' @@ -9,10 +8,8 @@ import ClearAllIconInverse from 'src/styling/icons/stage/spring/empty.svg?react' import ClearAllIcon from 'src/styling/icons/stage/zodiac/empty.svg?react' import ShowUnreadIcon from 'src/styling/icons/stage/zodiac/full.svg?react' -import styles from './NotificationCenter.styles' import NotificationRow from './NotificationRow' - -const useStyles = makeStyles(styles) +import classes from './NotificationCenter.module.css' const GET_NOTIFICATIONS = gql` query getNotifications { @@ -63,7 +60,6 @@ const NotificationCenter = ({ const [xOffset, setXoffset] = useState(300) const [showingUnread, setShowingUnread] = useState(false) - const classes = useStyles({ buttonCoords, xOffset }) const machines = R.compose( R.map(R.prop('name')), R.indexBy(R.prop('deviceId')) @@ -120,7 +116,13 @@ const NotificationCenter = ({
Notifications
- diff --git a/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.module.css b/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.module.css new file mode 100644 index 00000000..dd30252b --- /dev/null +++ b/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.module.css @@ -0,0 +1,145 @@ +.container { + width: 40vw; + height: 110vh; + right: 0; + background-color: white; + box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.24); +} + +.container @media only screen and (max-width: 1920px) { + width: 30vw; +} + +.header { + display: flex; + justify-content: space-between; +} + +.headerText { + margin-top: 20px; + margin-left: 12px; +} + +.actionButtons { + display: flex; + margin-left: 16px; + height: 0; +} + +.notificationIcon { + position: absolute; + cursor: pointer; + background: transparent; + box-shadow: 0 0 0 transparent; + border: 0 solid transparent; + text-shadow: 0 0 0 transparent; + outline: none; +} + +.clearAllButton { + margin-top: -16px; + margin-left: 8px; + background-color: var(--zircon); +} + +.notificationsList { + height: 90vh; + max-height: 100vh; + margin-top: 24px; + margin-left: 0; + overflow-y: auto; + overflow-x: hidden; + background-color: white; + z-index: 10; +} + +.notificationRow { + display: flex; + flex-direction: row; + justify-content: flex-start; + position: relative; + margin-bottom: 16px; + padding-top: 12px; + gap: 10px; +} + +.notificationRow > *:first-child { + margin-right: 24px; +} + +.notificationContent { + display: flex; + flex-direction: column; + justify-content: center; + width: 300px; +} + +.unread { + background-color: var(--spring3) +} + +.notificationRowIcon { + align-self: center; +} + +.notificationRowIcon > * { + margin-left: 24px +} + +.readIconWrapper { + flex-grow: 1 +} + +.unreadIcon { + margin-top: 5px; + margin-left: 8px; + width: 12px; + height: 12px; + background-color: var(--spring); + border-radius: 50%; + cursor: pointer; + z-index: 1; +} + +.readIcon { + margin-left: 8px; + margin-top: 5px; + width: 12px; + height: 12px; + border: 1px solid var(--comet); + border-radius: 50%; + cursor: pointer; + z-index: 1; +} + +.notificationTitle { + margin: 0; + color: var(--comet); +} + +.notificationBody { + margin: 0 +} + +.notificationSubtitle { + margin: 0; + margin-bottom: 8px; + color: var(--comet); +} + +.stripes { + position: absolute; + height: 100%; + top: 0; + opacity: 60%; +} + +.hasUnread { + position: absolute; + top: 0; + left: 16px; + width: 9px; + height: 9px; + background-color: var(--spring); + border-radius: 50%; +} \ No newline at end of file diff --git a/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.styles.js b/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.styles.js deleted file mode 100644 index 28d588b5..00000000 --- a/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.styles.js +++ /dev/null @@ -1,144 +0,0 @@ -import { - spacer, - white, - zircon, - secondaryColor, - spring3, - comet -} from 'src/styling/variables' - -const styles = { - container: { - '@media only screen and (max-width: 1920px)': { - width: '30vw' - }, - width: '40vw', - height: '110vh', - right: 0, - backgroundColor: white, - boxShadow: '0 0 14px 0 rgba(0, 0, 0, 0.24)' - }, - header: { - display: 'flex', - justifyContent: 'space-between' - }, - headerText: { - marginTop: spacer * 2.5, - marginLeft: spacer * 3 - }, - actionButtons: { - display: 'flex', - marginLeft: spacer * 2, - height: 0 - }, - notificationIcon: ({ buttonCoords, xOffset }) => ({ - position: 'absolute', - top: buttonCoords ? buttonCoords.y : 0, - left: buttonCoords ? buttonCoords.x - xOffset : 0, - cursor: 'pointer', - background: 'transparent', - boxShadow: '0px 0px 0px transparent', - border: '0px solid transparent', - textShadow: '0px 0px 0px transparent', - outline: 'none' - }), - clearAllButton: { - marginTop: -spacer * 2, - marginLeft: spacer, - backgroundColor: zircon - }, - notificationsList: { - height: '90vh', - maxHeight: '100vh', - marginTop: spacer * 3, - marginLeft: 0, - overflowY: 'auto', - overflowX: 'hidden', - backgroundColor: white, - zIndex: 10 - }, - notificationRow: { - display: 'flex', - flexDirection: 'row', - justifyContent: 'flex-start', - position: 'relative', - marginBottom: spacer / 2, - paddingTop: spacer * 1.5, - '& > *:first-child': { - marginRight: 24 - }, - '& > *': { - marginRight: 10 - }, - '& > *:last-child': { - marginRight: 0 - } - }, - notificationContent: { - display: 'flex', - flexDirection: 'column', - justifyContent: 'center', - width: 300 - }, - unread: { - backgroundColor: spring3 - }, - notificationRowIcon: { - alignSelf: 'center', - '& > *': { - marginLeft: spacer * 3 - } - }, - readIconWrapper: { - flexGrow: 1 - }, - unreadIcon: { - marginTop: 5, - marginLeft: spacer, - width: '12px', - height: '12px', - backgroundColor: secondaryColor, - borderRadius: '50%', - cursor: 'pointer', - zIndex: 1 - }, - readIcon: { - marginLeft: spacer, - marginTop: 5, - width: '12px', - height: '12px', - border: [[1, 'solid', comet]], - borderRadius: '50%', - cursor: 'pointer', - zIndex: 1 - }, - notificationTitle: { - margin: 0, - color: comet - }, - notificationBody: { - margin: 0 - }, - notificationSubtitle: { - margin: 0, - marginBottom: spacer, - color: comet - }, - stripes: { - position: 'absolute', - height: '100%', - top: '0px', - opacity: '60%' - }, - hasUnread: { - position: 'absolute', - top: 0, - left: 16, - width: '9px', - height: '9px', - backgroundColor: secondaryColor, - borderRadius: '50%' - } -} - -export default styles diff --git a/new-lamassu-admin/src/components/NotificationCenter/NotificationRow.jsx b/new-lamassu-admin/src/components/NotificationCenter/NotificationRow.jsx index 5b5de598..37f4bfa1 100644 --- a/new-lamassu-admin/src/components/NotificationCenter/NotificationRow.jsx +++ b/new-lamassu-admin/src/components/NotificationCenter/NotificationRow.jsx @@ -1,4 +1,3 @@ -import { makeStyles } from '@mui/styles' import classnames from 'classnames' import prettyMs from 'pretty-ms' import * as R from 'ramda' @@ -8,8 +7,7 @@ import Wrench from 'src/styling/icons/action/wrench/zodiac.svg?react' import Transaction from 'src/styling/icons/arrow/transaction.svg?react' import WarningIcon from 'src/styling/icons/warning-icon/tomato.svg?react' -import styles from './NotificationCenter.styles' -const useStyles = makeStyles(styles) +import classes from './NotificationCenter.module.css' const types = { transaction: { @@ -46,8 +44,6 @@ const NotificationRow = ({ valid, toggleClear }) => { - const classes = useStyles() - const typeDisplay = R.path([type, 'display'])(types) ?? null const icon = R.path([type, 'icon'])(types) ?? ( diff --git a/new-lamassu-admin/src/components/inputs/base/Checkbox.jsx b/new-lamassu-admin/src/components/inputs/base/Checkbox.jsx index cd097e1f..597c2157 100644 --- a/new-lamassu-admin/src/components/inputs/base/Checkbox.jsx +++ b/new-lamassu-admin/src/components/inputs/base/Checkbox.jsx @@ -1,60 +1,22 @@ import Checkbox from '@mui/material/Checkbox' -import { makeStyles } from '@mui/styles' import CheckBoxIcon from '@mui/icons-material/CheckBox' import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank' import React from 'react' import { Label2, Info3 } from 'src/components/typography' import WarningIcon from 'src/styling/icons/warning-icon/comet.svg?react' -import { - fontSize2, - fontSize3, - secondaryColor, - offColor -} from 'src/styling/variables' - -const useStyles = makeStyles({ - root: { - color: secondaryColor, - '&.Mui-checked': { - color: secondaryColor - } - }, - checked: {}, - checkBoxLabel: { - display: 'flex' - }, - wrapper: { - display: 'flex', - alignItems: 'center', - '& > svg': { - marginRight: 10 - } - }, - message: { - display: 'flex', - alignItems: 'center', - color: offColor, - margin: 0, - whiteSpace: 'break-spaces' - } -}) +import { fontSize2, fontSize3 } from 'src/styling/variables' const CheckboxInput = ({ name, onChange, value, settings, ...props }) => { const { enabled, label, disabledMessage, rightSideLabel } = settings - const classes = useStyles() return ( <> {enabled ? ( -
+
{!rightSideLabel && {label}} { {rightSideLabel && {label}}
) : ( -
+
- {disabledMessage} + + {disabledMessage} +
)} diff --git a/new-lamassu-admin/src/components/inputs/base/CodeInput.jsx b/new-lamassu-admin/src/components/inputs/base/CodeInput.jsx index dd238952..c4439f9e 100644 --- a/new-lamassu-admin/src/components/inputs/base/CodeInput.jsx +++ b/new-lamassu-admin/src/components/inputs/base/CodeInput.jsx @@ -1,14 +1,8 @@ -import { makeStyles } from '@mui/styles' import classnames from 'classnames' import React from 'react' import OtpInput from 'react-otp-input' -import typographyStyles from 'src/components/typography/styles' - -import styles from './CodeInput.styles' - -const useStyles = makeStyles(styles) -const useTypographyStyles = makeStyles(typographyStyles) +import classes from './CodeInput.module.css' const CodeInput = ({ name, @@ -19,9 +13,6 @@ const CodeInput = ({ inputStyle, containerStyle }) => { - const classes = useStyles() - const typographyClasses = useTypographyStyles() - return ( } shouldAutoFocus - containerStyle={classnames(containerStyle, classes.container)} + containerStyle={classnames(containerStyle, 'justify-evenly')} inputStyle={classnames( inputStyle, classes.input, - typographyClasses.confirmationCode, - error && classes.error + 'font-museo font-black text-4xl', + error && 'border-tomato' )} inputType={'tel'} - renderInput={(props) => ( - - )} + renderInput={props => } /> ) } diff --git a/new-lamassu-admin/src/components/inputs/base/CodeInput.module.css b/new-lamassu-admin/src/components/inputs/base/CodeInput.module.css new file mode 100644 index 00000000..5d76df7b --- /dev/null +++ b/new-lamassu-admin/src/components/inputs/base/CodeInput.module.css @@ -0,0 +1,14 @@ +.input { + width: 3.5rem !important; + height: 5rem; + border: 2px solid; + border-color: var(--zircon); + border-radius: 4px; +} + +.input:focus { + border: 2px solid; + border-color: var(--zodiac); + border-radius: 4px; + outline: none; +} diff --git a/new-lamassu-admin/src/components/inputs/base/CodeInput.styles.js b/new-lamassu-admin/src/components/inputs/base/CodeInput.styles.js deleted file mode 100644 index dcea511c..00000000 --- a/new-lamassu-admin/src/components/inputs/base/CodeInput.styles.js +++ /dev/null @@ -1,27 +0,0 @@ -import { primaryColor, zircon, errorColor } from 'src/styling/variables' - -const styles = { - input: { - width: '3.5rem !important', - height: '5rem', - border: '2px solid', - borderColor: zircon, - borderRadius: '4px', - '&:focus': { - border: '2px solid', - borderColor: primaryColor, - borderRadius: '4px', - '&:focus': { - outline: 'none' - } - }, - }, - error: { - borderColor: errorColor - }, - container: { - justifyContent: 'space-evenly' - } -} - -export default styles diff --git a/new-lamassu-admin/src/components/inputs/base/RadioGroup.jsx b/new-lamassu-admin/src/components/inputs/base/RadioGroup.jsx index 11f1bfdd..97b52d17 100644 --- a/new-lamassu-admin/src/components/inputs/base/RadioGroup.jsx +++ b/new-lamassu-admin/src/components/inputs/base/RadioGroup.jsx @@ -1,31 +1,10 @@ import Radio from '@mui/material/Radio' import MRadioGroup from '@mui/material/RadioGroup' import FormControlLabel from '@mui/material/FormControlLabel' -import { makeStyles } from '@mui/styles' import classnames from 'classnames' import React from 'react' import { Label1 } from 'src/components/typography' -import { offColor, secondaryColor } from 'src/styling/variables' -const styles = { - label: { - height: 16, - lineHeight: '16px', - margin: [[0, 0, 4, 0]], - paddingLeft: 3 - }, - subtitle: { - marginTop: -8, - marginLeft: 32, - color: offColor - }, - radio: { - color: secondaryColor - } -} - -const useStyles = makeStyles(styles) - const RadioGroup = ({ name, label, @@ -36,10 +15,11 @@ const RadioGroup = ({ labelClassName, radioClassName }) => { - const classes = useStyles() return ( <> - {label && {label}} + {label && ( + {label} + )} } + control={ + + } label={option.display} className={classnames(labelClassName)} /> {option.subtitle && ( - {option.subtitle} + {option.subtitle} )}
diff --git a/new-lamassu-admin/src/components/inputs/formik/CashCassetteInput.jsx b/new-lamassu-admin/src/components/inputs/formik/CashCassetteInput.jsx index 14f4141a..11744265 100644 --- a/new-lamassu-admin/src/components/inputs/formik/CashCassetteInput.jsx +++ b/new-lamassu-admin/src/components/inputs/formik/CashCassetteInput.jsx @@ -1,30 +1,19 @@ -import { makeStyles } from '@mui/styles' import classNames from 'classnames' import React, { memo, useState } from 'react' import { CashOut } from 'src/components/inputs/cashbox/Cashbox' import { NumberInput } from '../base' -const useStyles = makeStyles({ - flex: { - display: 'flex' - }, - cashCassette: { - height: 36, - marginRight: 14 - } -}) const CashCassetteInput = memo( ({ decimalPlaces, width, threshold, inputClassName, ...props }) => { - const classes = useStyles() const { name, onChange, onBlur, value } = props.field const { touched, errors } = props.form const [notes, setNotes] = useState(value) const error = !!(touched[name] && errors[name]) return ( -
+
{ +const Subheader = ({ item, user }) => { const [prev, setPrev] = useState(null) return ( -
-
+
+