partial: second batch of components
This commit is contained in:
Rafael Taranto
parent
9f4bf1de7b
commit
f75477ac34
53 changed files with 673 additions and 757 deletions
|
|
@ -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 (
|
||||
<div className="p-4 pr-3 flex justify-between">
|
||||
{children}
|
||||
{onClose && (
|
||||
<IconButton
|
||||
size={16}
|
||||
aria-label="close"
|
||||
onClick={onClose}
|
||||
className="p-0 -mt-1">
|
||||
<CloseIcon />
|
||||
<IconButton aria-label="close" onClick={onClose} className="p-0 -mt-1">
|
||||
<SvgIcon fontSize="small">
|
||||
<CloseIcon />
|
||||
</SvgIcon>
|
||||
</IconButton>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -37,7 +37,9 @@ const CopyToClipboard = ({
|
|||
<div className={classnames('flex items-center', wrapperClassname)}>
|
||||
{children && (
|
||||
<>
|
||||
<Mono noMargin className={className}>
|
||||
<Mono
|
||||
noMargin
|
||||
className={classnames('linebreak-anywhere', className)}>
|
||||
{children}
|
||||
</Mono>
|
||||
<div className={buttonClassname}>
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<div className="p-4 pr-3 flex justify-between m-0">
|
||||
{children}
|
||||
{close && (
|
||||
<IconButton
|
||||
size={16}
|
||||
aria-label="close"
|
||||
onClick={close}
|
||||
className="p-0 -mt-1">
|
||||
<CloseIcon />
|
||||
<IconButton aria-label="close" onClick={close} className="p-0 -mt-1">
|
||||
<SvgIcon fontSize="small">
|
||||
<CloseIcon />
|
||||
</SvgIcon>
|
||||
</IconButton>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -21,8 +21,8 @@ const ImagePopper = memo(
|
|||
|
||||
const popperOpen = Boolean(popperAnchorEl)
|
||||
|
||||
const Image = ({ className }) => (
|
||||
<img className={classnames(className)} src={src} alt="" />
|
||||
const Image = ({ className, style }) => (
|
||||
<img className={classnames(className)} style={style} src={src} alt="" />
|
||||
)
|
||||
|
||||
return (
|
||||
|
|
@ -35,12 +35,12 @@ const ImagePopper = memo(
|
|||
<FeatureButton
|
||||
Icon={ZoomIcon}
|
||||
InverseIcon={ZoomIconInverse}
|
||||
className="rounded-br-lg"
|
||||
className="rounded-none rounded-tr-lg rounded-br-lg"
|
||||
style={{ height }}
|
||||
onClick={handleOpenPopper}
|
||||
/>
|
||||
<Popper open={popperOpen} anchorEl={popperAnchorEl} placement="top">
|
||||
<div className="block py-2 px-4">
|
||||
<div className="py-2 px-4">
|
||||
<Image
|
||||
className="object-cover"
|
||||
style={{ width: popupWidth, height: popupHeight }}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import Dialog from '@mui/material/Dialog'
|
||||
import DialogContent from '@mui/material/DialogContent'
|
||||
import SvgIcon from '@mui/material/SvgIcon'
|
||||
import IconButton from '@mui/material/IconButton'
|
||||
import React, { memo } from 'react'
|
||||
import { H1 } from 'src/components/typography'
|
||||
import CloseIcon from 'src/styling/icons/action/close/zodiac.svg?react'
|
||||
|
||||
import { IconButton } from 'src/components/buttons'
|
||||
|
||||
export const InformativeDialog = memo(
|
||||
({ title = '', open, onDissmised, disabled = false, data, ...props }) => {
|
||||
const innerOnClose = () => {
|
||||
|
|
@ -24,7 +24,10 @@ export const InformativeDialog = memo(
|
|||
aria-labelledby="form-dialog-title"
|
||||
{...props}>
|
||||
<div className="flex justify-end pt-4 pr-3 pb-0 pl-4">
|
||||
<IconButton size={16} aria-label="close" onClick={innerOnClose}>
|
||||
<IconButton aria-label="close" onClick={innerOnClose}>
|
||||
<SvgIcon fontSize="small">
|
||||
<CloseIcon />
|
||||
</SvgIcon>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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 }}>
|
||||
<IconButton
|
||||
size={closeSize}
|
||||
className="p-0 mb-auto ml-auto"
|
||||
onClick={() => handleClose()}>
|
||||
<CloseIcon />
|
||||
<SvgIcon fontSize={xl ? 'large' : 'small'}>
|
||||
<CloseIcon />
|
||||
</SvgIcon>
|
||||
</IconButton>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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(
|
|||
) : (
|
||||
<IconButton
|
||||
className="my-auto mx-3"
|
||||
onClick={() => setEditing(true)}
|
||||
size="large">
|
||||
{disabled ? <EditIconDisabled /> : <EditIcon />}
|
||||
onClick={() => setEditing(true)}>
|
||||
<SvgIcon fontSize="small">
|
||||
{disabled ? <EditIconDisabled /> : <EditIcon />}
|
||||
</SvgIcon>
|
||||
</IconButton>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<IconB
|
||||
{...props}
|
||||
size="small"
|
||||
classes={{ root: classes.root }}
|
||||
disableRipple
|
||||
onClick={onClick}>
|
||||
{children}
|
||||
</IconB>
|
||||
)
|
||||
}
|
||||
|
||||
export default IconButton
|
||||
|
|
@ -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 (
|
||||
<a
|
||||
className={classes.actionButtonLink}
|
||||
className="no-underline text-zodiac"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
href={link}>
|
||||
<ActionButton
|
||||
className={classes.actionButton}
|
||||
className="mb-8"
|
||||
color="primary"
|
||||
Icon={LinkIcon}
|
||||
InverseIcon={InverseLinkIcon}>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<>
|
||||
<div className={classnames(classes.wrapper, className)}>
|
||||
<div className={classnames('bg-white rounded-xl', className)}>
|
||||
<Calendar
|
||||
from={from}
|
||||
to={to}
|
||||
|
|
|
|||
|
|
@ -1,74 +0,0 @@
|
|||
import { makeStyles } from '@mui/styles'
|
||||
import React, { useState, memo } from 'react'
|
||||
import { H4, P } from 'src/components/typography'
|
||||
import EditIconDisabled from 'src/styling/icons/action/edit/disabled.svg?react'
|
||||
import EditIcon from 'src/styling/icons/action/edit/enabled.svg?react'
|
||||
|
||||
import { Link } from 'src/components/buttons'
|
||||
import { RadioGroup } from 'src/components/inputs'
|
||||
|
||||
import { editablePropertyStyles } from './EditableProperty.styles'
|
||||
|
||||
const useStyles = makeStyles(editablePropertyStyles)
|
||||
|
||||
const EditableProperty = memo(
|
||||
({ title, prefixText, disabled, options, code, save }) => {
|
||||
const [editing, setEditing] = useState(false)
|
||||
const [currentCode, setCurrentCode] = useState(code)
|
||||
|
||||
const classes = useStyles()
|
||||
|
||||
const innerSave = () => {
|
||||
save(currentCode)
|
||||
setEditing(false)
|
||||
}
|
||||
|
||||
const innerCancel = () => setEditing(false)
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={classes.rowWrapper}>
|
||||
<H4>{title}</H4>
|
||||
{editing ? (
|
||||
<div className={classes.leftSpace}>
|
||||
<Link
|
||||
className={classes.leftSpace}
|
||||
onClick={innerCancel}
|
||||
color="secondary">
|
||||
Cancel
|
||||
</Link>
|
||||
<Link
|
||||
className={classes.leftSpace}
|
||||
onClick={innerSave}
|
||||
color="primary">
|
||||
Save
|
||||
</Link>
|
||||
</div>
|
||||
) : (
|
||||
<div className={classes.transparentButton}>
|
||||
<button disabled={disabled} onClick={() => setEditing(true)}>
|
||||
{disabled ? <EditIconDisabled /> : <EditIcon />}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{editing ? (
|
||||
<RadioGroup
|
||||
options={options}
|
||||
value={currentCode}
|
||||
onChange={event => setCurrentCode(event.target.value)}
|
||||
className={classes.radioButtons}
|
||||
/>
|
||||
) : (
|
||||
<P>
|
||||
{`${prefixText} ${options
|
||||
.find(it => it.code === currentCode)
|
||||
.display.toLowerCase()}`}
|
||||
</P>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
)
|
||||
|
||||
export default EditableProperty
|
||||
|
|
@ -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 }
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
import EditableProperty from './EditableProperty'
|
||||
|
||||
export { EditableProperty }
|
||||
|
|
@ -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)
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -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 }) => {
|
|||
<IconButton
|
||||
disabled={disableEdit}
|
||||
className={classes.editButton}
|
||||
onClick={() => onEdit && onEdit(values.id)}
|
||||
size="large">
|
||||
{disableEdit ? <DisabledEditIcon /> : <EditIcon />}
|
||||
onClick={() => onEdit && onEdit(values.id)}>
|
||||
<SvgIcon>
|
||||
{disableEdit ? <DisabledEditIcon /> : <EditIcon />}
|
||||
</SvgIcon>
|
||||
</IconButton>
|
||||
</Td>
|
||||
)}
|
||||
|
|
@ -89,9 +92,10 @@ const ActionCol = ({ disabled, editing }) => {
|
|||
disabled={disabled}
|
||||
onClick={() => {
|
||||
setDeleteDialog(true)
|
||||
}}
|
||||
size="large">
|
||||
{disabled ? <DisabledDeleteIcon /> : <DeleteIcon />}
|
||||
}}>
|
||||
<SvgIcon>
|
||||
{disabled ? <DisabledDeleteIcon /> : <DeleteIcon />}
|
||||
</SvgIcon>
|
||||
</IconButton>
|
||||
<DeleteDialog
|
||||
open={deleteDialog}
|
||||
|
|
@ -116,7 +120,7 @@ const ActionCol = ({ disabled, editing }) => {
|
|||
</Td>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
const ECol = ({ editing, focus, config, extraPaddingRight, extraPadding }) => {
|
||||
|
|
|
|||
|
|
@ -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 }) => (
|
||||
<div className={classnames(className)} {...props}>
|
||||
|
|
@ -17,17 +13,12 @@ const Table = ({ children, className, ...props }) => (
|
|||
)
|
||||
|
||||
const THead = ({ children, className }) => {
|
||||
const classes = useStyles()
|
||||
return <div className={classnames(className, classes.header)}>{children}</div>
|
||||
return <div className={classnames(className, styles.header)}>{children}</div>
|
||||
}
|
||||
|
||||
const TDoubleLevelHead = ({ children, className }) => {
|
||||
const classes = useStyles()
|
||||
|
||||
return (
|
||||
<div className={classnames(className, classes.doubleHeader)}>
|
||||
{children}
|
||||
</div>
|
||||
<div className={classnames(className, styles.doubleHeader)}>{children}</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
@ -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 <div data-cy={`td-${header}`} className={classnames(className, classNames)}>{children}</div>
|
||||
|
||||
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 (
|
||||
<div
|
||||
data-cy={`td-${header}`}
|
||||
className={classnames(className, cssClasses)}
|
||||
style={inlineStyle}>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const Th = ({ children, ...props }) => {
|
||||
|
|
@ -65,10 +69,10 @@ const Th = ({ children, ...props }) => {
|
|||
}
|
||||
|
||||
const ThDoubleLevel = ({ title, children, className, width }) => {
|
||||
const classes = useStyles({ width })
|
||||
|
||||
return (
|
||||
<div className={classnames(className, classes.thDoubleLevel)}>
|
||||
<div
|
||||
className={classnames(className, styles.thDoubleLevel)}
|
||||
style={{ width }}>
|
||||
<div>{title}</div>
|
||||
<div>{children}</div>
|
||||
</div>
|
||||
|
|
@ -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 (
|
||||
<>
|
||||
<Card className={classnames(classNames, className)} onClick={onClick}>
|
||||
<CardContent classes={cardClasses}>
|
||||
<div className={classes.mainContent}>{children}</div>
|
||||
<Card className={classnames(className, cardClasses)} onClick={onClick}>
|
||||
<CardContent className={styles.cardContentRoot}>
|
||||
<div className={classnames(mainContentClasses)}>{children}</div>
|
||||
{error && shouldShowError && (
|
||||
<div className={classes.errorContent}>{errorMessage}</div>
|
||||
<div className={styles.errorContent}>{errorMessage}</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
|
|
|||
112
new-lamassu-admin/src/components/fake-table/Table.module.css
Normal file
112
new-lamassu-admin/src/components/fake-table/Table.module.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
@ -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 (
|
||||
<div className={classnames(selectClassNames, className)}>
|
||||
<label {...getLabelProps()}>{label}</label>
|
||||
<button {...getToggleButtonProps()}>
|
||||
<span className={classes.selectedItem}>{selectedItem.display}</span>
|
||||
<span className={styles.selectedItem}>{selectedItem.display}</span>
|
||||
<Arrowdown />
|
||||
</button>
|
||||
<ul {...getMenuProps()}>
|
||||
|
|
|
|||
100
new-lamassu-admin/src/components/inputs/base/Select.module.css
Normal file
100
new-lamassu-admin/src/components/inputs/base/Select.module.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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]]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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 (
|
||||
<MUIToggleButtonGroup
|
||||
size={size}
|
||||
|
|
@ -54,15 +23,15 @@ const ToggleButtonGroup = ({
|
|||
{props.options.map(option => {
|
||||
return (
|
||||
<ToggleButton
|
||||
className={classes.button}
|
||||
className="bg-ghost"
|
||||
value={option.value}
|
||||
aria-label={option.value}
|
||||
key={option.value}>
|
||||
<div className={classes.flex}>
|
||||
<div className="flex items-center justify-start w-9/10 overflow-hidden max-h-20">
|
||||
<option.icon />
|
||||
<div className={classes.buttonTextContent}>
|
||||
<div className="ml-8 normal-case text-left">
|
||||
<H4>{option.title}</H4>
|
||||
<P className={classes.paragraph}> {option.description}</P>
|
||||
<P className="text-comet -mt-2"> {option.description}</P>
|
||||
</div>
|
||||
</div>
|
||||
</ToggleButton>
|
||||
|
|
|
|||
|
|
@ -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 = ({
|
|||
<THead>
|
||||
<Th className="flex flex-1 justify-between items-center pr-3">
|
||||
{title}
|
||||
<IconButton onClick={onEdit} className="mb-[1px]" size="large">
|
||||
<EditIcon />
|
||||
<IconButton onClick={onEdit} className="mb-[1px]">
|
||||
<SvgIcon>
|
||||
<EditIcon />
|
||||
</SvgIcon>
|
||||
</IconButton>
|
||||
</Th>
|
||||
</THead>
|
||||
|
|
|
|||
3
new-lamassu-admin/src/components/table/Table.module.css
Normal file
3
new-lamassu-admin/src/components/table/Table.module.css
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
.tableCell {
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
|
@ -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 (
|
||||
<td
|
||||
colSpan={colspan}
|
||||
className={classnames(styles, className)}
|
||||
className={classnames(className, styles)}
|
||||
{...props}>
|
||||
{children}
|
||||
</td>
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<p className={classnames(classNames)} {...props}>
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
@ -57,7 +57,7 @@ const LoginCard = () => {
|
|||
<div className={classes.wrapper}>
|
||||
<div className={classes.titleWrapper}>
|
||||
<Logo className={classes.icon} />
|
||||
<H5 className={classes.title}>Lamassu Admin</H5>
|
||||
<h3 className={classes.title}>Lamassu Admin</h3>
|
||||
</div>
|
||||
{renderState()}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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 }) => {
|
|||
<div className="p-2">
|
||||
<DialogTitle className="flex flex-col">
|
||||
<IconButton
|
||||
size={30}
|
||||
aria-label="close"
|
||||
onClick={onDissmised}
|
||||
className="-mt-2 -mr-4 ml-auto">
|
||||
<CloseIcon />
|
||||
<SvgIcon>
|
||||
<CloseIcon />
|
||||
</SvgIcon>
|
||||
</IconButton>
|
||||
<H2 noMargin>{'Are you sure you want to enable this?'}</H2>
|
||||
</DialogTitle>
|
||||
|
|
|
|||
|
|
@ -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 => (
|
||||
<IconButton
|
||||
className="pl-3"
|
||||
onClick={() => setSelectedMessage(it)}
|
||||
size="large">
|
||||
<EditIcon />
|
||||
<IconButton className="pl-3" onClick={() => setSelectedMessage(it)}>
|
||||
<SvgIcon>
|
||||
<EditIcon />
|
||||
</SvgIcon>
|
||||
</IconButton>
|
||||
)
|
||||
},
|
||||
|
|
@ -76,13 +77,14 @@ const BlacklistAdvanced = ({
|
|||
disabled={
|
||||
!R.isNil(R.path(['allowToggle'], it)) &&
|
||||
!R.path(['allowToggle'], it)
|
||||
}
|
||||
size="large">
|
||||
{R.path(['allowToggle'], it) ? (
|
||||
<DeleteIcon />
|
||||
) : (
|
||||
<DisabledDeleteIcon />
|
||||
)}
|
||||
}>
|
||||
<SvgIcon>
|
||||
{R.path(['allowToggle'], it) ? (
|
||||
<DeleteIcon />
|
||||
) : (
|
||||
<DisabledDeleteIcon />
|
||||
)}
|
||||
</SvgIcon>
|
||||
</IconButton>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<DeleteIcon />
|
||||
}}>
|
||||
<SvgIcon>
|
||||
<DeleteIcon />
|
||||
</SvgIcon>
|
||||
</IconButton>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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}>
|
||||
<div className="pt-4 pr-4 flex justify-end">
|
||||
<IconButton
|
||||
size={32}
|
||||
aria-label="close"
|
||||
onClick={() => onDismissed(false)}>
|
||||
<CloseIcon />
|
||||
<IconButton aria-label="close" onClick={() => onDismissed(false)}>
|
||||
<SvgIcon>
|
||||
<CloseIcon />
|
||||
</SvgIcon>
|
||||
</IconButton>
|
||||
</div>
|
||||
<H2 className="mb-2 ml-10">{'Retrieve API data from Twilio'}</H2>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<DeleteIcon />
|
||||
}}>
|
||||
<SvgIcon>
|
||||
<DeleteIcon />
|
||||
</SvgIcon>
|
||||
</IconButton>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<DeleteIcon />
|
||||
}}>
|
||||
<SvgIcon>
|
||||
<DeleteIcon />
|
||||
</SvgIcon>
|
||||
</IconButton>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)}
|
||||
</P>
|
||||
)}
|
||||
<IconButton onClick={() => setEditingSchema(true)} size="large">
|
||||
<EditIcon />
|
||||
<IconButton onClick={() => setEditingSchema(true)}>
|
||||
<SvgIcon>
|
||||
<EditIcon />
|
||||
</SvgIcon>
|
||||
</IconButton>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<EditIcon />
|
||||
}}>
|
||||
<SvgIcon>
|
||||
<EditIcon />
|
||||
</SvgIcon>
|
||||
</IconButton>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 }) => {
|
|||
<IconButton
|
||||
onClick={() => setEditing(true)}
|
||||
className="border-0 bg-transparent shrink-0 cursor-pointer ml-2"
|
||||
disabled={disabled}
|
||||
size="large">
|
||||
{disabled ? <DisabledEditIcon /> : <EditIcon />}
|
||||
disabled={disabled}>
|
||||
<SvgIcon>{disabled ? <DisabledEditIcon /> : <EditIcon />}</SvgIcon>
|
||||
</IconButton>
|
||||
)}
|
||||
{editing && (
|
||||
|
|
|
|||
|
|
@ -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 }) => {
|
|||
<div className="flex items-center gap-4">
|
||||
<H4>Info card</H4>
|
||||
{!editing && (
|
||||
<IconButton onClick={() => setEditing(true)} size="large">
|
||||
<EditIcon />
|
||||
<IconButton onClick={() => setEditing(true)}>
|
||||
<SvgIcon>
|
||||
<EditIcon />
|
||||
</SvgIcon>
|
||||
</IconButton>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<EditIcon />
|
||||
}}>
|
||||
<SvgIcon>
|
||||
<EditIcon />
|
||||
</SvgIcon>
|
||||
</IconButton>
|
||||
)
|
||||
},
|
||||
|
|
@ -217,13 +220,14 @@ const SMSNotices = () => {
|
|||
R.equals(selectedSMS, it)
|
||||
? setPreviewOpen(!previewOpen)
|
||||
: setPreviewOpen(true)
|
||||
}}
|
||||
size="large">
|
||||
{R.equals(selectedSMS, it) && previewOpen ? (
|
||||
<ExpandIconOpen />
|
||||
) : (
|
||||
<ExpandIconClosed />
|
||||
)}
|
||||
}}>
|
||||
<SvgIcon>
|
||||
{R.equals(selectedSMS, it) && previewOpen ? (
|
||||
<ExpandIconOpen />
|
||||
) : (
|
||||
<ExpandIconClosed />
|
||||
)}
|
||||
</SvgIcon>
|
||||
</IconButton>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 = () => {
|
|||
<div className="flex gap-3">
|
||||
<Info2>Info card</Info2>
|
||||
{!editing && (
|
||||
<IconButton onClick={() => setEditing(true)} size="large">
|
||||
<EditIcon />
|
||||
<IconButton onClick={() => setEditing(true)}>
|
||||
<SvgIcon>
|
||||
<EditIcon />
|
||||
</SvgIcon>
|
||||
</IconButton>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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 = () => {
|
|||
<IconButton
|
||||
onClick={() => {
|
||||
deleteSession({ variables: { sid: s.sid } })
|
||||
}}
|
||||
size="large">
|
||||
<DeleteIcon />
|
||||
}}>
|
||||
<SvgIcon>
|
||||
<DeleteIcon />
|
||||
</SvgIcon>
|
||||
</IconButton>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<EditIcon />
|
||||
}}>
|
||||
<SvgIcon>
|
||||
<EditIcon />
|
||||
</SvgIcon>
|
||||
</IconButton>
|
||||
)
|
||||
}
|
||||
|
|
@ -230,9 +233,10 @@ const CustomInfoRequests = ({
|
|||
onClick={() => {
|
||||
setToBeDeleted(it.id)
|
||||
return setDeleteDialog(true)
|
||||
}}
|
||||
size="large">
|
||||
<DeleteIcon />
|
||||
}}>
|
||||
<SvgIcon>
|
||||
<DeleteIcon />
|
||||
</SvgIcon>
|
||||
</IconButton>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ const NumericalEntry = () => {
|
|||
name="constraintType"
|
||||
/>
|
||||
{isLength && (
|
||||
<div className="flex mt-27 max-w-29">
|
||||
<div className="flex mt-6 max-w-29">
|
||||
<Field
|
||||
component={NumberInput}
|
||||
name={'inputLength'}
|
||||
|
|
|
|||
|
|
@ -64,6 +64,10 @@
|
|||
column-span: all;
|
||||
}
|
||||
|
||||
@utility linebreak-anywhere {
|
||||
line-break: anywhere;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 0.875rem;
|
||||
width: 1200px;
|
||||
|
|
|
|||
|
|
@ -56,6 +56,11 @@ theme = createTheme(theme, {
|
|||
body1: { ...p }
|
||||
}
|
||||
},
|
||||
MuiIconButtonBase: {
|
||||
defaultProps: {
|
||||
disableRipple: true
|
||||
}
|
||||
},
|
||||
MuiButtonBase: {
|
||||
defaultProps: {
|
||||
disableRipple: true
|
||||
|
|
@ -159,6 +164,9 @@ theme = createTheme(theme, {
|
|||
},
|
||||
MuiPaper: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
color: primaryColor
|
||||
},
|
||||
elevation1: {
|
||||
boxShadow: '0 0 4px 0 rgba(0, 0, 0, 0.08)'
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,16 +32,12 @@ const mistyRose = '#ffeceb'
|
|||
const pumpkin = '#ff7311'
|
||||
const linen = '#fbf3ec'
|
||||
|
||||
// Warning
|
||||
const orangeYellow = '#ffcc00'
|
||||
|
||||
// Color Variables
|
||||
const primaryColor = zodiac
|
||||
|
||||
const secondaryColor = spring
|
||||
const secondaryColorDark = spring2
|
||||
const secondaryColorDarker = spring4
|
||||
const secondaryColorLighter = spring3
|
||||
|
||||
const backgroundColor = ghost
|
||||
const subheaderColor = zircon
|
||||
|
|
@ -52,16 +48,13 @@ const fontColor = primaryColor
|
|||
const offColor = comet
|
||||
const offDarkColor = comet2
|
||||
const offDarkerColor = comet3
|
||||
const placeholderColor = comet
|
||||
const errorColor = tomato
|
||||
const errorColorDark = tomato1
|
||||
const errorColorDarker = tomato2
|
||||
const offErrorColor = mistyRose
|
||||
const inputBorderColor = primaryColor
|
||||
|
||||
// General
|
||||
const spacer = 8
|
||||
const mainWidth = 1200
|
||||
|
||||
// Buttons
|
||||
const linkPrimaryColor = secondaryColor
|
||||
|
|
@ -72,19 +65,11 @@ const fontPrimary = 'Mont'
|
|||
const fontSecondary = 'MuseoSans'
|
||||
const fontMonospaced = 'BPmono'
|
||||
|
||||
let fontSize1 = 24
|
||||
let fontSize2 = 20
|
||||
let fontSize3 = 16
|
||||
let fontSize4 = 14
|
||||
let fontSize5 = 13
|
||||
|
||||
if (version === 8) {
|
||||
fontSize1 = 32
|
||||
fontSize2 = 24
|
||||
fontSize3 = 20
|
||||
fontSize4 = 16
|
||||
fontSize5 = 14
|
||||
}
|
||||
const fontSize1 = 24
|
||||
const fontSize2 = 20
|
||||
const fontSize3 = 16
|
||||
const fontSize4 = 14
|
||||
const fontSize5 = 13
|
||||
|
||||
const smallestFontSize = fontSize5
|
||||
const inputFontSizeSm = fontSize4
|
||||
|
|
@ -93,7 +78,6 @@ const inputFontSizeLg = fontSize1
|
|||
const inputFontWeight = 500
|
||||
const inputFontWeightBold = 700
|
||||
const inputFontFamily = fontSecondary
|
||||
const codeInputFontSize = 35
|
||||
|
||||
// Breakpoints
|
||||
const sm = 576
|
||||
|
|
@ -113,13 +97,7 @@ if (version === 8) {
|
|||
|
||||
const tableDoubleHeaderHeight = tableHeaderHeight * 2
|
||||
|
||||
const tableSmCellHeight = 30
|
||||
const tableLgCellHeight = 76
|
||||
|
||||
const tableHeaderColor = primaryColor
|
||||
const tableDisabledHeaderColor = zircon
|
||||
const tableNewDisabledHeaderColor = spring3
|
||||
const tableCellColor = white
|
||||
const tableErrorColor = mistyRose
|
||||
const tableSuccessColor = spring3
|
||||
|
||||
|
|
@ -139,17 +117,14 @@ export {
|
|||
java,
|
||||
neon,
|
||||
linen,
|
||||
orangeYellow,
|
||||
// named colors
|
||||
primaryColor,
|
||||
secondaryColor,
|
||||
secondaryColorDark,
|
||||
secondaryColorDarker,
|
||||
secondaryColorLighter,
|
||||
subheaderColor,
|
||||
subheaderDarkColor,
|
||||
backgroundColor,
|
||||
placeholderColor,
|
||||
offColor,
|
||||
offDarkColor,
|
||||
offDarkerColor,
|
||||
|
|
@ -162,7 +137,6 @@ export {
|
|||
errorColorDarker,
|
||||
errorColorDark,
|
||||
offErrorColor,
|
||||
inputBorderColor,
|
||||
// font sizes
|
||||
fontSize1,
|
||||
fontSize2,
|
||||
|
|
@ -180,7 +154,6 @@ export {
|
|||
inputFontFamily,
|
||||
inputFontWeight,
|
||||
inputFontWeightBold,
|
||||
codeInputFontSize,
|
||||
// screen sizes
|
||||
sm,
|
||||
md,
|
||||
|
|
@ -189,17 +162,11 @@ export {
|
|||
xxl,
|
||||
// sizes
|
||||
spacer,
|
||||
mainWidth,
|
||||
// table sizes
|
||||
tableHeaderHeight,
|
||||
tableDoubleHeaderHeight,
|
||||
tableCellHeight,
|
||||
tableSmCellHeight,
|
||||
tableLgCellHeight,
|
||||
tableHeaderColor,
|
||||
tableDisabledHeaderColor,
|
||||
tableNewDisabledHeaderColor,
|
||||
tableCellColor,
|
||||
tableErrorColor,
|
||||
tableSuccessColor
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue