diff --git a/new-lamassu-admin/src/components/buttons/FeatureButton.module.css b/new-lamassu-admin/src/components/buttons/FeatureButton.module.css
new file mode 100644
index 00000000..1c3d7ba2
--- /dev/null
+++ b/new-lamassu-admin/src/components/buttons/FeatureButton.module.css
@@ -0,0 +1,87 @@
+.baseButton {
+ cursor: pointer;
+ border: none;
+ outline: 0;
+ height: 32px;
+ color: var(--zodiac);
+}
+
+.roundButton {
+ width: 32px;
+ border-radius: 16px;
+ display: flex;
+ padding: 0;
+}
+
+.roundButton .buttonIcon {
+ margin: auto;
+}
+
+.roundButton .buttonIcon svg {
+ width: 16px;
+ height: 16px;
+ overflow: visible;
+}
+
+.roundButton .buttonIcon svg g {
+ stroke-width: 2px;
+}
+
+.baseButton:active {
+ color: white;
+}
+
+.primary {
+ background-color: var(--zircon);
+}
+
+.primary:hover {
+ background-color: var(--zircon2);
+}
+
+.primary:active {
+ background-color: var(--comet);
+ color: white;
+}
+
+.primary .buttonIconActive {
+ display: none;
+}
+
+.primary:active .buttonIcon {
+ display: none;
+}
+
+.primary:active .buttonIconActive {
+ display: block;
+}
+
+.secondary {
+ background-color: var(--comet);
+ color: white;
+}
+
+.secondary:hover {
+ background-color: var(--comet2);
+}
+
+.secondary:active {
+ background-color: white;
+ color: var(--zodiac);
+}
+
+.secondary .buttonIcon {
+ display: none;
+}
+
+.secondary .buttonIconActive {
+ display: flex;
+}
+
+.secondary:active .buttonIcon {
+ display: flex;
+}
+
+.secondary:active .buttonIconActive {
+ display: none;
+}
diff --git a/new-lamassu-admin/src/components/buttons/IDButton.jsx b/new-lamassu-admin/src/components/buttons/IDButton.jsx
index 6856b34e..437821a5 100644
--- a/new-lamassu-admin/src/components/buttons/IDButton.jsx
+++ b/new-lamassu-admin/src/components/buttons/IDButton.jsx
@@ -1,68 +1,9 @@
import ClickAwayListener from '@mui/material/ClickAwayListener'
-import { makeStyles } from '@mui/styles'
import classnames from 'classnames'
import React, { useState, memo } from 'react'
import Popover from 'src/components/Popper'
-import typographyStyles from 'src/components/typography/styles'
-import {
- subheaderColor,
- subheaderDarkColor,
- offColor
-} from 'src/styling/variables'
-
-const { info2 } = typographyStyles
-
-const colors = (color1, color2, color3) => {
- return {
- backgroundColor: color1,
- '&:hover': {
- backgroundColor: color2
- },
- '&:active': {
- backgroundColor: color3
- }
- }
-}
-
-const styles = {
- idButton: {
- width: 34,
- height: 28,
- display: 'flex',
- borderRadius: 4,
- padding: 0,
- border: 'none',
- cursor: 'pointer'
- },
- buttonIcon: {
- margin: 'auto',
- lineHeight: 1,
- '& svg': {
- overflow: 'visible'
- }
- },
- closed: {
- extend: colors(subheaderColor, subheaderDarkColor, offColor)
- },
- open: {
- extend: colors(offColor, offColor, offColor)
- },
- popoverContent: {
- extend: info2,
- padding: 8,
- display: 'flex',
- justifyContent: 'center',
- alignItems: 'center',
- borderRadius: 4,
- '& img': {
- height: 145,
- minWidth: 200
- }
- }
-}
-
-const useStyles = makeStyles(styles)
+import classes from './IDButton.module.css'
const IDButton = memo(
({
@@ -77,8 +18,6 @@ const IDButton = memo(
}) => {
const [anchorEl, setAnchorEl] = useState(null)
- const classes = useStyles()
-
const open = Boolean(anchorEl)
const id = open ? `simple-popper-${name}` : undefined
diff --git a/new-lamassu-admin/src/components/buttons/IDButton.module.css b/new-lamassu-admin/src/components/buttons/IDButton.module.css
new file mode 100644
index 00000000..109d5889
--- /dev/null
+++ b/new-lamassu-admin/src/components/buttons/IDButton.module.css
@@ -0,0 +1,58 @@
+.idButton {
+ width: 34px;
+ height: 28px;
+ display: flex;
+ border-radius: 4px;
+ padding: 0;
+ border: none;
+ cursor: pointer;
+}
+
+.buttonIcon {
+ margin: auto;
+ line-height: 1px;
+}
+
+.buttonIcon svg {
+ overflow: visible;
+}
+
+.closed {
+ background-color: var(--zircon);
+}
+
+.closed:hover {
+ background-color: var(--zircon2);
+}
+
+.closed:active {
+ background-color: var(--comet);
+ color: white;
+}
+
+.open {
+ background-color: var(--comet);
+ color: white;
+}
+
+.open:hover {
+ background-color: var(--comet2);
+}
+
+.open:active {
+ background-color: var(--comet3);
+}
+
+.popoverContent {
+ composes: info2 from '../typography/typography.module.css';
+ padding: 8px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-radius: 4px;
+}
+
+.popoverContent img {
+ height: 145px;
+ min-width: 200px;
+}
diff --git a/new-lamassu-admin/src/components/buttons/Link.jsx b/new-lamassu-admin/src/components/buttons/Link.jsx
index f121b69f..1a4fdad2 100644
--- a/new-lamassu-admin/src/components/buttons/Link.jsx
+++ b/new-lamassu-admin/src/components/buttons/Link.jsx
@@ -1,14 +1,10 @@
-import { makeStyles } from '@mui/styles'
import classnames from 'classnames'
import React, { memo } from 'react'
-import styles from './Link.styles'
-
-const useStyles = makeStyles(styles)
+import classes from './Link.module.css'
const Link = memo(
({ submit, className, children, color = 'primary', ...props }) => {
- const classes = useStyles()
const classNames = {
[classes.link]: true,
[classes.primary]: color === 'primary',
diff --git a/new-lamassu-admin/src/components/buttons/Link.module.css b/new-lamassu-admin/src/components/buttons/Link.module.css
new file mode 100644
index 00000000..b780f5c6
--- /dev/null
+++ b/new-lamassu-admin/src/components/buttons/Link.module.css
@@ -0,0 +1,47 @@
+.link {
+ composes: h4 from '../typography/typography.module.css';
+ text-decoration: none;
+ border: none;
+ background-color: transparent;
+ cursor: pointer;
+ padding: 0;
+ height: 100%;
+}
+
+.primary {
+ box-shadow: inset 0 -4px 0 0 rgba(72, 246, 148, 0.8);
+}
+
+.primary:hover {
+ box-shadow: none;
+ background-color: rgba(72, 246, 148, 0.8);
+}
+
+.secondary {
+ box-shadow: inset 0 -4px 0 0 rgba(255, 88, 74, 0.8);
+}
+
+.secondary:hover {
+ box-shadow: none;
+ background-color: rgba(255, 88, 74, 0.8);
+ color: white;
+}
+
+.noColor {
+ box-shadow: inset 0 -4px 0 0 rgba(255, 255, 255, 0.8);
+}
+
+.noColor:hover {
+ box-shadow: none;
+ background-color: rgba(255, 255, 255, 0.8);
+}
+
+.action {
+ box-shadow: inset 0 -4px 0 0 rgba(72, 246, 148, 0.8);
+ color: var(--zircon);
+}
+
+.action:hover {
+ box-shadow: none;
+ background-color: rgba(72, 246, 148, 0.8);
+}
\ No newline at end of file
diff --git a/new-lamassu-admin/src/components/buttons/Link.styles.js b/new-lamassu-admin/src/components/buttons/Link.styles.js
deleted file mode 100644
index a9f131a0..00000000
--- a/new-lamassu-admin/src/components/buttons/Link.styles.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import { alpha } from '@mui/material/styles'
-
-import typographyStyles from 'src/components/typography/styles'
-import {
- white,
- linkPrimaryColor,
- linkSecondaryColor,
- zircon
-} from 'src/styling/variables'
-
-const { h4 } = typographyStyles
-
-const color = color => ({
- boxShadow: `inset 0 -4px 0 0 ${alpha(color, 0.8)}`,
- '&:hover': {
- boxShadow: 'none',
- backgroundColor: alpha(color, 0.8)
- }
-})
-
-export default {
- link: {
- extend: h4,
- textDecoration: 'none',
- border: 'none',
- backgroundColor: 'transparent',
- cursor: 'pointer',
- padding: '0',
- height: '100%'
- },
- primary: {
- extend: color(linkPrimaryColor)
- },
- secondary: {
- extend: color(linkSecondaryColor),
- '&:hover': {
- color: white
- }
- },
- noColor: {
- extend: color(white)
- },
- action: {
- extend: color(linkPrimaryColor),
- color: zircon
- }
-}
diff --git a/new-lamassu-admin/src/components/buttons/SubpageButton.jsx b/new-lamassu-admin/src/components/buttons/SubpageButton.jsx
index 5f96143a..bf1de782 100644
--- a/new-lamassu-admin/src/components/buttons/SubpageButton.jsx
+++ b/new-lamassu-admin/src/components/buttons/SubpageButton.jsx
@@ -1,12 +1,9 @@
-import { makeStyles } from '@mui/styles'
import classnames from 'classnames'
import React, { memo, useState } from 'react'
import { H4 } from 'src/components/typography'
import CancelIconInverse from 'src/styling/icons/button/cancel/white.svg?react'
-import subpageButtonStyles from './SubpageButton.styles'
-
-const useStyles = makeStyles(subpageButtonStyles)
+import classes from './SubpageButton.module.css'
const SubpageButton = memo(
({
@@ -19,11 +16,10 @@ const SubpageButton = memo(
}) => {
const [active, setActive] = useState(false)
const isActive = forceDisable ? false : active
- const classes = useStyles()
const classNames = {
[classes.button]: true,
- [classes.normalButton]: !isActive,
- [classes.activeButton]: isActive
+ [classes.normal]: !isActive,
+ [classes.active]: isActive
}
const normalButton =
@@ -36,7 +32,7 @@ const SubpageButton = memo(
classes.buttonIconActiveLeft
)}
/>
-
{
const [currentDisplayedMonth, setCurrentDisplayedMonth] = useState(new Date())
- const classes = useStyles()
-
const weekdays = Array.from(Array(7)).map((_, i) =>
format('EEEEE', add({ days: i }, startOfWeek(new Date())))
)
diff --git a/new-lamassu-admin/src/components/date-range-picker/Calendar.module.css b/new-lamassu-admin/src/components/date-range-picker/Calendar.module.css
new file mode 100644
index 00000000..4260c3e7
--- /dev/null
+++ b/new-lamassu-admin/src/components/date-range-picker/Calendar.module.css
@@ -0,0 +1,66 @@
+.wrapper {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.button {
+ outline: none;
+}
+
+.navbar {
+ font-size: 14px;
+ font-family: var(--museo);
+ font-weight: 500;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ padding: 15px 15px;
+ color: var(--zodiac);
+}
+
+.navbar button {
+ display: flex;
+ align-items: center;
+ padding: 0;
+ border: none;
+ background-color: var(--zircon);
+ cursor: pointer;
+ border-radius: 50%;
+ width: 20px;
+ height: 20px;
+ position: relative;
+ overflow: hidden;
+}
+
+.navbar button svg {
+ position: absolute;
+ left: 0;
+}
+
+.table {
+ border-collapse: collapse;
+ width: 100%;
+ color: var(--zodiac);
+}
+
+.table tr:first-child {
+ padding-left: 5px;
+}
+
+.table tr:last-child {
+ padding-right: 5px;
+}
+
+.table th,
+.table td {
+ margin: 0;
+ padding: 3px 0 3px 0;
+}
+
+.table th {
+ font-size: 13px;
+ font-family: var(--museo);
+ font-weight: 700;
+}
\ No newline at end of file
diff --git a/new-lamassu-admin/src/components/date-range-picker/Tile.jsx b/new-lamassu-admin/src/components/date-range-picker/Tile.jsx
index 679426cb..ea2be1e6 100644
--- a/new-lamassu-admin/src/components/date-range-picker/Tile.jsx
+++ b/new-lamassu-admin/src/components/date-range-picker/Tile.jsx
@@ -1,76 +1,15 @@
-import { makeStyles } from '@mui/styles'
import classnames from 'classnames'
import React from 'react'
-import typographyStyles from 'src/components/typography/styles'
-import {
- primaryColor,
- spring2,
- spring3,
- disabledColor
-} from 'src/styling/variables'
-
-const { label1 } = typographyStyles
-
-const styles = {
- wrapper: {
- height: 26,
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'center',
- position: 'relative',
- overflow: 'hidden'
- },
- button: {
- outline: 'none',
- extend: label1,
- border: 'none',
- cursor: 'pointer',
- backgroundColor: 'transparent',
- color: primaryColor,
- zIndex: 2
- },
- lowerBound: {
- left: '50%'
- },
- upperBound: {
- right: '50%'
- },
- selected: {
- width: 26,
- height: 26,
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'center',
- backgroundColor: spring2,
- borderRadius: '50%',
- position: 'absolute',
- zIndex: 1
- },
- between: {
- position: 'absolute',
- width: '100%',
- height: '100%',
- zIndex: 0,
- backgroundColor: spring3
- },
- disabled: {
- color: disabledColor,
- cursor: 'default'
- }
-}
-
-const useStyles = makeStyles(styles)
+import classes from './Tile.module.css'
const Tile = ({
isLowerBound,
isUpperBound,
isBetween,
isDisabled,
- children,
- ...props
+ children
}) => {
- const classes = useStyles()
const selected = isLowerBound || isUpperBound
const rangeClasses = {
diff --git a/new-lamassu-admin/src/components/date-range-picker/Tile.module.css b/new-lamassu-admin/src/components/date-range-picker/Tile.module.css
new file mode 100644
index 00000000..557c7e64
--- /dev/null
+++ b/new-lamassu-admin/src/components/date-range-picker/Tile.module.css
@@ -0,0 +1,53 @@
+.wrapper {
+ height: 26px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ overflow: hidden;
+}
+
+.button {
+ outline: none;
+ font-size: 13px;
+ font-family: var(--museo);
+ font-weight: 500;
+ border: none;
+ cursor: pointer;
+ background-color: transparent;
+ color: var(--zodiac);
+ z-index: 2;
+}
+
+.lowerBound {
+ left: 50%;
+}
+
+.upperBound {
+ right: 50%;
+}
+
+.selected {
+ width: 26px;
+ height: 26px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: var(--spring2);
+ border-radius: 50%;
+ position: absolute;
+ z-index: 1;
+}
+
+.between {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ z-index: 0;
+ background-color: var(--spring3);
+}
+
+.disabled {
+ color: var(--dust);
+ cursor: default;
+}
diff --git a/new-lamassu-admin/src/components/editableTable/Row.jsx b/new-lamassu-admin/src/components/editableTable/Row.jsx
index 67e484fe..a3781660 100644
--- a/new-lamassu-admin/src/components/editableTable/Row.jsx
+++ b/new-lamassu-admin/src/components/editableTable/Row.jsx
@@ -1,4 +1,3 @@
-import { makeStyles } from '@mui/styles'
import Switch from '@mui/material/Switch'
import IconButton from '@mui/material/IconButton'
import SvgIcon from '@mui/material/SvgIcon'
@@ -18,12 +17,9 @@ import StripesSvg from 'src/styling/icons/stripes.svg?react'
import { Link } from 'src/components/buttons'
import TableCtx from './Context'
-import styles from './Row.styles'
-
-const useStyles = makeStyles(styles)
+import moduleStyles from './Row.module.css'
const ActionCol = ({ disabled, editing }) => {
- const classes = useStyles()
const { values, submitForm, resetForm } = useFormikContext()
const {
editWidth,
@@ -61,7 +57,7 @@ const ActionCol = ({ disabled, editing }) => {
{editing && (
@@ -78,8 +74,8 @@ const ActionCol = ({ disabled, editing }) => {
|
onEdit && onEdit(values.id)}>
+ onClick={() => onEdit && onEdit(values.id)}
+ size="small">
{disableEdit ? : }
@@ -92,7 +88,8 @@ const ActionCol = ({ disabled, editing }) => {
disabled={disabled}
onClick={() => {
setDeleteDialog(true)
- }}>
+ }}
+ size="small">
{disabled ? : }
@@ -155,11 +152,6 @@ const ECol = ({ editing, focus, config, extraPaddingRight, extraPadding }) => {
const isEditing = editing && isEditable(editable)
const isField = !bypassField
- const classes = useStyles({
- textAlign: isEditing ? editingAlign : textAlign,
- size
- })
-
const innerProps = {
fullWidth: true,
autoFocus: focus,
@@ -169,16 +161,20 @@ const ECol = ({ editing, focus, config, extraPaddingRight, extraPadding }) => {
...inputProps
}
+ const newAlign = isEditing ? editingAlign : textAlign
+ const justifyContent = newAlign === 'right' ? 'flex-end' : newAlign
+ const style = suffix || prefix ? { justifyContent } : {}
+
return (
-
+
{fields.map((f, idx) => (
{
textAlign={textAlign}>
{prefix && !isHidden(values) && (
{typeof prefix === 'function' ? prefix(f) : prefix}
@@ -204,7 +200,7 @@ const ECol = ({ editing, focus, config, extraPaddingRight, extraPadding }) => {
)}
{suffix && !isHidden(values) && (
{suffix}
@@ -245,8 +241,6 @@ const ERow = ({ editing, disabled, lastOfGroup, newRow }) => {
stripeWhen
} = useContext(TableCtx)
- const classes = useStyles()
-
const shouldStripe = !editing && stripeWhen && stripeWhen(values)
const innerElements = shouldStripe ? groupStriped(elements) : elements
@@ -265,7 +259,7 @@ const ERow = ({ editing, disabled, lastOfGroup, newRow }) => {
)
const classNames = {
- [classes.lastOfGroup]: lastOfGroup
+ [moduleStyles.lastOfGroup]: lastOfGroup
}
const touchedErrors = R.pick(R.keys(touched), errors)
diff --git a/new-lamassu-admin/src/components/editableTable/Row.module.css b/new-lamassu-admin/src/components/editableTable/Row.module.css
new file mode 100644
index 00000000..b7ef4b0b
--- /dev/null
+++ b/new-lamassu-admin/src/components/editableTable/Row.module.css
@@ -0,0 +1,29 @@
+.saveButton {
+ margin-right: 20px;
+}
+
+.lastOfGroup {
+ margin-bottom: 24px;
+}
+
+.extraPadding {
+ padding-left: 35px;
+ padding-right: 30px;
+}
+
+.extraPaddingRight {
+ padding-right: 39px;
+}
+
+.suffix {
+ margin: 0 0 0 7px;
+}
+
+.prefix {
+ margin: 0 7px 0 0;
+}
+
+.fields {
+ display: flex;
+ flex-direction: column;
+}
\ No newline at end of file
diff --git a/new-lamassu-admin/src/components/editableTable/Row.styles.js b/new-lamassu-admin/src/components/editableTable/Row.styles.js
deleted file mode 100644
index 48c7a8f4..00000000
--- a/new-lamassu-admin/src/components/editableTable/Row.styles.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import { bySize, bold } from 'src/styling/helpers'
-
-export default {
- saveButton: {
- marginRight: 20
- },
- lastOfGroup: {
- marginBottom: 24
- },
- extraPadding: {
- paddingLeft: 35,
- paddingRight: 30
- },
- extraPaddingRight: {
- paddingRight: 39
- },
- withSuffix: ({ textAlign }) => {
- const justifyContent = textAlign === 'right' ? 'flex-end' : textAlign
- return {
- display: 'flex',
- alignItems: 'center',
- justifyContent
- }
- },
- suffix: {
- margin: [[0, 0, 0, 7]]
- },
- withPrefix: ({ textAlign }) => {
- const justifyContent = textAlign === 'right' ? 'flex-end' : textAlign
- return {
- display: 'flex',
- alignItems: 'center',
- justifyContent
- }
- },
- prefix: {
- margin: [[0, 7, 0, 0]]
- },
- size: ({ size }) => bySize(size),
- bold,
- fields: {
- display: 'flex',
- flexDirection: 'column'
- }
-}
diff --git a/new-lamassu-admin/src/components/editableTable/Table.jsx b/new-lamassu-admin/src/components/editableTable/Table.jsx
index f7bdefce..07f642a1 100644
--- a/new-lamassu-admin/src/components/editableTable/Table.jsx
+++ b/new-lamassu-admin/src/components/editableTable/Table.jsx
@@ -1,4 +1,3 @@
-import { makeStyles } from '@mui/styles'
import { Form, Formik } from 'formik'
import * as R from 'ramda'
import React, { useState, useEffect } from 'react'
@@ -13,13 +12,11 @@ import { AddButton } from 'src/components/buttons/index'
import TableCtx from './Context'
import Header from './Header'
import ERow from './Row'
-import styles from './Table.styles'
+import classes from './Table.module.css'
const ACTION_COL_SIZE = 87
const DEFAULT_COL_SIZE = 100
-const useStyles = makeStyles(styles)
-
const getWidth = R.compose(
R.reduce(R.add)(0),
R.map(it => it.width ?? DEFAULT_COL_SIZE)
@@ -129,8 +126,6 @@ const ETable = ({
const width = getWidth(elements) + actionColSize
- const classes = useStyles({ width })
-
const showButtonOnEmpty = !data.length && enableCreate && !adding
const canAdd = !forceDisable && !editingId && !disableAdd && !adding
const showTable = adding || data.length !== 0
@@ -162,7 +157,7 @@ const ETable = ({
return (
-
+
{showButtonOnEmpty && canAdd && (
{createText}
)}
diff --git a/new-lamassu-admin/src/components/editableTable/Table.module.css b/new-lamassu-admin/src/components/editableTable/Table.module.css
new file mode 100644
index 00000000..9808ccd5
--- /dev/null
+++ b/new-lamassu-admin/src/components/editableTable/Table.module.css
@@ -0,0 +1,16 @@
+.addLink {
+ margin-left: auto;
+}
+
+.title {
+ margin: 0;
+ color: var(--comet);
+}
+
+.outerHeader {
+ min-height: 16px;
+ margin-bottom: 24px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
diff --git a/new-lamassu-admin/src/components/editableTable/Table.styles.js b/new-lamassu-admin/src/components/editableTable/Table.styles.js
deleted file mode 100644
index 00f93bd6..00000000
--- a/new-lamassu-admin/src/components/editableTable/Table.styles.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { offColor } from 'src/styling/variables'
-
-export default {
- wrapper: ({ width }) => ({
- width: width
- }),
- addLink: {
- marginLeft: 'auto'
- },
- title: {
- margin: 0,
- color: offColor
- },
- outerHeader: {
- minHeight: 16,
- marginBottom: 24,
- display: 'flex',
- justifyContent: 'space-between',
- alignItems: 'center'
- }
-}
diff --git a/new-lamassu-admin/src/components/fake-table/Table.jsx b/new-lamassu-admin/src/components/fake-table/Table.jsx
index cc2c2df6..f5eb27d6 100644
--- a/new-lamassu-admin/src/components/fake-table/Table.jsx
+++ b/new-lamassu-admin/src/components/fake-table/Table.jsx
@@ -27,6 +27,7 @@ const TBody = ({ children, className }) => {
}
const Td = ({
+ style = {},
children,
header,
className,
@@ -37,17 +38,17 @@ const Td = ({
action
}) => {
const inlineStyle = {
+ ...style,
width,
- textAlign
+ textAlign,
+ fontSize: size === 'sm' ? '14px' : size === 'lg' ? '24px' : ''
}
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'
+ 'font-bold': !header && (bold || size === 'lg'),
+ [styles.actionCol]: action
}
return (
@@ -73,7 +74,7 @@ const ThDoubleLevel = ({ title, children, className, width }) => {
- {title}
+ {title}
{children}
)
@@ -89,6 +90,9 @@ const Tr = ({
size,
newRow
}) => {
+ const inlineStyle = {
+ minHeight: size === 'sm' ? '34px' : size === 'lg' ? '68px' : '48px'
+ }
const cardClasses = {
[styles.card]: true,
[styles.trError]: error,
@@ -105,7 +109,9 @@ const Tr = ({
<>
- {children}
+
+ {children}
+
{error && shouldShowError && (
{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
index 5d9615d4..ea3277a4 100644
--- a/new-lamassu-admin/src/components/fake-table/Table.module.css
+++ b/new-lamassu-admin/src/components/fake-table/Table.module.css
@@ -1,39 +1,33 @@
-.bold {
- font-weight: 700;
-}
-
.header {
+ composes: tl2 from '../typography/typography.module.css';
background-color: var(--zodiac);
height: 32px;
text-align: left;
color: white;
display: flex;
align-items: center;
- font-size: 14px;
- font-weight: 500;
}
.doubleHeader {
+ composes: tl2 from '../typography/typography.module.css';
background-color: var(--zodiac);
height: 64px;
color: white;
display: table-row;
- font-size: 14px;
- font-weight: 500;
}
.thDoubleLevel {
display: table-cell;
}
-.thDoubleLevel > :first-child {
+.thDoubleLevelFirst {
+ composes: label1 from '../typography/typography.module.css';
margin: 0 10px;
- font-size: 13px;
- font-weight: 500;
+ font-weight: 700;
display: flex;
justify-content: center;
align-items: center;
- background-color: var(--zodiac);
+ background-color: var(--comet);
color: white;
border-radius: 0 0 8px 8px;
height: 28px;
@@ -84,7 +78,7 @@
}
.card {
- font-size: 14px;
+ composes: p from '../typography/typography.module.css';
margin: 4px 0 0 0;
width: 100%;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08);
@@ -109,4 +103,4 @@
.sizeLg {
min-height: 68px;
-}
\ No newline at end of file
+}
diff --git a/new-lamassu-admin/src/components/inputs/base/TextInput.jsx b/new-lamassu-admin/src/components/inputs/base/TextInput.jsx
index 8f314071..c178aca3 100644
--- a/new-lamassu-admin/src/components/inputs/base/TextInput.jsx
+++ b/new-lamassu-admin/src/components/inputs/base/TextInput.jsx
@@ -27,14 +27,17 @@ const TextInput = memo(
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
+ const style = {
+ width: width,
+ textAlign: textAlign
}
- // Determine size class based on size prop
- const sizeClass = size === 'sm' ? styles.sizeSm : size === 'lg' ? styles.sizeLg : styles.size
+ const sizeClass =
+ size === 'sm'
+ ? styles.sizeSm
+ : size === 'lg'
+ ? styles.sizeLg
+ : styles.size
const divClass = {
[styles.bold]: bold
@@ -48,9 +51,9 @@ const TextInput = memo(
onBlur={onBlur}
error={error}
value={value}
- classes={{ root: styles.root }}
className={className}
- style={rootStyle}
+ style={style}
+ inputProps={{ style: { textAlign } }}
InputProps={{
className: classnames(divClass),
classes: {
diff --git a/new-lamassu-admin/src/components/inputs/base/TextInput.module.css b/new-lamassu-admin/src/components/inputs/base/TextInput.module.css
index 8559729d..6a6b8c71 100644
--- a/new-lamassu-admin/src/components/inputs/base/TextInput.module.css
+++ b/new-lamassu-admin/src/components/inputs/base/TextInput.module.css
@@ -1,29 +1,21 @@
.size {
margin-top: 2px;
- font-size: var(--input-font-size, 16px);
+ font-size: 16px;
}
.sizeSm {
margin-top: 2px;
- font-size: var(--input-font-size-sm, 14px);
+ font-size: 14px;
}
.sizeLg {
margin-top: 0;
- font-size: var(--input-font-size-lg, 24px);
- font-weight: var(--input-font-weight-bold, 700);
+ font-size: 24px;
+ font-weight: 700;
}
.bold {
- font-weight: var(--input-font-weight-bold, 700);
-}
-
-.root {
- width: var(--input-width);
-}
-
-.root input {
- text-align: var(--input-text-align, left);
+ font-weight: 700;
}
.underline:before {
diff --git a/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.jsx b/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.jsx
index e50f2fd9..72a20912 100644
--- a/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.jsx
+++ b/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.jsx
@@ -1,4 +1,3 @@
-import { makeStyles } from '@mui/styles'
import Chip from '@mui/material/Chip'
import classnames from 'classnames'
import React from 'react'
@@ -6,49 +5,55 @@ import { Info2, Label1, Label2 } from 'src/components/typography'
import { numberToFiatAmount } from 'src/utils/number'
-import { cashboxStyles, gridStyles } from './Cashbox.styles'
+import classes from './Cashbox.module.css'
+import { primaryColor as zodiac, tomato } from '../../../styling/variables.js'
-const cashboxClasses = makeStyles(cashboxStyles)
-const gridClasses = makeStyles(gridStyles)
+const colors = {
+ cashOut: {
+ empty: tomato,
+ full: zodiac
+ },
+ cashIn: {
+ empty: zodiac,
+ full: tomato
+ }
+}
const Cashbox = ({
percent = 0,
cashOut = false,
- width,
- height,
+ width = 80,
+ height = 118,
className,
emptyPartClassName,
labelClassName,
- applyColorVariant,
- applyFiatBalanceAlertsStyling,
omitInnerPercentage,
isLow
}) => {
- const classes = cashboxClasses({
- percent,
- cashOut,
- width,
- height,
- applyColorVariant,
- isLow
- })
const ltHalf = percent <= 51
-
- const showCashBox = {
- [classes.fiatBalanceAlertCashbox]: applyFiatBalanceAlertsStyling,
- [classes.cashbox]: !applyFiatBalanceAlertsStyling
- }
+ const color =
+ colors[cashOut ? 'cashOut' : 'cashIn'][!isLow ? 'full' : 'empty']
return (
-
-
+
+
{!omitInnerPercentage && ltHalf && (
- {percent.toFixed(0)}%
+
+ {percent.toFixed(0)}%
+
)}
-
+
{!omitInnerPercentage && !ltHalf && (
- {percent.toFixed(0)}%
+
+ {percent.toFixed(0)}%
+
)}
@@ -71,7 +76,6 @@ const CashIn = ({
}) => {
const percent = (100 * notes) / capacity
const isLow = percent < threshold
- const classes = gridClasses()
return (
<>
@@ -117,7 +121,6 @@ const CashOut = ({
}) => {
const percent = (100 * notes) / capacity
const isLow = percent < threshold
- const classes = gridClasses()
return (
<>
@@ -160,7 +163,6 @@ const CashOutLite = ({
}) => {
const percent = (100 * notes) / capacity
const isLow = percent < threshold
- const classes = gridClasses()
return (
{
- return colors[cashOut ? 'cashOut' : 'cashIn'][
- applyColorVariant || !isLow ? 'full' : 'empty'
- ]
-}
-
-const cashboxStyles = {
- cashbox: {
- borderColor: colorPicker,
- backgroundColor: colorPicker,
- height: ({ height }) => height ?? 118,
- width: ({ width }) => width ?? 80,
- border: '2px solid',
- textAlign: 'end',
- display: 'inline-block'
- },
- fiatBalanceAlertCashbox: {
- borderColor: colorPicker,
- backgroundColor: colorPicker,
- height: 118,
- width: 80,
- border: '4px solid'
- },
- emptyPart: {
- backgroundColor: 'var(--ghost)',
- height: ({ percent }) => `${100 - percent}%`,
- position: 'relative',
- '& > p': {
- color: colorPicker,
- display: 'inline-block',
- position: 'absolute',
- margin: 0,
- bottom: 0,
- right: 0
- }
- },
- fullPart: {
- backgroundColor: colorPicker,
- '& > p': {
- color: 'white',
- display: 'inline'
- }
- }
-}
-
-const gridStyles = {
- row: {
- display: 'flex',
- alignItems: 'center'
- },
- col: {
- display: 'flex',
- flexDirection: 'column',
- alignItems: 'center'
- },
- innerRow: {
- display: 'flex',
- justifyContent: 'flex-start'
- },
- col2: {
- marginLeft: 14
- },
- noMarginText: {
- marginTop: 0,
- marginBottom: 0
- },
- link: {
- marginTop: spacer
- }
-}
-
-export { cashboxStyles, gridStyles }
diff --git a/new-lamassu-admin/src/components/table/TableHeader.jsx b/new-lamassu-admin/src/components/table/TableHeader.jsx
index 110c284b..cd1b895e 100644
--- a/new-lamassu-admin/src/components/table/TableHeader.jsx
+++ b/new-lamassu-admin/src/components/table/TableHeader.jsx
@@ -1,36 +1,10 @@
-import { makeStyles } from '@mui/styles'
import classnames from 'classnames'
import React, { memo } from 'react'
-import typographyStyles from 'src/components/typography/styles'
-import {
- tableHeaderColor,
- tableHeaderHeight,
- spacer,
- white
-} from 'src/styling/variables'
-
-const { tl2 } = typographyStyles
-
-const useStyles = makeStyles({
- th: {
- extend: tl2,
- backgroundColor: tableHeaderColor,
- height: tableHeaderHeight,
- textAlign: 'left',
- color: white,
- padding: `0 ${spacer * 3}px`
- },
- alignRight: {
- textAlign: 'right'
- }
-})
-
const TableHeaderCell = memo(
({ rightAlign, children, className, ...props }) => {
- const classes = useStyles()
const styles = {
- 'bg-zodiac text-white py-0 px-6 h-8 font-': true,
+ 'bg-zodiac text-white py-0 px-6 h-8 text-sm text-left': true,
'text-right': rightAlign
}
diff --git a/new-lamassu-admin/src/pages/Blacklist/Blacklist.jsx b/new-lamassu-admin/src/pages/Blacklist/Blacklist.jsx
index 8b51544e..8bee117a 100644
--- a/new-lamassu-admin/src/pages/Blacklist/Blacklist.jsx
+++ b/new-lamassu-admin/src/pages/Blacklist/Blacklist.jsx
@@ -111,12 +111,6 @@ const PaperWalletDialog = ({ onConfirmed, onDissmised, open, props }) => {
{`This mode is only useful for countries like Switzerland which mandates such a feature.\n`}
{`Don't enable this if you want users to be able to scan an address of their choosing.`}
-
diff --git a/new-lamassu-admin/src/pages/Customers/CustomerProfile.jsx b/new-lamassu-admin/src/pages/Customers/CustomerProfile.jsx
index e2e9f8df..0de0e3d9 100644
--- a/new-lamassu-admin/src/pages/Customers/CustomerProfile.jsx
+++ b/new-lamassu-admin/src/pages/Customers/CustomerProfile.jsx
@@ -755,9 +755,6 @@ const RetrieveDataDialog = ({
)}
-
| |