chore: bump to v7

new-lamassu-admin/package.json

@@ -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/icons-material": "^7.1.0",
-    "@mui/material": "^5.17.1",
+    "@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",

new-lamassu-admin/src/App.jsx

@@ -25,7 +25,7 @@ const App = () => {
       value={{ wizardTested, setWizardTested, userData, setUserData, setRole }}>
       <Router>
         <ApolloProvider>
-          <StyledEngineProvider injectFirst>
+          <StyledEngineProvider enableCssLayer>
             <ThemeProvider theme={theme}>
               <CssBaseline />
               <Main />

new-lamassu-admin/src/components/Carousel.jsx

@@ -1,45 +1,48 @@
-import React, { memo } from 'react'
+import React, { memo, useState } from 'react'
-import ReactCarousel from 'react-material-ui-carousel'
+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 (
-    <>
+    <div className={styles.carouselContainer}>
-      <ReactCarousel
+      {photosData.length > 1 && (
-        PrevIcon={<LeftArrow />}
+        <button onClick={handlePrev} className={styles.navButton}>
-        NextIcon={<RightArrow />}
+          <LeftArrow />
-        navButtonsProps={{
+        </button>
-          style: {
+      )}
-            backgroundColor: 'transparent',
+
-            borderRadius: 0,
+      <div className={styles.imageContainer}>
-            color: 'transparent',
+        <img
-            opacity: 1
+          className={styles.image}
-          }
+          src={`/${photosData[activeIndex]?.photoDir}/${photosData[activeIndex]?.path}`}
-        }}
+          alt=""
-        navButtonsWrapperProps={{
+        />
-          style: {
+      </div>
-            marginLeft: -22,
+
-            marginRight: -22
+      {photosData.length > 1 && (
-          }
+        <button onClick={handleNext} className={styles.navButton}>
-        }}
+          <RightArrow />
-        autoPlay={false}
+        </button>
-        indicators={false}
+      )}
-        navButtonsAlwaysVisible={true}
+    </div>
-        next={activeIndex => slidePhoto(activeIndex)}
-        prev={activeIndex => slidePhoto(activeIndex)}>
-        {photosData.map((item, i) => (
-          <div key={i}>
-            <div className="items-center justify-center flex">
-              <img
-                className="object-contain object-center w-75 h-100 mb-10"
-                src={`/${item?.photoDir}/${item?.path}`}
-                alt=""
-              />
-            </div>
-          </div>
-        ))}
-      </ReactCarousel>
-    </>
   )
 })

new-lamassu-admin/src/components/Carousel.module.css

@@ -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);
+}

new-lamassu-admin/src/components/CopyToClipboard.jsx

@@ -68,7 +68,7 @@ const CopyToClipboard = ({
         </>
       )}
     </div>
-  )
+  );
 }
 
 export default CopyToClipboard

new-lamassu-admin/src/components/SearchBox.jsx

@@ -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>
+          )
+        }} />
+    );
   }
 )
 

new-lamassu-admin/src/components/SearchFilter.jsx

@@ -37,6 +37,7 @@ const SearchFilter = ({
             )}`}</Label3>
           }
           <ActionButton
+            altTextColor
             color="secondary"
             Icon={ReverseFilterIcon}
             InverseIcon={FilterIcon}

new-lamassu-admin/src/components/buttons/ActionButton.jsx

@@ -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',

new-lamassu-admin/src/components/buttons/ActionButton.module.css

@@ -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 {

new-lamassu-admin/src/components/inputs/base/Autocomplete.jsx

@@ -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

new-lamassu-admin/src/components/inputs/base/TextInput.jsx

@@ -53,19 +53,21 @@ const TextInput = memo(
         value={value}
         className={className}
         style={style}
-        inputProps={{ style: { textAlign } }}
-        InputProps={{
-          className: classnames(divClass),
-          classes: {
-            root: sizeClass,
-            underline: filled ? styles.underline : null,
-            input: inputClasses
-          },
-          ...InputProps
-        }}
         {...props}
-      />
+        slotProps={{
-    )
+          input: {
+            className: classnames(divClass),
+            classes: {
+              root: sizeClass,
+              underline: filled ? styles.underline : null,
+              input: inputClasses
+            },
+            ...InputProps
+          },
+
+          htmlInput: { style: { textAlign } }
+        }} />
+    );
   }
 )
 

new-lamassu-admin/src/components/inputs/base/TextInput.module.css

@@ -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;
 }

new-lamassu-admin/src/components/layout/Header.jsx

@@ -149,6 +149,7 @@ const Header = memo(({ tree, user }) => {
           </nav>
           <div className={styles.actionButtonsContainer}>
             <ActionButton
+              altTextColor
               color="secondary"
               Icon={AddIcon}
               InverseIcon={AddIconReverse}

new-lamassu-admin/src/pages/Machines/MachineSidebar.jsx

@@ -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

new-lamassu-admin/src/styling/global/global.css

@@ -1,8 +1,7 @@
 @import "./fonts.css";
 
-/*@tailwind setup with no preflighrt*/
+/* TODO remove important */
-/* TODO remove important after mui v6 migration*/
+@layer theme, base, mui, components, utilities;
-@layer theme, base, components, utilities;
 @import "tailwindcss/theme.css" layer(theme);
 @import "tailwindcss/utilities.css" layer(utilities) important;