From 9eb466256c7948381aeff2cc9807b0fab8acf302 Mon Sep 17 00:00:00 2001 From: Matthew Walowski Date: Sat, 22 Feb 2025 10:48:04 -0600 Subject: [PATCH 01/21] move theme provider --- apps/frontend/src/AppContent.tsx | 74 +++++++------ .../PatientDetailSidebar.tsx | 100 ++++++++---------- 2 files changed, 88 insertions(+), 86 deletions(-) diff --git a/apps/frontend/src/AppContent.tsx b/apps/frontend/src/AppContent.tsx index 10271dfc..33d164a9 100644 --- a/apps/frontend/src/AppContent.tsx +++ b/apps/frontend/src/AppContent.tsx @@ -19,14 +19,24 @@ import PatientDetail from './pages/PatientDetail/PatientDetail' import Patients from './pages/Patients/Patients' import { ReducerActionType } from './store/Reducer' import { Context } from './store/Store' -import { CognitoAttribute, Routes } from './utils/constants' +import { CognitoAttribute, LANGUAGES, Routes } from './utils/constants' import { isLanguageValid } from './utils/language' +import { ThemeProvider } from '@material-ui/styles' +import { createTheme } from '@material-ui/core' interface AppContentProps { username: string userEmail: string } +const arTheme = createTheme({ + direction: 'rtl', +}) + +const enTheme = createTheme({ + direction: 'ltr', +}) + const AppContent = ({ username, userEmail }: AppContentProps) => { const errorWrap = useErrorWrap() const [state, dispatch] = useContext(Context) @@ -78,38 +88,40 @@ const AppContent = ({ username, userEmail }: AppContentProps) => { - + + - {/* Global error popup */} - + {/* Global error popup */} + - {/* Routes */} -
- - - - - - - - - - - - - - - - - - - - -
+ {/* Routes */} +
+ + + + + + + + + + + + + + + + + + + + +
+ diff --git a/apps/frontend/src/components/PatientDetailSidebar/PatientDetailSidebar.tsx b/apps/frontend/src/components/PatientDetailSidebar/PatientDetailSidebar.tsx index 2ac789cd..66e78de4 100644 --- a/apps/frontend/src/components/PatientDetailSidebar/PatientDetailSidebar.tsx +++ b/apps/frontend/src/components/PatientDetailSidebar/PatientDetailSidebar.tsx @@ -19,14 +19,6 @@ import { hasNotesForStep } from '../../utils/metadataUtils' import { getPatientName } from '../../utils/utils' import { ProfilePicture } from '../ProfilePicture/ProfilePicture' -const arTheme = createTheme({ - direction: 'rtl', -}) - -const enTheme = createTheme({ - direction: 'ltr', -}) - export interface PatientDetailSidebarProps { patientData: T onViewPatient: () => void @@ -83,57 +75,55 @@ const PatientDetailSidebar = ({ patientData, onViewPatient }: PatientDetailSideb } return ( - - - -
-
- -
- - {translations.components.sidebar.name} - {' '} -
- {getPatientName(patientData)} -
-
- - {translations.components.sidebar.orderID} - {' '} -
- {patientData?.orderId} -
-
- - {translations.components.sidebar.status} - {' '} -
- {patientData?.status} -
+ + +
+
+ +
- {translations.components.notes.title} - - {generateNoteSidebar()} + {translations.components.sidebar.name} + {' '} +
+ {getPatientName(patientData)}
-
- +
+ + {translations.components.sidebar.orderID} + {' '} +
+ {patientData?.orderId}
+
+ + {translations.components.sidebar.status} + {' '} +
+ {patientData?.status} +
+ + {translations.components.notes.title} + + {generateNoteSidebar()} +
+
+
- - +
+ ) } From 41540580d222f3653e8cc4b79474518df28c9702 Mon Sep 17 00:00:00 2001 From: Matthew Walowski Date: Sat, 22 Feb 2025 10:53:03 -0600 Subject: [PATCH 02/21] run script to update mui --- apps/frontend/package.json | 4 + apps/frontend/src/AppContent.tsx | 95 +++-- .../AccountDropdown/AccountDropdown.styles.ts | 2 +- .../AccountDropdown/AccountDropdown.tsx | 10 +- .../components/AddRoleModal/AddRoleModal.tsx | 4 +- .../AudioRecorder/AudioRecorder.tsx | 12 +- .../src/components/BottomBar/BottomBar.tsx | 10 +- .../CreateFieldModal/CreateFieldModal.tsx | 14 +- .../CreatePatientModal/CreatePatientModal.tsx | 6 +- .../CreateStepModal/CreateStepModal.tsx | 4 +- .../components/CustomSwitch/CustomSwitch.tsx | 4 +- .../EditFieldModal/EditFieldModal.tsx | 16 +- .../EditRoleModal/EditRoleModal.tsx | 10 +- .../EditStepModal/EditStepModal.tsx | 6 +- .../src/components/ErrorModal/ErrorModal.tsx | 7 +- .../Fields/FieldGroup/FieldGroupList.tsx | 2 +- .../Fields/FieldGroup/FieldGroupTable.tsx | 2 +- .../components/Fields/MultiSelectField.tsx | 8 +- .../src/components/Fields/PhotoField.tsx | 2 +- .../components/Fields/RadioButtonField.tsx | 6 +- .../src/components/Fields/SignatureField.tsx | 2 +- .../src/components/Fields/TextField.tsx | 2 +- apps/frontend/src/components/Files/Files.tsx | 10 +- .../LanguageInput/LanguageInput.tsx | 2 +- .../ManagePatientModal/ManagePatientModal.tsx | 6 +- .../ManageRoleModal/ManageRoleModal.tsx | 4 +- .../src/components/NavTabs/NavTabs.tsx | 6 +- .../src/components/Navbar/Navbar.style.ts | 2 +- .../frontend/src/components/Navbar/Navbar.tsx | 6 +- .../NewSignatureModal/NewSignatureModal.tsx | 4 +- .../PatientDetailSidebar.tsx | 18 +- .../src/components/Sidebar/Sidebar.tsx | 10 +- .../SimpleTable/SimpleTable.style.ts | 6 +- .../components/SimpleTable/SimpleTable.tsx | 12 +- .../components/StepContent/StepContent.tsx | 10 +- .../src/components/StepField/StepField.tsx | 2 +- .../components/StyledButton/StyledButton.tsx | 4 +- apps/frontend/src/components/Table/Table.tsx | 4 +- .../ToggleButtons/ToggleButtons.tsx | 20 +- .../src/pages/Dashboard/Dashboard.tsx | 6 +- .../DashboardManagement.tsx | 2 +- apps/frontend/src/utils/fields.tsx | 4 +- apps/frontend/src/utils/table-renderers.tsx | 10 +- pnpm-lock.yaml | 376 ++++++++++++++++++ 44 files changed, 570 insertions(+), 182 deletions(-) diff --git a/apps/frontend/package.json b/apps/frontend/package.json index 87570eaf..665577c3 100644 --- a/apps/frontend/package.json +++ b/apps/frontend/package.json @@ -19,6 +19,10 @@ "@material-ui/icons": "^4.9.1", "@material-ui/lab": "^4.0.0-alpha.56", "@material/tabs": "^2.3.0", + "@mui/icons-material": "^6.4.5", + "@mui/lab": "6.0.0-beta.28", + "@mui/material": "^6.4.5", + "@mui/styles": "^6.4.5", "@sweetalert/with-react": "^0.1.1", "@tanstack/react-query": "^5.17.19", "@vis.gl/react-google-maps": "^1.4.2", diff --git a/apps/frontend/src/AppContent.tsx b/apps/frontend/src/AppContent.tsx index 33d164a9..818f6b8e 100644 --- a/apps/frontend/src/AppContent.tsx +++ b/apps/frontend/src/AppContent.tsx @@ -21,21 +21,28 @@ import { ReducerActionType } from './store/Reducer' import { Context } from './store/Store' import { CognitoAttribute, LANGUAGES, Routes } from './utils/constants' import { isLanguageValid } from './utils/language' -import { ThemeProvider } from '@material-ui/styles' -import { createTheme } from '@material-ui/core' +import { ThemeProvider, Theme, StyledEngineProvider } from '@mui/styles'; +import { createTheme, adaptV4Theme } from '@mui/material'; + + +declare module '@mui/styles/defaultTheme' { + // eslint-disable-next-line @typescript-eslint/no-empty-interface + interface DefaultTheme extends Theme {} +} + interface AppContentProps { username: string userEmail: string } -const arTheme = createTheme({ +const arTheme = createTheme(adaptV4Theme({ direction: 'rtl', -}) +})) -const enTheme = createTheme({ +const enTheme = createTheme(adaptV4Theme({ direction: 'ltr', -}) +})) const AppContent = ({ username, userEmail }: AppContentProps) => { const errorWrap = useErrorWrap() @@ -83,49 +90,51 @@ const AppContent = ({ username, userEmail }: AppContentProps) => { } return ( -
+ (
{/* Shown when making a network request */} - - - - {/* Global error popup */} - - - {/* Routes */} -
- - - - - - - - - - - - - - - - - - - - -
- + + + + + {/* Global error popup */} + + + {/* Routes */} +
+ + + + + + + + + + + + + + + + + + + + +
+ + -
- ) +
) + ); } export default AppContent diff --git a/apps/frontend/src/components/AccountDropdown/AccountDropdown.styles.ts b/apps/frontend/src/components/AccountDropdown/AccountDropdown.styles.ts index a6abe1e0..c99d2571 100644 --- a/apps/frontend/src/components/AccountDropdown/AccountDropdown.styles.ts +++ b/apps/frontend/src/components/AccountDropdown/AccountDropdown.styles.ts @@ -1,4 +1,4 @@ -import makeStyles from '@material-ui/core/styles/makeStyles' +import makeStyles from '@mui/styles/makeStyles'; export const useStyles = makeStyles({ menuWrapper: { diff --git a/apps/frontend/src/components/AccountDropdown/AccountDropdown.tsx b/apps/frontend/src/components/AccountDropdown/AccountDropdown.tsx index 1452f404..adf78642 100644 --- a/apps/frontend/src/components/AccountDropdown/AccountDropdown.tsx +++ b/apps/frontend/src/components/AccountDropdown/AccountDropdown.tsx @@ -1,9 +1,9 @@ import { Language } from '@3dp4me/types' -import Button from '@material-ui/core/Button' -import FormControl from '@material-ui/core/FormControl' -import Menu from '@material-ui/core/Menu' -import MenuItem from '@material-ui/core/MenuItem' -import Select from '@material-ui/core/Select' +import Button from '@mui/material/Button' +import FormControl from '@mui/material/FormControl' +import Menu from '@mui/material/Menu' +import MenuItem from '@mui/material/MenuItem' +import Select from '@mui/material/Select' import React, { ChangeEvent, useContext } from 'react' import { saveLanguagePreference, signOut } from '../../aws/aws-helper' diff --git a/apps/frontend/src/components/AddRoleModal/AddRoleModal.tsx b/apps/frontend/src/components/AddRoleModal/AddRoleModal.tsx index dd97afe0..451e5fa0 100644 --- a/apps/frontend/src/components/AddRoleModal/AddRoleModal.tsx +++ b/apps/frontend/src/components/AddRoleModal/AddRoleModal.tsx @@ -1,8 +1,8 @@ import './AddRoleModal.scss' import { Language, Role } from '@3dp4me/types' -import Button from '@material-ui/core/Button' -import Modal from '@material-ui/core/Modal' +import Button from '@mui/material/Button' +import Modal from '@mui/material/Modal' import { useState } from 'react' import { trackPromise } from 'react-promise-tracker' diff --git a/apps/frontend/src/components/AudioRecorder/AudioRecorder.tsx b/apps/frontend/src/components/AudioRecorder/AudioRecorder.tsx index 228dc1d8..afc232fb 100644 --- a/apps/frontend/src/components/AudioRecorder/AudioRecorder.tsx +++ b/apps/frontend/src/components/AudioRecorder/AudioRecorder.tsx @@ -3,12 +3,12 @@ import translations from '../../translations.json'; import MicRecorder from 'mic-recorder-to-mp3'; -import AddIcon from '@material-ui/icons/Add'; -import PlayArrowIcon from '@material-ui/icons/PlayArrow'; -import CloseIcon from '@material-ui/icons/Close'; -import Button from '@material-ui/core/Button'; -import Modal from '@material-ui/core/Modal'; -import Typography from '@material-ui/core/Typography'; +import AddIcon from '@mui/icons-material/Add'; +import PlayArrowIcon from '@mui/icons-material/PlayArrow'; +import CloseIcon from '@mui/icons-material/Close'; +import Button from '@mui/material/Button'; +import Modal from '@mui/material/Modal'; +import Typography from '@mui/material/Typography'; import React from 'react'; import './AudioRecorder.scss'; import { downloadBlobWithoutSaving } from '../../api/api'; diff --git a/apps/frontend/src/components/BottomBar/BottomBar.tsx b/apps/frontend/src/components/BottomBar/BottomBar.tsx index 1617ccd5..3b4cf8e1 100644 --- a/apps/frontend/src/components/BottomBar/BottomBar.tsx +++ b/apps/frontend/src/components/BottomBar/BottomBar.tsx @@ -1,11 +1,11 @@ import './BottomBar.scss' import { StepPathToField, StepStatus } from '@3dp4me/types' -import AppBar from '@material-ui/core/AppBar' -import Button from '@material-ui/core/Button' -import MenuItem from '@material-ui/core/MenuItem' -import Select from '@material-ui/core/Select' -import Toolbar from '@material-ui/core/Toolbar' +import AppBar from '@mui/material/AppBar' +import Button from '@mui/material/Button' +import MenuItem from '@mui/material/MenuItem' +import Select from '@mui/material/Select' +import Toolbar from '@mui/material/Toolbar' import React, { MouseEventHandler } from 'react' import check from '../../assets/check.svg' diff --git a/apps/frontend/src/components/CreateFieldModal/CreateFieldModal.tsx b/apps/frontend/src/components/CreateFieldModal/CreateFieldModal.tsx index 99fb7919..47210b94 100644 --- a/apps/frontend/src/components/CreateFieldModal/CreateFieldModal.tsx +++ b/apps/frontend/src/components/CreateFieldModal/CreateFieldModal.tsx @@ -8,13 +8,13 @@ import { TranslatedString, Unsaved, } from '@3dp4me/types' -import Button from '@material-ui/core/Button' -import Checkbox from '@material-ui/core/Checkbox' -import FormControl from '@material-ui/core/FormControl' -import InputBase from '@material-ui/core/InputBase' -import Modal from '@material-ui/core/Modal' -import NativeSelect from '@material-ui/core/NativeSelect' -import withStyles from '@material-ui/core/styles/withStyles' +import Button from '@mui/material/Button' +import Checkbox from '@mui/material/Checkbox' +import FormControl from '@mui/material/FormControl' +import InputBase from '@mui/material/InputBase' +import Modal from '@mui/material/Modal' +import NativeSelect from '@mui/material/NativeSelect' +import withStyles from '@mui/styles/withStyles'; import _ from 'lodash' import React, { ChangeEventHandler, ReactNode, useState } from 'react' import { trackPromise } from 'react-promise-tracker' diff --git a/apps/frontend/src/components/CreatePatientModal/CreatePatientModal.tsx b/apps/frontend/src/components/CreatePatientModal/CreatePatientModal.tsx index 5f6f5497..87bb1006 100644 --- a/apps/frontend/src/components/CreatePatientModal/CreatePatientModal.tsx +++ b/apps/frontend/src/components/CreatePatientModal/CreatePatientModal.tsx @@ -2,9 +2,9 @@ import './CreatePatientModal.scss' import { BasePatient } from '@3dp4me/types' import { Unsaved } from '@3dp4me/types/dist/src/utils/unsaved' -import Button from '@material-ui/core/Button' -import Modal from '@material-ui/core/Modal' -import TextField from '@material-ui/core/TextField' +import Button from '@mui/material/Button' +import Modal from '@mui/material/Modal' +import TextField from '@mui/material/TextField' import React, { useState } from 'react' import { useTranslations } from '../../hooks/useTranslations' diff --git a/apps/frontend/src/components/CreateStepModal/CreateStepModal.tsx b/apps/frontend/src/components/CreateStepModal/CreateStepModal.tsx index 428a34e7..8d2cb84e 100644 --- a/apps/frontend/src/components/CreateStepModal/CreateStepModal.tsx +++ b/apps/frontend/src/components/CreateStepModal/CreateStepModal.tsx @@ -1,8 +1,8 @@ import './CreateStepModal.scss' import { BaseStep, Field, Language } from '@3dp4me/types' -import Button from '@material-ui/core/Button' -import Modal from '@material-ui/core/Modal' +import Button from '@mui/material/Button' +import Modal from '@mui/material/Modal' import _ from 'lodash' import { useState } from 'react' diff --git a/apps/frontend/src/components/CustomSwitch/CustomSwitch.tsx b/apps/frontend/src/components/CustomSwitch/CustomSwitch.tsx index f1e4b638..3f15e1be 100644 --- a/apps/frontend/src/components/CustomSwitch/CustomSwitch.tsx +++ b/apps/frontend/src/components/CustomSwitch/CustomSwitch.tsx @@ -1,7 +1,7 @@ import './CustomSwitch.scss' -import Visibility from '@material-ui/icons/Visibility' -import VisibilityOff from '@material-ui/icons/VisibilityOff' +import Visibility from '@mui/icons-material/Visibility' +import VisibilityOff from '@mui/icons-material/VisibilityOff' import Switch from 'react-switch' export interface CustomSwitchProps { diff --git a/apps/frontend/src/components/EditFieldModal/EditFieldModal.tsx b/apps/frontend/src/components/EditFieldModal/EditFieldModal.tsx index f929663f..28188c30 100644 --- a/apps/frontend/src/components/EditFieldModal/EditFieldModal.tsx +++ b/apps/frontend/src/components/EditFieldModal/EditFieldModal.tsx @@ -1,14 +1,14 @@ import './EditFieldModal.scss' import { Field, FieldType, Language, TranslatedString, Unsaved } from '@3dp4me/types' -import Button from '@material-ui/core/Button' -import Checkbox from '@material-ui/core/Checkbox' -import FormControl from '@material-ui/core/FormControl' -import FormControlLabel from '@material-ui/core/FormControlLabel' -import InputBase from '@material-ui/core/InputBase' -import Modal from '@material-ui/core/Modal' -import NativeSelect from '@material-ui/core/NativeSelect' -import withStyles from '@material-ui/core/styles/withStyles' +import Button from '@mui/material/Button' +import Checkbox from '@mui/material/Checkbox' +import FormControl from '@mui/material/FormControl' +import FormControlLabel from '@mui/material/FormControlLabel' +import InputBase from '@mui/material/InputBase' +import Modal from '@mui/material/Modal' +import NativeSelect from '@mui/material/NativeSelect' +import withStyles from '@mui/styles/withStyles'; import _ from 'lodash' import React, { ChangeEvent, ReactNode, useEffect, useState } from 'react' import swal from 'sweetalert' diff --git a/apps/frontend/src/components/EditRoleModal/EditRoleModal.tsx b/apps/frontend/src/components/EditRoleModal/EditRoleModal.tsx index 8900d064..0fc06cb4 100644 --- a/apps/frontend/src/components/EditRoleModal/EditRoleModal.tsx +++ b/apps/frontend/src/components/EditRoleModal/EditRoleModal.tsx @@ -5,11 +5,11 @@ import './EditRoleModal.scss' import { AccessLevel, Nullish } from '@3dp4me/types' -import Button from '@material-ui/core/Button' -import FormControl from '@material-ui/core/FormControl' -import InputLabel from '@material-ui/core/InputLabel' -import Modal from '@material-ui/core/Modal' -import Select from '@material-ui/core/Select' +import Button from '@mui/material/Button' +import FormControl from '@mui/material/FormControl' +import InputLabel from '@mui/material/InputLabel' +import Modal from '@mui/material/Modal' +import Select from '@mui/material/Select' import _ from 'lodash' import React, { useEffect, useState } from 'react' import { trackPromise } from 'react-promise-tracker' diff --git a/apps/frontend/src/components/EditStepModal/EditStepModal.tsx b/apps/frontend/src/components/EditStepModal/EditStepModal.tsx index aecaee63..292bb664 100644 --- a/apps/frontend/src/components/EditStepModal/EditStepModal.tsx +++ b/apps/frontend/src/components/EditStepModal/EditStepModal.tsx @@ -1,9 +1,9 @@ import './EditStepModal.scss' import { Language, Step, TranslatedString } from '@3dp4me/types' -import Button from '@material-ui/core/Button' -import FormControlLabel from '@material-ui/core/FormControlLabel' -import Modal from '@material-ui/core/Modal' +import Button from '@mui/material/Button' +import FormControlLabel from '@mui/material/FormControlLabel' +import Modal from '@mui/material/Modal' import _ from 'lodash' import React, { useEffect, useState } from 'react' import swal from 'sweetalert' diff --git a/apps/frontend/src/components/ErrorModal/ErrorModal.tsx b/apps/frontend/src/components/ErrorModal/ErrorModal.tsx index 309857d1..31cf0cb7 100644 --- a/apps/frontend/src/components/ErrorModal/ErrorModal.tsx +++ b/apps/frontend/src/components/ErrorModal/ErrorModal.tsx @@ -1,8 +1,8 @@ import './ErrorModal.scss' import { Nullish } from '@3dp4me/types' -import Modal from '@material-ui/core/Modal' -import RootRef from '@material-ui/core/RootRef' +import Modal from '@mui/material/Modal' +// import RootRef from '@mate-ui/core/RootRef' import React, { KeyboardEventHandler } from 'react' import WarningIcon from '../../assets/warning.svg' @@ -28,8 +28,7 @@ const ErrorModal = ({ message = DEFAULT_ERROR_MSG, isOpen, onClose }: ErrorModal open={isOpen} onClose={onClose} // TODO: Is this an issue - // @ts-expect-error we need to update this logic - container={() => RootRef.current} + // container={() => RootRef.current} >
{ diff --git a/apps/frontend/src/components/Files/Files.tsx b/apps/frontend/src/components/Files/Files.tsx index 8ddd1519..8538c193 100644 --- a/apps/frontend/src/components/Files/Files.tsx +++ b/apps/frontend/src/components/Files/Files.tsx @@ -1,11 +1,11 @@ import './Files.scss' import { File as FileModel } from '@3dp4me/types' -import Button from '@material-ui/core/Button' -import Typography from '@material-ui/core/Typography' -import AddIcon from '@material-ui/icons/Add' -import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward' -import CloseIcon from '@material-ui/icons/Close' +import Button from '@mui/material/Button' +import Typography from '@mui/material/Typography' +import AddIcon from '@mui/icons-material/Add' +import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward' +import CloseIcon from '@mui/icons-material/Close' import swal from 'sweetalert' import { useTranslations } from '../../hooks/useTranslations' diff --git a/apps/frontend/src/components/LanguageInput/LanguageInput.tsx b/apps/frontend/src/components/LanguageInput/LanguageInput.tsx index 0e878c3d..65822622 100644 --- a/apps/frontend/src/components/LanguageInput/LanguageInput.tsx +++ b/apps/frontend/src/components/LanguageInput/LanguageInput.tsx @@ -1,7 +1,7 @@ import './LanguageInput.scss' import { Language, TranslatedString } from '@3dp4me/types' -import TextField from '@material-ui/core/TextField' +import TextField from '@mui/material/TextField' import React from 'react' export interface LanguageInputProps { diff --git a/apps/frontend/src/components/ManagePatientModal/ManagePatientModal.tsx b/apps/frontend/src/components/ManagePatientModal/ManagePatientModal.tsx index 6817c187..9660f057 100644 --- a/apps/frontend/src/components/ManagePatientModal/ManagePatientModal.tsx +++ b/apps/frontend/src/components/ManagePatientModal/ManagePatientModal.tsx @@ -1,9 +1,9 @@ import './ManagePatientModal.scss' import { Language, Patient, ReservedStep } from '@3dp4me/types' -import Button from '@material-ui/core/Button' -import Modal from '@material-ui/core/Modal' -import CloseIcon from '@material-ui/icons/Close' +import Button from '@mui/material/Button' +import Modal from '@mui/material/Modal' +import CloseIcon from '@mui/icons-material/Close' import _ from 'lodash' import React, { useState } from 'react' import swal from 'sweetalert' diff --git a/apps/frontend/src/components/ManageRoleModal/ManageRoleModal.tsx b/apps/frontend/src/components/ManageRoleModal/ManageRoleModal.tsx index 931a8c6a..45bcf4b2 100644 --- a/apps/frontend/src/components/ManageRoleModal/ManageRoleModal.tsx +++ b/apps/frontend/src/components/ManageRoleModal/ManageRoleModal.tsx @@ -1,8 +1,8 @@ import './ManageRoleModal.scss' import { Nullish, Role } from '@3dp4me/types' -import Button from '@material-ui/core/Button' -import Modal from '@material-ui/core/Modal' +import Button from '@mui/material/Button' +import Modal from '@mui/material/Modal' import _ from 'lodash' import { useEffect, useState } from 'react' import { trackPromise } from 'react-promise-tracker' diff --git a/apps/frontend/src/components/NavTabs/NavTabs.tsx b/apps/frontend/src/components/NavTabs/NavTabs.tsx index 84d8a405..019a0cea 100644 --- a/apps/frontend/src/components/NavTabs/NavTabs.tsx +++ b/apps/frontend/src/components/NavTabs/NavTabs.tsx @@ -1,8 +1,8 @@ import './NavTabs.scss' -import Box from '@material-ui/core/Box' -import Tab from '@material-ui/core/Tab' -import Tabs from '@material-ui/core/Tabs' +import Box from '@mui/material/Box' +import Tab from '@mui/material/Tab' +import Tabs from '@mui/material/Tabs' export interface NavTabsProps { value: string diff --git a/apps/frontend/src/components/Navbar/Navbar.style.ts b/apps/frontend/src/components/Navbar/Navbar.style.ts index c947088c..eb607ec0 100644 --- a/apps/frontend/src/components/Navbar/Navbar.style.ts +++ b/apps/frontend/src/components/Navbar/Navbar.style.ts @@ -1,4 +1,4 @@ -import makeStyles from '@material-ui/core/styles/makeStyles' +import makeStyles from '@mui/styles/makeStyles'; export const useStyles = makeStyles((theme: any) => ({ appBar: { diff --git a/apps/frontend/src/components/Navbar/Navbar.tsx b/apps/frontend/src/components/Navbar/Navbar.tsx index 70595846..549051fd 100644 --- a/apps/frontend/src/components/Navbar/Navbar.tsx +++ b/apps/frontend/src/components/Navbar/Navbar.tsx @@ -1,9 +1,9 @@ import './Navbar.scss' import { Language, Nullish } from '@3dp4me/types' -import AppBar from '@material-ui/core/AppBar' -import Toolbar from '@material-ui/core/Toolbar' -import AccountCircleIcon from '@material-ui/icons/AccountCircle' +import AppBar from '@mui/material/AppBar' +import Toolbar from '@mui/material/Toolbar' +import AccountCircleIcon from '@mui/icons-material/AccountCircle' import React, { MouseEventHandler, useContext, useState } from 'react' import { Link } from 'react-router-dom' diff --git a/apps/frontend/src/components/NewSignatureModal/NewSignatureModal.tsx b/apps/frontend/src/components/NewSignatureModal/NewSignatureModal.tsx index 846cca9c..b68b2c90 100644 --- a/apps/frontend/src/components/NewSignatureModal/NewSignatureModal.tsx +++ b/apps/frontend/src/components/NewSignatureModal/NewSignatureModal.tsx @@ -1,5 +1,5 @@ -import Button from '@material-ui/core/Button' -import Modal from '@material-ui/core/Modal' +import Button from '@mui/material/Button' +import Modal from '@mui/material/Modal' import { FC, useRef } from 'react' import ReactSignatureCanvas from 'react-signature-canvas' import SignaturePad from 'signature_pad' diff --git a/apps/frontend/src/components/PatientDetailSidebar/PatientDetailSidebar.tsx b/apps/frontend/src/components/PatientDetailSidebar/PatientDetailSidebar.tsx index 66e78de4..aa661d27 100644 --- a/apps/frontend/src/components/PatientDetailSidebar/PatientDetailSidebar.tsx +++ b/apps/frontend/src/components/PatientDetailSidebar/PatientDetailSidebar.tsx @@ -1,15 +1,15 @@ import './PatientDetailSidebar.scss' import { Nullish, Patient } from '@3dp4me/types' -import Accordion from '@material-ui/core/Accordion' -import AccordionDetails from '@material-ui/core/AccordionDetails' -import AccordionSummary from '@material-ui/core/AccordionSummary' -import Button from '@material-ui/core/Button' -import Drawer from '@material-ui/core/Drawer' -import createTheme from '@material-ui/core/styles/createTheme' -import Toolbar from '@material-ui/core/Toolbar' -import ExpandMoreIcon from '@material-ui/icons/ExpandMore' -import ThemeProvider from '@material-ui/styles/ThemeProvider' +import Accordion from '@mui/material/Accordion' +import AccordionDetails from '@mui/material/AccordionDetails' +import AccordionSummary from '@mui/material/AccordionSummary' +import Button from '@mui/material/Button' +import Drawer from '@mui/material/Drawer' +import { createTheme } from '@mui/material/styles'; +import Toolbar from '@mui/material/Toolbar' +import ExpandMoreIcon from '@mui/icons-material/ExpandMore' +import ThemeProvider from '@mui/styles/ThemeProvider' import { useState } from 'react' import { useTranslations } from '../../hooks/useTranslations' diff --git a/apps/frontend/src/components/Sidebar/Sidebar.tsx b/apps/frontend/src/components/Sidebar/Sidebar.tsx index 4e35cb98..ba5e18ac 100644 --- a/apps/frontend/src/components/Sidebar/Sidebar.tsx +++ b/apps/frontend/src/components/Sidebar/Sidebar.tsx @@ -1,11 +1,11 @@ import './Sidebar.scss' import { Step } from '@3dp4me/types' -import AppBar from '@material-ui/core/AppBar' -import Button from '@material-ui/core/Button' -import Drawer from '@material-ui/core/Drawer' -import makeStyles from '@material-ui/core/styles/makeStyles' -import Toolbar from '@material-ui/core/Toolbar' +import AppBar from '@mui/material/AppBar' +import Button from '@mui/material/Button' +import Drawer from '@mui/material/Drawer' +import makeStyles from '@mui/styles/makeStyles'; +import Toolbar from '@mui/material/Toolbar' import { useTranslations } from '../../hooks/useTranslations' import { LANGUAGES } from '../../utils/constants' diff --git a/apps/frontend/src/components/SimpleTable/SimpleTable.style.ts b/apps/frontend/src/components/SimpleTable/SimpleTable.style.ts index e44ebd40..0e6616a8 100644 --- a/apps/frontend/src/components/SimpleTable/SimpleTable.style.ts +++ b/apps/frontend/src/components/SimpleTable/SimpleTable.style.ts @@ -1,6 +1,6 @@ -import withStyles from '@material-ui/core/styles/withStyles' -import TableCell from '@material-ui/core/TableCell' -import TableRow from '@material-ui/core/TableRow' +import withStyles from '@mui/styles/withStyles'; +import TableCell from '@mui/material/TableCell' +import TableRow from '@mui/material/TableRow' export const StyledTableCell = withStyles((theme) => ({ head: { diff --git a/apps/frontend/src/components/SimpleTable/SimpleTable.tsx b/apps/frontend/src/components/SimpleTable/SimpleTable.tsx index 94177dda..6a2b4e5c 100644 --- a/apps/frontend/src/components/SimpleTable/SimpleTable.tsx +++ b/apps/frontend/src/components/SimpleTable/SimpleTable.tsx @@ -1,12 +1,12 @@ import './SimpleTable.scss' import { Nullish } from '@3dp4me/types' -import Paper from '@material-ui/core/Paper' -import MaterialUITable from '@material-ui/core/Table' -import TableBody from '@material-ui/core/TableBody' -import TableContainer from '@material-ui/core/TableContainer' -import TableHead from '@material-ui/core/TableHead' -import TableRow from '@material-ui/core/TableRow' +import Paper from '@mui/material/Paper' +import MaterialUITable from '@mui/material/Table' +import TableBody from '@mui/material/TableBody' +import TableContainer from '@mui/material/TableContainer' +import TableHead from '@mui/material/TableHead' +import TableRow from '@mui/material/TableRow' import React, { CSSProperties, useMemo } from 'react' import useSortableData from '../../hooks/useSortableData' diff --git a/apps/frontend/src/components/StepContent/StepContent.tsx b/apps/frontend/src/components/StepContent/StepContent.tsx index 9aeb4866..821e5eac 100644 --- a/apps/frontend/src/components/StepContent/StepContent.tsx +++ b/apps/frontend/src/components/StepContent/StepContent.tsx @@ -1,11 +1,11 @@ import './StepContent.scss' import { FieldType, File as FileModel, Step, StepStatus } from '@3dp4me/types' -import Backdrop from '@material-ui/core/Backdrop' -import Button from '@material-ui/core/Button' -import CircularProgress from '@material-ui/core/CircularProgress' -import MenuItem from '@material-ui/core/MenuItem' -import Select from '@material-ui/core/Select' +import Backdrop from '@mui/material/Backdrop' +import Button from '@mui/material/Button' +import CircularProgress from '@mui/material/CircularProgress' +import MenuItem from '@mui/material/MenuItem' +import Select from '@mui/material/Select' import _ from 'lodash' import React, { useEffect, useState } from 'react' import { trackPromise } from 'react-promise-tracker' diff --git a/apps/frontend/src/components/StepField/StepField.tsx b/apps/frontend/src/components/StepField/StepField.tsx index 1dafff78..6d805eaa 100644 --- a/apps/frontend/src/components/StepField/StepField.tsx +++ b/apps/frontend/src/components/StepField/StepField.tsx @@ -1,7 +1,7 @@ /* eslint import/no-cycle: "off" */ import { Field, FieldType, File as FileModel } from '@3dp4me/types' -import Divider from '@material-ui/core/Divider' +import Divider from '@mui/material/Divider' import { useTranslations } from '../../hooks/useTranslations' import AudioRecorder from '../AudioRecorder/AudioRecorder' diff --git a/apps/frontend/src/components/StyledButton/StyledButton.tsx b/apps/frontend/src/components/StyledButton/StyledButton.tsx index 9b188ee5..fb2e4ff4 100644 --- a/apps/frontend/src/components/StyledButton/StyledButton.tsx +++ b/apps/frontend/src/components/StyledButton/StyledButton.tsx @@ -1,7 +1,7 @@ import './StyledButton.scss' -import { CircularProgress } from '@material-ui/core' -import Button from '@material-ui/core/Button' +import { CircularProgress } from '@mui/material' +import Button from '@mui/material/Button' import React, { ReactNode } from 'react' import { useTranslations } from '../../hooks/useTranslations' diff --git a/apps/frontend/src/components/Table/Table.tsx b/apps/frontend/src/components/Table/Table.tsx index 20ae2d66..93189cd9 100644 --- a/apps/frontend/src/components/Table/Table.tsx +++ b/apps/frontend/src/components/Table/Table.tsx @@ -1,5 +1,5 @@ -import Button from '@material-ui/core/Button' -import TextField from '@material-ui/core/TextField' +import Button from '@mui/material/Button' +import TextField from '@mui/material/TextField' import React, { ChangeEvent, useEffect, useState } from 'react' import search from '../../assets/search.svg' diff --git a/apps/frontend/src/components/ToggleButtons/ToggleButtons.tsx b/apps/frontend/src/components/ToggleButtons/ToggleButtons.tsx index fd663aee..8b384bbf 100644 --- a/apps/frontend/src/components/ToggleButtons/ToggleButtons.tsx +++ b/apps/frontend/src/components/ToggleButtons/ToggleButtons.tsx @@ -1,12 +1,12 @@ import './ToggleButtons.scss' import { Nullish, Patient } from '@3dp4me/types' -import IconButton from '@material-ui/core/IconButton' -import Menu from '@material-ui/core/Menu' -import MenuItem from '@material-ui/core/MenuItem' -import ExpandMoreIcon from '@material-ui/icons/ExpandMore' -import ToggleButton from '@material-ui/lab/ToggleButton' -import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup' +import IconButton from '@mui/material/IconButton' +import Menu from '@mui/material/Menu' +import MenuItem from '@mui/material/MenuItem' +import ExpandMoreIcon from '@mui/icons-material/ExpandMore' +import ToggleButton from '@mui/material/ToggleButton' +import ToggleButtonGroup from '@mui/material/ToggleButtonGroup' import React, { MouseEventHandler, useState } from 'react' import CheckIcon from '../../assets/check.svg' @@ -137,7 +137,7 @@ const ToggleButtons = ({ */ if (metaData && width < RESIZE_TOGGLE_BUTTON_ESTIMATED_WIDTH * metaData.length) { return ( -
+ (
{generateSelectedStepLabel()} + size="large">
-
- ) +
) + ); } return ( diff --git a/apps/frontend/src/pages/Dashboard/Dashboard.tsx b/apps/frontend/src/pages/Dashboard/Dashboard.tsx index 1b432831..f4d5aa0f 100644 --- a/apps/frontend/src/pages/Dashboard/Dashboard.tsx +++ b/apps/frontend/src/pages/Dashboard/Dashboard.tsx @@ -1,9 +1,9 @@ import './Dashboard.scss' import { Field, Patient } from '@3dp4me/types' -import type { SnackbarCloseReason } from '@material-ui/core/Snackbar' -import Snackbar from '@material-ui/core/Snackbar' -import MuiAlert from '@material-ui/lab/Alert' +import type { SnackbarCloseReason } from '@mui/material/Snackbar' +import Snackbar from '@mui/material/Snackbar' +import MuiAlert from '@mui/material/Alert' import _ from 'lodash' import { useEffect, useState } from 'react' diff --git a/apps/frontend/src/pages/DashboardManagement/DashboardManagement.tsx b/apps/frontend/src/pages/DashboardManagement/DashboardManagement.tsx index cb57cbd3..00c776ed 100644 --- a/apps/frontend/src/pages/DashboardManagement/DashboardManagement.tsx +++ b/apps/frontend/src/pages/DashboardManagement/DashboardManagement.tsx @@ -1,7 +1,7 @@ import './DashboardManagement.scss' import { BaseStep, Field, Nullish, Step, StepPathToField, Unsaved } from '@3dp4me/types' -import ListItem from '@material-ui/core/ListItem' +import ListItem from '@mui/material/ListItem' import _ from 'lodash' import { useEffect, useState } from 'react' import { trackPromise } from 'react-promise-tracker' diff --git a/apps/frontend/src/utils/fields.tsx b/apps/frontend/src/utils/fields.tsx index 5943bfc1..2f60873a 100644 --- a/apps/frontend/src/utils/fields.tsx +++ b/apps/frontend/src/utils/fields.tsx @@ -7,8 +7,8 @@ import { Signature, StepStatus, } from '@3dp4me/types' -import CheckIcon from '@material-ui/icons/Check' -import CloseIcon from '@material-ui/icons/Close' +import CheckIcon from '@mui/icons-material/Check' +import CloseIcon from '@mui/icons-material/Close' import React from 'react' import finishedIcon from '../assets/check.svg' diff --git a/apps/frontend/src/utils/table-renderers.tsx b/apps/frontend/src/utils/table-renderers.tsx index 31deb1c6..0c3c9884 100644 --- a/apps/frontend/src/utils/table-renderers.tsx +++ b/apps/frontend/src/utils/table-renderers.tsx @@ -1,7 +1,7 @@ import { AccessLevel, FieldType, Language, Nullish, Path, Patient } from '@3dp4me/types' -import IconButton from '@material-ui/core/IconButton' -import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown' -import ArrowDropUpIcon from '@material-ui/icons/ArrowDropUp' +import IconButton from '@mui/material/IconButton' +import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown' +import ArrowDropUpIcon from '@mui/icons-material/ArrowDropUp' import React, { ReactNode } from 'react' import Skeleton from 'react-loading-skeleton' import { Link } from 'react-router-dom' @@ -178,7 +178,7 @@ export const patientTableRowRenderer = ( row.push( - + status icon {' '} {translations[selectedLang].components.table.view} @@ -226,7 +226,7 @@ export const generateSelectableRenderer = // Add the edit button row.push( - onSelected(user)}> + onSelected(user)} size="large"> status icon view-icon {' '} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7a7c4831..cae6d4dc 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -165,6 +165,18 @@ importers: '@material/tabs': specifier: ^2.3.0 version: 2.3.0 + '@mui/icons-material': + specifier: ^6.4.5 + version: 6.4.5(@mui/material@6.4.5(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.18)(react@18.3.1) + '@mui/lab': + specifier: 6.0.0-beta.28 + version: 6.0.0-beta.28(@mui/material@6.4.5(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@mui/material': + specifier: ^6.4.5 + version: 6.4.5(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@mui/styles': + specifier: ^6.4.5 + version: 6.4.5(@types/react@18.3.18)(react@18.3.1) '@sweetalert/with-react': specifier: ^0.1.1 version: 0.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sweetalert@2.1.2) @@ -1951,18 +1963,42 @@ packages: peerDependencies: effect: ^3.5.7 + '@emotion/cache@11.14.0': + resolution: {integrity: sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==} + '@emotion/hash@0.8.0': resolution: {integrity: sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==} + '@emotion/hash@0.9.2': + resolution: {integrity: sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==} + '@emotion/is-prop-valid@1.2.2': resolution: {integrity: sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==} '@emotion/memoize@0.8.1': resolution: {integrity: sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==} + '@emotion/memoize@0.9.0': + resolution: {integrity: sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==} + + '@emotion/serialize@1.3.3': + resolution: {integrity: sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==} + + '@emotion/sheet@1.4.0': + resolution: {integrity: sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==} + + '@emotion/unitless@0.10.0': + resolution: {integrity: sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==} + '@emotion/unitless@0.8.1': resolution: {integrity: sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==} + '@emotion/utils@1.4.2': + resolution: {integrity: sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==} + + '@emotion/weak-memoize@0.4.0': + resolution: {integrity: sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==} + '@eslint-community/eslint-utils@4.4.1': resolution: {integrity: sha512-s3O3waFUrMV8P/XaF/+ZTp1X9XBZW1a4B97ZnjQF2KYWaFD2A8KyFBsrsfSjEmjn3RGWAIuvlneuZm3CUK3jbA==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} @@ -1987,6 +2023,21 @@ packages: '@fast-csv/parse@4.3.6': resolution: {integrity: sha512-uRsLYksqpbDmWaSmzvJcuApSEe38+6NQZBUsuAyMZKqHxH0g1wcJgsKUvN3WC8tewaqFjBMMGrkHmC+T7k8LvA==} + '@floating-ui/core@1.6.9': + resolution: {integrity: sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==} + + '@floating-ui/dom@1.6.13': + resolution: {integrity: sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==} + + '@floating-ui/react-dom@2.1.2': + resolution: {integrity: sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==} + peerDependencies: + react: '>=16.8.0' + react-dom: '>=16.8.0' + + '@floating-ui/utils@0.2.9': + resolution: {integrity: sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==} + '@humanwhocodes/config-array@0.13.0': resolution: {integrity: sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==} engines: {node: '>=10.10.0'} @@ -2252,6 +2303,140 @@ packages: '@mongodb-js/saslprep@1.1.9': resolution: {integrity: sha512-tVkljjeEaAhCqTzajSdgbQ6gE6f3oneVwa3iXR6csiEwXXOFsiC6Uh9iAjAhXPtqa/XMDHWjjeNH/77m/Yq2dw==} + '@mui/base@5.0.0-beta.69': + resolution: {integrity: sha512-r2YyGUXpZxj8rLAlbjp1x2BnMERTZ/dMqd9cClKj2OJ7ALAuiv/9X5E9eHfRc9o/dGRuLSMq/WTjREktJVjxVA==} + engines: {node: '>=14.0.0'} + deprecated: This package has been replaced by @base-ui-components/react + peerDependencies: + '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0 + react: ^17.0.0 || ^18.0.0 || ^19.0.0 + react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + + '@mui/core-downloads-tracker@6.4.5': + resolution: {integrity: sha512-zoXvHU1YuoodgMlPS+epP084Pqv9V+Vg+5IGv9n/7IIFVQ2nkTngYHYxElCq8pdTTbDcgji+nNh0lxri2abWgA==} + + '@mui/icons-material@6.4.5': + resolution: {integrity: sha512-4A//t8Nrc+4u4pbVhGarIFU98zpuB5AV9hTNzgXx1ySZJ1tWtx+i/1SbQ8PtGJxWeXlljhwimZJNPQ3x0CiIFw==} + engines: {node: '>=14.0.0'} + peerDependencies: + '@mui/material': ^6.4.5 + '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0 + react: ^17.0.0 || ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + + '@mui/lab@6.0.0-beta.28': + resolution: {integrity: sha512-7d/nG5L3IXcdlgGvOcVwOZIQCHxjQOVVEGOtk0t0XSCQnS5zgQ5/KeKE/brWYdxA6ybSm3vp1sfBGq4AeqMCKA==} + engines: {node: '>=14.0.0'} + peerDependencies: + '@emotion/react': ^11.5.0 + '@emotion/styled': ^11.3.0 + '@mui/material': ^6.4.5 + '@mui/material-pigment-css': ^6.4.3 + '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0 + react: ^17.0.0 || ^18.0.0 || ^19.0.0 + react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + '@emotion/react': + optional: true + '@emotion/styled': + optional: true + '@mui/material-pigment-css': + optional: true + '@types/react': + optional: true + + '@mui/material@6.4.5': + resolution: {integrity: sha512-5eyEgSXocIeV1JkXs8mYyJXU0aFyXZIWI5kq2g/mCnIgJe594lkOBNAKnCIaGVfQTu2T6TTEHF8/hHIqpiIRGA==} + engines: {node: '>=14.0.0'} + peerDependencies: + '@emotion/react': ^11.5.0 + '@emotion/styled': ^11.3.0 + '@mui/material-pigment-css': ^6.4.3 + '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0 + react: ^17.0.0 || ^18.0.0 || ^19.0.0 + react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + '@emotion/react': + optional: true + '@emotion/styled': + optional: true + '@mui/material-pigment-css': + optional: true + '@types/react': + optional: true + + '@mui/private-theming@6.4.3': + resolution: {integrity: sha512-7x9HaNwDCeoERc4BoEWLieuzKzXu5ZrhRnEM6AUcRXUScQLvF1NFkTlP59+IJfTbEMgcGg1wWHApyoqcksrBpQ==} + engines: {node: '>=14.0.0'} + peerDependencies: + '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0 + react: ^17.0.0 || ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + + '@mui/styled-engine@6.4.3': + resolution: {integrity: sha512-OC402VfK+ra2+f12Gef8maY7Y9n7B6CZcoQ9u7mIkh/7PKwW/xH81xwX+yW+Ak1zBT3HYcVjh2X82k5cKMFGoQ==} + engines: {node: '>=14.0.0'} + peerDependencies: + '@emotion/react': ^11.4.1 + '@emotion/styled': ^11.3.0 + react: ^17.0.0 || ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + '@emotion/react': + optional: true + '@emotion/styled': + optional: true + + '@mui/styles@6.4.5': + resolution: {integrity: sha512-F3cztqs/oeFC4FcdbIccBBeABLfcqD7ejQLf2Lh3YkJJ6dMKbyw8LUcV6p+D6ggQuOqKXnJbfg0F4BaEPMe1xw==} + engines: {node: '>=14.0.0'} + peerDependencies: + '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0 + react: ^17.0.0 || ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + + '@mui/system@6.4.3': + resolution: {integrity: sha512-Q0iDwnH3+xoxQ0pqVbt8hFdzhq1g2XzzR4Y5pVcICTNtoCLJmpJS3vI4y/OIM1FHFmpfmiEC2IRIq7YcZ8nsmg==} + engines: {node: '>=14.0.0'} + peerDependencies: + '@emotion/react': ^11.5.0 + '@emotion/styled': ^11.3.0 + '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0 + react: ^17.0.0 || ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + '@emotion/react': + optional: true + '@emotion/styled': + optional: true + '@types/react': + optional: true + + '@mui/types@7.2.21': + resolution: {integrity: sha512-6HstngiUxNqLU+/DPqlUJDIPbzUBxIVHb1MmXP0eTWDIROiCR2viugXpEif0PPe2mLqqakPzzRClWAnK+8UJww==} + peerDependencies: + '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + + '@mui/utils@6.4.3': + resolution: {integrity: sha512-jxHRHh3BqVXE9ABxDm+Tc3wlBooYz/4XPa0+4AI+iF38rV1/+btJmSUgG4shDtSWVs/I97aDn5jBCt6SF2Uq2A==} + engines: {node: '>=14.0.0'} + peerDependencies: + '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0 + react: ^17.0.0 || ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1': resolution: {integrity: sha512-54/JRvkLIzzDWshCWfuhadfrfZVPiElY8Fcgmg1HroEly/EDSszzhBAsarCux+D/kOslTRquNzuyGSmUSTTHGg==} @@ -4191,6 +4376,10 @@ packages: resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==} engines: {node: '>=6'} + clsx@2.1.1: + resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==} + engines: {node: '>=6'} + co@4.6.0: resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==} engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'} @@ -8626,6 +8815,9 @@ packages: react-is@18.3.1: resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==} + react-is@19.0.0: + resolution: {integrity: sha512-H91OHcwjZsbq3ClIDHMzBShc1rotbfACdWENsmEf0IFvZ3FgGPtdHMcsv45bQ1hAbgdfiA8SnxTKfDS+x/8m2g==} + react-loader-spinner@6.1.6: resolution: {integrity: sha512-x5h1Jcit7Qn03MuKlrWcMG9o12cp9SNDVHVJTNRi9TgtGPKcjKiXkou4NRfLAtXaFB3+Z8yZsVzONmPzhv2ErA==} engines: {node: '>= 12'} @@ -9545,6 +9737,9 @@ packages: peerDependencies: postcss: ^8.2.15 + stylis@4.2.0: + resolution: {integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==} + stylis@4.3.2: resolution: {integrity: sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==} @@ -13367,16 +13562,44 @@ snapshots: effect: 3.5.7 fast-check: 3.20.0 + '@emotion/cache@11.14.0': + dependencies: + '@emotion/memoize': 0.9.0 + '@emotion/sheet': 1.4.0 + '@emotion/utils': 1.4.2 + '@emotion/weak-memoize': 0.4.0 + stylis: 4.2.0 + '@emotion/hash@0.8.0': {} + '@emotion/hash@0.9.2': {} + '@emotion/is-prop-valid@1.2.2': dependencies: '@emotion/memoize': 0.8.1 '@emotion/memoize@0.8.1': {} + '@emotion/memoize@0.9.0': {} + + '@emotion/serialize@1.3.3': + dependencies: + '@emotion/hash': 0.9.2 + '@emotion/memoize': 0.9.0 + '@emotion/unitless': 0.10.0 + '@emotion/utils': 1.4.2 + csstype: 3.1.3 + + '@emotion/sheet@1.4.0': {} + + '@emotion/unitless@0.10.0': {} + '@emotion/unitless@0.8.1': {} + '@emotion/utils@1.4.2': {} + + '@emotion/weak-memoize@0.4.0': {} + '@eslint-community/eslint-utils@4.4.1(eslint@8.57.1)': dependencies: eslint: 8.57.1 @@ -13419,6 +13642,23 @@ snapshots: lodash.isundefined: 3.0.1 lodash.uniq: 4.5.0 + '@floating-ui/core@1.6.9': + dependencies: + '@floating-ui/utils': 0.2.9 + + '@floating-ui/dom@1.6.13': + dependencies: + '@floating-ui/core': 1.6.9 + '@floating-ui/utils': 0.2.9 + + '@floating-ui/react-dom@2.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@floating-ui/dom': 1.6.13 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + + '@floating-ui/utils@0.2.9': {} + '@humanwhocodes/config-array@0.13.0': dependencies: '@humanwhocodes/object-schema': 2.0.3 @@ -13866,6 +14106,136 @@ snapshots: sparse-bitfield: 3.0.3 optional: true + '@mui/base@5.0.0-beta.69(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@babel/runtime': 7.26.7 + '@floating-ui/react-dom': 2.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@mui/types': 7.2.21(@types/react@18.3.18) + '@mui/utils': 6.4.3(@types/react@18.3.18)(react@18.3.1) + '@popperjs/core': 2.11.8 + clsx: 2.1.1 + prop-types: 15.8.1 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + optionalDependencies: + '@types/react': 18.3.18 + + '@mui/core-downloads-tracker@6.4.5': {} + + '@mui/icons-material@6.4.5(@mui/material@6.4.5(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)': + dependencies: + '@babel/runtime': 7.26.7 + '@mui/material': 6.4.5(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + react: 18.3.1 + optionalDependencies: + '@types/react': 18.3.18 + + '@mui/lab@6.0.0-beta.28(@mui/material@6.4.5(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@babel/runtime': 7.26.7 + '@mui/base': 5.0.0-beta.69(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@mui/material': 6.4.5(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@mui/system': 6.4.3(@types/react@18.3.18)(react@18.3.1) + '@mui/types': 7.2.21(@types/react@18.3.18) + '@mui/utils': 6.4.3(@types/react@18.3.18)(react@18.3.1) + clsx: 2.1.1 + prop-types: 15.8.1 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + optionalDependencies: + '@types/react': 18.3.18 + + '@mui/material@6.4.5(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@babel/runtime': 7.26.7 + '@mui/core-downloads-tracker': 6.4.5 + '@mui/system': 6.4.3(@types/react@18.3.18)(react@18.3.1) + '@mui/types': 7.2.21(@types/react@18.3.18) + '@mui/utils': 6.4.3(@types/react@18.3.18)(react@18.3.1) + '@popperjs/core': 2.11.8 + '@types/react-transition-group': 4.4.12(@types/react@18.3.18) + clsx: 2.1.1 + csstype: 3.1.3 + prop-types: 15.8.1 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + react-is: 19.0.0 + react-transition-group: 4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + optionalDependencies: + '@types/react': 18.3.18 + + '@mui/private-theming@6.4.3(@types/react@18.3.18)(react@18.3.1)': + dependencies: + '@babel/runtime': 7.26.7 + '@mui/utils': 6.4.3(@types/react@18.3.18)(react@18.3.1) + prop-types: 15.8.1 + react: 18.3.1 + optionalDependencies: + '@types/react': 18.3.18 + + '@mui/styled-engine@6.4.3(react@18.3.1)': + dependencies: + '@babel/runtime': 7.26.7 + '@emotion/cache': 11.14.0 + '@emotion/serialize': 1.3.3 + '@emotion/sheet': 1.4.0 + csstype: 3.1.3 + prop-types: 15.8.1 + react: 18.3.1 + + '@mui/styles@6.4.5(@types/react@18.3.18)(react@18.3.1)': + dependencies: + '@babel/runtime': 7.26.7 + '@emotion/hash': 0.9.2 + '@mui/private-theming': 6.4.3(@types/react@18.3.18)(react@18.3.1) + '@mui/types': 7.2.21(@types/react@18.3.18) + '@mui/utils': 6.4.3(@types/react@18.3.18)(react@18.3.1) + clsx: 2.1.1 + csstype: 3.1.3 + hoist-non-react-statics: 3.3.2 + jss: 10.10.0 + jss-plugin-camel-case: 10.10.0 + jss-plugin-default-unit: 10.10.0 + jss-plugin-global: 10.10.0 + jss-plugin-nested: 10.10.0 + jss-plugin-props-sort: 10.10.0 + jss-plugin-rule-value-function: 10.10.0 + jss-plugin-vendor-prefixer: 10.10.0 + prop-types: 15.8.1 + react: 18.3.1 + optionalDependencies: + '@types/react': 18.3.18 + + '@mui/system@6.4.3(@types/react@18.3.18)(react@18.3.1)': + dependencies: + '@babel/runtime': 7.26.7 + '@mui/private-theming': 6.4.3(@types/react@18.3.18)(react@18.3.1) + '@mui/styled-engine': 6.4.3(react@18.3.1) + '@mui/types': 7.2.21(@types/react@18.3.18) + '@mui/utils': 6.4.3(@types/react@18.3.18)(react@18.3.1) + clsx: 2.1.1 + csstype: 3.1.3 + prop-types: 15.8.1 + react: 18.3.1 + optionalDependencies: + '@types/react': 18.3.18 + + '@mui/types@7.2.21(@types/react@18.3.18)': + optionalDependencies: + '@types/react': 18.3.18 + + '@mui/utils@6.4.3(@types/react@18.3.18)(react@18.3.1)': + dependencies: + '@babel/runtime': 7.26.7 + '@mui/types': 7.2.21(@types/react@18.3.18) + '@types/prop-types': 15.7.14 + clsx: 2.1.1 + prop-types: 15.8.1 + react: 18.3.1 + react-is: 19.0.0 + optionalDependencies: + '@types/react': 18.3.18 + '@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1': dependencies: eslint-scope: 5.1.1 @@ -16266,6 +16636,8 @@ snapshots: clsx@1.2.1: {} + clsx@2.1.1: {} + co@4.6.0: {} coa@2.0.2: @@ -21572,6 +21944,8 @@ snapshots: react-is@18.3.1: {} + react-is@19.0.0: {} + react-loader-spinner@6.1.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: react: 18.3.1 @@ -22752,6 +23126,8 @@ snapshots: postcss: 8.5.1 postcss-selector-parser: 6.1.2 + stylis@4.2.0: {} + stylis@4.3.2: {} sucrase@3.35.0: From 7164def03d47d08e3c74b7334be883c2c6fccb3b Mon Sep 17 00:00:00 2001 From: Matthew Walowski Date: Sat, 22 Feb 2025 10:53:54 -0600 Subject: [PATCH 03/21] remove material-ui from deps --- apps/frontend/package.json | 4 - pnpm-lock.yaml | 195 ------------------------------------- 2 files changed, 199 deletions(-) diff --git a/apps/frontend/package.json b/apps/frontend/package.json index 665577c3..0c60496a 100644 --- a/apps/frontend/package.json +++ b/apps/frontend/package.json @@ -15,9 +15,6 @@ }, "dependencies": { "@3dp4me/types": "workspace:*", - "@material-ui/core": "^4.11.0", - "@material-ui/icons": "^4.9.1", - "@material-ui/lab": "^4.0.0-alpha.56", "@material/tabs": "^2.3.0", "@mui/icons-material": "^6.4.5", "@mui/lab": "6.0.0-beta.28", @@ -61,7 +58,6 @@ "@babel/core": "^7.23.3", "@babel/preset-env": "^7.23.3", "@babel/preset-react": "^7.23.3", - "@material-ui/styles": "^4.11.5", "@rollup/plugin-commonjs": "^25.0.7", "@rollup/plugin-image": "^3.0.3", "@rollup/plugin-json": "^6.0.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index cae6d4dc..5979d4d0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -153,15 +153,6 @@ importers: '@3dp4me/types': specifier: workspace:* version: link:../../packages/types - '@material-ui/core': - specifier: ^4.11.0 - version: 4.12.4(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@material-ui/icons': - specifier: ^4.9.1 - version: 4.11.3(@material-ui/core@4.12.4(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@material-ui/lab': - specifier: ^4.0.0-alpha.56 - version: 4.0.0-alpha.61(@material-ui/core@4.12.4(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@material/tabs': specifier: ^2.3.0 version: 2.3.0 @@ -286,9 +277,6 @@ importers: '@babel/preset-react': specifier: ^7.23.3 version: 7.26.3(@babel/core@7.26.7) - '@material-ui/styles': - specifier: ^4.11.5 - version: 4.11.5(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@rollup/plugin-commonjs': specifier: ^25.0.7 version: 25.0.8(rollup@4.32.0) @@ -1966,9 +1954,6 @@ packages: '@emotion/cache@11.14.0': resolution: {integrity: sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==} - '@emotion/hash@0.8.0': - resolution: {integrity: sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==} - '@emotion/hash@0.9.2': resolution: {integrity: sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==} @@ -2198,81 +2183,6 @@ packages: '@manypkg/get-packages@1.1.3': resolution: {integrity: sha512-fo+QhuU3qE/2TQMQmbVMqaQ6EWbMhi4ABWP+O4AM1NqPBuy0OrApV5LO6BrrgnhtAHS2NH6RrVk9OL181tTi8A==} - '@material-ui/core@4.12.4': - resolution: {integrity: sha512-tr7xekNlM9LjA6pagJmL8QCgZXaubWUwkJnoYcMKd4gw/t4XiyvnTkjdGrUVicyB2BsdaAv1tvow45bPM4sSwQ==} - engines: {node: '>=8.0.0'} - deprecated: Material UI v4 doesn't receive active development since September 2021. See the guide https://mui.com/material-ui/migration/migration-v4/ to upgrade to v5. - peerDependencies: - '@types/react': ^16.8.6 || ^17.0.0 - react: ^16.8.0 || ^17.0.0 - react-dom: ^16.8.0 || ^17.0.0 - peerDependenciesMeta: - '@types/react': - optional: true - - '@material-ui/icons@4.11.3': - resolution: {integrity: sha512-IKHlyx6LDh8n19vzwH5RtHIOHl9Tu90aAAxcbWME6kp4dmvODM3UvOHJeMIDzUbd4muuJKHmlNoBN+mDY4XkBA==} - engines: {node: '>=8.0.0'} - peerDependencies: - '@material-ui/core': ^4.0.0 - '@types/react': ^16.8.6 || ^17.0.0 - react: ^16.8.0 || ^17.0.0 - react-dom: ^16.8.0 || ^17.0.0 - peerDependenciesMeta: - '@types/react': - optional: true - - '@material-ui/lab@4.0.0-alpha.61': - resolution: {integrity: sha512-rSzm+XKiNUjKegj8bzt5+pygZeckNLOr+IjykH8sYdVk7dE9y2ZuUSofiMV2bJk3qU+JHwexmw+q0RyNZB9ugg==} - engines: {node: '>=8.0.0'} - deprecated: Material UI v4 doesn't receive active development since September 2021. See the guide https://mui.com/material-ui/migration/migration-v4/ to upgrade to v5. - peerDependencies: - '@material-ui/core': ^4.12.1 - '@types/react': ^16.8.6 || ^17.0.0 - react: ^16.8.0 || ^17.0.0 - react-dom: ^16.8.0 || ^17.0.0 - peerDependenciesMeta: - '@types/react': - optional: true - - '@material-ui/styles@4.11.5': - resolution: {integrity: sha512-o/41ot5JJiUsIETME9wVLAJrmIWL3j0R0Bj2kCOLbSfqEkKf0fmaPt+5vtblUh5eXr2S+J/8J3DaCb10+CzPGA==} - engines: {node: '>=8.0.0'} - deprecated: Material UI v4 doesn't receive active development since September 2021. See the guide https://mui.com/material-ui/migration/migration-v4/ to upgrade to v5. - peerDependencies: - '@types/react': ^16.8.6 || ^17.0.0 - react: ^16.8.0 || ^17.0.0 - react-dom: ^16.8.0 || ^17.0.0 - peerDependenciesMeta: - '@types/react': - optional: true - - '@material-ui/system@4.12.2': - resolution: {integrity: sha512-6CSKu2MtmiJgcCGf6nBQpM8fLkuB9F55EKfbdTC80NND5wpTmKzwdhLYLH3zL4cLlK0gVaaltW7/wMuyTnN0Lw==} - engines: {node: '>=8.0.0'} - peerDependencies: - '@types/react': ^16.8.6 || ^17.0.0 - react: ^16.8.0 || ^17.0.0 - react-dom: ^16.8.0 || ^17.0.0 - peerDependenciesMeta: - '@types/react': - optional: true - - '@material-ui/types@5.1.0': - resolution: {integrity: sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==} - peerDependencies: - '@types/react': '*' - peerDependenciesMeta: - '@types/react': - optional: true - - '@material-ui/utils@4.11.3': - resolution: {integrity: sha512-ZuQPV4rBK/V1j2dIkSSEcH5uT6AaHuKWFfotADHsC0wVL1NLd2WkFCm4ZZbX33iO4ydl6V0GPngKm8HZQ2oujg==} - engines: {node: '>=8.0.0'} - peerDependencies: - react: ^16.8.0 || ^17.0.0 - react-dom: ^16.8.0 || ^17.0.0 - '@material/animation@1.0.0': resolution: {integrity: sha512-Ed5/vggn6ZhSJ87yn3ZS1d826VJNFz73jHF2bSsgRtHDoB8KCuOwQMfdgAgDa4lKDF6CDIPCKBZPKrs2ubehdw==} @@ -4372,10 +4282,6 @@ packages: resolution: {integrity: sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==} engines: {node: '>=0.8'} - clsx@1.2.1: - resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==} - engines: {node: '>=6'} - clsx@2.1.1: resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==} engines: {node: '>=6'} @@ -4743,9 +4649,6 @@ packages: resolution: {integrity: sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==} engines: {node: '>=8'} - csstype@2.6.21: - resolution: {integrity: sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==} - csstype@3.1.3: resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==} @@ -8120,9 +8023,6 @@ packages: pop-iterate@1.0.1: resolution: {integrity: sha512-HRCx4+KJE30JhX84wBN4+vja9bNfysxg1y28l0DuJmkoaICiv2ZSilKddbS48pq50P8d2erAhqDLbp47yv3MbQ==} - popper.js@1.16.1-lts: - resolution: {integrity: sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==} - possible-typed-array-names@1.0.0: resolution: {integrity: sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==} engines: {node: '>= 0.4'} @@ -13570,8 +13470,6 @@ snapshots: '@emotion/weak-memoize': 0.4.0 stylis: 4.2.0 - '@emotion/hash@0.8.0': {} - '@emotion/hash@0.9.2': {} '@emotion/is-prop-valid@1.2.2': @@ -13971,93 +13869,6 @@ snapshots: globby: 11.1.0 read-yaml-file: 1.1.0 - '@material-ui/core@4.12.4(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': - dependencies: - '@babel/runtime': 7.26.7 - '@material-ui/styles': 4.11.5(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@material-ui/system': 4.12.2(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@material-ui/types': 5.1.0(@types/react@18.3.18) - '@material-ui/utils': 4.11.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@types/react-transition-group': 4.4.12(@types/react@18.3.18) - clsx: 1.2.1 - hoist-non-react-statics: 3.3.2 - popper.js: 1.16.1-lts - prop-types: 15.8.1 - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) - react-is: 17.0.2 - react-transition-group: 4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - optionalDependencies: - '@types/react': 18.3.18 - - '@material-ui/icons@4.11.3(@material-ui/core@4.12.4(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': - dependencies: - '@babel/runtime': 7.26.7 - '@material-ui/core': 4.12.4(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) - optionalDependencies: - '@types/react': 18.3.18 - - '@material-ui/lab@4.0.0-alpha.61(@material-ui/core@4.12.4(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': - dependencies: - '@babel/runtime': 7.26.7 - '@material-ui/core': 4.12.4(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@material-ui/utils': 4.11.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - clsx: 1.2.1 - prop-types: 15.8.1 - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) - react-is: 17.0.2 - optionalDependencies: - '@types/react': 18.3.18 - - '@material-ui/styles@4.11.5(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': - dependencies: - '@babel/runtime': 7.26.7 - '@emotion/hash': 0.8.0 - '@material-ui/types': 5.1.0(@types/react@18.3.18) - '@material-ui/utils': 4.11.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - clsx: 1.2.1 - csstype: 2.6.21 - hoist-non-react-statics: 3.3.2 - jss: 10.10.0 - jss-plugin-camel-case: 10.10.0 - jss-plugin-default-unit: 10.10.0 - jss-plugin-global: 10.10.0 - jss-plugin-nested: 10.10.0 - jss-plugin-props-sort: 10.10.0 - jss-plugin-rule-value-function: 10.10.0 - jss-plugin-vendor-prefixer: 10.10.0 - prop-types: 15.8.1 - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) - optionalDependencies: - '@types/react': 18.3.18 - - '@material-ui/system@4.12.2(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': - dependencies: - '@babel/runtime': 7.26.7 - '@material-ui/utils': 4.11.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - csstype: 2.6.21 - prop-types: 15.8.1 - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) - optionalDependencies: - '@types/react': 18.3.18 - - '@material-ui/types@5.1.0(@types/react@18.3.18)': - optionalDependencies: - '@types/react': 18.3.18 - - '@material-ui/utils@4.11.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': - dependencies: - '@babel/runtime': 7.26.7 - prop-types: 15.8.1 - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) - react-is: 17.0.2 - '@material/animation@1.0.0': dependencies: tslib: 1.14.1 @@ -16634,8 +16445,6 @@ snapshots: clone@1.0.4: {} - clsx@1.2.1: {} - clsx@2.1.1: {} co@4.6.0: {} @@ -17018,8 +16827,6 @@ snapshots: dependencies: cssom: 0.3.8 - csstype@2.6.21: {} - csstype@3.1.3: {} cwebp-bin@7.0.1: @@ -21212,8 +21019,6 @@ snapshots: pop-iterate@1.0.1: {} - popper.js@1.16.1-lts: {} - possible-typed-array-names@1.0.0: {} postcss-attribute-case-insensitive@5.0.2(postcss@8.5.1): From bad7684c0f155211b3104437d777c4b76ca365cb Mon Sep 17 00:00:00 2001 From: Matthew Walowski Date: Sat, 22 Feb 2025 11:05:56 -0600 Subject: [PATCH 04/21] add emotion styles --- apps/frontend/package.json | 1 + apps/frontend/src/AppContent.tsx | 20 +-- .../AccountDropdown/AccountDropdown.tsx | 17 +-- pnpm-lock.yaml | 128 ++++++++++++++++-- 4 files changed, 129 insertions(+), 37 deletions(-) diff --git a/apps/frontend/package.json b/apps/frontend/package.json index 0c60496a..e0374ace 100644 --- a/apps/frontend/package.json +++ b/apps/frontend/package.json @@ -15,6 +15,7 @@ }, "dependencies": { "@3dp4me/types": "workspace:*", + "@emotion/styled": "^11.14.0", "@material/tabs": "^2.3.0", "@mui/icons-material": "^6.4.5", "@mui/lab": "6.0.0-beta.28", diff --git a/apps/frontend/src/AppContent.tsx b/apps/frontend/src/AppContent.tsx index 818f6b8e..50b93b57 100644 --- a/apps/frontend/src/AppContent.tsx +++ b/apps/frontend/src/AppContent.tsx @@ -21,28 +21,22 @@ import { ReducerActionType } from './store/Reducer' import { Context } from './store/Store' import { CognitoAttribute, LANGUAGES, Routes } from './utils/constants' import { isLanguageValid } from './utils/language' -import { ThemeProvider, Theme, StyledEngineProvider } from '@mui/styles'; -import { createTheme, adaptV4Theme } from '@mui/material'; - - -declare module '@mui/styles/defaultTheme' { - // eslint-disable-next-line @typescript-eslint/no-empty-interface - interface DefaultTheme extends Theme {} -} - +import { ThemeProvider } from '@mui/styles'; +import { createTheme } from '@mui/material'; +import { StyledEngineProvider } from '@mui/material/styles'; interface AppContentProps { username: string userEmail: string } -const arTheme = createTheme(adaptV4Theme({ +const arTheme = createTheme({ direction: 'rtl', -})) +}) -const enTheme = createTheme(adaptV4Theme({ +const enTheme = createTheme({ direction: 'ltr', -})) +}) const AppContent = ({ username, userEmail }: AppContentProps) => { const errorWrap = useErrorWrap() diff --git a/apps/frontend/src/components/AccountDropdown/AccountDropdown.tsx b/apps/frontend/src/components/AccountDropdown/AccountDropdown.tsx index adf78642..b294adc3 100644 --- a/apps/frontend/src/components/AccountDropdown/AccountDropdown.tsx +++ b/apps/frontend/src/components/AccountDropdown/AccountDropdown.tsx @@ -3,7 +3,7 @@ import Button from '@mui/material/Button' import FormControl from '@mui/material/FormControl' import Menu from '@mui/material/Menu' import MenuItem from '@mui/material/MenuItem' -import Select from '@mui/material/Select' +import Select, { SelectChangeEvent } from '@mui/material/Select' import React, { ChangeEvent, useContext } from 'react' import { saveLanguagePreference, signOut } from '../../aws/aws-helper' @@ -12,30 +12,26 @@ import { ReducerActionType } from '../../store/Reducer' import { Context } from '../../store/Store' import { isLanguageValid } from '../../utils/language' import { useStyles } from './AccountDropdown.styles' +import { PopoverVirtualElement } from '@mui/material' export interface AccountDropdownProps { - anchorEl: Element | ((element: Element) => Element) | null | undefined handleClose: () => void username: string userEmail: string + anchorEl: Element | (() => Element) | PopoverVirtualElement | (() => PopoverVirtualElement) | null | undefined } const AccountDropdown = ({ - anchorEl, handleClose, username = '', userEmail = '', + anchorEl, }: AccountDropdownProps) => { const styles = useStyles() const dispatch = useContext(Context)[1] const [translations, selectedLang] = useTranslations() - const handleLanguageSelect = ( - e: ChangeEvent<{ - name?: string | undefined - value: unknown - }> - ) => { + const handleLanguageSelect = (e: SelectChangeEvent) => { if (typeof e.target.value !== 'string') return if (!isLanguageValid(e.target.value)) return @@ -50,12 +46,11 @@ const AccountDropdown = ({

{username}

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5979d4d0..b76d9031 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -153,18 +153,21 @@ importers: '@3dp4me/types': specifier: workspace:* version: link:../../packages/types + '@emotion/styled': + specifier: ^11.14.0 + version: 11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1) '@material/tabs': specifier: ^2.3.0 version: 2.3.0 '@mui/icons-material': specifier: ^6.4.5 - version: 6.4.5(@mui/material@6.4.5(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.18)(react@18.3.1) + version: 6.4.5(@mui/material@6.4.5(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.18)(react@18.3.1) '@mui/lab': specifier: 6.0.0-beta.28 - version: 6.0.0-beta.28(@mui/material@6.4.5(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 6.0.0-beta.28(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@mui/material@6.4.5(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/material': specifier: ^6.4.5 - version: 6.4.5(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 6.4.5(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/styles': specifier: ^6.4.5 version: 6.4.5(@types/react@18.3.18)(react@18.3.1) @@ -1951,6 +1954,9 @@ packages: peerDependencies: effect: ^3.5.7 + '@emotion/babel-plugin@11.13.5': + resolution: {integrity: sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==} + '@emotion/cache@11.14.0': resolution: {integrity: sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==} @@ -1960,24 +1966,51 @@ packages: '@emotion/is-prop-valid@1.2.2': resolution: {integrity: sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==} + '@emotion/is-prop-valid@1.3.1': + resolution: {integrity: sha512-/ACwoqx7XQi9knQs/G0qKvv5teDMhD7bXYns9N/wM8ah8iNb8jZ2uNO0YOgiq2o2poIvVtJS2YALasQuMSQ7Kw==} + '@emotion/memoize@0.8.1': resolution: {integrity: sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==} '@emotion/memoize@0.9.0': resolution: {integrity: sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==} + '@emotion/react@11.14.0': + resolution: {integrity: sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==} + peerDependencies: + '@types/react': '*' + react: '>=16.8.0' + peerDependenciesMeta: + '@types/react': + optional: true + '@emotion/serialize@1.3.3': resolution: {integrity: sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==} '@emotion/sheet@1.4.0': resolution: {integrity: sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==} + '@emotion/styled@11.14.0': + resolution: {integrity: sha512-XxfOnXFffatap2IyCeJyNov3kiDQWoR08gPUQxvbL7fxKryGBKUZUkG6Hz48DZwVrJSVh9sJboyV1Ds4OW6SgA==} + peerDependencies: + '@emotion/react': ^11.0.0-rc.0 + '@types/react': '*' + react: '>=16.8.0' + peerDependenciesMeta: + '@types/react': + optional: true + '@emotion/unitless@0.10.0': resolution: {integrity: sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==} '@emotion/unitless@0.8.1': resolution: {integrity: sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==} + '@emotion/use-insertion-effect-with-fallbacks@1.2.0': + resolution: {integrity: sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==} + peerDependencies: + react: '>=16.8.0' + '@emotion/utils@1.4.2': resolution: {integrity: sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==} @@ -5589,6 +5622,9 @@ packages: resolution: {integrity: sha512-9ZonPT4ZAK4a+1pUPVPZJapbi7O5qbbJPdYw/NOQWZZbVLdDTYM3A4R9z/DpAM08IDaFGsvPgiGZ82WEwUDWjg==} engines: {node: '>=14.16'} + find-root@1.1.0: + resolution: {integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==} + find-up@1.1.2: resolution: {integrity: sha512-jvElSjyuo4EMQGoTwo1uJU5pQMwTW5lS1x05zzfJuTIyLR3zwO27LYrxNg+dlvKpGOuGy/MzBdXh80g0ve5+HA==} engines: {node: '>=0.10.0'} @@ -13462,6 +13498,22 @@ snapshots: effect: 3.5.7 fast-check: 3.20.0 + '@emotion/babel-plugin@11.13.5': + dependencies: + '@babel/helper-module-imports': 7.25.9 + '@babel/runtime': 7.26.7 + '@emotion/hash': 0.9.2 + '@emotion/memoize': 0.9.0 + '@emotion/serialize': 1.3.3 + babel-plugin-macros: 3.1.0 + convert-source-map: 1.9.0 + escape-string-regexp: 4.0.0 + find-root: 1.1.0 + source-map: 0.5.7 + stylis: 4.2.0 + transitivePeerDependencies: + - supports-color + '@emotion/cache@11.14.0': dependencies: '@emotion/memoize': 0.9.0 @@ -13476,10 +13528,30 @@ snapshots: dependencies: '@emotion/memoize': 0.8.1 + '@emotion/is-prop-valid@1.3.1': + dependencies: + '@emotion/memoize': 0.9.0 + '@emotion/memoize@0.8.1': {} '@emotion/memoize@0.9.0': {} + '@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1)': + dependencies: + '@babel/runtime': 7.26.7 + '@emotion/babel-plugin': 11.13.5 + '@emotion/cache': 11.14.0 + '@emotion/serialize': 1.3.3 + '@emotion/use-insertion-effect-with-fallbacks': 1.2.0(react@18.3.1) + '@emotion/utils': 1.4.2 + '@emotion/weak-memoize': 0.4.0 + hoist-non-react-statics: 3.3.2 + react: 18.3.1 + optionalDependencies: + '@types/react': 18.3.18 + transitivePeerDependencies: + - supports-color + '@emotion/serialize@1.3.3': dependencies: '@emotion/hash': 0.9.2 @@ -13490,10 +13562,29 @@ snapshots: '@emotion/sheet@1.4.0': {} + '@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)': + dependencies: + '@babel/runtime': 7.26.7 + '@emotion/babel-plugin': 11.13.5 + '@emotion/is-prop-valid': 1.3.1 + '@emotion/react': 11.14.0(@types/react@18.3.18)(react@18.3.1) + '@emotion/serialize': 1.3.3 + '@emotion/use-insertion-effect-with-fallbacks': 1.2.0(react@18.3.1) + '@emotion/utils': 1.4.2 + react: 18.3.1 + optionalDependencies: + '@types/react': 18.3.18 + transitivePeerDependencies: + - supports-color + '@emotion/unitless@0.10.0': {} '@emotion/unitless@0.8.1': {} + '@emotion/use-insertion-effect-with-fallbacks@1.2.0(react@18.3.1)': + dependencies: + react: 18.3.1 + '@emotion/utils@1.4.2': {} '@emotion/weak-memoize@0.4.0': {} @@ -13933,20 +14024,20 @@ snapshots: '@mui/core-downloads-tracker@6.4.5': {} - '@mui/icons-material@6.4.5(@mui/material@6.4.5(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)': + '@mui/icons-material@6.4.5(@mui/material@6.4.5(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)': dependencies: '@babel/runtime': 7.26.7 - '@mui/material': 6.4.5(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@mui/material': 6.4.5(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: 18.3.1 optionalDependencies: '@types/react': 18.3.18 - '@mui/lab@6.0.0-beta.28(@mui/material@6.4.5(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@mui/lab@6.0.0-beta.28(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@mui/material@6.4.5(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.26.7 '@mui/base': 5.0.0-beta.69(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@mui/material': 6.4.5(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@mui/system': 6.4.3(@types/react@18.3.18)(react@18.3.1) + '@mui/material': 6.4.5(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@mui/system': 6.4.3(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1) '@mui/types': 7.2.21(@types/react@18.3.18) '@mui/utils': 6.4.3(@types/react@18.3.18)(react@18.3.1) clsx: 2.1.1 @@ -13954,13 +14045,15 @@ snapshots: react: 18.3.1 react-dom: 18.3.1(react@18.3.1) optionalDependencies: + '@emotion/react': 11.14.0(@types/react@18.3.18)(react@18.3.1) + '@emotion/styled': 11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1) '@types/react': 18.3.18 - '@mui/material@6.4.5(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@mui/material@6.4.5(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.26.7 '@mui/core-downloads-tracker': 6.4.5 - '@mui/system': 6.4.3(@types/react@18.3.18)(react@18.3.1) + '@mui/system': 6.4.3(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1) '@mui/types': 7.2.21(@types/react@18.3.18) '@mui/utils': 6.4.3(@types/react@18.3.18)(react@18.3.1) '@popperjs/core': 2.11.8 @@ -13973,6 +14066,8 @@ snapshots: react-is: 19.0.0 react-transition-group: 4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1) optionalDependencies: + '@emotion/react': 11.14.0(@types/react@18.3.18)(react@18.3.1) + '@emotion/styled': 11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1) '@types/react': 18.3.18 '@mui/private-theming@6.4.3(@types/react@18.3.18)(react@18.3.1)': @@ -13984,7 +14079,7 @@ snapshots: optionalDependencies: '@types/react': 18.3.18 - '@mui/styled-engine@6.4.3(react@18.3.1)': + '@mui/styled-engine@6.4.3(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.26.7 '@emotion/cache': 11.14.0 @@ -13993,6 +14088,9 @@ snapshots: csstype: 3.1.3 prop-types: 15.8.1 react: 18.3.1 + optionalDependencies: + '@emotion/react': 11.14.0(@types/react@18.3.18)(react@18.3.1) + '@emotion/styled': 11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1) '@mui/styles@6.4.5(@types/react@18.3.18)(react@18.3.1)': dependencies: @@ -14017,11 +14115,11 @@ snapshots: optionalDependencies: '@types/react': 18.3.18 - '@mui/system@6.4.3(@types/react@18.3.18)(react@18.3.1)': + '@mui/system@6.4.3(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)': dependencies: '@babel/runtime': 7.26.7 '@mui/private-theming': 6.4.3(@types/react@18.3.18)(react@18.3.1) - '@mui/styled-engine': 6.4.3(react@18.3.1) + '@mui/styled-engine': 6.4.3(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(react@18.3.1) '@mui/types': 7.2.21(@types/react@18.3.18) '@mui/utils': 6.4.3(@types/react@18.3.18)(react@18.3.1) clsx: 2.1.1 @@ -14029,6 +14127,8 @@ snapshots: prop-types: 15.8.1 react: 18.3.1 optionalDependencies: + '@emotion/react': 11.14.0(@types/react@18.3.18)(react@18.3.1) + '@emotion/styled': 11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1) '@types/react': 18.3.18 '@mui/types@7.2.21(@types/react@18.3.18)': @@ -18024,6 +18124,8 @@ snapshots: common-path-prefix: 3.0.0 pkg-dir: 7.0.0 + find-root@1.1.0: {} + find-up@1.1.2: dependencies: path-exists: 2.1.0 From a6506bf87be4ad750c0ea458ef6af9518d9c58b7 Mon Sep 17 00:00:00 2001 From: Matthew Walowski Date: Sun, 23 Feb 2025 10:49:39 -0600 Subject: [PATCH 05/21] run linter --- apps/frontend/src/AppContent.tsx | 12 ++++----- .../AccountDropdown/AccountDropdown.styles.ts | 2 +- .../AccountDropdown/AccountDropdown.tsx | 14 +++++++--- .../CreateFieldModal/CreateFieldModal.tsx | 2 +- .../EditFieldModal/EditFieldModal.tsx | 2 +- .../EditRoleModal/EditRoleModal.tsx | 9 ++----- .../Fields/FieldGroup/FieldGroupTable.tsx | 2 +- apps/frontend/src/components/Files/Files.tsx | 4 +-- .../ManagePatientModal/ManagePatientModal.tsx | 2 +- .../src/components/Navbar/Navbar.style.ts | 2 +- .../frontend/src/components/Navbar/Navbar.tsx | 2 +- .../PatientDetailSidebar.tsx | 8 ++---- .../src/components/Sidebar/Sidebar.tsx | 2 +- .../SimpleTable/SimpleTable.style.ts | 2 +- .../components/StepContent/StepContent.tsx | 22 ++++++++-------- .../ToggleButtons/ToggleButtons.tsx | 26 +++++++++++++------ .../src/pages/Dashboard/Dashboard.tsx | 2 +- .../DashboardManagement.tsx | 2 +- apps/frontend/src/utils/constants.ts | 3 +-- apps/frontend/src/utils/table-renderers.tsx | 2 +- 20 files changed, 64 insertions(+), 58 deletions(-) diff --git a/apps/frontend/src/AppContent.tsx b/apps/frontend/src/AppContent.tsx index 50b93b57..07b2ac32 100644 --- a/apps/frontend/src/AppContent.tsx +++ b/apps/frontend/src/AppContent.tsx @@ -1,4 +1,7 @@ import { Language } from '@3dp4me/types' +import { createTheme } from '@mui/material' +import { StyledEngineProvider } from '@mui/material/styles' +import { ThemeProvider } from '@mui/styles' import React, { useContext, useEffect } from 'react' import { trackPromise } from 'react-promise-tracker' import { BrowserRouter as Router, Route, Switch } from 'react-router-dom' @@ -21,9 +24,6 @@ import { ReducerActionType } from './store/Reducer' import { Context } from './store/Store' import { CognitoAttribute, LANGUAGES, Routes } from './utils/constants' import { isLanguageValid } from './utils/language' -import { ThemeProvider } from '@mui/styles'; -import { createTheme } from '@mui/material'; -import { StyledEngineProvider } from '@mui/material/styles'; interface AppContentProps { username: string @@ -84,7 +84,7 @@ const AppContent = ({ username, userEmail }: AppContentProps) => { } return ( - (
+
{/* Shown when making a network request */} @@ -127,8 +127,8 @@ const AppContent = ({ username, userEmail }: AppContentProps) => { -
) - ); +
+ ) } export default AppContent diff --git a/apps/frontend/src/components/AccountDropdown/AccountDropdown.styles.ts b/apps/frontend/src/components/AccountDropdown/AccountDropdown.styles.ts index c99d2571..5782ea93 100644 --- a/apps/frontend/src/components/AccountDropdown/AccountDropdown.styles.ts +++ b/apps/frontend/src/components/AccountDropdown/AccountDropdown.styles.ts @@ -1,4 +1,4 @@ -import makeStyles from '@mui/styles/makeStyles'; +import makeStyles from '@mui/styles/makeStyles' export const useStyles = makeStyles({ menuWrapper: { diff --git a/apps/frontend/src/components/AccountDropdown/AccountDropdown.tsx b/apps/frontend/src/components/AccountDropdown/AccountDropdown.tsx index b294adc3..44d34694 100644 --- a/apps/frontend/src/components/AccountDropdown/AccountDropdown.tsx +++ b/apps/frontend/src/components/AccountDropdown/AccountDropdown.tsx @@ -1,10 +1,11 @@ import { Language } from '@3dp4me/types' +import { PopoverVirtualElement } from '@mui/material' import Button from '@mui/material/Button' import FormControl from '@mui/material/FormControl' import Menu from '@mui/material/Menu' import MenuItem from '@mui/material/MenuItem' import Select, { SelectChangeEvent } from '@mui/material/Select' -import React, { ChangeEvent, useContext } from 'react' +import React, { useContext } from 'react' import { saveLanguagePreference, signOut } from '../../aws/aws-helper' import { useTranslations } from '../../hooks/useTranslations' @@ -12,13 +13,18 @@ import { ReducerActionType } from '../../store/Reducer' import { Context } from '../../store/Store' import { isLanguageValid } from '../../utils/language' import { useStyles } from './AccountDropdown.styles' -import { PopoverVirtualElement } from '@mui/material' export interface AccountDropdownProps { handleClose: () => void username: string userEmail: string - anchorEl: Element | (() => Element) | PopoverVirtualElement | (() => PopoverVirtualElement) | null | undefined + anchorEl: + | Element + | (() => Element) + | PopoverVirtualElement + | (() => PopoverVirtualElement) + | null + | undefined } const AccountDropdown = ({ @@ -31,7 +37,7 @@ const AccountDropdown = ({ const dispatch = useContext(Context)[1] const [translations, selectedLang] = useTranslations() - const handleLanguageSelect = (e: SelectChangeEvent) => { + const handleLanguageSelect = (e: SelectChangeEvent) => { if (typeof e.target.value !== 'string') return if (!isLanguageValid(e.target.value)) return diff --git a/apps/frontend/src/components/CreateFieldModal/CreateFieldModal.tsx b/apps/frontend/src/components/CreateFieldModal/CreateFieldModal.tsx index 47210b94..658404fe 100644 --- a/apps/frontend/src/components/CreateFieldModal/CreateFieldModal.tsx +++ b/apps/frontend/src/components/CreateFieldModal/CreateFieldModal.tsx @@ -14,7 +14,7 @@ import FormControl from '@mui/material/FormControl' import InputBase from '@mui/material/InputBase' import Modal from '@mui/material/Modal' import NativeSelect from '@mui/material/NativeSelect' -import withStyles from '@mui/styles/withStyles'; +import withStyles from '@mui/styles/withStyles' import _ from 'lodash' import React, { ChangeEventHandler, ReactNode, useState } from 'react' import { trackPromise } from 'react-promise-tracker' diff --git a/apps/frontend/src/components/EditFieldModal/EditFieldModal.tsx b/apps/frontend/src/components/EditFieldModal/EditFieldModal.tsx index 28188c30..1232dfc2 100644 --- a/apps/frontend/src/components/EditFieldModal/EditFieldModal.tsx +++ b/apps/frontend/src/components/EditFieldModal/EditFieldModal.tsx @@ -8,7 +8,7 @@ import FormControlLabel from '@mui/material/FormControlLabel' import InputBase from '@mui/material/InputBase' import Modal from '@mui/material/Modal' import NativeSelect from '@mui/material/NativeSelect' -import withStyles from '@mui/styles/withStyles'; +import withStyles from '@mui/styles/withStyles' import _ from 'lodash' import React, { ChangeEvent, ReactNode, useEffect, useState } from 'react' import swal from 'sweetalert' diff --git a/apps/frontend/src/components/EditRoleModal/EditRoleModal.tsx b/apps/frontend/src/components/EditRoleModal/EditRoleModal.tsx index 0fc06cb4..3ad9d1c2 100644 --- a/apps/frontend/src/components/EditRoleModal/EditRoleModal.tsx +++ b/apps/frontend/src/components/EditRoleModal/EditRoleModal.tsx @@ -9,7 +9,7 @@ import Button from '@mui/material/Button' import FormControl from '@mui/material/FormControl' import InputLabel from '@mui/material/InputLabel' import Modal from '@mui/material/Modal' -import Select from '@mui/material/Select' +import Select, { SelectChangeEvent } from '@mui/material/Select' import _ from 'lodash' import React, { useEffect, useState } from 'react' import { trackPromise } from 'react-promise-tracker' @@ -60,12 +60,7 @@ const EditRoleModal = ({ setUserData({ ...userData, roles }) } - const onAccessChange = ( - event: React.ChangeEvent<{ - name?: string | undefined - value: unknown - }> - ) => { + const onAccessChange = (event: SelectChangeEvent) => { if (isAccessLevel(event.target.value)) setUserData({ ...userData, accessLevel: event.target.value }) } diff --git a/apps/frontend/src/components/Fields/FieldGroup/FieldGroupTable.tsx b/apps/frontend/src/components/Fields/FieldGroup/FieldGroupTable.tsx index 86a8f015..57d78a14 100644 --- a/apps/frontend/src/components/Fields/FieldGroup/FieldGroupTable.tsx +++ b/apps/frontend/src/components/Fields/FieldGroup/FieldGroupTable.tsx @@ -122,7 +122,7 @@ const FieldGroupTable = ({ const tableColumnMetadata = useMemo( () => metadata?.subFields?.map((field) => ({ - id: field.key, + id: field.key, dataType: field.fieldType, })), [metadata] diff --git a/apps/frontend/src/components/Files/Files.tsx b/apps/frontend/src/components/Files/Files.tsx index 8538c193..b25047ee 100644 --- a/apps/frontend/src/components/Files/Files.tsx +++ b/apps/frontend/src/components/Files/Files.tsx @@ -1,11 +1,11 @@ import './Files.scss' import { File as FileModel } from '@3dp4me/types' -import Button from '@mui/material/Button' -import Typography from '@mui/material/Typography' import AddIcon from '@mui/icons-material/Add' import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward' import CloseIcon from '@mui/icons-material/Close' +import Button from '@mui/material/Button' +import Typography from '@mui/material/Typography' import swal from 'sweetalert' import { useTranslations } from '../../hooks/useTranslations' diff --git a/apps/frontend/src/components/ManagePatientModal/ManagePatientModal.tsx b/apps/frontend/src/components/ManagePatientModal/ManagePatientModal.tsx index 9660f057..212651ba 100644 --- a/apps/frontend/src/components/ManagePatientModal/ManagePatientModal.tsx +++ b/apps/frontend/src/components/ManagePatientModal/ManagePatientModal.tsx @@ -1,9 +1,9 @@ import './ManagePatientModal.scss' import { Language, Patient, ReservedStep } from '@3dp4me/types' +import CloseIcon from '@mui/icons-material/Close' import Button from '@mui/material/Button' import Modal from '@mui/material/Modal' -import CloseIcon from '@mui/icons-material/Close' import _ from 'lodash' import React, { useState } from 'react' import swal from 'sweetalert' diff --git a/apps/frontend/src/components/Navbar/Navbar.style.ts b/apps/frontend/src/components/Navbar/Navbar.style.ts index eb607ec0..2391a835 100644 --- a/apps/frontend/src/components/Navbar/Navbar.style.ts +++ b/apps/frontend/src/components/Navbar/Navbar.style.ts @@ -1,4 +1,4 @@ -import makeStyles from '@mui/styles/makeStyles'; +import makeStyles from '@mui/styles/makeStyles' export const useStyles = makeStyles((theme: any) => ({ appBar: { diff --git a/apps/frontend/src/components/Navbar/Navbar.tsx b/apps/frontend/src/components/Navbar/Navbar.tsx index 549051fd..acdd3a78 100644 --- a/apps/frontend/src/components/Navbar/Navbar.tsx +++ b/apps/frontend/src/components/Navbar/Navbar.tsx @@ -1,9 +1,9 @@ import './Navbar.scss' import { Language, Nullish } from '@3dp4me/types' +import AccountCircleIcon from '@mui/icons-material/AccountCircle' import AppBar from '@mui/material/AppBar' import Toolbar from '@mui/material/Toolbar' -import AccountCircleIcon from '@mui/icons-material/AccountCircle' import React, { MouseEventHandler, useContext, useState } from 'react' import { Link } from 'react-router-dom' diff --git a/apps/frontend/src/components/PatientDetailSidebar/PatientDetailSidebar.tsx b/apps/frontend/src/components/PatientDetailSidebar/PatientDetailSidebar.tsx index aa661d27..5504b5a0 100644 --- a/apps/frontend/src/components/PatientDetailSidebar/PatientDetailSidebar.tsx +++ b/apps/frontend/src/components/PatientDetailSidebar/PatientDetailSidebar.tsx @@ -1,15 +1,13 @@ import './PatientDetailSidebar.scss' import { Nullish, Patient } from '@3dp4me/types' +import ExpandMoreIcon from '@mui/icons-material/ExpandMore' import Accordion from '@mui/material/Accordion' import AccordionDetails from '@mui/material/AccordionDetails' import AccordionSummary from '@mui/material/AccordionSummary' import Button from '@mui/material/Button' import Drawer from '@mui/material/Drawer' -import { createTheme } from '@mui/material/styles'; import Toolbar from '@mui/material/Toolbar' -import ExpandMoreIcon from '@mui/icons-material/ExpandMore' -import ThemeProvider from '@mui/styles/ThemeProvider' import { useState } from 'react' import { useTranslations } from '../../hooks/useTranslations' @@ -107,9 +105,7 @@ const PatientDetailSidebar = ({ patientData, onViewPatient }: PatientDetailSideb
{patientData?.status}
- - {translations.components.notes.title} - + {translations.components.notes.title} {generateNoteSidebar()}
({ head: { diff --git a/apps/frontend/src/components/StepContent/StepContent.tsx b/apps/frontend/src/components/StepContent/StepContent.tsx index 821e5eac..48e061cb 100644 --- a/apps/frontend/src/components/StepContent/StepContent.tsx +++ b/apps/frontend/src/components/StepContent/StepContent.tsx @@ -5,7 +5,7 @@ import Backdrop from '@mui/material/Backdrop' import Button from '@mui/material/Button' import CircularProgress from '@mui/material/CircularProgress' import MenuItem from '@mui/material/MenuItem' -import Select from '@mui/material/Select' +import Select, { SelectChangeEvent } from '@mui/material/Select' import _ from 'lodash' import React, { useEffect, useState } from 'react' import { trackPromise } from 'react-promise-tracker' @@ -31,6 +31,11 @@ export interface StepContentProps { onDataSaved: (key: string, value: any) => void } +enum questionDisplayMode { + ALL = 'all', + SINGLE = 'single', +} + const StepContent = ({ patientId, metaData, @@ -116,13 +121,8 @@ const StepContent = ({ swal(translations.components.bottombar.savedMessage.patientInfo, '', 'success') } - const handleQuestionFormatSelect = ( - e: React.ChangeEvent<{ - name?: string | undefined - value: unknown - }> - ) => { - setSingleQuestionFormat(Boolean(e.target.value)) + const handleQuestionFormatSelect = (e: SelectChangeEvent) => { + setSingleQuestionFormat(e.target.value === questionDisplayMode.SINGLE) } const discardData = () => { @@ -252,13 +252,13 @@ const StepContent = ({ MenuProps={{ style: { zIndex: 35001 }, }} - defaultValue={'false'} + defaultValue={questionDisplayMode.ALL} onChange={handleQuestionFormatSelect} > - + {translations.components.selectQuestionFormat.allQuestions} - + {translations.components.selectQuestionFormat.singleQuestion} diff --git a/apps/frontend/src/components/ToggleButtons/ToggleButtons.tsx b/apps/frontend/src/components/ToggleButtons/ToggleButtons.tsx index 8b384bbf..d41db251 100644 --- a/apps/frontend/src/components/ToggleButtons/ToggleButtons.tsx +++ b/apps/frontend/src/components/ToggleButtons/ToggleButtons.tsx @@ -1,10 +1,10 @@ import './ToggleButtons.scss' import { Nullish, Patient } from '@3dp4me/types' +import ExpandMoreIcon from '@mui/icons-material/ExpandMore' import IconButton from '@mui/material/IconButton' import Menu from '@mui/material/Menu' import MenuItem from '@mui/material/MenuItem' -import ExpandMoreIcon from '@mui/icons-material/ExpandMore' import ToggleButton from '@mui/material/ToggleButton' import ToggleButtonGroup from '@mui/material/ToggleButtonGroup' import React, { MouseEventHandler, useState } from 'react' @@ -15,7 +15,12 @@ import HalfCircleIcon from '../../assets/half-circle.svg' import { useTranslations } from '../../hooks/useTranslations' import { useWindowDimensions } from '../../hooks/useWindowDimensions' import { useSteps } from '../../query/useSteps' -import { DISABLE_FEATURE_PATIENT_STATUS, LANGUAGES, RESIZE_TOGGLE_BUTTON_ESTIMATED_WIDTH, STEP_STATUS } from '../../utils/constants' +import { + DISABLE_FEATURE_PATIENT_STATUS, + LANGUAGES, + RESIZE_TOGGLE_BUTTON_ESTIMATED_WIDTH, + STEP_STATUS, +} from '../../utils/constants' import { getStepData } from '../../utils/metadataUtils' interface ToggleButtonsProps { @@ -105,7 +110,9 @@ const ToggleButtons = ({ return (
- {stepData?.status && !DISABLE_FEATURE_PATIENT_STATUS ? statusIcons[stepData.status] : null}{' '} + {stepData?.status && !DISABLE_FEATURE_PATIENT_STATUS + ? statusIcons[stepData.status] + : null}{' '} {element.displayName[selectedLang]}
) @@ -122,7 +129,9 @@ const ToggleButtons = ({ key={`${element.key}-mi`} onClick={(e) => handleCloseSelector(e, element.key)} > - {patientData && stepData?.status && !DISABLE_FEATURE_PATIENT_STATUS ? statusIcons[stepData.status] : null}{' '} + {patientData && stepData?.status && !DISABLE_FEATURE_PATIENT_STATUS + ? statusIcons[stepData.status] + : null}{' '} {element.displayName[selectedLang]} ) @@ -137,7 +146,7 @@ const ToggleButtons = ({ */ if (metaData && width < RESIZE_TOGGLE_BUTTON_ESTIMATED_WIDTH * metaData.length) { return ( - (
+
{generateSelectedStepLabel()} + size="large" + >
-
) - ); +
+ ) } return ( diff --git a/apps/frontend/src/pages/Dashboard/Dashboard.tsx b/apps/frontend/src/pages/Dashboard/Dashboard.tsx index f4d5aa0f..f180c057 100644 --- a/apps/frontend/src/pages/Dashboard/Dashboard.tsx +++ b/apps/frontend/src/pages/Dashboard/Dashboard.tsx @@ -1,9 +1,9 @@ import './Dashboard.scss' import { Field, Patient } from '@3dp4me/types' +import MuiAlert from '@mui/material/Alert' import type { SnackbarCloseReason } from '@mui/material/Snackbar' import Snackbar from '@mui/material/Snackbar' -import MuiAlert from '@mui/material/Alert' import _ from 'lodash' import { useEffect, useState } from 'react' diff --git a/apps/frontend/src/pages/DashboardManagement/DashboardManagement.tsx b/apps/frontend/src/pages/DashboardManagement/DashboardManagement.tsx index 00c776ed..eb0a5ce8 100644 --- a/apps/frontend/src/pages/DashboardManagement/DashboardManagement.tsx +++ b/apps/frontend/src/pages/DashboardManagement/DashboardManagement.tsx @@ -441,7 +441,7 @@ const SectionTab = () => { selectedStep={selectedStep} /> { setCreateStepModalOpen(false) }} diff --git a/apps/frontend/src/utils/constants.ts b/apps/frontend/src/utils/constants.ts index 1077b74b..ca490ba7 100644 --- a/apps/frontend/src/utils/constants.ts +++ b/apps/frontend/src/utils/constants.ts @@ -243,9 +243,8 @@ export const ACCOUNT_MANAGEMENT_TABS = { export const RESIZE_TOGGLE_BUTTON_ESTIMATED_WIDTH = 170 - /** * Feature flags */ -export const DISABLE_FEATURE_PATIENT_STATUS = true \ No newline at end of file +export const DISABLE_FEATURE_PATIENT_STATUS = true diff --git a/apps/frontend/src/utils/table-renderers.tsx b/apps/frontend/src/utils/table-renderers.tsx index 0c3c9884..bd79de09 100644 --- a/apps/frontend/src/utils/table-renderers.tsx +++ b/apps/frontend/src/utils/table-renderers.tsx @@ -1,7 +1,7 @@ import { AccessLevel, FieldType, Language, Nullish, Path, Patient } from '@3dp4me/types' -import IconButton from '@mui/material/IconButton' import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown' import ArrowDropUpIcon from '@mui/icons-material/ArrowDropUp' +import IconButton from '@mui/material/IconButton' import React, { ReactNode } from 'react' import Skeleton from 'react-loading-skeleton' import { Link } from 'react-router-dom' From 51ffd805fa25f94b33442c516ede6da632411ddd Mon Sep 17 00:00:00 2001 From: Matthew Walowski Date: Sun, 23 Feb 2025 10:59:08 -0600 Subject: [PATCH 06/21] remove comments --- apps/frontend/src/components/ErrorModal/ErrorModal.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/apps/frontend/src/components/ErrorModal/ErrorModal.tsx b/apps/frontend/src/components/ErrorModal/ErrorModal.tsx index 31cf0cb7..69aaa3c4 100644 --- a/apps/frontend/src/components/ErrorModal/ErrorModal.tsx +++ b/apps/frontend/src/components/ErrorModal/ErrorModal.tsx @@ -2,8 +2,7 @@ import './ErrorModal.scss' import { Nullish } from '@3dp4me/types' import Modal from '@mui/material/Modal' -// import RootRef from '@mate-ui/core/RootRef' -import React, { KeyboardEventHandler } from 'react' +import { KeyboardEventHandler } from 'react' import WarningIcon from '../../assets/warning.svg' @@ -27,8 +26,6 @@ const ErrorModal = ({ message = DEFAULT_ERROR_MSG, isOpen, onClose }: ErrorModal RootRef.current} >
Date: Sun, 23 Feb 2025 11:03:56 -0600 Subject: [PATCH 07/21] remove comment and swap import order --- apps/frontend/src/AppContent.tsx | 3 +-- .../src/pages/DashboardManagement/DashboardManagement.tsx | 1 - 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/apps/frontend/src/AppContent.tsx b/apps/frontend/src/AppContent.tsx index 07b2ac32..cf12bcca 100644 --- a/apps/frontend/src/AppContent.tsx +++ b/apps/frontend/src/AppContent.tsx @@ -1,6 +1,5 @@ import { Language } from '@3dp4me/types' -import { createTheme } from '@mui/material' -import { StyledEngineProvider } from '@mui/material/styles' +import { createTheme, StyledEngineProvider } from '@mui/material/styles' import { ThemeProvider } from '@mui/styles' import React, { useContext, useEffect } from 'react' import { trackPromise } from 'react-promise-tracker' diff --git a/apps/frontend/src/pages/DashboardManagement/DashboardManagement.tsx b/apps/frontend/src/pages/DashboardManagement/DashboardManagement.tsx index eb0a5ce8..43566883 100644 --- a/apps/frontend/src/pages/DashboardManagement/DashboardManagement.tsx +++ b/apps/frontend/src/pages/DashboardManagement/DashboardManagement.tsx @@ -441,7 +441,6 @@ const SectionTab = () => { selectedStep={selectedStep} /> { setCreateStepModalOpen(false) }} From 21f133feaf64d0b3772d8948d23fa551e76576f0 Mon Sep 17 00:00:00 2001 From: Matthew Walowski Date: Thu, 27 Feb 2025 17:13:28 -0600 Subject: [PATCH 08/21] remove mui styles --- apps/frontend/package.json | 4 - apps/frontend/src/AppContent.tsx | 26 +- .../AccountDropdown/AccountDropdown.styles.ts | 28 -- .../AccountDropdown/AccountDropdown.tsx | 50 ++- .../CreateFieldModal/CreateFieldModal.tsx | 8 +- .../EditFieldModal/EditFieldModal.tsx | 6 +- .../src/components/Navbar/Navbar.scss | 28 +- .../src/components/Navbar/Navbar.style.ts | 14 - .../frontend/src/components/Navbar/Navbar.tsx | 80 +++- .../src/components/Sidebar/Sidebar.tsx | 14 +- .../SimpleTable/SimpleTable.style.ts | 10 +- pnpm-lock.yaml | 353 ++---------------- 12 files changed, 191 insertions(+), 430 deletions(-) delete mode 100644 apps/frontend/src/components/AccountDropdown/AccountDropdown.styles.ts delete mode 100644 apps/frontend/src/components/Navbar/Navbar.style.ts diff --git a/apps/frontend/package.json b/apps/frontend/package.json index e0374ace..a3405570 100644 --- a/apps/frontend/package.json +++ b/apps/frontend/package.json @@ -15,12 +15,8 @@ }, "dependencies": { "@3dp4me/types": "workspace:*", - "@emotion/styled": "^11.14.0", - "@material/tabs": "^2.3.0", "@mui/icons-material": "^6.4.5", - "@mui/lab": "6.0.0-beta.28", "@mui/material": "^6.4.5", - "@mui/styles": "^6.4.5", "@sweetalert/with-react": "^0.1.1", "@tanstack/react-query": "^5.17.19", "@vis.gl/react-google-maps": "^1.4.2", diff --git a/apps/frontend/src/AppContent.tsx b/apps/frontend/src/AppContent.tsx index cf12bcca..7b18ab6c 100644 --- a/apps/frontend/src/AppContent.tsx +++ b/apps/frontend/src/AppContent.tsx @@ -1,6 +1,6 @@ import { Language } from '@3dp4me/types' -import { createTheme, StyledEngineProvider } from '@mui/material/styles' -import { ThemeProvider } from '@mui/styles' +// import { createTheme, PaletteOptions, StyledEngineProvider, ThemeProvider } from '@mui/material/styles' +// import { ThemeProvider, StyledEngineProvider, createTheme, ThemeOptions, fontSize } from '@mui/material/styles' import React, { useContext, useEffect } from 'react' import { trackPromise } from 'react-promise-tracker' import { BrowserRouter as Router, Route, Switch } from 'react-router-dom' @@ -23,17 +23,39 @@ import { ReducerActionType } from './store/Reducer' import { Context } from './store/Store' import { CognitoAttribute, LANGUAGES, Routes } from './utils/constants' import { isLanguageValid } from './utils/language' +import { createTheme, ThemeProvider, StyledEngineProvider, ThemeOptions } from '@mui/material' interface AppContentProps { username: string userEmail: string } +/** + * TODO: The issue seems to be different versions onf the provider. + * One provider is material, the other is styles + */ + +const theme: ThemeOptions = { + palette: { + primary: { + main: "#3f51b5", + }, + secondary: { + main: "#dedffb", + }, + }, + typography: { + fontSize: 15 + } +} + const arTheme = createTheme({ + ...theme, direction: 'rtl', }) const enTheme = createTheme({ + ...theme, direction: 'ltr', }) diff --git a/apps/frontend/src/components/AccountDropdown/AccountDropdown.styles.ts b/apps/frontend/src/components/AccountDropdown/AccountDropdown.styles.ts deleted file mode 100644 index 5782ea93..00000000 --- a/apps/frontend/src/components/AccountDropdown/AccountDropdown.styles.ts +++ /dev/null @@ -1,28 +0,0 @@ -import makeStyles from '@mui/styles/makeStyles' - -export const useStyles = makeStyles({ - menuWrapper: { - margin: '10px', - width: 'fit-content', - display: 'block', - }, - accountEmail: { - color: 'grey', - lineHeight: '0px', - }, - languageSelector: { - height: '50px', - }, - signOutButton: { - height: '38px', - fontSize: '1em', - fontWeight: 'bold', - backgroundColor: '#ca0909', - color: 'white', - marginTop: '10px', - width: '100%', - '&:hover': { - background: '#ca0909', - }, - }, -}) diff --git a/apps/frontend/src/components/AccountDropdown/AccountDropdown.tsx b/apps/frontend/src/components/AccountDropdown/AccountDropdown.tsx index 44d34694..7117a5c1 100644 --- a/apps/frontend/src/components/AccountDropdown/AccountDropdown.tsx +++ b/apps/frontend/src/components/AccountDropdown/AccountDropdown.tsx @@ -1,5 +1,5 @@ import { Language } from '@3dp4me/types' -import { PopoverVirtualElement } from '@mui/material' +import { PopoverVirtualElement, styled } from '@mui/material' import Button from '@mui/material/Button' import FormControl from '@mui/material/FormControl' import Menu from '@mui/material/Menu' @@ -12,7 +12,6 @@ import { useTranslations } from '../../hooks/useTranslations' import { ReducerActionType } from '../../store/Reducer' import { Context } from '../../store/Store' import { isLanguageValid } from '../../utils/language' -import { useStyles } from './AccountDropdown.styles' export interface AccountDropdownProps { handleClose: () => void @@ -27,13 +26,40 @@ export interface AccountDropdownProps { | undefined } +const MenuWrapper = styled('div')` + margin: '10px'; + width: 'fit-content'; + display: 'block'; +` + +const AccountEmail = styled('p')` + color: 'grey'; + lineHeight: '0px'; +` + +const LanguageSelector = styled(Select)` + height: '50px'; +` + +const SignoutButton = styled(Button)` + height: '38px'; + fontSize: '1em'; + fontWeight: 'bold'; + backgroundColor: '#ca0909'; + color: 'white'; + marginTop: '10px'; + width: '100%'; + '&:hover': { + background: '#ca0909'; + } +` + const AccountDropdown = ({ handleClose, username = '', userEmail = '', anchorEl, }: AccountDropdownProps) => { - const styles = useStyles() const dispatch = useContext(Context)[1] const [translations, selectedLang] = useTranslations() @@ -58,28 +84,26 @@ const AccountDropdown = ({ onClose={handleClose} anchorEl={anchorEl} > -
+

{username}

-

{userEmail}

+ {userEmail}

{translations.components.navbar.dropdown.language}

- + - -
+ +
) diff --git a/apps/frontend/src/components/CreateFieldModal/CreateFieldModal.tsx b/apps/frontend/src/components/CreateFieldModal/CreateFieldModal.tsx index 658404fe..9a5e9c1e 100644 --- a/apps/frontend/src/components/CreateFieldModal/CreateFieldModal.tsx +++ b/apps/frontend/src/components/CreateFieldModal/CreateFieldModal.tsx @@ -14,7 +14,6 @@ import FormControl from '@mui/material/FormControl' import InputBase from '@mui/material/InputBase' import Modal from '@mui/material/Modal' import NativeSelect from '@mui/material/NativeSelect' -import withStyles from '@mui/styles/withStyles' import _ from 'lodash' import React, { ChangeEventHandler, ReactNode, useState } from 'react' import { trackPromise } from 'react-promise-tracker' @@ -29,6 +28,7 @@ import { FormOption } from '../Fields/FormOption' import MultiSelectField from '../Fields/MultiSelectField' import { FileUploadButton } from '../FileUploadButton/FileUploadButton' import LanguageInput from '../LanguageInput/LanguageInput' +import { styled } from '@mui/material' export type NewField = Unsaved> @@ -58,7 +58,7 @@ const CreateFieldModal = ({ const errorWrap = useErrorWrap() - const BootstrapInput = withStyles((theme) => ({ + const BootstrapInput = styled(InputBase)(({ theme }) => ({ root: { 'label + &': { marginTop: theme.spacing(3), @@ -71,7 +71,7 @@ const CreateFieldModal = ({ border: '1px solid #ced4da', fontSize: 16, padding: '10px 26px 10px 12px', - transition: theme.transitions.create(['border-color', 'box-shadow']), + // transition: theme?.transitions?.create(['border-color', 'box-shadow']), // Use the system font instead of the default Roboto font. '&:focus': { borderRadius: 4, @@ -82,7 +82,7 @@ const CreateFieldModal = ({ backgroundColor: '#dedffb', }, }, - }))(InputBase) + })) const onRolesChange = (id: string, roles: string[]) => { setSelectedRoles(roles) diff --git a/apps/frontend/src/components/EditFieldModal/EditFieldModal.tsx b/apps/frontend/src/components/EditFieldModal/EditFieldModal.tsx index 1232dfc2..950f9ca8 100644 --- a/apps/frontend/src/components/EditFieldModal/EditFieldModal.tsx +++ b/apps/frontend/src/components/EditFieldModal/EditFieldModal.tsx @@ -8,7 +8,6 @@ import FormControlLabel from '@mui/material/FormControlLabel' import InputBase from '@mui/material/InputBase' import Modal from '@mui/material/Modal' import NativeSelect from '@mui/material/NativeSelect' -import withStyles from '@mui/styles/withStyles' import _ from 'lodash' import React, { ChangeEvent, ReactNode, useEffect, useState } from 'react' import swal from 'sweetalert' @@ -21,6 +20,7 @@ import CustomSwitch from '../CustomSwitch/CustomSwitch' import { FormOption } from '../Fields/FormOption' import MultiSelectField from '../Fields/MultiSelectField' import LanguageInput from '../LanguageInput/LanguageInput' +import { styled } from '@mui/material' export interface EditFieldModalProps { isOpen: boolean @@ -67,7 +67,7 @@ const EditFieldModal = ({ setOptions(formattedOptions) }, [initialData, isOpen]) - const BootstrapInput = withStyles((theme) => ({ + const BootstrapInput = styled(InputBase)(({ theme }) => ({ root: { 'label + &': { marginTop: theme.spacing(3), @@ -91,7 +91,7 @@ const EditFieldModal = ({ backgroundColor: '#dedffb', }, }, - }))(InputBase) + })) const onRolesChange = (id: string, roles: string[]) => { setSelectedRoles(roles) diff --git a/apps/frontend/src/components/Navbar/Navbar.scss b/apps/frontend/src/components/Navbar/Navbar.scss index 3b376931..c4367130 100644 --- a/apps/frontend/src/components/Navbar/Navbar.scss +++ b/apps/frontend/src/components/Navbar/Navbar.scss @@ -6,12 +6,12 @@ margin-left: 15px; } - .nav-item { - text-decoration: none; - margin: 0 16px 0 16px; - color: #5f5f5f; - font-size: 14px; - } + // .nav-item { + // text-decoration: none; + // margin: 0 16px 0 16px; + // color: #5f5f5f; + // font-size: 14px; + // } #nav-title { flex-grow: 1; @@ -20,20 +20,4 @@ color: black; } - .active { - font-weight: bolder; - color: black; - } - - .accountCircle { - fill: black; - font-size: 30px; - margin: 0 8px; - opacity: 0.4; - transition: all 0.2s; - cursor: pointer; - &:hover { - opacity: 0.8; - } - } } diff --git a/apps/frontend/src/components/Navbar/Navbar.style.ts b/apps/frontend/src/components/Navbar/Navbar.style.ts deleted file mode 100644 index 2391a835..00000000 --- a/apps/frontend/src/components/Navbar/Navbar.style.ts +++ /dev/null @@ -1,14 +0,0 @@ -import makeStyles from '@mui/styles/makeStyles' - -export const useStyles = makeStyles((theme: any) => ({ - appBar: { - zIndex: theme.zIndex.drawer + 1, - boxShadow: '0px 0px 4px 0 rgba(0,0,0,0.25)', - }, - toolBar: { - minHeight: '48px', - }, - navTitle: { - fontWeight: 'bold', - }, -})) diff --git a/apps/frontend/src/components/Navbar/Navbar.tsx b/apps/frontend/src/components/Navbar/Navbar.tsx index acdd3a78..3375f56e 100644 --- a/apps/frontend/src/components/Navbar/Navbar.tsx +++ b/apps/frontend/src/components/Navbar/Navbar.tsx @@ -12,16 +12,69 @@ import { useTranslations } from '../../hooks/useTranslations' import { Context } from '../../store/Store' import { Routes } from '../../utils/constants' import AccountDropdown from '../AccountDropdown/AccountDropdown' -import { useStyles } from './Navbar.style' +import { styled } from '@mui/material' export interface NavbarProps { username: string userEmail: string } +const StyledAppBar = styled(AppBar)(({ theme }) => ({ + zIndex: theme.zIndex.drawer + 1, + boxShadow: '0px 0px 4px 0 rgba(0,0,0,0.25)', +})) + +const StyledToolbar = styled(Toolbar)` + min-height: '48px', + background-color: white, + font-family: 'Roboto', sans-serif; + + .logo-ar { + margin-left: 15px; + } + + #nav-title { + flex-grow: 1; + margin: 0 10px 0 10px; + font-size: 18px; + color: black; + } + + .active { + font-weight: bolder; + color: black; + } + + .accountCircle { + fill: black; + font-size: 30px; + margin: 0 8px; + opacity: 0.4; + transition: all 0.2s; + cursor: pointer; + &:hover { + opacity: 0.8; + } + } +` + +const NavItem = styled(Link)({ + textDecoration: 'none', + margin: '0 16px 0 16px', + color: "#5f5f5f", + fontSize: 14, +}) + +const NavTitle = styled(Link)(({ theme }) => ({ + fontWeight: 'bold', + textDecoration: "none", + margin: "0 16px 0 16px", + color: "#5f5f5f", + fontSize: 14, +})) + const Navbar = ({ username, userEmail }: NavbarProps) => { const state = useContext(Context)[0] - const classes = useStyles() const [translations, selectedLang] = useTranslations() const [activeRoute, setActiveRoute] = useState(window.location.pathname) const [anchorEl, setAnchorEl] = useState>(null) @@ -40,14 +93,14 @@ const Navbar = ({ username, userEmail }: NavbarProps) => { const activeClass = activeRoute === route ? 'active' : '' return ( - setActiveRoute(route)} + className={activeClass} to={`${route}`} > {text} - + ) } @@ -72,9 +125,9 @@ const Navbar = ({ username, userEmail }: NavbarProps) => { } return ( -
- - + //
+ + Logo { src={Logo} /> - setActiveRoute(Routes.DASHBOARD)} id="nav-title" - className={`${classes.navTitle} nav-item`} to={Routes.DASHBOARD} > {translations.components.navbar.dashboard.navTitle} - + {renderLinks()} @@ -105,9 +157,9 @@ const Navbar = ({ username, userEmail }: NavbarProps) => { username={username} userEmail={userEmail} /> - - -
+ + + //
) } diff --git a/apps/frontend/src/components/Sidebar/Sidebar.tsx b/apps/frontend/src/components/Sidebar/Sidebar.tsx index 1c36bf40..635f643e 100644 --- a/apps/frontend/src/components/Sidebar/Sidebar.tsx +++ b/apps/frontend/src/components/Sidebar/Sidebar.tsx @@ -5,15 +5,13 @@ import AppBar from '@mui/material/AppBar' import Button from '@mui/material/Button' import Drawer from '@mui/material/Drawer' import Toolbar from '@mui/material/Toolbar' -import makeStyles from '@mui/styles/makeStyles' import { useTranslations } from '../../hooks/useTranslations' import { LANGUAGES } from '../../utils/constants' +import { styled } from '@mui/material' -const useStyles = makeStyles({ - paper: { - background: '#dddef2', - }, +const StyledDrawer = styled(Drawer)({ + background: '#dddef2', }) export interface SidebarProps { @@ -38,7 +36,6 @@ const Sidebar = ({ selectedStep, }: SidebarProps) => { const selectedLang = useTranslations()[1] - const styles = useStyles() function onButtonClick(stepKey: string) { onClick(stepKey) @@ -110,10 +107,9 @@ const Sidebar = ({ }) return ( -
{generateButtons()}
{generateBottomButton()} - + ) } diff --git a/apps/frontend/src/components/SimpleTable/SimpleTable.style.ts b/apps/frontend/src/components/SimpleTable/SimpleTable.style.ts index bd10849d..265edf06 100644 --- a/apps/frontend/src/components/SimpleTable/SimpleTable.style.ts +++ b/apps/frontend/src/components/SimpleTable/SimpleTable.style.ts @@ -1,18 +1,18 @@ +import { styled } from '@mui/material' import TableCell from '@mui/material/TableCell' import TableRow from '@mui/material/TableRow' -import withStyles from '@mui/styles/withStyles' -export const StyledTableCell = withStyles((theme) => ({ +export const StyledTableCell = styled(TableCell)(({ theme }) => ({ head: { backgroundColor: theme.palette.common.white, color: theme.palette.common.black, }, -}))(TableCell) +})) -export const StyledTableRow = withStyles(() => ({ +export const StyledTableRow = styled(TableRow)(() => ({ root: { '&:hover': { backgroundColor: '#f0f0f0', }, }, -}))(TableRow) +})) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b76d9031..b6cae0ef 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -153,24 +153,12 @@ importers: '@3dp4me/types': specifier: workspace:* version: link:../../packages/types - '@emotion/styled': - specifier: ^11.14.0 - version: 11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1) - '@material/tabs': - specifier: ^2.3.0 - version: 2.3.0 '@mui/icons-material': specifier: ^6.4.5 version: 6.4.5(@mui/material@6.4.5(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.18)(react@18.3.1) - '@mui/lab': - specifier: 6.0.0-beta.28 - version: 6.0.0-beta.28(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@mui/material@6.4.5(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/material': specifier: ^6.4.5 version: 6.4.5(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@mui/styles': - specifier: ^6.4.5 - version: 6.4.5(@types/react@18.3.18)(react@18.3.1) '@sweetalert/with-react': specifier: ^0.1.1 version: 0.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sweetalert@2.1.2) @@ -2041,21 +2029,6 @@ packages: '@fast-csv/parse@4.3.6': resolution: {integrity: sha512-uRsLYksqpbDmWaSmzvJcuApSEe38+6NQZBUsuAyMZKqHxH0g1wcJgsKUvN3WC8tewaqFjBMMGrkHmC+T7k8LvA==} - '@floating-ui/core@1.6.9': - resolution: {integrity: sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==} - - '@floating-ui/dom@1.6.13': - resolution: {integrity: sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==} - - '@floating-ui/react-dom@2.1.2': - resolution: {integrity: sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==} - peerDependencies: - react: '>=16.8.0' - react-dom: '>=16.8.0' - - '@floating-ui/utils@0.2.9': - resolution: {integrity: sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==} - '@humanwhocodes/config-array@0.13.0': resolution: {integrity: sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==} engines: {node: '>=10.10.0'} @@ -2216,48 +2189,9 @@ packages: '@manypkg/get-packages@1.1.3': resolution: {integrity: sha512-fo+QhuU3qE/2TQMQmbVMqaQ6EWbMhi4ABWP+O4AM1NqPBuy0OrApV5LO6BrrgnhtAHS2NH6RrVk9OL181tTi8A==} - '@material/animation@1.0.0': - resolution: {integrity: sha512-Ed5/vggn6ZhSJ87yn3ZS1d826VJNFz73jHF2bSsgRtHDoB8KCuOwQMfdgAgDa4lKDF6CDIPCKBZPKrs2ubehdw==} - - '@material/base@1.0.0': - resolution: {integrity: sha512-5dxFp46x5FA+Epg6YHLzN+5zRt9S2wR84UdvVAEJ1egea94m9UHUg7y9tAnNSN16aexRSywmzyLwPr+i8PGEYA==} - - '@material/dom@1.1.0': - resolution: {integrity: sha512-+HWW38ZaM2UBPu4+7QCusLDSf4tFT31rsEXHkTkxYSg/QpDivfPx6YDz4OmYtafmhPR1d1YjqB3MYysUHdodyw==} - - '@material/feature-targeting@0.44.1': - resolution: {integrity: sha512-90cc7njn4aHbH9UxY8qgZth1W5JgOgcEdWdubH1t7sFkwqFxS5g3zgxSBt46TygFBVIXNZNq35Xmg80wgqO7Pg==} - - '@material/ripple@2.3.0': - resolution: {integrity: sha512-ejXR0nstERofFhssRyFlwOLgebwm2uGbarHtWZ2/+7QY2Th/Z1wOqNb2h/WRoShsJXK11RUsochb6BJrg30u7w==} - - '@material/rtl@0.42.0': - resolution: {integrity: sha512-VrnrKJzhmspsN8WXHuxxBZ69yM5IwhCUqWr1t1eNfw3ZEvEj7i1g3P31HGowKThIN1dc1Wh4LE14rCISWCtv5w==} - - '@material/tabs@2.3.0': - resolution: {integrity: sha512-EeLy/w8foV3+NT1K0hb86CZk+Z4zatamfDUQICYyNeEDSytq4INaMwzw0n2By1Zy0mM4e0fRrnSeSgznyXqRdg==} - - '@material/theme@1.1.0': - resolution: {integrity: sha512-YYUV9Rhbx4r/EMb/zoOYJUWjhXChNaLlH1rqt3vpNVyxRcxGqoVMGp5u1XALBCFiD9dACPKLIkKyRYa928nmPQ==} - - '@material/typography@2.3.0': - resolution: {integrity: sha512-NtWVVvwG9Te6/kuIl4fEwDcXGCS7mfPgo5CKPyxcK6y0hJHv6yRHpipJT9D4ZlXw0sQx9B33doOK7iYJtwBBZw==} - '@mongodb-js/saslprep@1.1.9': resolution: {integrity: sha512-tVkljjeEaAhCqTzajSdgbQ6gE6f3oneVwa3iXR6csiEwXXOFsiC6Uh9iAjAhXPtqa/XMDHWjjeNH/77m/Yq2dw==} - '@mui/base@5.0.0-beta.69': - resolution: {integrity: sha512-r2YyGUXpZxj8rLAlbjp1x2BnMERTZ/dMqd9cClKj2OJ7ALAuiv/9X5E9eHfRc9o/dGRuLSMq/WTjREktJVjxVA==} - engines: {node: '>=14.0.0'} - deprecated: This package has been replaced by @base-ui-components/react - peerDependencies: - '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0 - react: ^17.0.0 || ^18.0.0 || ^19.0.0 - react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0 - peerDependenciesMeta: - '@types/react': - optional: true - '@mui/core-downloads-tracker@6.4.5': resolution: {integrity: sha512-zoXvHU1YuoodgMlPS+epP084Pqv9V+Vg+5IGv9n/7IIFVQ2nkTngYHYxElCq8pdTTbDcgji+nNh0lxri2abWgA==} @@ -2272,27 +2206,6 @@ packages: '@types/react': optional: true - '@mui/lab@6.0.0-beta.28': - resolution: {integrity: sha512-7d/nG5L3IXcdlgGvOcVwOZIQCHxjQOVVEGOtk0t0XSCQnS5zgQ5/KeKE/brWYdxA6ybSm3vp1sfBGq4AeqMCKA==} - engines: {node: '>=14.0.0'} - peerDependencies: - '@emotion/react': ^11.5.0 - '@emotion/styled': ^11.3.0 - '@mui/material': ^6.4.5 - '@mui/material-pigment-css': ^6.4.3 - '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0 - react: ^17.0.0 || ^18.0.0 || ^19.0.0 - react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0 - peerDependenciesMeta: - '@emotion/react': - optional: true - '@emotion/styled': - optional: true - '@mui/material-pigment-css': - optional: true - '@types/react': - optional: true - '@mui/material@6.4.5': resolution: {integrity: sha512-5eyEgSXocIeV1JkXs8mYyJXU0aFyXZIWI5kq2g/mCnIgJe594lkOBNAKnCIaGVfQTu2T6TTEHF8/hHIqpiIRGA==} engines: {node: '>=14.0.0'} @@ -2313,8 +2226,8 @@ packages: '@types/react': optional: true - '@mui/private-theming@6.4.3': - resolution: {integrity: sha512-7x9HaNwDCeoERc4BoEWLieuzKzXu5ZrhRnEM6AUcRXUScQLvF1NFkTlP59+IJfTbEMgcGg1wWHApyoqcksrBpQ==} + '@mui/private-theming@6.4.6': + resolution: {integrity: sha512-T5FxdPzCELuOrhpA2g4Pi6241HAxRwZudzAuL9vBvniuB5YU82HCmrARw32AuCiyTfWzbrYGGpZ4zyeqqp9RvQ==} engines: {node: '>=14.0.0'} peerDependencies: '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0 @@ -2323,8 +2236,8 @@ packages: '@types/react': optional: true - '@mui/styled-engine@6.4.3': - resolution: {integrity: sha512-OC402VfK+ra2+f12Gef8maY7Y9n7B6CZcoQ9u7mIkh/7PKwW/xH81xwX+yW+Ak1zBT3HYcVjh2X82k5cKMFGoQ==} + '@mui/styled-engine@6.4.6': + resolution: {integrity: sha512-vSWYc9ZLX46be5gP+FCzWVn5rvDr4cXC5JBZwSIkYk9xbC7GeV+0kCvB8Q6XLFQJy+a62bbqtmdwS4Ghi9NBlQ==} engines: {node: '>=14.0.0'} peerDependencies: '@emotion/react': ^11.4.1 @@ -2336,18 +2249,8 @@ packages: '@emotion/styled': optional: true - '@mui/styles@6.4.5': - resolution: {integrity: sha512-F3cztqs/oeFC4FcdbIccBBeABLfcqD7ejQLf2Lh3YkJJ6dMKbyw8LUcV6p+D6ggQuOqKXnJbfg0F4BaEPMe1xw==} - engines: {node: '>=14.0.0'} - peerDependencies: - '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0 - react: ^17.0.0 || ^18.0.0 || ^19.0.0 - peerDependenciesMeta: - '@types/react': - optional: true - - '@mui/system@6.4.3': - resolution: {integrity: sha512-Q0iDwnH3+xoxQ0pqVbt8hFdzhq1g2XzzR4Y5pVcICTNtoCLJmpJS3vI4y/OIM1FHFmpfmiEC2IRIq7YcZ8nsmg==} + '@mui/system@6.4.6': + resolution: {integrity: sha512-FQjWwPec7pMTtB/jw5f9eyLynKFZ6/Ej9vhm5kGdtmts1z5b7Vyn3Rz6kasfYm1j2TfrfGnSXRvvtwVWxjpz6g==} engines: {node: '>=14.0.0'} peerDependencies: '@emotion/react': ^11.5.0 @@ -2380,6 +2283,16 @@ packages: '@types/react': optional: true + '@mui/utils@6.4.6': + resolution: {integrity: sha512-43nZeE1pJF2anGafNydUcYFPtHwAqiBiauRtaMvurdrZI3YrUjHkAu43RBsxef7OFtJMXGiHFvq43kb7lig0sA==} + engines: {node: '>=14.0.0'} + peerDependencies: + '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0 + react: ^17.0.0 || ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1': resolution: {integrity: sha512-54/JRvkLIzzDWshCWfuhadfrfZVPiElY8Fcgmg1HroEly/EDSszzhBAsarCux+D/kOslTRquNzuyGSmUSTTHGg==} @@ -4631,9 +4544,6 @@ packages: resolution: {integrity: sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==} engines: {node: '>=8.0.0'} - css-vendor@2.0.8: - resolution: {integrity: sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==} - css-what@3.4.2: resolution: {integrity: sha512-ACUm3L0/jiZTqfzRM3Hi9Q8eZqd6IK37mMWPLz9PJxkLWllYeRf+EHUSHYEtFop2Eqytaq1FizFVh7XfBnXCDQ==} engines: {node: '>= 6'} @@ -6104,9 +6014,6 @@ packages: resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==} engines: {node: '>=10.17.0'} - hyphenate-style-name@1.1.0: - resolution: {integrity: sha512-WDC/ui2VVRrz3jOVi+XtjqkDjiVjTtFaAGiW37k6b+ohyQ5wYDOGkvCZa8+H0nx3gyvv0+BST9xuOgIyGQ00gw==} - iconv-lite@0.4.24: resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==} engines: {node: '>=0.10.0'} @@ -6366,9 +6273,6 @@ packages: resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==} engines: {node: '>=0.10.0'} - is-in-browser@1.1.3: - resolution: {integrity: sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g==} - is-interactive@2.0.0: resolution: {integrity: sha512-qP1vozQRI+BMOPcjFzrjXuQvdak2pHNUMZoeG2eRbiSqyvbEf/wQtEOTOX1guk6E3t36RkaqiSt8A/6YElNxLQ==} engines: {node: '>=12'} @@ -6928,30 +6832,6 @@ packages: resolution: {integrity: sha512-XjwVfRS6jTMsqYs0EsuJ4LGxXV14zQybNd4L2r0UvbVnSF9Af8x7p5MzbJ90Ioz/9TI41/hTCvznF/loiSzn8w==} engines: {node: '>=4', npm: '>=1.4.28'} - jss-plugin-camel-case@10.10.0: - resolution: {integrity: sha512-z+HETfj5IYgFxh1wJnUAU8jByI48ED+v0fuTuhKrPR+pRBYS2EDwbusU8aFOpCdYhtRc9zhN+PJ7iNE8pAWyPw==} - - jss-plugin-default-unit@10.10.0: - resolution: {integrity: sha512-SvpajxIECi4JDUbGLefvNckmI+c2VWmP43qnEy/0eiwzRUsafg5DVSIWSzZe4d2vFX1u9nRDP46WCFV/PXVBGQ==} - - jss-plugin-global@10.10.0: - resolution: {integrity: sha512-icXEYbMufiNuWfuazLeN+BNJO16Ge88OcXU5ZDC2vLqElmMybA31Wi7lZ3lf+vgufRocvPj8443irhYRgWxP+A==} - - jss-plugin-nested@10.10.0: - resolution: {integrity: sha512-9R4JHxxGgiZhurDo3q7LdIiDEgtA1bTGzAbhSPyIOWb7ZubrjQe8acwhEQ6OEKydzpl8XHMtTnEwHXCARLYqYA==} - - jss-plugin-props-sort@10.10.0: - resolution: {integrity: sha512-5VNJvQJbnq/vRfje6uZLe/FyaOpzP/IH1LP+0fr88QamVrGJa0hpRRyAa0ea4U/3LcorJfBFVyC4yN2QC73lJg==} - - jss-plugin-rule-value-function@10.10.0: - resolution: {integrity: sha512-uEFJFgaCtkXeIPgki8ICw3Y7VMkL9GEan6SqmT9tqpwM+/t+hxfMUdU4wQ0MtOiMNWhwnckBV0IebrKcZM9C0g==} - - jss-plugin-vendor-prefixer@10.10.0: - resolution: {integrity: sha512-UY/41WumgjW8r1qMCO8l1ARg7NHnfRVWRhZ2E2m0DMYsr2DD91qIXLyNhiX83hHswR7Wm4D+oDYNC1zWCJWtqg==} - - jss@10.10.0: - resolution: {integrity: sha512-cqsOTS7jqPsPMjtKYDUpdFC0AbhYFLTcuGRqymgmdJIeQ8cH7+AgX7YSgQy79wXloZq2VvATYxUOUQEvS1V/Zw==} - jsx-ast-utils@3.3.5: resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==} engines: {node: '>=4.0'} @@ -13513,6 +13393,7 @@ snapshots: stylis: 4.2.0 transitivePeerDependencies: - supports-color + optional: true '@emotion/cache@11.14.0': dependencies: @@ -13531,6 +13412,7 @@ snapshots: '@emotion/is-prop-valid@1.3.1': dependencies: '@emotion/memoize': 0.9.0 + optional: true '@emotion/memoize@0.8.1': {} @@ -13551,6 +13433,7 @@ snapshots: '@types/react': 18.3.18 transitivePeerDependencies: - supports-color + optional: true '@emotion/serialize@1.3.3': dependencies: @@ -13576,6 +13459,7 @@ snapshots: '@types/react': 18.3.18 transitivePeerDependencies: - supports-color + optional: true '@emotion/unitless@0.10.0': {} @@ -13584,6 +13468,7 @@ snapshots: '@emotion/use-insertion-effect-with-fallbacks@1.2.0(react@18.3.1)': dependencies: react: 18.3.1 + optional: true '@emotion/utils@1.4.2': {} @@ -13631,23 +13516,6 @@ snapshots: lodash.isundefined: 3.0.1 lodash.uniq: 4.5.0 - '@floating-ui/core@1.6.9': - dependencies: - '@floating-ui/utils': 0.2.9 - - '@floating-ui/dom@1.6.13': - dependencies: - '@floating-ui/core': 1.6.9 - '@floating-ui/utils': 0.2.9 - - '@floating-ui/react-dom@2.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': - dependencies: - '@floating-ui/dom': 1.6.13 - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) - - '@floating-ui/utils@0.2.9': {} - '@humanwhocodes/config-array@0.13.0': dependencies: '@humanwhocodes/object-schema': 2.0.3 @@ -13960,68 +13828,11 @@ snapshots: globby: 11.1.0 read-yaml-file: 1.1.0 - '@material/animation@1.0.0': - dependencies: - tslib: 1.14.1 - - '@material/base@1.0.0': - dependencies: - tslib: 1.14.1 - - '@material/dom@1.1.0': - dependencies: - tslib: 1.14.1 - - '@material/feature-targeting@0.44.1': {} - - '@material/ripple@2.3.0': - dependencies: - '@material/animation': 1.0.0 - '@material/base': 1.0.0 - '@material/dom': 1.1.0 - '@material/feature-targeting': 0.44.1 - '@material/theme': 1.1.0 - tslib: 1.14.1 - - '@material/rtl@0.42.0': {} - - '@material/tabs@2.3.0': - dependencies: - '@material/animation': 1.0.0 - '@material/base': 1.0.0 - '@material/ripple': 2.3.0 - '@material/rtl': 0.42.0 - '@material/theme': 1.1.0 - '@material/typography': 2.3.0 - tslib: 1.14.1 - - '@material/theme@1.1.0': - dependencies: - '@material/feature-targeting': 0.44.1 - - '@material/typography@2.3.0': - dependencies: - '@material/feature-targeting': 0.44.1 - '@mongodb-js/saslprep@1.1.9': dependencies: sparse-bitfield: 3.0.3 optional: true - '@mui/base@5.0.0-beta.69(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': - dependencies: - '@babel/runtime': 7.26.7 - '@floating-ui/react-dom': 2.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@mui/types': 7.2.21(@types/react@18.3.18) - '@mui/utils': 6.4.3(@types/react@18.3.18)(react@18.3.1) - '@popperjs/core': 2.11.8 - clsx: 2.1.1 - prop-types: 15.8.1 - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) - optionalDependencies: - '@types/react': 18.3.18 - '@mui/core-downloads-tracker@6.4.5': {} '@mui/icons-material@6.4.5(@mui/material@6.4.5(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)': @@ -14032,28 +13843,11 @@ snapshots: optionalDependencies: '@types/react': 18.3.18 - '@mui/lab@6.0.0-beta.28(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@mui/material@6.4.5(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': - dependencies: - '@babel/runtime': 7.26.7 - '@mui/base': 5.0.0-beta.69(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@mui/material': 6.4.5(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@mui/system': 6.4.3(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1) - '@mui/types': 7.2.21(@types/react@18.3.18) - '@mui/utils': 6.4.3(@types/react@18.3.18)(react@18.3.1) - clsx: 2.1.1 - prop-types: 15.8.1 - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) - optionalDependencies: - '@emotion/react': 11.14.0(@types/react@18.3.18)(react@18.3.1) - '@emotion/styled': 11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1) - '@types/react': 18.3.18 - '@mui/material@6.4.5(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.26.7 '@mui/core-downloads-tracker': 6.4.5 - '@mui/system': 6.4.3(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1) + '@mui/system': 6.4.6(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1) '@mui/types': 7.2.21(@types/react@18.3.18) '@mui/utils': 6.4.3(@types/react@18.3.18)(react@18.3.1) '@popperjs/core': 2.11.8 @@ -14070,16 +13864,16 @@ snapshots: '@emotion/styled': 11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1) '@types/react': 18.3.18 - '@mui/private-theming@6.4.3(@types/react@18.3.18)(react@18.3.1)': + '@mui/private-theming@6.4.6(@types/react@18.3.18)(react@18.3.1)': dependencies: '@babel/runtime': 7.26.7 - '@mui/utils': 6.4.3(@types/react@18.3.18)(react@18.3.1) + '@mui/utils': 6.4.6(@types/react@18.3.18)(react@18.3.1) prop-types: 15.8.1 react: 18.3.1 optionalDependencies: '@types/react': 18.3.18 - '@mui/styled-engine@6.4.3(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(react@18.3.1)': + '@mui/styled-engine@6.4.6(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.26.7 '@emotion/cache': 11.14.0 @@ -14092,50 +13886,39 @@ snapshots: '@emotion/react': 11.14.0(@types/react@18.3.18)(react@18.3.1) '@emotion/styled': 11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1) - '@mui/styles@6.4.5(@types/react@18.3.18)(react@18.3.1)': + '@mui/system@6.4.6(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)': dependencies: '@babel/runtime': 7.26.7 - '@emotion/hash': 0.9.2 - '@mui/private-theming': 6.4.3(@types/react@18.3.18)(react@18.3.1) + '@mui/private-theming': 6.4.6(@types/react@18.3.18)(react@18.3.1) + '@mui/styled-engine': 6.4.6(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(react@18.3.1) '@mui/types': 7.2.21(@types/react@18.3.18) - '@mui/utils': 6.4.3(@types/react@18.3.18)(react@18.3.1) + '@mui/utils': 6.4.6(@types/react@18.3.18)(react@18.3.1) clsx: 2.1.1 csstype: 3.1.3 - hoist-non-react-statics: 3.3.2 - jss: 10.10.0 - jss-plugin-camel-case: 10.10.0 - jss-plugin-default-unit: 10.10.0 - jss-plugin-global: 10.10.0 - jss-plugin-nested: 10.10.0 - jss-plugin-props-sort: 10.10.0 - jss-plugin-rule-value-function: 10.10.0 - jss-plugin-vendor-prefixer: 10.10.0 prop-types: 15.8.1 react: 18.3.1 + optionalDependencies: + '@emotion/react': 11.14.0(@types/react@18.3.18)(react@18.3.1) + '@emotion/styled': 11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1) + '@types/react': 18.3.18 + + '@mui/types@7.2.21(@types/react@18.3.18)': optionalDependencies: '@types/react': 18.3.18 - '@mui/system@6.4.3(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)': + '@mui/utils@6.4.3(@types/react@18.3.18)(react@18.3.1)': dependencies: '@babel/runtime': 7.26.7 - '@mui/private-theming': 6.4.3(@types/react@18.3.18)(react@18.3.1) - '@mui/styled-engine': 6.4.3(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(react@18.3.1) '@mui/types': 7.2.21(@types/react@18.3.18) - '@mui/utils': 6.4.3(@types/react@18.3.18)(react@18.3.1) + '@types/prop-types': 15.7.14 clsx: 2.1.1 - csstype: 3.1.3 prop-types: 15.8.1 react: 18.3.1 - optionalDependencies: - '@emotion/react': 11.14.0(@types/react@18.3.18)(react@18.3.1) - '@emotion/styled': 11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1) - '@types/react': 18.3.18 - - '@mui/types@7.2.21(@types/react@18.3.18)': + react-is: 19.0.0 optionalDependencies: '@types/react': 18.3.18 - '@mui/utils@6.4.3(@types/react@18.3.18)(react@18.3.1)': + '@mui/utils@6.4.6(@types/react@18.3.18)(react@18.3.1)': dependencies: '@babel/runtime': 7.26.7 '@mui/types': 7.2.21(@types/react@18.3.18) @@ -16858,11 +16641,6 @@ snapshots: mdn-data: 2.0.14 source-map: 0.6.1 - css-vendor@2.0.8: - dependencies: - '@babel/runtime': 7.26.7 - is-in-browser: 1.1.3 - css-what@3.4.2: {} css-what@6.1.0: {} @@ -18124,7 +17902,8 @@ snapshots: common-path-prefix: 3.0.0 pkg-dir: 7.0.0 - find-root@1.1.0: {} + find-root@1.1.0: + optional: true find-up@1.1.2: dependencies: @@ -18716,8 +18495,6 @@ snapshots: human-signals@2.1.0: {} - hyphenate-style-name@1.1.0: {} - iconv-lite@0.4.24: dependencies: safer-buffer: 2.1.2 @@ -18992,8 +18769,6 @@ snapshots: dependencies: is-extglob: 2.1.1 - is-in-browser@1.1.3: {} - is-interactive@2.0.0: {} is-jpg@2.0.0: @@ -19866,52 +19641,6 @@ snapshots: ms: 2.1.3 semver: 5.7.2 - jss-plugin-camel-case@10.10.0: - dependencies: - '@babel/runtime': 7.26.7 - hyphenate-style-name: 1.1.0 - jss: 10.10.0 - - jss-plugin-default-unit@10.10.0: - dependencies: - '@babel/runtime': 7.26.7 - jss: 10.10.0 - - jss-plugin-global@10.10.0: - dependencies: - '@babel/runtime': 7.26.7 - jss: 10.10.0 - - jss-plugin-nested@10.10.0: - dependencies: - '@babel/runtime': 7.26.7 - jss: 10.10.0 - tiny-warning: 1.0.3 - - jss-plugin-props-sort@10.10.0: - dependencies: - '@babel/runtime': 7.26.7 - jss: 10.10.0 - - jss-plugin-rule-value-function@10.10.0: - dependencies: - '@babel/runtime': 7.26.7 - jss: 10.10.0 - tiny-warning: 1.0.3 - - jss-plugin-vendor-prefixer@10.10.0: - dependencies: - '@babel/runtime': 7.26.7 - css-vendor: 2.0.8 - jss: 10.10.0 - - jss@10.10.0: - dependencies: - '@babel/runtime': 7.26.7 - csstype: 3.1.3 - is-in-browser: 1.1.3 - tiny-warning: 1.0.3 - jsx-ast-utils@3.3.5: dependencies: array-includes: 3.1.8 From a5b00bf87d9b2bdca87bac795eda3c0403b54531 Mon Sep 17 00:00:00 2001 From: Matthew Walowski Date: Thu, 27 Feb 2025 18:46:46 -0600 Subject: [PATCH 09/21] increase nav height --- apps/frontend/declaration.d.ts | 15 ++++++++++- apps/frontend/src/AppContent.tsx | 6 ++++- .../AccountDropdown/AccountDropdown.tsx | 25 ++++++++++--------- .../frontend/src/components/Navbar/Navbar.tsx | 16 ++++++------ .../ToggleButtons/ToggleButtons.scss | 2 +- .../src/pages/Dashboard/Dashboard.scss | 4 --- .../pages/PatientDetail/PatientDetail.scss | 1 - apps/frontend/src/pages/Patients/Patients.tsx | 2 +- apps/frontend/src/styles/variables.scss | 2 +- 9 files changed, 42 insertions(+), 31 deletions(-) diff --git a/apps/frontend/declaration.d.ts b/apps/frontend/declaration.d.ts index a75e93ab..16a79d90 100644 --- a/apps/frontend/declaration.d.ts +++ b/apps/frontend/declaration.d.ts @@ -1,6 +1,19 @@ +import { PaletteColorOptions, PaletteOptions } from '@mui/material/styles'; declare module 'react-map-gl-geocoder'; declare module 'mic-recorder-to-mp3'; interface Window { webkitAudioContext: typeof AudioContext -} \ No newline at end of file +} + +declare module '@mui/material/styles' { + interface PaletteOptions { + paper?: PaletteColorOptions + } + // allow configuration using `createTheme()` + // interface ThemeOptions { + // status?: { + // danger?: string; + // }; + // } + } diff --git a/apps/frontend/src/AppContent.tsx b/apps/frontend/src/AppContent.tsx index 7b18ab6c..4e2f60f1 100644 --- a/apps/frontend/src/AppContent.tsx +++ b/apps/frontend/src/AppContent.tsx @@ -43,9 +43,13 @@ const theme: ThemeOptions = { secondary: { main: "#dedffb", }, + paper: { + main: "#ffffff", + } }, typography: { - fontSize: 15 + // fontSize: 25, + fontFamily: 'Roboto, sans-serif', } } diff --git a/apps/frontend/src/components/AccountDropdown/AccountDropdown.tsx b/apps/frontend/src/components/AccountDropdown/AccountDropdown.tsx index 7117a5c1..4a93650e 100644 --- a/apps/frontend/src/components/AccountDropdown/AccountDropdown.tsx +++ b/apps/frontend/src/components/AccountDropdown/AccountDropdown.tsx @@ -26,20 +26,21 @@ export interface AccountDropdownProps { | undefined } -const MenuWrapper = styled('div')` - margin: '10px'; - width: 'fit-content'; - display: 'block'; -` +const MenuWrapper = styled('div')({ + margin: '10px', + width: 'fit-content', + display: 'block', +}) -const AccountEmail = styled('p')` - color: 'grey'; - lineHeight: '0px'; -` +const AccountEmail = styled('p')({ + color: 'grey', + lineHeight: '0px', +}) -const LanguageSelector = styled(Select)` - height: '50px'; -` + +const LanguageSelector = styled(Select)({ + height: 50 +}) const SignoutButton = styled(Button)` height: '38px'; diff --git a/apps/frontend/src/components/Navbar/Navbar.tsx b/apps/frontend/src/components/Navbar/Navbar.tsx index 3375f56e..f5e546f7 100644 --- a/apps/frontend/src/components/Navbar/Navbar.tsx +++ b/apps/frontend/src/components/Navbar/Navbar.tsx @@ -13,6 +13,7 @@ import { Context } from '../../store/Store' import { Routes } from '../../utils/constants' import AccountDropdown from '../AccountDropdown/AccountDropdown' import { styled } from '@mui/material' +import { orange } from '@mui/material/colors' export interface NavbarProps { username: string @@ -21,13 +22,12 @@ export interface NavbarProps { const StyledAppBar = styled(AppBar)(({ theme }) => ({ zIndex: theme.zIndex.drawer + 1, - boxShadow: '0px 0px 4px 0 rgba(0,0,0,0.25)', })) const StyledToolbar = styled(Toolbar)` - min-height: '48px', - background-color: white, + background-color: white; font-family: 'Roboto', sans-serif; + font-size: 17px; .logo-ar { margin-left: 15px; @@ -61,16 +61,16 @@ const StyledToolbar = styled(Toolbar)` const NavItem = styled(Link)({ textDecoration: 'none', margin: '0 16px 0 16px', + fontSize: '1.2rem', color: "#5f5f5f", - fontSize: 14, }) const NavTitle = styled(Link)(({ theme }) => ({ fontWeight: 'bold', + fontSize: '1.6rem', textDecoration: "none", margin: "0 16px 0 16px", color: "#5f5f5f", - fontSize: 14, })) const Navbar = ({ username, userEmail }: NavbarProps) => { @@ -125,13 +125,12 @@ const Navbar = ({ username, userEmail }: NavbarProps) => { } return ( - //
- + Logo @@ -159,7 +158,6 @@ const Navbar = ({ username, userEmail }: NavbarProps) => { /> - //
) } diff --git a/apps/frontend/src/components/ToggleButtons/ToggleButtons.scss b/apps/frontend/src/components/ToggleButtons/ToggleButtons.scss index f41f4084..49c5cbbf 100644 --- a/apps/frontend/src/components/ToggleButtons/ToggleButtons.scss +++ b/apps/frontend/src/components/ToggleButtons/ToggleButtons.scss @@ -6,7 +6,7 @@ overflow-x: auto; display: flex; width: 100%; - height: $buttonGroupHeight; + // height: $buttonGroupHeight; background-color: $controllerGrey; text-transform: uppercase; justify-content: flex-start; diff --git a/apps/frontend/src/pages/Dashboard/Dashboard.scss b/apps/frontend/src/pages/Dashboard/Dashboard.scss index 9db921d6..326dbadf 100644 --- a/apps/frontend/src/pages/Dashboard/Dashboard.scss +++ b/apps/frontend/src/pages/Dashboard/Dashboard.scss @@ -90,7 +90,3 @@ .button { background: $downloadButton; } - -.dashboard { - margin-top: $navHeight; -} diff --git a/apps/frontend/src/pages/PatientDetail/PatientDetail.scss b/apps/frontend/src/pages/PatientDetail/PatientDetail.scss index 561ebd02..324d23aa 100644 --- a/apps/frontend/src/pages/PatientDetail/PatientDetail.scss +++ b/apps/frontend/src/pages/PatientDetail/PatientDetail.scss @@ -8,7 +8,6 @@ .controller-content { width: 100%; height: 100%; - margin-top: $navHeight; &.controller-content-ar { margin-right: $drawerWidth; diff --git a/apps/frontend/src/pages/Patients/Patients.tsx b/apps/frontend/src/pages/Patients/Patients.tsx index e355a73c..74b54adc 100644 --- a/apps/frontend/src/pages/Patients/Patients.tsx +++ b/apps/frontend/src/pages/Patients/Patients.tsx @@ -53,7 +53,7 @@ const Patients = () => { } return ( -
+
Date: Thu, 27 Feb 2025 19:07:31 -0600 Subject: [PATCH 10/21] increase font sizes --- .../Fields/FieldGroup/FieldGroupTable.tsx | 2 +- .../components/SimpleTable/SimpleTable.scss | 16 +++++----------- .../SimpleTable/SimpleTable.style.ts | 18 +++++++----------- .../src/components/SimpleTable/SimpleTable.tsx | 2 +- apps/frontend/src/utils/table-renderers.tsx | 15 ++++++++------- 5 files changed, 22 insertions(+), 31 deletions(-) diff --git a/apps/frontend/src/components/Fields/FieldGroup/FieldGroupTable.tsx b/apps/frontend/src/components/Fields/FieldGroup/FieldGroupTable.tsx index 57d78a14..140e3744 100644 --- a/apps/frontend/src/components/Fields/FieldGroup/FieldGroupTable.tsx +++ b/apps/frontend/src/components/Fields/FieldGroup/FieldGroupTable.tsx @@ -137,7 +137,7 @@ const FieldGroupTable = ({ if ((itemData as any) === RENDER_PLUS_ICON) { const numCols = (metadata?.subFields?.length || 1) + 1 return ( - + ) diff --git a/apps/frontend/src/components/SimpleTable/SimpleTable.scss b/apps/frontend/src/components/SimpleTable/SimpleTable.scss index 80c6235d..b0818768 100644 --- a/apps/frontend/src/components/SimpleTable/SimpleTable.scss +++ b/apps/frontend/src/components/SimpleTable/SimpleTable.scss @@ -1,8 +1,7 @@ @import '../../styles/colors.scss'; -.table { +.table3dp4me { font-family: 'Ubuntu'; - // min-width: 700; .header { border-top: solid $navbar 1px; @@ -10,7 +9,7 @@ background-color: $sidebar; color: white; font-weight: bold; - font-size: 12px; + // font-size: 12px; text-transform: uppercase; &:hover { @@ -18,11 +17,6 @@ } } - .MuiTableCell-head { - padding-top: 6px; - padding-bottom: 6px; - } - .cell-right { padding-right: 2% !important; text-align: end; @@ -35,7 +29,7 @@ margin-right: 20%; align-items: center; color: $button; - font-size: 13px; + font-size: 1rem; font-weight: bolder; .view-icon { color: $button; @@ -48,7 +42,7 @@ } .cell { - font-size: 13px; + font-size: 1rem; padding-top: 3.85px; padding-bottom: 3.85px; padding-left: 20px; @@ -59,7 +53,7 @@ } .cell-rtl { - font-size: 13px; + font-size: 1rem; padding-top: 3.85px; padding-bottom: 3.85px; padding-right: 30px; diff --git a/apps/frontend/src/components/SimpleTable/SimpleTable.style.ts b/apps/frontend/src/components/SimpleTable/SimpleTable.style.ts index 265edf06..dea6a02a 100644 --- a/apps/frontend/src/components/SimpleTable/SimpleTable.style.ts +++ b/apps/frontend/src/components/SimpleTable/SimpleTable.style.ts @@ -3,16 +3,12 @@ import TableCell from '@mui/material/TableCell' import TableRow from '@mui/material/TableRow' export const StyledTableCell = styled(TableCell)(({ theme }) => ({ - head: { - backgroundColor: theme.palette.common.white, - color: theme.palette.common.black, - }, + backgroundColor: theme.palette.common.white, + color: theme.palette.common.black, })) -export const StyledTableRow = styled(TableRow)(() => ({ - root: { - '&:hover': { - backgroundColor: '#f0f0f0', - }, - }, -})) +export const StyledTableRow = styled(TableRow)` + '&:hover': { + backgroundColor: '#f0f0f0'; + } +` diff --git a/apps/frontend/src/components/SimpleTable/SimpleTable.tsx b/apps/frontend/src/components/SimpleTable/SimpleTable.tsx index 6a2b4e5c..5e6c86a9 100644 --- a/apps/frontend/src/components/SimpleTable/SimpleTable.tsx +++ b/apps/frontend/src/components/SimpleTable/SimpleTable.tsx @@ -87,7 +87,7 @@ const SimpleTable = >({ return (
- + {renderedHeaders} diff --git a/apps/frontend/src/utils/table-renderers.tsx b/apps/frontend/src/utils/table-renderers.tsx index bd79de09..f41dd61a 100644 --- a/apps/frontend/src/utils/table-renderers.tsx +++ b/apps/frontend/src/utils/table-renderers.tsx @@ -81,7 +81,7 @@ export const defaultTableRowRenderer = >( // Construct a cell for each piece of data const row = rowData.map(({ id, dataType }) => ( - + {getField(itemData, id, dataType, selectedLang)} )) @@ -95,7 +95,7 @@ export const defaultTableRowLoadingRenderer = (numCols: number, selectedLang: La for (let i = 0; i < numCols; i++) { row.push( - + ) @@ -138,9 +138,10 @@ export const defaultTableHeaderRenderer = >( const headerCells = headers.map((header) => ( onRequestSort(header.sortKey)} - className="header" key={header.title} align={cellAlign} + variant='head' + className='header' >
{header.title} @@ -176,7 +177,7 @@ export const patientTableRowRenderer = ( // Add a link to the patient's page row.push( - + status icon @@ -200,7 +201,7 @@ export const patientTableHeaderRenderer = >( selectedLang: Language ) => { const headerCells = defaultTableHeaderRenderer(headers, sortConfig, onRequestSort, selectedLang) - headerCells.push() + headerCells.push() return headerCells } @@ -225,7 +226,7 @@ export const generateSelectableRenderer = // Add the edit button row.push( - + onSelected(user)} size="large"> status icon view-icon {' '} @@ -245,6 +246,6 @@ export const userTableHeaderRenderer = >( selectedLang: Language ) => { const headerCells = defaultTableHeaderRenderer(headers, sortConfig, onRequestSort, selectedLang) - headerCells.push() + headerCells.push() return headerCells } From 930be6d96b3671c04e52ad2dd51494a8f9395071 Mon Sep 17 00:00:00 2001 From: Matthew Walowski Date: Thu, 27 Feb 2025 19:17:14 -0600 Subject: [PATCH 11/21] cleanup --- .../CreateFieldModal/CreateFieldModal.tsx | 2 +- .../src/components/Navbar/Navbar.scss | 23 ------------------- .../frontend/src/components/Navbar/Navbar.tsx | 12 ++++------ .../components/SimpleTable/SimpleTable.scss | 1 - 4 files changed, 6 insertions(+), 32 deletions(-) delete mode 100644 apps/frontend/src/components/Navbar/Navbar.scss diff --git a/apps/frontend/src/components/CreateFieldModal/CreateFieldModal.tsx b/apps/frontend/src/components/CreateFieldModal/CreateFieldModal.tsx index 9a5e9c1e..c4a9fb17 100644 --- a/apps/frontend/src/components/CreateFieldModal/CreateFieldModal.tsx +++ b/apps/frontend/src/components/CreateFieldModal/CreateFieldModal.tsx @@ -71,7 +71,7 @@ const CreateFieldModal = ({ border: '1px solid #ced4da', fontSize: 16, padding: '10px 26px 10px 12px', - // transition: theme?.transitions?.create(['border-color', 'box-shadow']), + transition: theme.transitions.create(['border-color', 'box-shadow']), // Use the system font instead of the default Roboto font. '&:focus': { borderRadius: 4, diff --git a/apps/frontend/src/components/Navbar/Navbar.scss b/apps/frontend/src/components/Navbar/Navbar.scss deleted file mode 100644 index c4367130..00000000 --- a/apps/frontend/src/components/Navbar/Navbar.scss +++ /dev/null @@ -1,23 +0,0 @@ -.navbar { - background-color: white; - font-family: 'Roboto', sans-serif; - - .logo-ar { - margin-left: 15px; - } - - // .nav-item { - // text-decoration: none; - // margin: 0 16px 0 16px; - // color: #5f5f5f; - // font-size: 14px; - // } - - #nav-title { - flex-grow: 1; - margin: 0 10px 0 10px; - font-size: 18px; - color: black; - } - -} diff --git a/apps/frontend/src/components/Navbar/Navbar.tsx b/apps/frontend/src/components/Navbar/Navbar.tsx index f5e546f7..fb1d63c9 100644 --- a/apps/frontend/src/components/Navbar/Navbar.tsx +++ b/apps/frontend/src/components/Navbar/Navbar.tsx @@ -1,5 +1,3 @@ -import './Navbar.scss' - import { Language, Nullish } from '@3dp4me/types' import AccountCircleIcon from '@mui/icons-material/AccountCircle' import AppBar from '@mui/material/AppBar' @@ -27,7 +25,7 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({ const StyledToolbar = styled(Toolbar)` background-color: white; font-family: 'Roboto', sans-serif; - font-size: 17px; + font-size: 47px; .logo-ar { margin-left: 15px; @@ -36,7 +34,7 @@ const StyledToolbar = styled(Toolbar)` #nav-title { flex-grow: 1; margin: 0 10px 0 10px; - font-size: 18px; + font-size: 14px; color: black; } @@ -61,13 +59,13 @@ const StyledToolbar = styled(Toolbar)` const NavItem = styled(Link)({ textDecoration: 'none', margin: '0 16px 0 16px', - fontSize: '1.2rem', + fontSize: '1rem', color: "#5f5f5f", }) const NavTitle = styled(Link)(({ theme }) => ({ fontWeight: 'bold', - fontSize: '1.6rem', + fontSize: '1rem', textDecoration: "none", margin: "0 16px 0 16px", color: "#5f5f5f", @@ -126,7 +124,7 @@ const Navbar = ({ username, userEmail }: NavbarProps) => { return ( - + Logo Date: Thu, 27 Feb 2025 19:19:56 -0600 Subject: [PATCH 12/21] fix type error for colors --- apps/frontend/declaration.d.ts | 12 ------------ apps/frontend/src/AppContent.tsx | 3 --- apps/frontend/src/components/Navbar/Navbar.tsx | 2 +- 3 files changed, 1 insertion(+), 16 deletions(-) diff --git a/apps/frontend/declaration.d.ts b/apps/frontend/declaration.d.ts index 16a79d90..9574e152 100644 --- a/apps/frontend/declaration.d.ts +++ b/apps/frontend/declaration.d.ts @@ -5,15 +5,3 @@ declare module 'mic-recorder-to-mp3'; interface Window { webkitAudioContext: typeof AudioContext } - -declare module '@mui/material/styles' { - interface PaletteOptions { - paper?: PaletteColorOptions - } - // allow configuration using `createTheme()` - // interface ThemeOptions { - // status?: { - // danger?: string; - // }; - // } - } diff --git a/apps/frontend/src/AppContent.tsx b/apps/frontend/src/AppContent.tsx index 4e2f60f1..0b39f67f 100644 --- a/apps/frontend/src/AppContent.tsx +++ b/apps/frontend/src/AppContent.tsx @@ -43,9 +43,6 @@ const theme: ThemeOptions = { secondary: { main: "#dedffb", }, - paper: { - main: "#ffffff", - } }, typography: { // fontSize: 25, diff --git a/apps/frontend/src/components/Navbar/Navbar.tsx b/apps/frontend/src/components/Navbar/Navbar.tsx index fb1d63c9..74334c5f 100644 --- a/apps/frontend/src/components/Navbar/Navbar.tsx +++ b/apps/frontend/src/components/Navbar/Navbar.tsx @@ -123,7 +123,7 @@ const Navbar = ({ username, userEmail }: NavbarProps) => { } return ( - + Logo Date: Thu, 27 Feb 2025 19:20:28 -0600 Subject: [PATCH 13/21] cleanup theme --- apps/frontend/src/AppContent.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/apps/frontend/src/AppContent.tsx b/apps/frontend/src/AppContent.tsx index 0b39f67f..269dbadd 100644 --- a/apps/frontend/src/AppContent.tsx +++ b/apps/frontend/src/AppContent.tsx @@ -30,11 +30,6 @@ interface AppContentProps { userEmail: string } -/** - * TODO: The issue seems to be different versions onf the provider. - * One provider is material, the other is styles - */ - const theme: ThemeOptions = { palette: { primary: { @@ -45,8 +40,7 @@ const theme: ThemeOptions = { }, }, typography: { - // fontSize: 25, - fontFamily: 'Roboto, sans-serif', + fontFamily: '"Roboto", sans-serif', } } From 118cc176e9dafd4c22883f451f93b2bc5c5aa4f8 Mon Sep 17 00:00:00 2001 From: Matthew Walowski Date: Thu, 27 Feb 2025 19:47:38 -0600 Subject: [PATCH 14/21] cleanup dropdown input css --- .../CreateFieldModal/CreateFieldModal.tsx | 35 +++---------------- .../DropdownInput/DropdownInput.tsx | 35 +++++++++++++++++++ .../EditFieldModal/EditFieldModal.tsx | 29 ++------------- 3 files changed, 42 insertions(+), 57 deletions(-) create mode 100644 apps/frontend/src/components/DropdownInput/DropdownInput.tsx diff --git a/apps/frontend/src/components/CreateFieldModal/CreateFieldModal.tsx b/apps/frontend/src/components/CreateFieldModal/CreateFieldModal.tsx index c4a9fb17..710cbd88 100644 --- a/apps/frontend/src/components/CreateFieldModal/CreateFieldModal.tsx +++ b/apps/frontend/src/components/CreateFieldModal/CreateFieldModal.tsx @@ -11,7 +11,7 @@ import { import Button from '@mui/material/Button' import Checkbox from '@mui/material/Checkbox' import FormControl from '@mui/material/FormControl' -import InputBase from '@mui/material/InputBase' +import InputBase, { InputBaseProps } from '@mui/material/InputBase' import Modal from '@mui/material/Modal' import NativeSelect from '@mui/material/NativeSelect' import _ from 'lodash' @@ -28,7 +28,8 @@ import { FormOption } from '../Fields/FormOption' import MultiSelectField from '../Fields/MultiSelectField' import { FileUploadButton } from '../FileUploadButton/FileUploadButton' import LanguageInput from '../LanguageInput/LanguageInput' -import { styled } from '@mui/material' +import { styled, useTheme } from '@mui/material' +import { DropdownInput } from '../DropdownInput/DropdownInput' export type NewField = Unsaved> @@ -55,35 +56,9 @@ const CreateFieldModal = ({ const [options, setOptions] = useState([]) const [documentURL, setDocumentURL] = useState('') const [isUploading, setIsUploading] = useState(false) - + const theme = useTheme() const errorWrap = useErrorWrap() - const BootstrapInput = styled(InputBase)(({ theme }) => ({ - root: { - 'label + &': { - marginTop: theme.spacing(3), - }, - }, - input: { - borderRadius: 4, - position: 'relative', - backgroundColor: '#dedffb', - border: '1px solid #ced4da', - fontSize: 16, - padding: '10px 26px 10px 12px', - transition: theme.transitions.create(['border-color', 'box-shadow']), - // Use the system font instead of the default Roboto font. - '&:focus': { - borderRadius: 4, - borderColor: '#80bdff', - boxShadow: '0 0 0 0.2rem rgba(0,123,255,.25)', - }, - selected: { - backgroundColor: '#dedffb', - }, - }, - })) - const onRolesChange = (id: string, roles: string[]) => { setSelectedRoles(roles) } @@ -355,7 +330,7 @@ const CreateFieldModal = ({ id="create-field-type-dropdown" onChange={handleFieldTypeSelect} defaultValue={fieldType} - input={} + input={} > {generateFieldDropdownOptions()} diff --git a/apps/frontend/src/components/DropdownInput/DropdownInput.tsx b/apps/frontend/src/components/DropdownInput/DropdownInput.tsx new file mode 100644 index 00000000..7cc968ef --- /dev/null +++ b/apps/frontend/src/components/DropdownInput/DropdownInput.tsx @@ -0,0 +1,35 @@ +import { InputBase, InputBaseProps, useTheme } from "@mui/material"; + +export const DropdownInput = (p: InputBaseProps) => { + const theme = useTheme() + + return +} diff --git a/apps/frontend/src/components/EditFieldModal/EditFieldModal.tsx b/apps/frontend/src/components/EditFieldModal/EditFieldModal.tsx index 950f9ca8..1d47058d 100644 --- a/apps/frontend/src/components/EditFieldModal/EditFieldModal.tsx +++ b/apps/frontend/src/components/EditFieldModal/EditFieldModal.tsx @@ -21,6 +21,7 @@ import { FormOption } from '../Fields/FormOption' import MultiSelectField from '../Fields/MultiSelectField' import LanguageInput from '../LanguageInput/LanguageInput' import { styled } from '@mui/material' +import { DropdownInput } from '../DropdownInput/DropdownInput' export interface EditFieldModalProps { isOpen: boolean @@ -67,32 +68,6 @@ const EditFieldModal = ({ setOptions(formattedOptions) }, [initialData, isOpen]) - const BootstrapInput = styled(InputBase)(({ theme }) => ({ - root: { - 'label + &': { - marginTop: theme.spacing(3), - }, - }, - input: { - borderRadius: 4, - position: 'relative', - backgroundColor: '#dedffb', - border: '1px solid #ced4da', - fontSize: 16, - padding: '10px 26px 10px 12px', - transition: theme.transitions.create(['border-color', 'box-shadow']), - // Use the system font instead of the default Roboto font. - '&:focus': { - borderRadius: 4, - borderColor: '#80bdff', - boxShadow: '0 0 0 0.2rem rgba(0,123,255,.25)', - }, - selected: { - backgroundColor: '#dedffb', - }, - }, - })) - const onRolesChange = (id: string, roles: string[]) => { setSelectedRoles(roles) } @@ -362,7 +337,7 @@ const EditFieldModal = ({ // style: { zIndex: 35001 }, // for keeping this component on the top layer // }} defaultValue={fieldType} - input={} + input={} disabled > {generateFieldDropdownOptions()} From b36acddb014bbc403c5021b5552b54fae3de140a Mon Sep 17 00:00:00 2001 From: Matthew Walowski Date: Thu, 27 Feb 2025 19:48:18 -0600 Subject: [PATCH 15/21] run linter --- apps/frontend/src/AppContent.tsx | 8 +- .../AccountDropdown/AccountDropdown.tsx | 15 ++-- .../CreateFieldModal/CreateFieldModal.tsx | 6 +- .../DropdownInput/DropdownInput.tsx | 61 ++++++++------- .../EditFieldModal/EditFieldModal.tsx | 4 +- .../src/components/ErrorModal/ErrorModal.tsx | 5 +- .../Fields/FieldGroup/FieldGroupTable.tsx | 2 +- .../frontend/src/components/Navbar/Navbar.tsx | 77 +++++++++---------- .../src/components/Sidebar/Sidebar.tsx | 2 +- .../SimpleTable/SimpleTable.style.ts | 2 +- apps/frontend/src/utils/table-renderers.tsx | 28 +++++-- 11 files changed, 109 insertions(+), 101 deletions(-) diff --git a/apps/frontend/src/AppContent.tsx b/apps/frontend/src/AppContent.tsx index 269dbadd..b50c33ce 100644 --- a/apps/frontend/src/AppContent.tsx +++ b/apps/frontend/src/AppContent.tsx @@ -1,4 +1,5 @@ import { Language } from '@3dp4me/types' +import { createTheme, StyledEngineProvider, ThemeOptions, ThemeProvider } from '@mui/material' // import { createTheme, PaletteOptions, StyledEngineProvider, ThemeProvider } from '@mui/material/styles' // import { ThemeProvider, StyledEngineProvider, createTheme, ThemeOptions, fontSize } from '@mui/material/styles' import React, { useContext, useEffect } from 'react' @@ -23,7 +24,6 @@ import { ReducerActionType } from './store/Reducer' import { Context } from './store/Store' import { CognitoAttribute, LANGUAGES, Routes } from './utils/constants' import { isLanguageValid } from './utils/language' -import { createTheme, ThemeProvider, StyledEngineProvider, ThemeOptions } from '@mui/material' interface AppContentProps { username: string @@ -33,15 +33,15 @@ interface AppContentProps { const theme: ThemeOptions = { palette: { primary: { - main: "#3f51b5", + main: '#3f51b5', }, secondary: { - main: "#dedffb", + main: '#dedffb', }, }, typography: { fontFamily: '"Roboto", sans-serif', - } + }, } const arTheme = createTheme({ diff --git a/apps/frontend/src/components/AccountDropdown/AccountDropdown.tsx b/apps/frontend/src/components/AccountDropdown/AccountDropdown.tsx index 4a93650e..63618ece 100644 --- a/apps/frontend/src/components/AccountDropdown/AccountDropdown.tsx +++ b/apps/frontend/src/components/AccountDropdown/AccountDropdown.tsx @@ -37,18 +37,17 @@ const AccountEmail = styled('p')({ lineHeight: '0px', }) - const LanguageSelector = styled(Select)({ - height: 50 + height: 50, }) const SignoutButton = styled(Button)` height: '38px'; - fontSize: '1em'; - fontWeight: 'bold'; - backgroundColor: '#ca0909'; + fontsize: '1em'; + fontweight: 'bold'; + backgroundcolor: '#ca0909'; color: 'white'; - marginTop: '10px'; + margintop: '10px'; width: '100%'; '&:hover': { background: '#ca0909'; @@ -90,9 +89,7 @@ const AccountDropdown = ({ {userEmail}

{translations.components.navbar.dropdown.language}

- + {translations.components.navbar.dropdown.EN} diff --git a/apps/frontend/src/components/CreateFieldModal/CreateFieldModal.tsx b/apps/frontend/src/components/CreateFieldModal/CreateFieldModal.tsx index 710cbd88..0f722cb7 100644 --- a/apps/frontend/src/components/CreateFieldModal/CreateFieldModal.tsx +++ b/apps/frontend/src/components/CreateFieldModal/CreateFieldModal.tsx @@ -8,10 +8,10 @@ import { TranslatedString, Unsaved, } from '@3dp4me/types' +import { useTheme } from '@mui/material' import Button from '@mui/material/Button' import Checkbox from '@mui/material/Checkbox' import FormControl from '@mui/material/FormControl' -import InputBase, { InputBaseProps } from '@mui/material/InputBase' import Modal from '@mui/material/Modal' import NativeSelect from '@mui/material/NativeSelect' import _ from 'lodash' @@ -24,12 +24,11 @@ import { useTranslations } from '../../hooks/useTranslations' import { ADMIN_ID, PUBLIC_CLOUDFRONT_URL } from '../../utils/constants' import { canFieldBeAddedToStep, getFieldName, isFieldType, validateField } from '../../utils/fields' import { randomAlphaNumericString } from '../../utils/math' +import { DropdownInput } from '../DropdownInput/DropdownInput' import { FormOption } from '../Fields/FormOption' import MultiSelectField from '../Fields/MultiSelectField' import { FileUploadButton } from '../FileUploadButton/FileUploadButton' import LanguageInput from '../LanguageInput/LanguageInput' -import { styled, useTheme } from '@mui/material' -import { DropdownInput } from '../DropdownInput/DropdownInput' export type NewField = Unsaved> @@ -56,7 +55,6 @@ const CreateFieldModal = ({ const [options, setOptions] = useState([]) const [documentURL, setDocumentURL] = useState('') const [isUploading, setIsUploading] = useState(false) - const theme = useTheme() const errorWrap = useErrorWrap() const onRolesChange = (id: string, roles: string[]) => { diff --git a/apps/frontend/src/components/DropdownInput/DropdownInput.tsx b/apps/frontend/src/components/DropdownInput/DropdownInput.tsx index 7cc968ef..8a7dbdd6 100644 --- a/apps/frontend/src/components/DropdownInput/DropdownInput.tsx +++ b/apps/frontend/src/components/DropdownInput/DropdownInput.tsx @@ -1,35 +1,40 @@ -import { InputBase, InputBaseProps, useTheme } from "@mui/material"; +import { InputBase, InputBaseProps, useTheme } from '@mui/material' export const DropdownInput = (p: InputBaseProps) => { const theme = useTheme() - return + }} + /> + ) } diff --git a/apps/frontend/src/components/EditFieldModal/EditFieldModal.tsx b/apps/frontend/src/components/EditFieldModal/EditFieldModal.tsx index 1d47058d..4115b645 100644 --- a/apps/frontend/src/components/EditFieldModal/EditFieldModal.tsx +++ b/apps/frontend/src/components/EditFieldModal/EditFieldModal.tsx @@ -5,7 +5,6 @@ import Button from '@mui/material/Button' import Checkbox from '@mui/material/Checkbox' import FormControl from '@mui/material/FormControl' import FormControlLabel from '@mui/material/FormControlLabel' -import InputBase from '@mui/material/InputBase' import Modal from '@mui/material/Modal' import NativeSelect from '@mui/material/NativeSelect' import _ from 'lodash' @@ -17,11 +16,10 @@ import { useTranslations } from '../../hooks/useTranslations' import { ADMIN_ID } from '../../utils/constants' import { validateField } from '../../utils/fields' import CustomSwitch from '../CustomSwitch/CustomSwitch' +import { DropdownInput } from '../DropdownInput/DropdownInput' import { FormOption } from '../Fields/FormOption' import MultiSelectField from '../Fields/MultiSelectField' import LanguageInput from '../LanguageInput/LanguageInput' -import { styled } from '@mui/material' -import { DropdownInput } from '../DropdownInput/DropdownInput' export interface EditFieldModalProps { isOpen: boolean diff --git a/apps/frontend/src/components/ErrorModal/ErrorModal.tsx b/apps/frontend/src/components/ErrorModal/ErrorModal.tsx index 69aaa3c4..8202779d 100644 --- a/apps/frontend/src/components/ErrorModal/ErrorModal.tsx +++ b/apps/frontend/src/components/ErrorModal/ErrorModal.tsx @@ -23,10 +23,7 @@ const ErrorModal = ({ message = DEFAULT_ERROR_MSG, isOpen, onClose }: ErrorModal } return ( - +
+ ) diff --git a/apps/frontend/src/components/Navbar/Navbar.tsx b/apps/frontend/src/components/Navbar/Navbar.tsx index 74334c5f..c0030c56 100644 --- a/apps/frontend/src/components/Navbar/Navbar.tsx +++ b/apps/frontend/src/components/Navbar/Navbar.tsx @@ -1,5 +1,6 @@ import { Language, Nullish } from '@3dp4me/types' import AccountCircleIcon from '@mui/icons-material/AccountCircle' +import { styled } from '@mui/material' import AppBar from '@mui/material/AppBar' import Toolbar from '@mui/material/Toolbar' import React, { MouseEventHandler, useContext, useState } from 'react' @@ -10,8 +11,6 @@ import { useTranslations } from '../../hooks/useTranslations' import { Context } from '../../store/Store' import { Routes } from '../../utils/constants' import AccountDropdown from '../AccountDropdown/AccountDropdown' -import { styled } from '@mui/material' -import { orange } from '@mui/material/colors' export interface NavbarProps { username: string @@ -60,15 +59,15 @@ const NavItem = styled(Link)({ textDecoration: 'none', margin: '0 16px 0 16px', fontSize: '1rem', - color: "#5f5f5f", + color: '#5f5f5f', }) const NavTitle = styled(Link)(({ theme }) => ({ fontWeight: 'bold', fontSize: '1rem', - textDecoration: "none", - margin: "0 16px 0 16px", - color: "#5f5f5f", + textDecoration: 'none', + margin: '0 16px 0 16px', + color: '#5f5f5f', })) const Navbar = ({ username, userEmail }: NavbarProps) => { @@ -123,39 +122,39 @@ const Navbar = ({ username, userEmail }: NavbarProps) => { } return ( - - - Logo - - setActiveRoute(Routes.DASHBOARD)} - id="nav-title" - to={Routes.DASHBOARD} - > - {translations.components.navbar.dashboard.navTitle} - - - {renderLinks()} - - - - - + + + Logo + + setActiveRoute(Routes.DASHBOARD)} + id="nav-title" + to={Routes.DASHBOARD} + > + {translations.components.navbar.dashboard.navTitle} + + + {renderLinks()} + + + + + ) } diff --git a/apps/frontend/src/components/Sidebar/Sidebar.tsx b/apps/frontend/src/components/Sidebar/Sidebar.tsx index 635f643e..fcf3da2f 100644 --- a/apps/frontend/src/components/Sidebar/Sidebar.tsx +++ b/apps/frontend/src/components/Sidebar/Sidebar.tsx @@ -1,6 +1,7 @@ import './Sidebar.scss' import { Step } from '@3dp4me/types' +import { styled } from '@mui/material' import AppBar from '@mui/material/AppBar' import Button from '@mui/material/Button' import Drawer from '@mui/material/Drawer' @@ -8,7 +9,6 @@ import Toolbar from '@mui/material/Toolbar' import { useTranslations } from '../../hooks/useTranslations' import { LANGUAGES } from '../../utils/constants' -import { styled } from '@mui/material' const StyledDrawer = styled(Drawer)({ background: '#dddef2', diff --git a/apps/frontend/src/components/SimpleTable/SimpleTable.style.ts b/apps/frontend/src/components/SimpleTable/SimpleTable.style.ts index dea6a02a..4ecefdf9 100644 --- a/apps/frontend/src/components/SimpleTable/SimpleTable.style.ts +++ b/apps/frontend/src/components/SimpleTable/SimpleTable.style.ts @@ -9,6 +9,6 @@ export const StyledTableCell = styled(TableCell)(({ theme }) => ({ export const StyledTableRow = styled(TableRow)` '&:hover': { - backgroundColor: '#f0f0f0'; + backgroundcolor: '#f0f0f0'; } ` diff --git a/apps/frontend/src/utils/table-renderers.tsx b/apps/frontend/src/utils/table-renderers.tsx index f41dd61a..20685316 100644 --- a/apps/frontend/src/utils/table-renderers.tsx +++ b/apps/frontend/src/utils/table-renderers.tsx @@ -81,7 +81,12 @@ export const defaultTableRowRenderer = >( // Construct a cell for each piece of data const row = rowData.map(({ id, dataType }) => ( - + {getField(itemData, id, dataType, selectedLang)} )) @@ -95,7 +100,7 @@ export const defaultTableRowLoadingRenderer = (numCols: number, selectedLang: La for (let i = 0; i < numCols; i++) { row.push( - + ) @@ -140,8 +145,8 @@ export const defaultTableHeaderRenderer = >( onClick={() => onRequestSort(header.sortKey)} key={header.title} align={cellAlign} - variant='head' - className='header' + variant="head" + className="header" >
{header.title} @@ -201,7 +206,9 @@ export const patientTableHeaderRenderer = >( selectedLang: Language ) => { const headerCells = defaultTableHeaderRenderer(headers, sortConfig, onRequestSort, selectedLang) - headerCells.push() + headerCells.push( + + ) return headerCells } @@ -226,7 +233,12 @@ export const generateSelectableRenderer = // Add the edit button row.push( - + onSelected(user)} size="large"> status icon view-icon {' '} @@ -246,6 +258,8 @@ export const userTableHeaderRenderer = >( selectedLang: Language ) => { const headerCells = defaultTableHeaderRenderer(headers, sortConfig, onRequestSort, selectedLang) - headerCells.push() + headerCells.push( + + ) return headerCells } From 445493f211ebb1318a963277f8335da8ffebcd31 Mon Sep 17 00:00:00 2001 From: Matthew Walowski Date: Thu, 27 Feb 2025 19:48:51 -0600 Subject: [PATCH 16/21] remove unused imports --- apps/frontend/src/AppContent.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/apps/frontend/src/AppContent.tsx b/apps/frontend/src/AppContent.tsx index b50c33ce..cb967894 100644 --- a/apps/frontend/src/AppContent.tsx +++ b/apps/frontend/src/AppContent.tsx @@ -1,7 +1,5 @@ import { Language } from '@3dp4me/types' import { createTheme, StyledEngineProvider, ThemeOptions, ThemeProvider } from '@mui/material' -// import { createTheme, PaletteOptions, StyledEngineProvider, ThemeProvider } from '@mui/material/styles' -// import { ThemeProvider, StyledEngineProvider, createTheme, ThemeOptions, fontSize } from '@mui/material/styles' import React, { useContext, useEffect } from 'react' import { trackPromise } from 'react-promise-tracker' import { BrowserRouter as Router, Route, Switch } from 'react-router-dom' From 979900716e4c4726b1fbc8b98b0a686cd59a5b32 Mon Sep 17 00:00:00 2001 From: Matthew Walowski Date: Thu, 27 Feb 2025 20:01:21 -0600 Subject: [PATCH 17/21] use table cell props instead of css for styling --- .../AccountDropdown/AccountDropdown.tsx | 22 ++++++++-------- .../Fields/FieldGroup/FieldGroupTable.tsx | 12 ++++----- .../components/SimpleTable/SimpleTable.scss | 13 +++++++--- .../SimpleTable/SimpleTable.style.ts | 14 ---------- .../components/SimpleTable/SimpleTable.tsx | 9 +++---- apps/frontend/src/utils/table-renderers.tsx | 26 +++++++++---------- 6 files changed, 44 insertions(+), 52 deletions(-) delete mode 100644 apps/frontend/src/components/SimpleTable/SimpleTable.style.ts diff --git a/apps/frontend/src/components/AccountDropdown/AccountDropdown.tsx b/apps/frontend/src/components/AccountDropdown/AccountDropdown.tsx index 63618ece..3a93e277 100644 --- a/apps/frontend/src/components/AccountDropdown/AccountDropdown.tsx +++ b/apps/frontend/src/components/AccountDropdown/AccountDropdown.tsx @@ -41,18 +41,18 @@ const LanguageSelector = styled(Select)({ height: 50, }) -const SignoutButton = styled(Button)` - height: '38px'; - fontsize: '1em'; - fontweight: 'bold'; - backgroundcolor: '#ca0909'; - color: 'white'; - margintop: '10px'; - width: '100%'; +const SignoutButton = styled(Button)({ + height: '38px', + fontSize: '1em', + fontWeight: 'bold', + backgroundColor: '#ca0909', + color: 'white', + marginTop: '10px', + width: '100%', '&:hover': { - background: '#ca0909'; - } -` + background: '#ca0909' + }, +}) const AccountDropdown = ({ handleClose, diff --git a/apps/frontend/src/components/Fields/FieldGroup/FieldGroupTable.tsx b/apps/frontend/src/components/Fields/FieldGroup/FieldGroupTable.tsx index a06a3410..b8b9908d 100644 --- a/apps/frontend/src/components/Fields/FieldGroup/FieldGroupTable.tsx +++ b/apps/frontend/src/components/Fields/FieldGroup/FieldGroupTable.tsx @@ -13,12 +13,12 @@ import { defaultTableRowRenderer, } from '../../../utils/table-renderers' import SimpleTable from '../../SimpleTable/SimpleTable' -import { StyledTableCell } from '../../SimpleTable/SimpleTable.style' import StepField from '../../StepField/StepField' import { FieldGroupListTableProps, getCompleteSubFieldKey, getKeyBase } from './FieldGroupHelpers' import { getTableData, getTableHeaders, HasGroupNumber, RENDER_PLUS_ICON } from './TableHelpers' +import { TableCell } from '@mui/material' -const CellEditContainer = styled(StyledTableCell)` +const CellEditContainer = styled(TableCell)` padding: 5px; // Prevent arrows on number input @@ -137,9 +137,9 @@ const FieldGroupTable = ({ if ((itemData as any) === RENDER_PLUS_ICON) { const numCols = (metadata?.subFields?.length || 1) + 1 return ( - + - + ) } @@ -173,7 +173,7 @@ const FieldGroupTable = ({ // Adds the delete button cols.push( - + {translations.components.button.discard.title} onRemoveGroup(itemData.groupNum)} style={{ float: lang === Language.EN ? 'right' : 'left' }} /> - + ) return cols diff --git a/apps/frontend/src/components/SimpleTable/SimpleTable.scss b/apps/frontend/src/components/SimpleTable/SimpleTable.scss index df659e65..27b3f9f0 100644 --- a/apps/frontend/src/components/SimpleTable/SimpleTable.scss +++ b/apps/frontend/src/components/SimpleTable/SimpleTable.scss @@ -2,11 +2,18 @@ .table3dp4me { font-family: 'Ubuntu'; + min-width: 700; + + .MuiTableCell-head { + padding-top: 6px; + padding-bottom: 6px; + } .header { border-top: solid $navbar 1px; border-bottom: solid $navbar 1px; background-color: $sidebar; + font-size: 12px; color: white; font-weight: bold; text-transform: uppercase; @@ -28,7 +35,7 @@ margin-right: 20%; align-items: center; color: $button; - font-size: 1rem; + font-size: "13px"; font-weight: bolder; .view-icon { color: $button; @@ -41,7 +48,7 @@ } .cell { - font-size: 1rem; + font-size: 13px; padding-top: 3.85px; padding-bottom: 3.85px; padding-left: 20px; @@ -52,7 +59,7 @@ } .cell-rtl { - font-size: 1rem; + font-size: 13px; padding-top: 3.85px; padding-bottom: 3.85px; padding-right: 30px; diff --git a/apps/frontend/src/components/SimpleTable/SimpleTable.style.ts b/apps/frontend/src/components/SimpleTable/SimpleTable.style.ts deleted file mode 100644 index 4ecefdf9..00000000 --- a/apps/frontend/src/components/SimpleTable/SimpleTable.style.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { styled } from '@mui/material' -import TableCell from '@mui/material/TableCell' -import TableRow from '@mui/material/TableRow' - -export const StyledTableCell = styled(TableCell)(({ theme }) => ({ - backgroundColor: theme.palette.common.white, - color: theme.palette.common.black, -})) - -export const StyledTableRow = styled(TableRow)` - '&:hover': { - backgroundcolor: '#f0f0f0'; - } -` diff --git a/apps/frontend/src/components/SimpleTable/SimpleTable.tsx b/apps/frontend/src/components/SimpleTable/SimpleTable.tsx index 5e6c86a9..0df5dbf0 100644 --- a/apps/frontend/src/components/SimpleTable/SimpleTable.tsx +++ b/apps/frontend/src/components/SimpleTable/SimpleTable.tsx @@ -20,7 +20,6 @@ import { RowLoadingRenderer, RowRenderer, } from '../../utils/table-renderers' -import { StyledTableRow } from './SimpleTable.style' export interface SimpleTableProps> { data: Nullish @@ -70,17 +69,17 @@ const SimpleTable = >({ const renderTableBody = () => { if (isLoading) { return new Array(numLoaderRows).fill(0).map((_, i) => ( - + {renderLoadingTableRow(renderedHeaders.length, selectedLang)} - + )) } if (!sortedData || !rowData) return null return sortedData.map((patient) => ( - + {renderTableRow(rowData, patient, selectedLang)} - + )) } diff --git a/apps/frontend/src/utils/table-renderers.tsx b/apps/frontend/src/utils/table-renderers.tsx index 20685316..96387f04 100644 --- a/apps/frontend/src/utils/table-renderers.tsx +++ b/apps/frontend/src/utils/table-renderers.tsx @@ -7,12 +7,12 @@ import Skeleton from 'react-loading-skeleton' import { Link } from 'react-router-dom' import Eyecon from '../assets/view.svg' -import { StyledTableCell } from '../components/SimpleTable/SimpleTable.style' import { SortConfig } from '../hooks/useSortableData' import translations from '../translations.json' import { DisplayFieldType, SortDirection } from './constants' import { fieldToJSX } from './fields' import { resolveObjPath } from './object' +import { TableCell } from '@mui/material' /** * Given item data, a field key, and a field type, this function finds @@ -81,14 +81,14 @@ export const defaultTableRowRenderer = >( // Construct a cell for each piece of data const row = rowData.map(({ id, dataType }) => ( - {getField(itemData, id, dataType, selectedLang)} - + )) return row @@ -100,9 +100,9 @@ export const defaultTableRowLoadingRenderer = (numCols: number, selectedLang: La for (let i = 0; i < numCols; i++) { row.push( - + - + ) } @@ -141,7 +141,7 @@ export const defaultTableHeaderRenderer = >( const cellClassName = selectedLang === Language.AR ? 'cell-align-rtl' : 'cell-align' const headerCells = headers.map((header) => ( - onRequestSort(header.sortKey)} key={header.title} align={cellAlign} @@ -152,7 +152,7 @@ export const defaultTableHeaderRenderer = >( {header.title} {renderSortArrow(sortConfig, header.sortKey)}
- + )) return headerCells @@ -182,14 +182,14 @@ export const patientTableRowRenderer = ( // Add a link to the patient's page row.push( - + status icon {' '} {translations[selectedLang].components.table.view} - + ) return row @@ -207,7 +207,7 @@ export const patientTableHeaderRenderer = >( ) => { const headerCells = defaultTableHeaderRenderer(headers, sortConfig, onRequestSort, selectedLang) headerCells.push( - + ) return headerCells } @@ -233,7 +233,7 @@ export const generateSelectableRenderer = // Add the edit button row.push( - onSelected(user)} size="large"> status icon view-icon {' '} - + ) return row @@ -259,7 +259,7 @@ export const userTableHeaderRenderer = >( ) => { const headerCells = defaultTableHeaderRenderer(headers, sortConfig, onRequestSort, selectedLang) headerCells.push( - + ) return headerCells } From cd63478e2501ef8cf53894e8020973fcec670584 Mon Sep 17 00:00:00 2001 From: Matthew Walowski Date: Thu, 27 Feb 2025 20:03:24 -0600 Subject: [PATCH 18/21] remove min width from table --- apps/frontend/src/components/SimpleTable/SimpleTable.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/frontend/src/components/SimpleTable/SimpleTable.scss b/apps/frontend/src/components/SimpleTable/SimpleTable.scss index 27b3f9f0..2d06d471 100644 --- a/apps/frontend/src/components/SimpleTable/SimpleTable.scss +++ b/apps/frontend/src/components/SimpleTable/SimpleTable.scss @@ -2,7 +2,6 @@ .table3dp4me { font-family: 'Ubuntu'; - min-width: 700; .MuiTableCell-head { padding-top: 6px; From a57a58365dc99b1767410f2753b2e4714c4f6c38 Mon Sep 17 00:00:00 2001 From: Matthew Walowski Date: Thu, 27 Feb 2025 20:05:39 -0600 Subject: [PATCH 19/21] run lint --- .../src/components/AccountDropdown/AccountDropdown.tsx | 2 +- .../src/components/CreateFieldModal/CreateFieldModal.tsx | 1 - .../src/components/Fields/FieldGroup/FieldGroupTable.tsx | 2 +- apps/frontend/src/utils/table-renderers.tsx | 6 ++---- 4 files changed, 4 insertions(+), 7 deletions(-) diff --git a/apps/frontend/src/components/AccountDropdown/AccountDropdown.tsx b/apps/frontend/src/components/AccountDropdown/AccountDropdown.tsx index 3a93e277..b72fe9ce 100644 --- a/apps/frontend/src/components/AccountDropdown/AccountDropdown.tsx +++ b/apps/frontend/src/components/AccountDropdown/AccountDropdown.tsx @@ -50,7 +50,7 @@ const SignoutButton = styled(Button)({ marginTop: '10px', width: '100%', '&:hover': { - background: '#ca0909' + background: '#ca0909', }, }) diff --git a/apps/frontend/src/components/CreateFieldModal/CreateFieldModal.tsx b/apps/frontend/src/components/CreateFieldModal/CreateFieldModal.tsx index 0f722cb7..2303c4b9 100644 --- a/apps/frontend/src/components/CreateFieldModal/CreateFieldModal.tsx +++ b/apps/frontend/src/components/CreateFieldModal/CreateFieldModal.tsx @@ -8,7 +8,6 @@ import { TranslatedString, Unsaved, } from '@3dp4me/types' -import { useTheme } from '@mui/material' import Button from '@mui/material/Button' import Checkbox from '@mui/material/Checkbox' import FormControl from '@mui/material/FormControl' diff --git a/apps/frontend/src/components/Fields/FieldGroup/FieldGroupTable.tsx b/apps/frontend/src/components/Fields/FieldGroup/FieldGroupTable.tsx index b8b9908d..586fb351 100644 --- a/apps/frontend/src/components/Fields/FieldGroup/FieldGroupTable.tsx +++ b/apps/frontend/src/components/Fields/FieldGroup/FieldGroupTable.tsx @@ -2,6 +2,7 @@ // Unfortunately, there has to be an import cycle, because this is by nature, recursive import { Language } from '@3dp4me/types' import AddIcon from '@mui/icons-material/Add' +import { TableCell } from '@mui/material' import { useMemo } from 'react' import styled from 'styled-components' @@ -16,7 +17,6 @@ import SimpleTable from '../../SimpleTable/SimpleTable' import StepField from '../../StepField/StepField' import { FieldGroupListTableProps, getCompleteSubFieldKey, getKeyBase } from './FieldGroupHelpers' import { getTableData, getTableHeaders, HasGroupNumber, RENDER_PLUS_ICON } from './TableHelpers' -import { TableCell } from '@mui/material' const CellEditContainer = styled(TableCell)` padding: 5px; diff --git a/apps/frontend/src/utils/table-renderers.tsx b/apps/frontend/src/utils/table-renderers.tsx index 96387f04..741b5882 100644 --- a/apps/frontend/src/utils/table-renderers.tsx +++ b/apps/frontend/src/utils/table-renderers.tsx @@ -1,6 +1,7 @@ import { AccessLevel, FieldType, Language, Nullish, Path, Patient } from '@3dp4me/types' import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown' import ArrowDropUpIcon from '@mui/icons-material/ArrowDropUp' +import { TableCell } from '@mui/material' import IconButton from '@mui/material/IconButton' import React, { ReactNode } from 'react' import Skeleton from 'react-loading-skeleton' @@ -12,7 +13,6 @@ import translations from '../translations.json' import { DisplayFieldType, SortDirection } from './constants' import { fieldToJSX } from './fields' import { resolveObjPath } from './object' -import { TableCell } from '@mui/material' /** * Given item data, a field key, and a field type, this function finds @@ -258,8 +258,6 @@ export const userTableHeaderRenderer = >( selectedLang: Language ) => { const headerCells = defaultTableHeaderRenderer(headers, sortConfig, onRequestSort, selectedLang) - headerCells.push( - - ) + headerCells.push() return headerCells } From d0ce92baca50ee9c23e16cfca052292f29ba4ef1 Mon Sep 17 00:00:00 2001 From: Matthew Walowski Date: Thu, 27 Feb 2025 20:17:02 -0600 Subject: [PATCH 20/21] fix sidebar coloring --- apps/frontend/src/components/Sidebar/Sidebar.scss | 4 ++++ apps/frontend/src/components/Sidebar/Sidebar.tsx | 1 + apps/frontend/src/styles/variables.scss | 2 +- 3 files changed, 6 insertions(+), 1 deletion(-) diff --git a/apps/frontend/src/components/Sidebar/Sidebar.scss b/apps/frontend/src/components/Sidebar/Sidebar.scss index 0bb6048c..e8ae2002 100644 --- a/apps/frontend/src/components/Sidebar/Sidebar.scss +++ b/apps/frontend/src/components/Sidebar/Sidebar.scss @@ -9,6 +9,10 @@ width: $drawerWidth + 3 * $verticalMovementWidth; } +.detail-paper { + background-color: $dashboardManagementSidebarBackground; +} + .sidebar { display: flex; flex-shrink: 0; diff --git a/apps/frontend/src/components/Sidebar/Sidebar.tsx b/apps/frontend/src/components/Sidebar/Sidebar.tsx index fcf3da2f..b749db95 100644 --- a/apps/frontend/src/components/Sidebar/Sidebar.tsx +++ b/apps/frontend/src/components/Sidebar/Sidebar.tsx @@ -110,6 +110,7 @@ const Sidebar = ({
{generateButtons()}
Date: Thu, 27 Feb 2025 20:17:16 -0600 Subject: [PATCH 21/21] lint --- apps/frontend/src/components/Sidebar/Sidebar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/frontend/src/components/Sidebar/Sidebar.tsx b/apps/frontend/src/components/Sidebar/Sidebar.tsx index b749db95..baa5da64 100644 --- a/apps/frontend/src/components/Sidebar/Sidebar.tsx +++ b/apps/frontend/src/components/Sidebar/Sidebar.tsx @@ -110,7 +110,7 @@ const Sidebar = ({
{generateButtons()}