chore: bump to v7
This commit is contained in:
parent
7fbd51cb7e
commit
2fb100d99c
16 changed files with 1579 additions and 1305 deletions
2642
new-lamassu-admin/package-lock.json
generated
2642
new-lamassu-admin/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -5,11 +5,9 @@
|
|||
"type": "module",
|
||||
"dependencies": {
|
||||
"@apollo/client": "^3.13.7",
|
||||
"@emotion/react": "^11.14.0",
|
||||
"@emotion/styled": "^11.14.0",
|
||||
"@lamassu/coins": "v1.6.1",
|
||||
"@mui/icons-material": "^5.17.1",
|
||||
"@mui/material": "^5.17.1",
|
||||
"@mui/icons-material": "^7.1.0",
|
||||
"@mui/material": "^7.1.0",
|
||||
"@simplewebauthn/browser": "^3.0.0",
|
||||
"apollo-upload-client": "^18.0.0",
|
||||
"bignumber.js": "9.0.0",
|
||||
|
|
@ -32,7 +30,6 @@
|
|||
"react-copy-to-clipboard": "^5.0.2",
|
||||
"react-dom": "17.0.2",
|
||||
"react-dropzone": "^11.4.2",
|
||||
"react-material-ui-carousel": "^3.4.2",
|
||||
"react-number-format": "^4.4.1",
|
||||
"react-otp-input": "3.1.1",
|
||||
"react-router-dom": "5.1.2",
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ const App = () => {
|
|||
value={{ wizardTested, setWizardTested, userData, setUserData, setRole }}>
|
||||
<Router>
|
||||
<ApolloProvider>
|
||||
<StyledEngineProvider injectFirst>
|
||||
<StyledEngineProvider enableCssLayer>
|
||||
<ThemeProvider theme={theme}>
|
||||
<CssBaseline />
|
||||
<Main />
|
||||
|
|
|
|||
|
|
@ -1,45 +1,48 @@
|
|||
import React, { memo } from 'react'
|
||||
import ReactCarousel from 'react-material-ui-carousel'
|
||||
import React, { memo, useState } from 'react'
|
||||
import styles from './Carousel.module.css'
|
||||
import LeftArrow from 'src/styling/icons/arrow/carousel-left-arrow.svg?react'
|
||||
import RightArrow from 'src/styling/icons/arrow/carousel-right-arrow.svg?react'
|
||||
|
||||
export const Carousel = memo(({ photosData, slidePhoto }) => {
|
||||
const [activeIndex, setActiveIndex] = useState(0)
|
||||
|
||||
const handlePrev = () => {
|
||||
const newIndex = activeIndex === 0 ? photosData.length - 1 : activeIndex - 1
|
||||
setActiveIndex(newIndex)
|
||||
slidePhoto(newIndex)
|
||||
}
|
||||
|
||||
const handleNext = () => {
|
||||
const newIndex = activeIndex === photosData.length - 1 ? 0 : activeIndex + 1
|
||||
setActiveIndex(newIndex)
|
||||
slidePhoto(newIndex)
|
||||
}
|
||||
|
||||
if (!photosData || photosData.length === 0) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<ReactCarousel
|
||||
PrevIcon={<LeftArrow />}
|
||||
NextIcon={<RightArrow />}
|
||||
navButtonsProps={{
|
||||
style: {
|
||||
backgroundColor: 'transparent',
|
||||
borderRadius: 0,
|
||||
color: 'transparent',
|
||||
opacity: 1
|
||||
}
|
||||
}}
|
||||
navButtonsWrapperProps={{
|
||||
style: {
|
||||
marginLeft: -22,
|
||||
marginRight: -22
|
||||
}
|
||||
}}
|
||||
autoPlay={false}
|
||||
indicators={false}
|
||||
navButtonsAlwaysVisible={true}
|
||||
next={activeIndex => slidePhoto(activeIndex)}
|
||||
prev={activeIndex => slidePhoto(activeIndex)}>
|
||||
{photosData.map((item, i) => (
|
||||
<div key={i}>
|
||||
<div className="items-center justify-center flex">
|
||||
<div className={styles.carouselContainer}>
|
||||
{photosData.length > 1 && (
|
||||
<button onClick={handlePrev} className={styles.navButton}>
|
||||
<LeftArrow />
|
||||
</button>
|
||||
)}
|
||||
|
||||
<div className={styles.imageContainer}>
|
||||
<img
|
||||
className="object-contain object-center w-75 h-100 mb-10"
|
||||
src={`/${item?.photoDir}/${item?.path}`}
|
||||
className={styles.image}
|
||||
src={`/${photosData[activeIndex]?.photoDir}/${photosData[activeIndex]?.path}`}
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
|
||||
{photosData.length > 1 && (
|
||||
<button onClick={handleNext} className={styles.navButton}>
|
||||
<RightArrow />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</ReactCarousel>
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
|
|||
45
new-lamassu-admin/src/components/Carousel.module.css
Normal file
45
new-lamassu-admin/src/components/Carousel.module.css
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
.carouselContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.imageContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
.image {
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.navButton {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
color: transparent;
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
min-width: 44px;
|
||||
min-height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.navButton:hover {
|
||||
background-color: rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
|
@ -68,7 +68,7 @@ const CopyToClipboard = ({
|
|||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default CopyToClipboard
|
||||
|
|
|
|||
|
|
@ -47,14 +47,6 @@ const SearchBox = memo(
|
|||
multiple
|
||||
filterSelectedOptions
|
||||
isOptionEqualToValue={(option, value) => option.type === value.type}
|
||||
PaperComponent={({ children }) => (
|
||||
<Paper
|
||||
elevation={0}
|
||||
className="flex flex-col rounded-b-xl bg-zircon shadow-2xl">
|
||||
<div className="w-[88%] h-[1px] my-p mx-auto border-1 border-comet" />
|
||||
{children}
|
||||
</Paper>
|
||||
)}
|
||||
renderInput={params => {
|
||||
return (
|
||||
<InputBase
|
||||
|
|
@ -74,8 +66,17 @@ const SearchBox = memo(
|
|||
onClose={() => setPopupOpen(false)}
|
||||
onChange={(_, filters) => innerOnChange(filters)}
|
||||
{...props}
|
||||
/>
|
||||
slots={{
|
||||
paper: ({ children }) => (
|
||||
<Paper
|
||||
elevation={0}
|
||||
className="flex flex-col rounded-b-xl bg-zircon shadow-2xl">
|
||||
<div className="w-[88%] h-[1px] my-p mx-auto border-1 border-comet" />
|
||||
{children}
|
||||
</Paper>
|
||||
)
|
||||
}} />
|
||||
);
|
||||
}
|
||||
)
|
||||
|
||||
|
|
|
|||
|
|
@ -37,6 +37,7 @@ const SearchFilter = ({
|
|||
)}`}</Label3>
|
||||
}
|
||||
<ActionButton
|
||||
altTextColor
|
||||
color="secondary"
|
||||
Icon={ReverseFilterIcon}
|
||||
InverseIcon={FilterIcon}
|
||||
|
|
|
|||
|
|
@ -4,9 +4,19 @@ import React, { memo } from 'react'
|
|||
import moduleStyles from './ActionButton.module.css'
|
||||
|
||||
const ActionButton = memo(
|
||||
({ className, Icon, InverseIcon, color, center, children, ...props }) => {
|
||||
({
|
||||
className,
|
||||
altTextColor,
|
||||
Icon,
|
||||
InverseIcon,
|
||||
color,
|
||||
center,
|
||||
children,
|
||||
...props
|
||||
}) => {
|
||||
const classNames = {
|
||||
[moduleStyles.actionButton]: true,
|
||||
[moduleStyles.altText]: altTextColor,
|
||||
[moduleStyles.primary]: color === 'primary',
|
||||
[moduleStyles.secondary]: color === 'secondary',
|
||||
[moduleStyles.spring]: color === 'spring',
|
||||
|
|
|
|||
|
|
@ -8,8 +8,10 @@
|
|||
padding: 0 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/*TODO important is a hack while we don't have a better way of handling overrides of 'composes'*/
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.actionButton.altText {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.primary {
|
||||
|
|
|
|||
|
|
@ -80,7 +80,6 @@ const Autocomplete = ({
|
|||
openOnFocus
|
||||
autoHighlight
|
||||
disableClearable
|
||||
ChipProps={{ onDelete: null }}
|
||||
clearOnEscape
|
||||
isOptionEqualToValue={R.eqProps(valueProp)}
|
||||
{...props}
|
||||
|
|
@ -122,8 +121,10 @@ const Autocomplete = ({
|
|||
</li>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
)
|
||||
slotProps={{
|
||||
chip: { onDelete: null }
|
||||
}} />
|
||||
);
|
||||
}
|
||||
|
||||
export default Autocomplete
|
||||
|
|
|
|||
|
|
@ -53,8 +53,9 @@ const TextInput = memo(
|
|||
value={value}
|
||||
className={className}
|
||||
style={style}
|
||||
inputProps={{ style: { textAlign } }}
|
||||
InputProps={{
|
||||
{...props}
|
||||
slotProps={{
|
||||
input: {
|
||||
className: classnames(divClass),
|
||||
classes: {
|
||||
root: sizeClass,
|
||||
|
|
@ -62,10 +63,11 @@ const TextInput = memo(
|
|||
input: inputClasses
|
||||
},
|
||||
...InputProps
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
},
|
||||
|
||||
htmlInput: { style: { textAlign } }
|
||||
}} />
|
||||
);
|
||||
}
|
||||
)
|
||||
|
||||
|
|
|
|||
|
|
@ -1,15 +1,12 @@
|
|||
.size {
|
||||
margin-top: 2px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.sizeSm {
|
||||
margin-top: 2px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.sizeLg {
|
||||
margin-top: 0;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -149,6 +149,7 @@ const Header = memo(({ tree, user }) => {
|
|||
</nav>
|
||||
<div className={styles.actionButtonsContainer}>
|
||||
<ActionButton
|
||||
altTextColor
|
||||
color="secondary"
|
||||
Icon={AddIcon}
|
||||
InverseIcon={AddIconReverse}
|
||||
|
|
|
|||
|
|
@ -1,25 +0,0 @@
|
|||
import List from '@mui/material/List'
|
||||
import ListItem from '@mui/material/ListItem'
|
||||
import ListItemText from '@mui/material/ListItemText'
|
||||
import React from 'react'
|
||||
|
||||
const MachineSidebar = ({ data, getText, getKey, isSelected, selectItem }) => {
|
||||
return (
|
||||
<List className="h-100 overflow-y-auto">
|
||||
{data.map((item, idx) => {
|
||||
return (
|
||||
<ListItem
|
||||
disableRipple
|
||||
key={getKey(item) + idx}
|
||||
button
|
||||
selected={isSelected(getText(item))}
|
||||
onClick={() => selectItem(getText(item))}>
|
||||
<ListItemText primary={getText(item)} />
|
||||
</ListItem>
|
||||
)
|
||||
})}
|
||||
</List>
|
||||
)
|
||||
}
|
||||
|
||||
export default MachineSidebar
|
||||
|
|
@ -1,8 +1,7 @@
|
|||
@import "./fonts.css";
|
||||
|
||||
/*@tailwind setup with no preflighrt*/
|
||||
/* TODO remove important after mui v6 migration*/
|
||||
@layer theme, base, components, utilities;
|
||||
/* TODO remove important */
|
||||
@layer theme, base, mui, components, utilities;
|
||||
@import "tailwindcss/theme.css" layer(theme);
|
||||
@import "tailwindcss/utilities.css" layer(utilities) important;
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue