From 724e15e0bc6a3b4028a90fb9d0b1797d45395c55 Mon Sep 17 00:00:00 2001 From: Chris Chudzicki Date: Tue, 3 Dec 2024 15:19:47 -0500 Subject: [PATCH 1/4] remove #app-container styles We have no elements with id #app-container --- .../ThemeProvider/MITLearnGlobalStyles.tsx | 32 +------------------ 1 file changed, 1 insertion(+), 31 deletions(-) diff --git a/frontends/ol-components/src/components/ThemeProvider/MITLearnGlobalStyles.tsx b/frontends/ol-components/src/components/ThemeProvider/MITLearnGlobalStyles.tsx index 8ef4a1c615..27574000a9 100644 --- a/frontends/ol-components/src/components/ThemeProvider/MITLearnGlobalStyles.tsx +++ b/frontends/ol-components/src/components/ThemeProvider/MITLearnGlobalStyles.tsx @@ -83,43 +83,13 @@ const formCss = css` } ` -const muiCss = css` - #app-container { - .MuiCardContent-root { - padding-bottom: 16px; - - &:last-child { - padding-bottom: 16px; /* MUI puts extra padding on the last child by default. We don't want it. */ - } - - > *:first-of-type { - margin-top: 0; /* No extra space for the first child, beyond the card content's padding. */ - } - } - - .MuiCardActions-root { - padding-left: 16px; - padding-right: 16px; - } - - .MuiCard-root { - transition-duration: ${theme.custom.transitionDuration}; - transition-property: box-shadow; - - &:hover { - box-shadow: ${theme.custom.shadow}; - } - } - } -` - const MITLearnGlobalStyles: React.FC = () => { /** * Preload the font just in case emotion doesn't put the import near top of * HTML. */ preload(ADOBE_FONT_URL, { as: "style", fetchPriority: "high" }) - return + return } export { MITLearnGlobalStyles } From e913ec768930f25b2e11194382278bdc0ce08fb9 Mon Sep 17 00:00:00 2001 From: Chris Chudzicki Date: Tue, 3 Dec 2024 15:21:19 -0500 Subject: [PATCH 2/4] remove MuiDialogContent css We do not use DialogContent, except in deprecated ManageWidgetDialog.tsx --- .../src/components/FormDialog/FormDialog.tsx | 3 --- .../components/ThemeProvider/MITLearnGlobalStyles.tsx | 10 ---------- 2 files changed, 13 deletions(-) diff --git a/frontends/ol-components/src/components/FormDialog/FormDialog.tsx b/frontends/ol-components/src/components/FormDialog/FormDialog.tsx index 3f82e535d2..ad2cbefb0b 100644 --- a/frontends/ol-components/src/components/FormDialog/FormDialog.tsx +++ b/frontends/ol-components/src/components/FormDialog/FormDialog.tsx @@ -45,9 +45,6 @@ interface FormDialogProps { * form inputs but still semantically mark inputs as ``. */ noValidate?: boolean - /** - * The form content. These will be direct children of MUI's [DialogContent](https://mui.com/material-ui/api/dialog-content/) - */ children?: React.ReactNode actions?: DialogProps["actions"] /** diff --git a/frontends/ol-components/src/components/ThemeProvider/MITLearnGlobalStyles.tsx b/frontends/ol-components/src/components/ThemeProvider/MITLearnGlobalStyles.tsx index 27574000a9..db7a4fc7e3 100644 --- a/frontends/ol-components/src/components/ThemeProvider/MITLearnGlobalStyles.tsx +++ b/frontends/ol-components/src/components/ThemeProvider/MITLearnGlobalStyles.tsx @@ -71,16 +71,6 @@ const formCss = css` width: 100%; } } - - .MuiDialogContent-root { - .MuiFormControl-root:first-of-type { - margin-top: 0; - } - - .MuiFormControl-root:last-child { - margin-bottom: 0; - } - } ` const MITLearnGlobalStyles: React.FC = () => { From 86f35f66e7befdcb06a040dc29b09dcf7805ca33 Mon Sep 17 00:00:00 2001 From: Chris Chudzicki Date: Tue, 3 Dec 2024 15:25:41 -0500 Subject: [PATCH 3/4] we do not have any native select elements --- .../ThemeProvider/MITLearnGlobalStyles.tsx | 19 +------------------ 1 file changed, 1 insertion(+), 18 deletions(-) diff --git a/frontends/ol-components/src/components/ThemeProvider/MITLearnGlobalStyles.tsx b/frontends/ol-components/src/components/ThemeProvider/MITLearnGlobalStyles.tsx index db7a4fc7e3..1e5fc84dd1 100644 --- a/frontends/ol-components/src/components/ThemeProvider/MITLearnGlobalStyles.tsx +++ b/frontends/ol-components/src/components/ThemeProvider/MITLearnGlobalStyles.tsx @@ -56,30 +56,13 @@ const pageCss = css` } ` -const formCss = css` - form, - .form { - select { - background: #f8f8f8; - border: 1px solid #bbb; - font-size: 15px; - color: ${theme.typography.body1.color}; - height: 39px; - - /* If you add too much padding here, the options won't show in IE */ - padding: 8px 20px; - width: 100%; - } - } -` - const MITLearnGlobalStyles: React.FC = () => { /** * Preload the font just in case emotion doesn't put the import near top of * HTML. */ preload(ADOBE_FONT_URL, { as: "style", fetchPriority: "high" }) - return + return } export { MITLearnGlobalStyles } From 2cfdcc28ea2e8bb67524e03349dd91c7869c9aa7 Mon Sep 17 00:00:00 2001 From: Chris Chudzicki Date: Tue, 3 Dec 2024 15:29:00 -0500 Subject: [PATCH 4/4] remove two unused theme custom properties --- .../src/components/Carousel/Carousel.stories.tsx | 2 +- .../components/RoutedDrawer/RoutedDrawer.stories.tsx | 2 +- .../src/components/ThemeProvider/ThemeProvider.tsx | 10 ---------- frontends/ol-components/src/types/theme.d.ts | 2 -- 4 files changed, 2 insertions(+), 14 deletions(-) diff --git a/frontends/ol-components/src/components/Carousel/Carousel.stories.tsx b/frontends/ol-components/src/components/Carousel/Carousel.stories.tsx index 1ff940a459..3ae36911d9 100644 --- a/frontends/ol-components/src/components/Carousel/Carousel.stories.tsx +++ b/frontends/ol-components/src/components/Carousel/Carousel.stories.tsx @@ -12,7 +12,7 @@ const Panel = styled.div({ alignItems: "center", color: theme.palette.primary.main, backgroundColor: theme.palette.grey[300], - borderShadow: theme.custom.shadow, + borderShadow: "3 4 12 rgb(0 0 0 / 36%)", }) const Slide: React.FC<{ children: React.ReactNode }> = ({ children }) => { return {children} diff --git a/frontends/ol-components/src/components/RoutedDrawer/RoutedDrawer.stories.tsx b/frontends/ol-components/src/components/RoutedDrawer/RoutedDrawer.stories.tsx index 4a0947ad06..3411524fea 100644 --- a/frontends/ol-components/src/components/RoutedDrawer/RoutedDrawer.stories.tsx +++ b/frontends/ol-components/src/components/RoutedDrawer/RoutedDrawer.stories.tsx @@ -8,7 +8,7 @@ const Content = styled.div({ width: 400, padding: 80, color: theme.palette.primary.main, - borderShadow: theme.custom.shadow, + borderShadow: "3 4 12 rgb(0 0 0 / 36%)", }) const meta: Meta = { diff --git a/frontends/ol-components/src/components/ThemeProvider/ThemeProvider.tsx b/frontends/ol-components/src/components/ThemeProvider/ThemeProvider.tsx index b990066096..98e3803a2e 100644 --- a/frontends/ol-components/src/components/ThemeProvider/ThemeProvider.tsx +++ b/frontends/ol-components/src/components/ThemeProvider/ThemeProvider.tsx @@ -11,17 +11,7 @@ import * as chips from "./chips" import { colors } from "./colors" import type { CustomTheme } from "../../types/theme" -const shadow = { - shadowOffsetX: 3, - shadowOffsetY: 4, - shadowColor: "rgb(0 0 0 / 36%)", - shadowBlurRadius: 12, -} - -// To replace ../scss/theme.scss for #236 as we refactor it out const custom: ThemeOptions["custom"] = { - transitionDuration: "300ms", - shadow: `${shadow.shadowOffsetX} ${shadow.shadowOffsetY} ${shadow.shadowBlurRadius} ${shadow.shadowColor}`, colors, dimensions: { headerHeight: "72px", diff --git a/frontends/ol-components/src/types/theme.d.ts b/frontends/ol-components/src/types/theme.d.ts index 852247430c..b4498c66c1 100644 --- a/frontends/ol-components/src/types/theme.d.ts +++ b/frontends/ol-components/src/types/theme.d.ts @@ -10,8 +10,6 @@ export interface ColorGroup { } interface CustomTheme { - transitionDuration: string - shadow: string colors: { mitRed: string silverGray: string