{currentTab === tabKey && (
({
+ // TODO - use "theme.applyStyles" when implementing dark mode
+ backgroundColor: grey[800],
p: 2,
mb: 2,
- }}
+ ...theme.applyStyles('light', {
+ backgroundColor: 'white',
+ }),
+ })}
>
{children}
diff --git a/frontend/src/docs/DocsWrapper.tsx b/frontend/src/docs/DocsWrapper.tsx
index 0c972da23..b7066fb7b 100644
--- a/frontend/src/docs/DocsWrapper.tsx
+++ b/frontend/src/docs/DocsWrapper.tsx
@@ -62,14 +62,21 @@ export default function DocsWrapper({ children }: DocsWrapperProps): ReactElemen
{doc.header && doc.slug ? (
-
+
) : (
@@ -114,13 +121,13 @@ export default function DocsWrapper({ children }: DocsWrapperProps): ReactElemen
{/* Banner height + Toolbar height = 96px */}
({
minWidth: 200,
backgroundColor: theme.palette.background.paper,
borderRight: `1px solid ${theme.palette.divider}`,
overflow: 'auto',
py: 2,
- }}
+ })}
>
{createDocElement(directory)}
diff --git a/frontend/src/entry/model/mirroredModels/ExportSettings.tsx b/frontend/src/entry/model/mirroredModels/ExportSettings.tsx
index 62f2839fc..9a149287c 100644
--- a/frontend/src/entry/model/mirroredModels/ExportSettings.tsx
+++ b/frontend/src/entry/model/mirroredModels/ExportSettings.tsx
@@ -56,9 +56,9 @@ export default function ExportSettings({ model }: ExportSettingsProps) {
return (
<>
-
+
}>
-
+
Export Settings
diff --git a/frontend/src/entry/model/releases/ReleaseForm.tsx b/frontend/src/entry/model/releases/ReleaseForm.tsx
index 61558899f..3ce662b03 100644
--- a/frontend/src/entry/model/releases/ReleaseForm.tsx
+++ b/frontend/src/entry/model/releases/ReleaseForm.tsx
@@ -150,8 +150,10 @@ export default function ReleaseForm({
error={formData.semver !== '' && !isValidSemver(formData.semver)}
helperText={formData.semver !== '' && !isValidSemver(formData.semver) ? 'Must follow format #.#.#' : ''}
value={formData.semver}
- inputProps={{ 'data-test': 'releaseSemanticVersionTextField' }}
onChange={handleSemverChange}
+ slotProps={{
+ htmlInput: { 'data-test': 'releaseSemanticVersionTextField' },
+ }}
/>
)}
diff --git a/frontend/src/entry/settings/ManualEntityInput.tsx b/frontend/src/entry/settings/ManualEntityInput.tsx
index 1295f29df..01a0a3f67 100644
--- a/frontend/src/entry/settings/ManualEntityInput.tsx
+++ b/frontend/src/entry/settings/ManualEntityInput.tsx
@@ -36,7 +36,7 @@ export default function ManualEntityInput({ onAddEntityManually, errorMessage }:
aria-controls='manual-user-add-content'
id='manual-user-add-header'
>
-
+
Trouble finding a user? Click here to add them manually
diff --git a/frontend/src/schemas/SchemaList.tsx b/frontend/src/schemas/SchemaList.tsx
index 5763ad879..e22c40526 100644
--- a/frontend/src/schemas/SchemaList.tsx
+++ b/frontend/src/schemas/SchemaList.tsx
@@ -144,17 +144,20 @@ export default function SchemaList({ schemaKind }: SchemaDisplayProps) {
diff --git a/frontend/src/schemas/SchemaSelect.tsx b/frontend/src/schemas/SchemaSelect.tsx
index 5c536c4b4..6236cfa9d 100644
--- a/frontend/src/schemas/SchemaSelect.tsx
+++ b/frontend/src/schemas/SchemaSelect.tsx
@@ -139,9 +139,9 @@ export default function SchemaSelect({ entry }: SchemaSelectProps) {
-
+
}>
-
+
Active Schemas
@@ -151,9 +151,9 @@ export default function SchemaSelect({ entry }: SchemaSelectProps) {
-
+
}>
-
+
Inactive Schemas
diff --git a/frontend/src/theme.ts b/frontend/src/theme.ts
index 9af238a1a..b4963eae5 100644
--- a/frontend/src/theme.ts
+++ b/frontend/src/theme.ts
@@ -52,15 +52,6 @@ export const lightTheme = createTheme({
},
},
},
- MuiListItem: {
- styleOverrides: {
- button: {
- '&:hover': {
- backgroundColor: '#f5f5f5',
- },
- },
- },
- },
MuiListItemButton: {
styleOverrides: {
root: {
@@ -177,15 +168,6 @@ export const darkTheme = createTheme({
},
},
},
- MuiListItem: {
- styleOverrides: {
- button: {
- '&:hover': {
- backgroundColor: '#5c5c5c',
- },
- },
- },
- },
MuiListItemButton: {
styleOverrides: {
root: {
diff --git a/frontend/src/wrapper/EntrySearch.tsx b/frontend/src/wrapper/EntrySearch.tsx
index 5426f7afd..50a69dbdd 100644
--- a/frontend/src/wrapper/EntrySearch.tsx
+++ b/frontend/src/wrapper/EntrySearch.tsx
@@ -59,16 +59,19 @@ export default function EntrySearch() {
diff --git a/frontend/src/wrapper/SideNavigation.tsx b/frontend/src/wrapper/SideNavigation.tsx
index 283dc3efb..b489b2d15 100644
--- a/frontend/src/wrapper/SideNavigation.tsx
+++ b/frontend/src/wrapper/SideNavigation.tsx
@@ -7,7 +7,6 @@ import ListAltIcon from '@mui/icons-material/ListAlt'
import SchemaIcon from '@mui/icons-material/Schema'
import { Divider, List, ListItem, ListItemButton, ListItemIcon, Stack, Toolbar } from '@mui/material'
import MuiDrawer from '@mui/material/Drawer'
-import { useTheme } from '@mui/material/styles'
import { styled } from '@mui/material/styles'
import { useGetResponses } from 'actions/response'
import { useGetReviewRequestsForUser } from 'actions/review'
@@ -32,7 +31,7 @@ const StyledList = styled(List)(({ theme }) => ({
},
}))
-const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })(({ theme, open }) => ({
+const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })(({ theme }) => ({
'& .MuiDrawer-paper': {
position: 'relative',
whiteSpace: 'nowrap',
@@ -42,18 +41,25 @@ const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open'
duration: theme.transitions.duration.enteringScreen,
}),
boxSizing: 'border-box',
- ...(!open && {
- overflowX: 'hidden',
- transition: theme.transitions.create('width', {
- easing: theme.transitions.easing.sharp,
- duration: theme.transitions.duration.leavingScreen,
- }),
- width: theme.spacing(7),
- [theme.breakpoints.up('sm')]: {
- width: theme.spacing(9),
- },
- }),
},
+ variants: [
+ {
+ props: ({ open }) => !open,
+ style: {
+ '& .MuiDrawer-paper': {
+ overflowX: 'hidden',
+ transition: theme.transitions.create('width', {
+ easing: theme.transitions.easing.sharp,
+ duration: theme.transitions.duration.leavingScreen,
+ }),
+ width: theme.spacing(7),
+ [theme.breakpoints.up('sm')]: {
+ width: theme.spacing(9),
+ },
+ },
+ },
+ },
+ ],
}))
export interface SideNavigationProps {
@@ -78,8 +84,6 @@ export default function SideNavigation({
const { reviews, isReviewsLoading, isReviewsError } = useGetReviewRequestsForUser()
const { responses, isResponsesLoading, isResponsesError } = useGetResponses(reviews.map((review) => review._id))
- const theme = useTheme()
-
useEffect(() => {
async function fetchReviewCount() {
onResetErrorMessage()
@@ -109,12 +113,12 @@ export default function SideNavigation({
{(isReviewsLoading || isResponsesLoading) && }
({
alignItems: 'center',
justifyContent: 'flex-end',
px: [1],
borderBottom: `1px solid ${theme.palette.divider}`,
- }}
+ })}
/>
{drawerOpen !== undefined && (
diff --git a/frontend/src/wrapper/TopNavigation.tsx b/frontend/src/wrapper/TopNavigation.tsx
index 1c24db205..a3f9c1b0c 100644
--- a/frontend/src/wrapper/TopNavigation.tsx
+++ b/frontend/src/wrapper/TopNavigation.tsx
@@ -47,20 +47,25 @@ interface AppBarProps extends MuiAppBarProps {
const AppBar = styled(MuiAppBar, {
shouldForwardProp: (prop) => prop !== 'open',
-})(({ theme, open }) => ({
+})(({ theme }) => ({
zIndex: theme.zIndex.drawer + 1,
transition: theme.transitions.create(['width', 'margin-left'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
- ...(open && {
- marginLeft: DRAWER_WIDTH,
- width: `calc(100% - ${DRAWER_WIDTH}px)`,
- transition: theme.transitions.create(['width', 'margin-left'], {
- easing: theme.transitions.easing.sharp,
- duration: theme.transitions.duration.enteringScreen,
- }),
- }),
+ variants: [
+ {
+ props: ({ open }) => open,
+ style: {
+ marginLeft: DRAWER_WIDTH,
+ width: `calc(100% - ${DRAWER_WIDTH}px)`,
+ transition: theme.transitions.create(['width', 'margin-left'], {
+ easing: theme.transitions.easing.sharp,
+ duration: theme.transitions.duration.enteringScreen,
+ }),
+ },
+ },
+ ],
}))
export default function TopNavigation({ drawerOpen = false, pageTopStyling = {}, currentUser }: TopNavigationProps) {
@@ -97,14 +102,15 @@ export default function TopNavigation({ drawerOpen = false, pageTopStyling = {},
open={drawerOpen}
position='absolute'
data-test='appBar'
- sx={{
+ sx={(theme) => ({
...pageTopStyling,
top: 'unset',
- background:
- theme.palette.mode === 'light'
- ? 'linear-gradient(276deg, rgba(214,37,96,1) 0%, rgba(84,39,142,1) 100%)'
- : '#242424',
- }}
+ // TODO - use "theme.applyStyles" when implementing dark mode
+ background: '#242424',
+ ...theme.applyStyles('light', {
+ background: 'linear-gradient(276deg, rgba(214,37,96,1) 0%, rgba(84,39,142,1) 100%)',
+ }),
+ })}
>