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 (
+ const Image = ({ className, style }) => (
+
)
return (
@@ -35,12 +35,12 @@ const ImagePopper = memo(
- setEditing(true)}
- size="large">
- {disabled ?
+ {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}
{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 innerOnClose = () => {
@@ -24,7 +24,10 @@ export const InformativeDialog = memo(
aria-labelledby="form-dialog-title"
{...props}>
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(
) : (
-
+
+
+
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 }}>
+
{
- const [editing, setEditing] = useState(false)
- const [currentCode, setCurrentCode] = useState(code)
-
- const classes = useStyles()
-
- const innerSave = () => {
- save(currentCode)
- setEditing(false)
- }
-
- const innerCancel = () => setEditing(false)
-
- return (
- <>
- setCurrentCode(event.target.value)}
- className={classes.radioButtons}
- />
- ) : (
- onEdit && onEdit(values.id)}
- size="large">
- {disableEdit ?
+ {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 }) => (
-
- {editing ? (
- {title}
- {editing ? ( -
-
- Cancel
-
-
- Save
-
-
- ) : (
-
-
-
- )}
- - {`${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 }) => {
@@ -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 (
-
+
@@ -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 (
<>
-
-
-
+
+
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 (
{title}
{children}
{children}
+ {children}
{error && shouldShowError && (
- {errorMessage}
+ {errorMessage}
)}
-
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 (
+
{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/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}>
+
)
}
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 ?
)}
{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 }) => {
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 && (
-
+
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 = ({
{option.title}
-{option.description}
+{option.description}
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
{'Are you sure you want to enable this?'}
- 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"> -Info card
{!editing && ( -
+