From f75477ac34bb62527bbc3a759f97dbcbf65b72ad Mon Sep 17 00:00:00 2001 From: Rafael Taranto Date: Thu, 8 May 2025 19:15:48 +0100 Subject: [PATCH] partial: second batch of components --- .../src/components/ConfirmDialog.jsx | 14 +- .../src/components/CopyToClipboard.jsx | 4 +- .../src/components/DeleteDialog.jsx | 14 +- .../src/components/ImagePopper.jsx | 8 +- .../src/components/InformativeDialog.jsx | 9 +- new-lamassu-admin/src/components/Modal.jsx | 9 +- .../BooleanPropertiesTable.jsx | 11 +- .../src/components/buttons/IconButton.jsx | 45 ------ .../components/buttons/SupportLinkButton.jsx | 17 +-- .../src/components/buttons/index.js | 2 - .../date-range-picker/DateRangePicker.jsx | 14 +- .../editableProperty/EditableProperty.jsx | 74 --------- .../EditableProperty.styles.js | 36 ----- .../src/components/editableProperty/index.js | 3 - .../src/components/editableTable/Header.jsx | 12 +- .../src/components/editableTable/Row.jsx | 20 ++- .../src/components/fake-table/Table.jsx | 76 +++++----- .../components/fake-table/Table.module.css | 112 ++++++++++++++ .../src/components/fake-table/Table.styles.js | 114 -------------- .../src/components/inputs/base/Select.jsx | 14 +- .../components/inputs/base/Select.module.css | 100 +++++++++++++ .../components/inputs/base/Select.styles.js | 96 ------------ .../src/components/inputs/base/TextInput.jsx | 25 ++-- .../inputs/base/TextInput.module.css | 35 +++++ .../inputs/base/TextInput.styles.js | 24 --- .../inputs/base/ToggleButtonGroup.jsx | 39 +---- .../single-row-table/SingleRowTable.jsx | 10 +- .../src/components/table/Table.module.css | 3 + .../src/components/table/TableCell.jsx | 6 +- .../src/components/tables/DataTable.jsx | 2 +- .../src/components/typography/index.jsx | 37 ++--- .../src/components/typography/styles.js | 13 +- .../typography/typography.module.css | 140 ++++++++++++++++++ .../src/pages/AddMachine/styles.js | 40 ----- .../src/pages/Authentication/LoginCard.jsx | 2 +- .../src/pages/Blacklist/Blacklist.jsx | 14 +- .../src/pages/Blacklist/BlacklistAdvanced.jsx | 28 ++-- .../src/pages/Blacklist/BlacklistTable.jsx | 11 +- .../src/pages/Customers/CustomerProfile.jsx | 13 +- .../LoyaltyPanel/IndividualDiscounts.jsx | 11 +- .../src/pages/LoyaltyPanel/PromoCodes.jsx | 11 +- .../src/pages/Maintenance/CashUnits.jsx | 10 +- .../src/pages/Maintenance/helper.jsx | 10 +- .../Notifications/components/EditHeader.jsx | 9 +- .../src/pages/OperatorInfo/ContactInfo.jsx | 10 +- .../OperatorInfo/SMSNotices/SMSNotices.jsx | 26 ++-- .../pages/OperatorInfo/TermsConditions.jsx | 10 +- .../SessionManagement/SessionManagement.jsx | 12 +- .../CustomInfoRequests/CustomInfoRequests.jsx | 18 ++- .../Forms/TypeFields/NumericalEntry.jsx | 2 +- .../src/styling/global/global.css | 4 + new-lamassu-admin/src/styling/theme.js | 8 + new-lamassu-admin/src/styling/variables.js | 43 +----- 53 files changed, 673 insertions(+), 757 deletions(-) delete mode 100644 new-lamassu-admin/src/components/buttons/IconButton.jsx delete mode 100644 new-lamassu-admin/src/components/editableProperty/EditableProperty.jsx delete mode 100644 new-lamassu-admin/src/components/editableProperty/EditableProperty.styles.js delete mode 100644 new-lamassu-admin/src/components/editableProperty/index.js create mode 100644 new-lamassu-admin/src/components/fake-table/Table.module.css delete mode 100644 new-lamassu-admin/src/components/fake-table/Table.styles.js create mode 100644 new-lamassu-admin/src/components/inputs/base/Select.module.css delete mode 100644 new-lamassu-admin/src/components/inputs/base/Select.styles.js create mode 100644 new-lamassu-admin/src/components/inputs/base/TextInput.module.css delete mode 100644 new-lamassu-admin/src/components/inputs/base/TextInput.styles.js create mode 100644 new-lamassu-admin/src/components/table/Table.module.css create mode 100644 new-lamassu-admin/src/components/typography/typography.module.css delete mode 100644 new-lamassu-admin/src/pages/AddMachine/styles.js diff --git a/new-lamassu-admin/src/components/ConfirmDialog.jsx b/new-lamassu-admin/src/components/ConfirmDialog.jsx index 099c3656..607e8477 100644 --- a/new-lamassu-admin/src/components/ConfirmDialog.jsx +++ b/new-lamassu-admin/src/components/ConfirmDialog.jsx @@ -1,27 +1,27 @@ import Dialog from '@mui/material/Dialog' import DialogActions from '@mui/material/DialogActions' import DialogContent from '@mui/material/DialogContent' +import IconButton from '@mui/material/IconButton' import InputLabel from '@mui/material/InputLabel' import React, { memo, useState } from 'react' import { H4, P } from 'src/components/typography' import CloseIcon from 'src/styling/icons/action/close/zodiac.svg?react' -import { Button, IconButton } from 'src/components/buttons' +import { Button } from 'src/components/buttons' import { TextInput } from 'src/components/inputs' import ErrorMessage from './ErrorMessage' +import SvgIcon from '@mui/material/SvgIcon' export const DialogTitle = ({ children, onClose }) => { return (
{children} {onClose && ( - - + + + + )}
diff --git a/new-lamassu-admin/src/components/CopyToClipboard.jsx b/new-lamassu-admin/src/components/CopyToClipboard.jsx index 32c98081..849e010b 100644 --- a/new-lamassu-admin/src/components/CopyToClipboard.jsx +++ b/new-lamassu-admin/src/components/CopyToClipboard.jsx @@ -37,7 +37,9 @@ const CopyToClipboard = ({
{children && ( <> - + {children}
diff --git a/new-lamassu-admin/src/components/DeleteDialog.jsx b/new-lamassu-admin/src/components/DeleteDialog.jsx index 1af11cc4..1907b286 100644 --- a/new-lamassu-admin/src/components/DeleteDialog.jsx +++ b/new-lamassu-admin/src/components/DeleteDialog.jsx @@ -1,25 +1,25 @@ import Dialog from '@mui/material/Dialog' import DialogActions from '@mui/material/DialogActions' import DialogContent from '@mui/material/DialogContent' +import IconButton from '@mui/material/IconButton' import React from 'react' import { H4, P } from 'src/components/typography' import CloseIcon from 'src/styling/icons/action/close/zodiac.svg?react' -import { Button, IconButton } from 'src/components/buttons' +import { Button } from 'src/components/buttons' import ErrorMessage from './ErrorMessage' +import SvgIcon from '@mui/material/SvgIcon' export const DialogTitle = ({ children, close }) => { return (
{children} {close && ( - - + + + + )}
diff --git a/new-lamassu-admin/src/components/ImagePopper.jsx b/new-lamassu-admin/src/components/ImagePopper.jsx index 500ac5c8..d732e957 100644 --- a/new-lamassu-admin/src/components/ImagePopper.jsx +++ b/new-lamassu-admin/src/components/ImagePopper.jsx @@ -21,8 +21,8 @@ const ImagePopper = memo( const popperOpen = Boolean(popperAnchorEl) - const Image = ({ className }) => ( - + const Image = ({ className, style }) => ( + ) return ( @@ -35,12 +35,12 @@ const ImagePopper = memo( -
+
{ const innerOnClose = () => { @@ -24,7 +24,10 @@ export const InformativeDialog = memo( aria-labelledby="form-dialog-title" {...props}>
- + + + +
diff --git a/new-lamassu-admin/src/components/Modal.jsx b/new-lamassu-admin/src/components/Modal.jsx index c9c866c2..67aa2b9f 100644 --- a/new-lamassu-admin/src/components/Modal.jsx +++ b/new-lamassu-admin/src/components/Modal.jsx @@ -1,12 +1,12 @@ import MaterialModal from '@mui/material/Modal' +import IconButton from '@mui/material/IconButton' +import SvgIcon from '@mui/material/SvgIcon' import Paper from '@mui/material/Paper' import classnames from 'classnames' import React from 'react' import { H1, H4 } from 'src/components/typography' import CloseIcon from 'src/styling/icons/action/close/zodiac.svg?react' -import { IconButton } from 'src/components/buttons' - const Modal = ({ width, height, @@ -59,10 +59,11 @@ const Modal = ({ className="ml-auto" style={{ marginRight: marginBySize, marginTop: marginBySize }}> handleClose()}> - + + +
diff --git a/new-lamassu-admin/src/components/booleanPropertiesTable/BooleanPropertiesTable.jsx b/new-lamassu-admin/src/components/booleanPropertiesTable/BooleanPropertiesTable.jsx index e71ddcf6..10ace709 100644 --- a/new-lamassu-admin/src/components/booleanPropertiesTable/BooleanPropertiesTable.jsx +++ b/new-lamassu-admin/src/components/booleanPropertiesTable/BooleanPropertiesTable.jsx @@ -1,3 +1,4 @@ +import IconButton from '@mui/material/IconButton' import { useFormikContext, Form, Formik, Field as FormikField } from 'formik' import * as R from 'ramda' import React, { useState, memo } from 'react' @@ -9,9 +10,10 @@ import FalseIcon from 'src/styling/icons/table/false.svg?react' import TrueIcon from 'src/styling/icons/table/true.svg?react' import * as Yup from 'yup' -import { Link, IconButton } from 'src/components/buttons' +import { Link } from 'src/components/buttons' import { RadioGroup } from 'src/components/inputs/formik' import { Table, TableBody, TableRow, TableCell } from 'src/components/table' +import SvgIcon from '@mui/material/SvgIcon' const BooleanCell = ({ name }) => { const { values } = useFormikContext() @@ -78,9 +80,10 @@ const BooleanPropertiesTable = memo( ) : ( setEditing(true)} - size="large"> - {disabled ? : } + onClick={() => setEditing(true)}> + + {disabled ? : } + )}
diff --git a/new-lamassu-admin/src/components/buttons/IconButton.jsx b/new-lamassu-admin/src/components/buttons/IconButton.jsx deleted file mode 100644 index ee130961..00000000 --- a/new-lamassu-admin/src/components/buttons/IconButton.jsx +++ /dev/null @@ -1,45 +0,0 @@ -import IconB from '@mui/material/IconButton' -import { makeStyles } from '@mui/styles' -import React from 'react' - -import { comet } from 'src/styling/variables' - -const styles = { - root: ({ size }) => ({ - width: size, - height: size, - '& svg': { - flex: 1 - }, - '&:hover': { - backgroundColor: 'inherit' - }, - '&:hover rect': { - stroke: comet - }, - '&:hover polygon': { - stroke: comet - }, - '&:hover path': { - stroke: comet - } - }) -} - -const useStyles = makeStyles(styles) - -const IconButton = ({ size, children, onClick, ...props }) => { - const classes = useStyles({ size }) - return ( - - {children} - - ) -} - -export default IconButton diff --git a/new-lamassu-admin/src/components/buttons/SupportLinkButton.jsx b/new-lamassu-admin/src/components/buttons/SupportLinkButton.jsx index 54d09617..78937c19 100644 --- a/new-lamassu-admin/src/components/buttons/SupportLinkButton.jsx +++ b/new-lamassu-admin/src/components/buttons/SupportLinkButton.jsx @@ -1,31 +1,18 @@ -import { makeStyles } from '@mui/styles' import React from 'react' import InverseLinkIcon from 'src/styling/icons/action/external link/white.svg?react' import LinkIcon from 'src/styling/icons/action/external link/zodiac.svg?react' import { ActionButton } from 'src/components/buttons' -import { spacer, primaryColor } from 'src/styling/variables' - -const useStyles = makeStyles({ - actionButton: { - marginBottom: spacer * 4 - }, - actionButtonLink: { - textDecoration: 'none', - color: primaryColor - } -}) const SupportLinkButton = ({ link, label }) => { - const classes = useStyles() return ( diff --git a/new-lamassu-admin/src/components/buttons/index.js b/new-lamassu-admin/src/components/buttons/index.js index 193587cb..57b89791 100644 --- a/new-lamassu-admin/src/components/buttons/index.js +++ b/new-lamassu-admin/src/components/buttons/index.js @@ -4,7 +4,6 @@ import Button from './Button' import DeleteButton from './DeleteButton' import FeatureButton from './FeatureButton' import IDButton from './IDButton' -import IconButton from './IconButton' import Link from './Link' import SubpageButton from './SubpageButton' import SupportLinkButton from './SupportLinkButton' @@ -14,7 +13,6 @@ export { Link, ActionButton, FeatureButton, - IconButton, IDButton, AddButton, SupportLinkButton, diff --git a/new-lamassu-admin/src/components/date-range-picker/DateRangePicker.jsx b/new-lamassu-admin/src/components/date-range-picker/DateRangePicker.jsx index 1c942913..0dfdf5b8 100644 --- a/new-lamassu-admin/src/components/date-range-picker/DateRangePicker.jsx +++ b/new-lamassu-admin/src/components/date-range-picker/DateRangePicker.jsx @@ -1,4 +1,3 @@ -import { makeStyles } from '@mui/styles' import classnames from 'classnames' import { compareAsc, differenceInDays, set } from 'date-fns/fp' import * as R from 'ramda' @@ -6,15 +5,6 @@ import React, { useState, useEffect } from 'react' import Calendar from './Calendar' -const styles = { - wrapper: { - backgroundColor: 'white', - borderRadius: 10 - } -} - -const useStyles = makeStyles(styles) - const DateRangePicker = ({ minDate, maxDate, className, onRangeChange }) => { const [from, setFrom] = useState(null) const [to, setTo] = useState(null) @@ -23,8 +13,6 @@ const DateRangePicker = ({ minDate, maxDate, className, onRangeChange }) => { onRangeChange(from, to) }, [from, onRangeChange, to]) - const classes = useStyles() - const handleSelect = day => { if ( (maxDate && compareAsc(maxDate, day) > 0) || @@ -55,7 +43,7 @@ const DateRangePicker = ({ minDate, maxDate, className, onRangeChange }) => { return ( <> -
+
{ - const [editing, setEditing] = useState(false) - const [currentCode, setCurrentCode] = useState(code) - - const classes = useStyles() - - const innerSave = () => { - save(currentCode) - setEditing(false) - } - - const innerCancel = () => setEditing(false) - - return ( - <> -
-

{title}

- {editing ? ( -
- - Cancel - - - Save - -
- ) : ( -
- -
- )} -
- {editing ? ( - setCurrentCode(event.target.value)} - className={classes.radioButtons} - /> - ) : ( -

- {`${prefixText} ${options - .find(it => it.code === currentCode) - .display.toLowerCase()}`} -

- )} - - ) - } -) - -export default EditableProperty diff --git a/new-lamassu-admin/src/components/editableProperty/EditableProperty.styles.js b/new-lamassu-admin/src/components/editableProperty/EditableProperty.styles.js deleted file mode 100644 index 91ebb25b..00000000 --- a/new-lamassu-admin/src/components/editableProperty/EditableProperty.styles.js +++ /dev/null @@ -1,36 +0,0 @@ -const optionsRowHeigth = 43 - -const editablePropertyStyles = { - transparentButton: { - '& > *': { - margin: 'auto 12px' - }, - '& button': { - border: 'none', - backgroundColor: 'transparent', - cursor: 'pointer' - } - }, - rowWrapper: { - display: 'flex', - alignItems: 'center', - position: 'relative', - flex: 'wrap', - height: optionsRowHeigth - }, - rightAligned: { - display: 'flex', - position: 'absolute', - right: 0 - }, - radioButtons: { - display: 'flex', - flexDirection: 'row', - height: optionsRowHeigth - }, - leftSpace: { - marginLeft: '20px' - } -} - -export { editablePropertyStyles } diff --git a/new-lamassu-admin/src/components/editableProperty/index.js b/new-lamassu-admin/src/components/editableProperty/index.js deleted file mode 100644 index 00091dd2..00000000 --- a/new-lamassu-admin/src/components/editableProperty/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import EditableProperty from './EditableProperty' - -export { EditableProperty } diff --git a/new-lamassu-admin/src/components/editableTable/Header.jsx b/new-lamassu-admin/src/components/editableTable/Header.jsx index cb06ffaa..b6406feb 100644 --- a/new-lamassu-admin/src/components/editableTable/Header.jsx +++ b/new-lamassu-admin/src/components/editableTable/Header.jsx @@ -1,4 +1,3 @@ -import { makeStyles } from '@mui/styles' import classnames from 'classnames' import * as R from 'ramda' import React, { useContext } from 'react' @@ -13,14 +12,6 @@ import { sentenceCase } from 'src/utils/string' import TableCtx from './Context' -const styles = { - orderedBySpan: { - whiteSpace: 'nowrap' - } -} - -const useStyles = makeStyles(styles) - const groupSecondHeader = elements => { const doubleHeader = R.prop('doubleHeader') const sameDoubleHeader = (a, b) => doubleHeader(a) === doubleHeader(b) @@ -46,7 +37,6 @@ const groupSecondHeader = elements => { } const Header = () => { - const classes = useStyles() const { elements, enableEdit, @@ -79,7 +69,7 @@ const Header = () => { idx ) => { const orderClasses = classnames({ - [classes.orderedBySpan]: + 'whitespace-nowrap': R.isNil(header) && !R.isNil(orderedBy) && R.equals(name, orderedBy.code) }) diff --git a/new-lamassu-admin/src/components/editableTable/Row.jsx b/new-lamassu-admin/src/components/editableTable/Row.jsx index 7be62e77..67e484fe 100644 --- a/new-lamassu-admin/src/components/editableTable/Row.jsx +++ b/new-lamassu-admin/src/components/editableTable/Row.jsx @@ -1,5 +1,7 @@ import { makeStyles } from '@mui/styles' import Switch from '@mui/material/Switch' +import IconButton from '@mui/material/IconButton' +import SvgIcon from '@mui/material/SvgIcon' import classnames from 'classnames' import { Field, useFormikContext } from 'formik' import * as R from 'ramda' @@ -13,7 +15,7 @@ import DisabledEditIcon from 'src/styling/icons/action/edit/disabled.svg?react' import EditIcon from 'src/styling/icons/action/edit/enabled.svg?react' import StripesSvg from 'src/styling/icons/stripes.svg?react' -import { Link, IconButton } from 'src/components/buttons' +import { Link } from 'src/components/buttons' import TableCtx from './Context' import styles from './Row.styles' @@ -77,9 +79,10 @@ const ActionCol = ({ disabled, editing }) => { onEdit && onEdit(values.id)} - size="large"> - {disableEdit ? : } + onClick={() => onEdit && onEdit(values.id)}> + + {disableEdit ? : } + )} @@ -89,9 +92,10 @@ const ActionCol = ({ disabled, editing }) => { disabled={disabled} onClick={() => { setDeleteDialog(true) - }} - size="large"> - {disabled ? : } + }}> + + {disabled ? : } + { )} - ); + ) } const ECol = ({ editing, focus, config, extraPaddingRight, extraPadding }) => { diff --git a/new-lamassu-admin/src/components/fake-table/Table.jsx b/new-lamassu-admin/src/components/fake-table/Table.jsx index 3c5fdef9..cc2c2df6 100644 --- a/new-lamassu-admin/src/components/fake-table/Table.jsx +++ b/new-lamassu-admin/src/components/fake-table/Table.jsx @@ -1,14 +1,10 @@ import Card from '@mui/material/Card' import CardContent from '@mui/material/CardContent' -import { makeStyles } from '@mui/styles' import classnames from 'classnames' import React from 'react' import { Link } from 'src/components/buttons' - -import styles from './Table.styles' - -const useStyles = makeStyles(styles) +import styles from './Table.module.css' const Table = ({ children, className, ...props }) => (
@@ -17,17 +13,12 @@ const Table = ({ children, className, ...props }) => ( ) const THead = ({ children, className }) => { - const classes = useStyles() - return
{children}
+ return
{children}
} const TDoubleLevelHead = ({ children, className }) => { - const classes = useStyles() - return ( -
- {children} -
+
{children}
) } @@ -45,15 +36,28 @@ const Td = ({ textAlign, action }) => { - const classes = useStyles({ textAlign, width, size }) - const classNames = { - [classes.td]: true, - [classes.tdHeader]: header, - [classes.actionCol]: action, - [classes.size]: !header, - [classes.bold]: !header && bold + const inlineStyle = { + width, + textAlign } - return
{children}
+ + const cssClasses = { + [styles.td]: !header, + [styles.tdHeader]: header, + [styles.bold]: !header && bold, + [styles.actionCol]: action, + [styles.sizeSm]: !header && size === 'sm', + [styles.sizeLg]: !header && size === 'lg' + } + + return ( +
+ {children} +
+ ) } const Th = ({ children, ...props }) => { @@ -65,10 +69,10 @@ const Th = ({ children, ...props }) => { } const ThDoubleLevel = ({ title, children, className, width }) => { - const classes = useStyles({ width }) - return ( -
+
{title}
{children}
@@ -85,23 +89,25 @@ const Tr = ({ size, newRow }) => { - const classes = useStyles({ size }) - const cardClasses = { root: classes.cardContentRoot } - const classNames = { - [classes.tr]: true, - [classes.trError]: error, - [classes.card]: true, - [classes.trAdding]: newRow, - className + const cardClasses = { + [styles.card]: true, + [styles.trError]: error, + [styles.trAdding]: newRow + } + + const mainContentClasses = { + [styles.mainContent]: true, + [styles.sizeSm]: size === 'sm', + [styles.sizeLg]: size === 'lg' } return ( <> - - -
{children}
+ + +
{children}
{error && shouldShowError && ( -
{errorMessage}
+
{errorMessage}
)} diff --git a/new-lamassu-admin/src/components/fake-table/Table.module.css b/new-lamassu-admin/src/components/fake-table/Table.module.css new file mode 100644 index 00000000..5d9615d4 --- /dev/null +++ b/new-lamassu-admin/src/components/fake-table/Table.module.css @@ -0,0 +1,112 @@ +.bold { + font-weight: 700; +} + +.header { + background-color: var(--zodiac); + height: 32px; + text-align: left; + color: white; + display: flex; + align-items: center; + font-size: 14px; + font-weight: 500; +} + +.doubleHeader { + background-color: var(--zodiac); + height: 64px; + color: white; + display: table-row; + font-size: 14px; + font-weight: 500; +} + +.thDoubleLevel { + display: table-cell; +} + +.thDoubleLevel > :first-child { + margin: 0 10px; + font-size: 13px; + font-weight: 500; + display: flex; + justify-content: center; + align-items: center; + background-color: var(--zodiac); + color: white; + border-radius: 0 0 8px 8px; + height: 28px; +} + +.thDoubleLevel > :last-child { + padding: 0 11px; + display: table-cell; + vertical-align: middle; + height: 36px; +} + +.cellDoubleLevel { + display: flex; + padding: 0 16px; +} + +.td { + padding: 1px 24px 0 24px; +} + +.tdHeader { + vertical-align: middle; + display: table-cell; + padding: 0 24px; +} + +.trError { + background-color: var(--misty-rose); +} + +.trAdding { + background-color: var(--spring3); +} + +.mainContent { + display: flex; + align-items: center; +} + +.cardContentRoot { + margin: 0; + padding: 0; +} + +.cardContentRoot:last-child { + padding: 0; +} + +.card { + font-size: 14px; + margin: 4px 0 0 0; + width: 100%; + box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08); +} + +.card:before { + height: 0; +} + +.actionCol { + margin-left: auto; +} + +.errorContent { + padding: 12px 0 12px 24px; + color: var(--tomato); +} + +.sizeSm { + min-height: 34px; +} + +.sizeLg { + min-height: 68px; +} \ No newline at end of file diff --git a/new-lamassu-admin/src/components/fake-table/Table.styles.js b/new-lamassu-admin/src/components/fake-table/Table.styles.js deleted file mode 100644 index 00586996..00000000 --- a/new-lamassu-admin/src/components/fake-table/Table.styles.js +++ /dev/null @@ -1,114 +0,0 @@ -import typographyStyles from 'src/components/typography/styles' -import { bySize, bold } from 'src/styling/helpers' -import { - tableHeaderColor, - tableHeaderHeight, - tableErrorColor, - tableSuccessColor, - spacer, - white, - tableDoubleHeaderHeight, - offColor, - errorColor -} from 'src/styling/variables' - -const { tl2, p, label1 } = typographyStyles - -export default { - size: ({ size }) => bySize(size), - bold, - header: { - extend: tl2, - backgroundColor: tableHeaderColor, - height: tableHeaderHeight, - textAlign: 'left', - color: white, - display: 'flex', - alignItems: 'center' - }, - doubleHeader: { - extend: tl2, - backgroundColor: tableHeaderColor, - height: tableDoubleHeaderHeight, - color: white, - display: 'table-row' - }, - thDoubleLevel: ({ width }) => ({ - width, - display: 'table-cell', - '& > :first-child': { - margin: [[0, 10]], - extend: label1, - fontWeight: 700, - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - backgroundColor: offColor, - color: white, - borderRadius: [[0, 0, 8, 8]], - height: 28 - }, - '& > :last-child': { - padding: [[0, 11]], - display: 'table-cell', - verticalAlign: 'middle', - height: tableDoubleHeaderHeight - 28 - } - }), - cellDoubleLevel: { - display: 'flex', - padding: [[0, spacer * 2]] - }, - td: ({ textAlign, width }) => ({ - width, - padding: [[1, spacer * 3, 0, spacer * 3]], - textAlign - }), - tdHeader: { - verticalAlign: 'middle', - display: 'table-cell', - padding: [[0, spacer * 3]] - }, - trError: { - backgroundColor: tableErrorColor - }, - trAdding: { - backgroundColor: tableSuccessColor - }, - mainContent: ({ size }) => { - const sizes = { - sm: 34, - lg: 68 - } - const minHeight = sizes[size] || 48 - return { - display: 'flex', - alignItems: 'center', - minHeight - } - }, - // mui-overrides - cardContentRoot: { - margin: 0, - padding: 0, - '&:last-child': { - padding: 0 - } - }, - card: { - extend: p, - '&:before': { - height: 0 - }, - margin: [[4, 0, 0, 0]], - width: '100%', - boxShadow: [[0, 0, 4, 0, 'rgba(0, 0, 0, 0.08)']] - }, - actionCol: { - marginLeft: 'auto' - }, - errorContent: { - padding: [[12, 0, 12, 24]], - color: errorColor - } -} diff --git a/new-lamassu-admin/src/components/inputs/base/Select.jsx b/new-lamassu-admin/src/components/inputs/base/Select.jsx index c79839b3..098844a5 100644 --- a/new-lamassu-admin/src/components/inputs/base/Select.jsx +++ b/new-lamassu-admin/src/components/inputs/base/Select.jsx @@ -1,16 +1,12 @@ -import { makeStyles } from '@mui/styles' import classnames from 'classnames' import { useSelect } from 'downshift' import * as R from 'ramda' import React from 'react' import Arrowdown from 'src/styling/icons/action/arrow/regular.svg?react' -import styles from './Select.styles' - -const useStyles = makeStyles(styles) +import styles from './Select.module.css' function Select({ className, label, items, ...props }) { - const classes = useStyles() const { isOpen, @@ -28,18 +24,18 @@ function Select({ className, label, items, ...props }) { }) const selectClassNames = { - [classes.select]: true, - [classes.selectFiltered]: props.defaultAsFilter + [styles.select]: true, + [styles.selectFiltered]: props.defaultAsFilter ? true : !R.equals(selectedItem, props.default), - [classes.open]: isOpen + [styles.open]: isOpen } return (
    diff --git a/new-lamassu-admin/src/components/inputs/base/Select.module.css b/new-lamassu-admin/src/components/inputs/base/Select.module.css new file mode 100644 index 00000000..4356cde7 --- /dev/null +++ b/new-lamassu-admin/src/components/inputs/base/Select.module.css @@ -0,0 +1,100 @@ +.selectedItem { + width: 111px; + display: block; + white-space: nowrap; + overflow: hidden; +} + +.select { + width: 152px; + z-index: 1; +} + +.select label { + font-size: 13px; + font-family: var(--museo); + font-weight: 500; + color: var(--comet); + padding-left: 10px; +} + +.select button { + font-size: 14px; + font-family: var(--museo); + font-weight: 500; + position: relative; + border: 0; + background-color: var(--zircon); + width: 152px; + padding: 6px 0 6px 12px; + border-radius: 20px; + line-height: 1.14; + text-align: left; + color: var(--comet); + cursor: pointer; + outline: 0 none; +} + +.select ul { + max-height: 200px; + width: 152px; + overflow-y: auto; + position: absolute; + margin: 0; + border-top: 0; + padding: 0; + border-radius: 0 0 8px 8px; + background-color: var(--zircon); + outline: 0 none; +} + +.select ul li { + font-size: 14px; + font-family: var(--museo); + font-weight: 500; + list-style-type: none; + padding: 6px 12px; + cursor: pointer; +} + +.select ul li span { + width: 100%; + display: block; + overflow: hidden; + white-space: nowrap; +} + +.select ul li:hover { + background-color: var(--comet); + color: white; +} + +.select svg { + position: absolute; + top: 12px; + right: 14px; + fill: var(--comet); +} + +.selectFiltered button { + background-color: var(--comet); + color: white; +} + +.selectFiltered ul li { + background-color: var(--comet); + color: white; +} + +.selectFiltered ul li:hover { + background-color: var(--zircon); + color: var(--comet); +} + +.selectFiltered svg { + fill: white !important; +} + +.open button { + border-radius: 8px 8px 0 0; +} \ No newline at end of file diff --git a/new-lamassu-admin/src/components/inputs/base/Select.styles.js b/new-lamassu-admin/src/components/inputs/base/Select.styles.js deleted file mode 100644 index aebce882..00000000 --- a/new-lamassu-admin/src/components/inputs/base/Select.styles.js +++ /dev/null @@ -1,96 +0,0 @@ -import { subheaderColor, offColor, white } from '../../../styling/variables' -import typographyStyles from '../../typography/styles' - -const { p, label1 } = typographyStyles - -const WIDTH = 152 - -export default { - selectedItem: { - width: WIDTH - 41, - display: 'block', - whiteSpace: 'nowrap', - overflow: 'hidden' - }, - select: { - width: WIDTH, - zIndex: 1, - '& label': { - extend: label1, - color: offColor, - paddingLeft: 10 - }, - '& button': { - extend: p, - position: 'relative', - border: 0, - backgroundColor: subheaderColor, - width: WIDTH, - padding: [[6, 0, 6, 12]], - borderRadius: 20, - lineHeight: '1.14', - textAlign: 'left', - color: offColor, - cursor: 'pointer', - outline: '0 none' - }, - '& ul': { - maxHeight: '200px', - width: WIDTH, - overflowY: 'auto', - position: 'absolute', - margin: 0, - borderTop: 0, - padding: 0, - borderRadius: [[0, 0, 8, 8]], - backgroundColor: subheaderColor, - outline: '0 none', - '& li': { - extend: p, - listStyleType: 'none', - padding: [[6, 12]], - cursor: 'pointer', - '& span': { - width: '100%', - display: 'block', - overflow: 'hidden', - whiteSpace: 'nowrap' - } - }, - '& li:hover': { - backgroundColor: offColor, - color: white - } - }, - '& svg': { - position: 'absolute', - top: 12, - right: 14, - fill: offColor - } - }, - selectFiltered: { - '& button': { - backgroundColor: offColor, - color: white - }, - '& ul': { - '& li': { - backgroundColor: offColor, - color: white - }, - '& li:hover': { - backgroundColor: subheaderColor, - color: offColor - } - }, - '& svg': { - fill: [[white], '!important'] - } - }, - open: { - '& button': { - borderRadius: [[8, 8, 0, 0]] - } - } -} diff --git a/new-lamassu-admin/src/components/inputs/base/TextInput.jsx b/new-lamassu-admin/src/components/inputs/base/TextInput.jsx index 2c4592e7..8f314071 100644 --- a/new-lamassu-admin/src/components/inputs/base/TextInput.jsx +++ b/new-lamassu-admin/src/components/inputs/base/TextInput.jsx @@ -1,12 +1,9 @@ -import { makeStyles } from '@mui/styles' import TextField from '@mui/material/TextField' import classnames from 'classnames' import * as R from 'ramda' import React, { memo } from 'react' -import styles from './TextInput.styles' - -const useStyles = makeStyles(styles) +import styles from './TextInput.module.css' const TextInput = memo( ({ @@ -27,11 +24,20 @@ const TextInput = memo( InputProps, ...props }) => { - const classes = useStyles({ textAlign, width, size }) const isTextFilled = !error && !R.isNil(value) && !R.isEmpty(value) const filled = isPasswordFilled || isTextFilled + + // Set CSS variables for dynamic styles + const rootStyle = { + '--input-width': width, + '--input-text-align': textAlign + } + + // Determine size class based on size prop + const sizeClass = size === 'sm' ? styles.sizeSm : size === 'lg' ? styles.sizeLg : styles.size + const divClass = { - [classes.bold]: bold + [styles.bold]: bold } return ( @@ -42,13 +48,14 @@ const TextInput = memo( onBlur={onBlur} error={error} value={value} - classes={{ root: classes.root }} + classes={{ root: styles.root }} className={className} + style={rootStyle} InputProps={{ className: classnames(divClass), classes: { - root: classes.size, - underline: filled ? classes.underline : null, + root: sizeClass, + underline: filled ? styles.underline : null, input: inputClasses }, ...InputProps diff --git a/new-lamassu-admin/src/components/inputs/base/TextInput.module.css b/new-lamassu-admin/src/components/inputs/base/TextInput.module.css new file mode 100644 index 00000000..8559729d --- /dev/null +++ b/new-lamassu-admin/src/components/inputs/base/TextInput.module.css @@ -0,0 +1,35 @@ +.size { + margin-top: 2px; + font-size: var(--input-font-size, 16px); +} + +.sizeSm { + margin-top: 2px; + font-size: var(--input-font-size-sm, 14px); +} + +.sizeLg { + margin-top: 0; + font-size: var(--input-font-size-lg, 24px); + font-weight: var(--input-font-weight-bold, 700); +} + +.bold { + font-weight: var(--input-font-weight-bold, 700); +} + +.root { + width: var(--input-width); +} + +.root input { + text-align: var(--input-text-align, left); +} + +.underline:before { + border-bottom-color: var(--spring); +} + +.underline:hover:not(.Mui-disabled)::before { + border-bottom-color: var(--spring); +} \ No newline at end of file diff --git a/new-lamassu-admin/src/components/inputs/base/TextInput.styles.js b/new-lamassu-admin/src/components/inputs/base/TextInput.styles.js deleted file mode 100644 index 1c8db3e5..00000000 --- a/new-lamassu-admin/src/components/inputs/base/TextInput.styles.js +++ /dev/null @@ -1,24 +0,0 @@ -import { bySize, bold } from 'src/styling/helpers' -import { secondaryColor } from 'src/styling/variables' - -export default { - size: ({ size }) => ({ - marginTop: size === 'lg' ? 0 : 2, - ...bySize(size) - }), - bold, - root: ({ width, textAlign }) => ({ - width, - '& input': { - textAlign - } - }), - underline: { - '&:before': { - borderBottomColor: secondaryColor - }, - '&:hover:not(.Mui-disabled)::before': { - borderBottomColor: secondaryColor - } - } -} diff --git a/new-lamassu-admin/src/components/inputs/base/ToggleButtonGroup.jsx b/new-lamassu-admin/src/components/inputs/base/ToggleButtonGroup.jsx index e236e42f..6d3ec80d 100644 --- a/new-lamassu-admin/src/components/inputs/base/ToggleButtonGroup.jsx +++ b/new-lamassu-admin/src/components/inputs/base/ToggleButtonGroup.jsx @@ -1,38 +1,8 @@ -import { makeStyles } from '@mui/styles' import MUIToggleButtonGroup from '@mui/material/ToggleButtonGroup' import ToggleButton from '@mui/material/ToggleButton' import React from 'react' import { H4, P } from 'src/components/typography' -import { backgroundColor, comet } from 'src/styling/variables' -const styles = { - noTextTransform: { - textTransform: 'none' - }, - flex: { - display: 'flex', - alignItems: 'center', - justifyContent: 'start', - width: '90%', - overflow: 'hidden', - maxHeight: 80 - }, - buttonTextContent: { - marginLeft: 32, - textTransform: 'none', - textAlign: 'left' - }, - button: { - backgroundColor: backgroundColor, - marginBottom: 16 - }, - paragraph: { - color: comet, - marginTop: -10 - } -} - -const useStyles = makeStyles(styles) const ToggleButtonGroup = ({ name, orientation = 'vertical', @@ -42,7 +12,6 @@ const ToggleButtonGroup = ({ size = 'small', ...props }) => { - const classes = useStyles() return ( { return ( -
    +
    -
    +

    {option.title}

    -

    {option.description}

    +

    {option.description}

    diff --git a/new-lamassu-admin/src/components/single-row-table/SingleRowTable.jsx b/new-lamassu-admin/src/components/single-row-table/SingleRowTable.jsx index 9bdf1cbf..8e7cad48 100644 --- a/new-lamassu-admin/src/components/single-row-table/SingleRowTable.jsx +++ b/new-lamassu-admin/src/components/single-row-table/SingleRowTable.jsx @@ -1,3 +1,5 @@ +import IconButton from '@mui/material/IconButton' +import SvgIcon from '@mui/material/SvgIcon' import React from 'react' import { Table, @@ -9,8 +11,6 @@ import { } from 'src/components/fake-table/Table' import EditIcon from 'src/styling/icons/action/edit/white.svg?react' -import { IconButton } from 'src/components/buttons' - import { Label1, P } from '../typography/index.jsx' const SingleRowTable = ({ @@ -27,8 +27,10 @@ const SingleRowTable = ({ {title} - - + + + + diff --git a/new-lamassu-admin/src/components/table/Table.module.css b/new-lamassu-admin/src/components/table/Table.module.css new file mode 100644 index 00000000..4ba9e91c --- /dev/null +++ b/new-lamassu-admin/src/components/table/Table.module.css @@ -0,0 +1,3 @@ +.tableCell { + padding: 0 6px; +} diff --git a/new-lamassu-admin/src/components/table/TableCell.jsx b/new-lamassu-admin/src/components/table/TableCell.jsx index 350c4b86..204915ff 100644 --- a/new-lamassu-admin/src/components/table/TableCell.jsx +++ b/new-lamassu-admin/src/components/table/TableCell.jsx @@ -1,17 +1,19 @@ import classnames from 'classnames' import React, { memo } from 'react' +import classes from './Table.module.css' + const TableCell = memo( ({ colspan, rightAlign, className, children, ...props }) => { const styles = { - 'py-0 px-6': true, + [classes.tableCell]: true, 'text-right': rightAlign } return ( {children} diff --git a/new-lamassu-admin/src/components/tables/DataTable.jsx b/new-lamassu-admin/src/components/tables/DataTable.jsx index 0242d9b5..29bba105 100644 --- a/new-lamassu-admin/src/components/tables/DataTable.jsx +++ b/new-lamassu-admin/src/components/tables/DataTable.jsx @@ -40,7 +40,7 @@ const Row = ({ const trClasses = { 'cursor-pointer': hasPointer, 'border-2 border-transparent': true, - 'border-2 border-zircon shadow-xl': expanded + 'border-2 border-zircon shadow-md': expanded } return ( diff --git a/new-lamassu-admin/src/components/typography/index.jsx b/new-lamassu-admin/src/components/typography/index.jsx index fe53c529..58a0c026 100644 --- a/new-lamassu-admin/src/components/typography/index.jsx +++ b/new-lamassu-admin/src/components/typography/index.jsx @@ -1,16 +1,12 @@ -import { makeStyles } from '@mui/styles' import classnames from 'classnames' import React from 'react' -import styles from './styles' - -const useStyles = makeStyles(styles) +import styles from './typography.module.css' function H1({ children, noMargin, className, ...props }) { - const classes = useStyles() const classNames = { - [classes.h1]: true, - [classes.noMargin]: noMargin, + [styles.h1]: true, + [styles.noMargin]: noMargin, [className]: !!className } @@ -22,10 +18,9 @@ function H1({ children, noMargin, className, ...props }) { } function H2({ children, noMargin, className, ...props }) { - const classes = useStyles() const classNames = { - [classes.h2]: true, - [classes.noMargin]: noMargin, + [styles.h2]: true, + [styles.noMargin]: noMargin, [className]: !!className } @@ -37,10 +32,9 @@ function H2({ children, noMargin, className, ...props }) { } function H3({ children, noMargin, className, ...props }) { - const classes = useStyles() const classNames = { - [classes.h3]: true, - [classes.noMargin]: noMargin, + [styles.h3]: true, + [styles.noMargin]: noMargin, [className]: !!className } @@ -52,10 +46,9 @@ function H3({ children, noMargin, className, ...props }) { } function H4({ children, noMargin, className, ...props }) { - const classes = useStyles() const classNames = { - [classes.h4]: true, - [classes.noMargin]: noMargin, + [styles.h4]: true, + [styles.noMargin]: noMargin, [className]: !!className } @@ -67,10 +60,9 @@ function H4({ children, noMargin, className, ...props }) { } function H5({ children, noMargin, className, ...props }) { - const classes = useStyles() const classNames = { - [classes.h5]: true, - [classes.noMargin]: noMargin, + [styles.h5]: true, + [styles.noMargin]: noMargin, [className]: !!className } @@ -94,12 +86,11 @@ const Label3 = pBuilder('label3') function pBuilder(elementClass) { return ({ inline, noMargin, className, children, ...props }) => { - const classes = useStyles() const classNames = { [className]: !!className, - [classes[elementClass]]: elementClass, - [classes.inline]: inline, - [classes.noMargin]: noMargin + [styles[elementClass]]: elementClass, + [styles.inline]: inline, + [styles.noMargin]: noMargin } return (

    diff --git a/new-lamassu-admin/src/components/typography/styles.js b/new-lamassu-admin/src/components/typography/styles.js index 35470d9d..1d3f9fc8 100644 --- a/new-lamassu-admin/src/components/typography/styles.js +++ b/new-lamassu-admin/src/components/typography/styles.js @@ -7,8 +7,7 @@ import { fontSize5, fontPrimary, fontSecondary, - fontMonospaced, - codeInputFontSize + fontMonospaced } from 'src/styling/variables' const base = { @@ -17,6 +16,10 @@ const base = { } export default { + base: { + lineHeight: '120%', + color: fontColor + }, h1: { extend: base, fontSize: fontSize1, @@ -126,12 +129,6 @@ export default { fontWeight: 500, color: fontColor }, - confirmationCode: { - extend: base, - fontSize: codeInputFontSize, - fontFamily: fontSecondary, - fontWeight: 900 - }, inline: { display: 'inline' }, diff --git a/new-lamassu-admin/src/components/typography/typography.module.css b/new-lamassu-admin/src/components/typography/typography.module.css new file mode 100644 index 00000000..b08fa5de --- /dev/null +++ b/new-lamassu-admin/src/components/typography/typography.module.css @@ -0,0 +1,140 @@ +.base { + line-height: 120%; + color: var(--zodiac); +} + +.h1 { + composes: base; + font-size: 24px; + font-family: var(--mont); + font-weight: 900; +} + +.h2 { + composes: base; + font-size: 20px; + font-family: var(--mont); + font-weight: 900; +} + +.h3 { + composes: base; + font-size: 14px; + font-family: var(--mont); + font-weight: 900; +} + +.h4 { + composes: base; + font-size: 14px; + font-family: var(--mont); + font-weight: 700; +} + +.h5 { + composes: base; + font-size: 16px; + font-family: var(--mont); + font-weight: 700; +} + +.p { + composes: base; + font-size: 14px; + font-family: var(--museo); + font-weight: 500; +} + +.tl1 { + composes: base; + font-size: 20px; + font-family: var(--museo); + font-weight: 700; +} + +.tl2 { + composes: base; + font-size: 14px; + font-family: var(--museo); + font-weight: 700; +} + +.info1 { + composes: base; + font-size: 24px; + font-family: var(--museo); + font-weight: 700; +} + +.info2 { + composes: base; + font-size: 16px; + font-family: var(--museo); + font-weight: 700; +} + +.info3 { + composes: base; + font-size: 16px; + font-family: var(--museo); + font-weight: 500; +} + +.mono { + composes: base; + font-size: 14px; + font-family: var(--bpmono); + font-weight: 500; +} + +.monoBold { + font-weight: 700; +} + +.monoSmall { + font-size: 13px; +} + +.inputFont { + font-size: 20px; + font-family: var(--museo); + font-weight: 500; + line-height: 110%; + color: var(--zodiac); +} + +.regularLabel { + font-size: 14px; + font-family: var(--museo); + font-weight: 500; + line-height: 110%; +} + +.label1 { + font-size: 13px; + font-family: var(--museo); + font-weight: 500; + color: var(--zodiac); +} + +.label2 { + font-size: 13px; + font-family: var(--museo); + font-weight: 700; + color: var(--zodiac); +} + +.label3 { + font-size: 14px; + font-family: var(--museo); + font-weight: 500; + color: var(--zodiac); +} + +.inline { + display: inline; +} + +.noMargin { + margin: 0; +} diff --git a/new-lamassu-admin/src/pages/AddMachine/styles.js b/new-lamassu-admin/src/pages/AddMachine/styles.js deleted file mode 100644 index 926e629e..00000000 --- a/new-lamassu-admin/src/pages/AddMachine/styles.js +++ /dev/null @@ -1,40 +0,0 @@ -import typographyStyles from 'src/components/typography/styles' -import { - placeholderColor, - primaryColor, - mainWidth, - spring2, - spring3, - errorColor -} from 'src/styling/variables' - -const { tl2, p } = typographyStyles - -const fill = '100%' -const flexDirection = 'column' - -const styles = { - wrapper: { - width: mainWidth, - height: fill, - margin: '0 auto', - flex: 1, - display: 'flex', - flexDirection - }, - contentDiv: { - display: 'flex', - flex: 1, - flexDirection: 'row' - }, - headerDiv: { - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center' - }, - contentWrapper: { - marginLeft: 48 - } -} - -export default styles diff --git a/new-lamassu-admin/src/pages/Authentication/LoginCard.jsx b/new-lamassu-admin/src/pages/Authentication/LoginCard.jsx index 4179cfe9..d6617fdc 100644 --- a/new-lamassu-admin/src/pages/Authentication/LoginCard.jsx +++ b/new-lamassu-admin/src/pages/Authentication/LoginCard.jsx @@ -57,7 +57,7 @@ const LoginCard = () => {

    -
    Lamassu Admin
    +

    Lamassu Admin

    {renderState()}
    diff --git a/new-lamassu-admin/src/pages/Blacklist/Blacklist.jsx b/new-lamassu-admin/src/pages/Blacklist/Blacklist.jsx index d0962c94..8b51544e 100644 --- a/new-lamassu-admin/src/pages/Blacklist/Blacklist.jsx +++ b/new-lamassu-admin/src/pages/Blacklist/Blacklist.jsx @@ -3,6 +3,8 @@ import Dialog from '@mui/material/Dialog' import DialogTitle from '@mui/material/DialogTitle' import DialogContent from '@mui/material/DialogContent' import Switch from '@mui/material/Switch' +import SvgIcon from '@mui/material/SvgIcon' +import IconButton from '@mui/material/IconButton' import * as R from 'ramda' import React, { useState } from 'react' import { HelpTooltip } from 'src/components/Tooltip' @@ -12,12 +14,7 @@ import CloseIcon from 'src/styling/icons/action/close/zodiac.svg?react' import ReverseSettingsIcon from 'src/styling/icons/circle buttons/settings/white.svg?react' import SettingsIcon from 'src/styling/icons/circle buttons/settings/zodiac.svg?react' -import { - Link, - Button, - IconButton, - SupportLinkButton -} from 'src/components/buttons' +import { Link, Button, SupportLinkButton } from 'src/components/buttons' import { fromNamespace, toNamespace } from 'src/utils/config' import BlackListAdvanced from './BlacklistAdvanced' @@ -100,11 +97,12 @@ const PaperWalletDialog = ({ onConfirmed, onDissmised, open, props }) => {
    - + + +

    {'Are you sure you want to enable this?'}

     diff --git a/new-lamassu-admin/src/pages/Blacklist/BlacklistAdvanced.jsx b/new-lamassu-admin/src/pages/Blacklist/BlacklistAdvanced.jsx index 5314bac9..6050af0c 100644 --- a/new-lamassu-admin/src/pages/Blacklist/BlacklistAdvanced.jsx +++ b/new-lamassu-admin/src/pages/Blacklist/BlacklistAdvanced.jsx @@ -1,3 +1,5 @@ +import IconButton from '@mui/material/IconButton' +import SvgIcon from '@mui/material/SvgIcon' import { Form, Formik, Field } from 'formik' import * as R from 'ramda' import React, { useState } from 'react' @@ -11,7 +13,7 @@ import DefaultIconReverse from 'src/styling/icons/button/retry/white.svg?react' import DefaultIcon from 'src/styling/icons/button/retry/zodiac.svg?react' import * as Yup from 'yup' -import { ActionButton, IconButton, Button } from 'src/components/buttons' +import { ActionButton, Button } from 'src/components/buttons' import { TextInput } from 'src/components/inputs/formik' const DEFAULT_MESSAGE = `This address may be associated with a deceptive offer or a prohibited group. Please make sure you're using an address from your own wallet.` @@ -56,11 +58,10 @@ const BlacklistAdvanced = ({ textAlign: 'center', size: 'sm', view: it => ( - setSelectedMessage(it)} - size="large"> - + setSelectedMessage(it)}> + + + ) }, @@ -76,13 +77,14 @@ const BlacklistAdvanced = ({ disabled={ !R.isNil(R.path(['allowToggle'], it)) && !R.path(['allowToggle'], it) - } - size="large"> - {R.path(['allowToggle'], it) ? ( - - ) : ( - - )} + }> + + {R.path(['allowToggle'], it) ? ( + + ) : ( + + )} + ) } diff --git a/new-lamassu-admin/src/pages/Blacklist/BlacklistTable.jsx b/new-lamassu-admin/src/pages/Blacklist/BlacklistTable.jsx index a03bbb41..4171f1b1 100644 --- a/new-lamassu-admin/src/pages/Blacklist/BlacklistTable.jsx +++ b/new-lamassu-admin/src/pages/Blacklist/BlacklistTable.jsx @@ -1,3 +1,5 @@ +import IconButton from '@mui/material/IconButton' +import SvgIcon from '@mui/material/SvgIcon' import * as R from 'ramda' import React, { useState } from 'react' import { DeleteDialog } from 'src/components/DeleteDialog' @@ -5,8 +7,6 @@ import DataTable from 'src/components/tables/DataTable' import CopyToClipboard from 'src/components/CopyToClipboard.jsx' import DeleteIcon from 'src/styling/icons/action/delete/enabled.svg?react' -import { IconButton } from 'src/components/buttons' - const BlacklistTable = ({ data, handleDeleteEntry, @@ -42,9 +42,10 @@ const BlacklistTable = ({ onClick={() => { setDeleteDialog(true) setToBeDeleted(it) - }} - size="large"> - + }}> + + + ) } diff --git a/new-lamassu-admin/src/pages/Customers/CustomerProfile.jsx b/new-lamassu-admin/src/pages/Customers/CustomerProfile.jsx index acae9d2e..e2e9f8df 100644 --- a/new-lamassu-admin/src/pages/Customers/CustomerProfile.jsx +++ b/new-lamassu-admin/src/pages/Customers/CustomerProfile.jsx @@ -1,3 +1,5 @@ +import IconButton from '@mui/material/IconButton' +import SvgIcon from '@mui/material/SvgIcon' import { useQuery, useMutation, useLazyQuery, gql } from '@apollo/client' import Breadcrumbs from '@mui/material/Breadcrumbs' import DialogActions from '@mui/material/DialogActions' @@ -18,7 +20,7 @@ import BlockIcon from 'src/styling/icons/button/block/zodiac.svg?react' import DataReversedIcon from 'src/styling/icons/button/data/white.svg?react' import DataIcon from 'src/styling/icons/button/data/zodiac.svg?react' -import { Button, IconButton, ActionButton } from 'src/components/buttons' +import { Button, ActionButton } from 'src/components/buttons' import { OVERRIDE_AUTHORIZED, OVERRIDE_REJECTED @@ -734,11 +736,10 @@ const RetrieveDataDialog = ({ }} {...props}>
    - onDismissed(false)}> - + onDismissed(false)}> + + +

    {'Retrieve API data from Twilio'}

    diff --git a/new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscounts.jsx b/new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscounts.jsx index 7f1d63fc..936cedff 100644 --- a/new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscounts.jsx +++ b/new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscounts.jsx @@ -1,8 +1,10 @@ +import IconButton from '@mui/material/IconButton' +import SvgIcon from '@mui/material/SvgIcon' import { useQuery, useMutation, gql } from '@apollo/client' import * as R from 'ramda' import React, { useState } from 'react' -import { Link, Button, IconButton } from 'src/components/buttons' +import { Link, Button } from 'src/components/buttons' import { DeleteDialog } from 'src/components/DeleteDialog' import DataTable from 'src/components/tables/DataTable' import { Label3, TL1 } from 'src/components/typography' @@ -136,9 +138,10 @@ const IndividualDiscounts = () => { onClick={() => { setDeleteDialog(true) setToBeDeleted({ variables: { discountId: t.id } }) - }} - size="large"> - + }}> + + + ) } diff --git a/new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodes.jsx b/new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodes.jsx index 6a239742..d53a727a 100644 --- a/new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodes.jsx +++ b/new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodes.jsx @@ -1,3 +1,5 @@ +import IconButton from '@mui/material/IconButton' +import SvgIcon from '@mui/material/SvgIcon' import { useQuery, useMutation, gql } from '@apollo/client' import * as R from 'ramda' import React, { useState } from 'react' @@ -6,7 +8,7 @@ import DataTable from 'src/components/tables/DataTable' import { Label3, TL1 } from 'src/components/typography' import DeleteIcon from 'src/styling/icons/action/delete/enabled.svg?react' -import { Link, Button, IconButton } from 'src/components/buttons' +import { Link, Button } from 'src/components/buttons' import PromoCodesModal from './PromoCodesModal' @@ -114,9 +116,10 @@ const PromoCodes = () => { onClick={() => { setDeleteDialog(true) setToBeDeleted({ variables: { codeId: t.id } }) - }} - size="large"> - + }}> + + + ) } diff --git a/new-lamassu-admin/src/pages/Maintenance/CashUnits.jsx b/new-lamassu-admin/src/pages/Maintenance/CashUnits.jsx index 66635201..8d045bf5 100644 --- a/new-lamassu-admin/src/pages/Maintenance/CashUnits.jsx +++ b/new-lamassu-admin/src/pages/Maintenance/CashUnits.jsx @@ -1,5 +1,7 @@ import { useQuery, useMutation, gql } from '@apollo/client' import DialogActions from '@mui/material/DialogActions' +import IconButton from '@mui/material/IconButton' +import SvgIcon from '@mui/material/SvgIcon' import * as R from 'ramda' import React, { useState } from 'react' import LogsDowloaderPopover from 'src/components/LogsDownloaderPopper' @@ -12,7 +14,7 @@ import EditIcon from 'src/styling/icons/action/edit/enabled.svg?react' import ReverseHistoryIcon from 'src/styling/icons/circle buttons/history/white.svg?react' import HistoryIcon from 'src/styling/icons/circle buttons/history/zodiac.svg?react' -import { IconButton, Button, SupportLinkButton } from 'src/components/buttons' +import { Button, SupportLinkButton } from 'src/components/buttons' import { RadioGroup } from 'src/components/inputs' import { EmptyTable } from 'src/components/table' import { fromNamespace, toNamespace } from 'src/utils/config' @@ -252,8 +254,10 @@ const CashCassettes = () => { {onlyFirstToUpper(cashboxReset)}

    )} - setEditingSchema(true)} size="large"> - + setEditingSchema(true)}> + + +
    diff --git a/new-lamassu-admin/src/pages/Maintenance/helper.jsx b/new-lamassu-admin/src/pages/Maintenance/helper.jsx index e63e8ac4..26389968 100644 --- a/new-lamassu-admin/src/pages/Maintenance/helper.jsx +++ b/new-lamassu-admin/src/pages/Maintenance/helper.jsx @@ -1,9 +1,10 @@ +import IconButton from '@mui/material/IconButton' +import SvgIcon from '@mui/material/SvgIcon' import React from 'react' import * as R from 'ramda' import { CashIn, CashOutLite } from 'src/components/inputs/cashbox/Cashbox' import EditIcon from 'src/styling/icons/action/edit/enabled.svg?react' -import { IconButton } from 'src/components/buttons' import { fromNamespace } from 'src/utils/config' import { getCashUnitCapacity } from 'src/utils/machine' @@ -124,9 +125,10 @@ const getElements = (config, bills, setWizard, widths, setMachineId) => { onClick={() => { !R.isNil(setMachineId) && setMachineId(m.id ?? m.deviceId) setWizard(true) - }} - size="large"> - + }}> + + + ) } diff --git a/new-lamassu-admin/src/pages/Notifications/components/EditHeader.jsx b/new-lamassu-admin/src/pages/Notifications/components/EditHeader.jsx index 79931bc7..7ed246a5 100644 --- a/new-lamassu-admin/src/pages/Notifications/components/EditHeader.jsx +++ b/new-lamassu-admin/src/pages/Notifications/components/EditHeader.jsx @@ -1,9 +1,11 @@ +import IconButton from '@mui/material/IconButton' import React from 'react' import { H4 } from 'src/components/typography' import DisabledEditIcon from 'src/styling/icons/action/edit/disabled.svg?react' import EditIcon from 'src/styling/icons/action/edit/enabled.svg?react' -import { Link, IconButton } from 'src/components/buttons' +import { Link } from 'src/components/buttons' +import SvgIcon from '@mui/material/SvgIcon' const Header = ({ title, editing, disabled, setEditing }) => { return ( @@ -15,9 +17,8 @@ const Header = ({ title, editing, disabled, setEditing }) => { setEditing(true)} className="border-0 bg-transparent shrink-0 cursor-pointer ml-2" - disabled={disabled} - size="large"> - {disabled ? : } + disabled={disabled}> + {disabled ? : } )} {editing && ( diff --git a/new-lamassu-admin/src/pages/OperatorInfo/ContactInfo.jsx b/new-lamassu-admin/src/pages/OperatorInfo/ContactInfo.jsx index 99ecc42e..1d0d83df 100644 --- a/new-lamassu-admin/src/pages/OperatorInfo/ContactInfo.jsx +++ b/new-lamassu-admin/src/pages/OperatorInfo/ContactInfo.jsx @@ -1,3 +1,4 @@ +import IconButton from '@mui/material/IconButton' import { useQuery, useMutation, gql } from '@apollo/client' import { Form, Formik, Field as FormikField } from 'formik' import * as R from 'ramda' @@ -9,13 +10,14 @@ import EditIcon from 'src/styling/icons/action/edit/enabled.svg?react' import WarningIcon from 'src/styling/icons/warning-icon/comet.svg?react' import * as Yup from 'yup' -import { Link, IconButton } from 'src/components/buttons' +import { Link } from 'src/components/buttons' import { TextInput } from 'src/components/inputs/formik' import { fromNamespace, toNamespace, namespaces } from 'src/utils/config' import SwitchRow from './components/SwitchRow.jsx' import InfoMessage from './components/InfoMessage.jsx' import Header from './components/Header.jsx' +import SvgIcon from '@mui/material/SvgIcon' const FIELD_WIDTH = 280 @@ -160,8 +162,10 @@ const ContactInfo = ({ wizard }) => {

    Info card

    {!editing && ( - setEditing(true)} size="large"> - + setEditing(true)}> + + + )}
    diff --git a/new-lamassu-admin/src/pages/OperatorInfo/SMSNotices/SMSNotices.jsx b/new-lamassu-admin/src/pages/OperatorInfo/SMSNotices/SMSNotices.jsx index 71b36d09..bae80f2d 100644 --- a/new-lamassu-admin/src/pages/OperatorInfo/SMSNotices/SMSNotices.jsx +++ b/new-lamassu-admin/src/pages/OperatorInfo/SMSNotices/SMSNotices.jsx @@ -1,6 +1,7 @@ import { useQuery, useMutation, gql } from '@apollo/client' import Paper from '@mui/material/Paper' import Switch from '@mui/material/Switch' +import IconButton from '@mui/material/IconButton' import * as R from 'ramda' import React, { useState } from 'react' import { HelpTooltip } from 'src/components/Tooltip' @@ -11,10 +12,11 @@ import ExpandIconClosed from 'src/styling/icons/action/expand/closed.svg?react' import ExpandIconOpen from 'src/styling/icons/action/expand/open.svg?react' import WhiteLogo from 'src/styling/icons/menu/logo-white.svg?react' -import { IconButton, SupportLinkButton } from 'src/components/buttons' +import { SupportLinkButton } from 'src/components/buttons' import { formatDate } from 'src/utils/timezones' import CustomSMSModal from './SMSNoticesModal' +import SvgIcon from '@mui/material/SvgIcon' const GET_SMS_NOTICES = gql` query SMSNotices { @@ -175,9 +177,10 @@ const SMSNotices = () => { setPreviewOpen(false) setSelectedSMS(it) setShowModal(true) - }} - size="large"> - + }}> + + + ) }, @@ -217,13 +220,14 @@ const SMSNotices = () => { R.equals(selectedSMS, it) ? setPreviewOpen(!previewOpen) : setPreviewOpen(true) - }} - size="large"> - {R.equals(selectedSMS, it) && previewOpen ? ( - - ) : ( - - )} + }}> + + {R.equals(selectedSMS, it) && previewOpen ? ( + + ) : ( + + )} + ) } diff --git a/new-lamassu-admin/src/pages/OperatorInfo/TermsConditions.jsx b/new-lamassu-admin/src/pages/OperatorInfo/TermsConditions.jsx index 2eb37534..95dfee1b 100644 --- a/new-lamassu-admin/src/pages/OperatorInfo/TermsConditions.jsx +++ b/new-lamassu-admin/src/pages/OperatorInfo/TermsConditions.jsx @@ -1,3 +1,4 @@ +import IconButton from '@mui/material/IconButton' import { useQuery, useMutation, gql } from '@apollo/client' import classnames from 'classnames' import { Form, Formik, Field as FormikField } from 'formik' @@ -9,12 +10,13 @@ import { Info2, Info3, Label3 } from 'src/components/typography' import EditIcon from 'src/styling/icons/action/edit/enabled.svg?react' import * as Yup from 'yup' -import { Link, IconButton } from 'src/components/buttons' +import { Link } from 'src/components/buttons' import { TextInput } from 'src/components/inputs/formik' import { fromNamespace, toNamespace, namespaces } from 'src/utils/config' import Header from './components/Header.jsx' import SwitchRow from './components/SwitchRow.jsx' +import SvgIcon from '@mui/material/SvgIcon' const Field = ({ editing, @@ -184,8 +186,10 @@ const TermsConditions = () => {
    Info card {!editing && ( - setEditing(true)} size="large"> - + setEditing(true)}> + + + )}
    diff --git a/new-lamassu-admin/src/pages/SessionManagement/SessionManagement.jsx b/new-lamassu-admin/src/pages/SessionManagement/SessionManagement.jsx index a9fb8d23..ce108590 100644 --- a/new-lamassu-admin/src/pages/SessionManagement/SessionManagement.jsx +++ b/new-lamassu-admin/src/pages/SessionManagement/SessionManagement.jsx @@ -1,4 +1,5 @@ -import { useQuery, useMutation, gql } from "@apollo/client"; +import IconButton from '@mui/material/IconButton' +import { useQuery, useMutation, gql } from '@apollo/client' import * as R from 'ramda' import React from 'react' import TitleSection from 'src/components/layout/TitleSection' @@ -6,8 +7,8 @@ import DataTable from 'src/components/tables/DataTable' import DeleteIcon from 'src/styling/icons/action/delete/enabled.svg?react' import parser from 'ua-parser-js' -import { IconButton } from 'src/components/buttons' import { formatDate } from 'src/utils/timezones' +import SvgIcon from '@mui/material/SvgIcon' const GET_SESSIONS = gql` query sessions { @@ -98,9 +99,10 @@ const SessionManagement = () => { { deleteSession({ variables: { sid: s.sid } }) - }} - size="large"> - + }}> + + + ) } diff --git a/new-lamassu-admin/src/pages/Triggers/CustomInfoRequests/CustomInfoRequests.jsx b/new-lamassu-admin/src/pages/Triggers/CustomInfoRequests/CustomInfoRequests.jsx index 2403ac71..0eb40c6a 100644 --- a/new-lamassu-admin/src/pages/Triggers/CustomInfoRequests/CustomInfoRequests.jsx +++ b/new-lamassu-admin/src/pages/Triggers/CustomInfoRequests/CustomInfoRequests.jsx @@ -1,3 +1,4 @@ +import IconButton from '@mui/material/IconButton' import { useMutation, useQuery, gql } from '@apollo/client' import * as R from 'ramda' import React, { useState } from 'react' @@ -7,11 +8,12 @@ import { Info1, Info3, P } from 'src/components/typography' import DeleteIcon from 'src/styling/icons/action/delete/enabled.svg?react' import EditIcon from 'src/styling/icons/action/edit/enabled.svg?react' -import { IconButton, Button, Link } from 'src/components/buttons' +import { Button, Link } from 'src/components/buttons' import { fromNamespace, namespaces, toNamespace } from 'src/utils/config' import DetailsRow from './DetailsCard' import Wizard from './Wizard' +import SvgIcon from '@mui/material/SvgIcon' const inputTypeDisplay = { numerical: 'Numerical', @@ -212,9 +214,10 @@ const CustomInfoRequests = ({ onClick={() => { setToBeEdited(it) return toggleWizard() - }} - size="large"> - + }}> + + + ) } @@ -230,9 +233,10 @@ const CustomInfoRequests = ({ onClick={() => { setToBeDeleted(it.id) return setDeleteDialog(true) - }} - size="large"> - + }}> + + + ) } diff --git a/new-lamassu-admin/src/pages/Triggers/CustomInfoRequests/Forms/TypeFields/NumericalEntry.jsx b/new-lamassu-admin/src/pages/Triggers/CustomInfoRequests/Forms/TypeFields/NumericalEntry.jsx index 938d587d..fff64499 100644 --- a/new-lamassu-admin/src/pages/Triggers/CustomInfoRequests/Forms/TypeFields/NumericalEntry.jsx +++ b/new-lamassu-admin/src/pages/Triggers/CustomInfoRequests/Forms/TypeFields/NumericalEntry.jsx @@ -38,7 +38,7 @@ const NumericalEntry = () => { name="constraintType" /> {isLength && ( -
    +