From 312cf5f4eb5dfb82861cc39e61521c4e0fab99b3 Mon Sep 17 00:00:00 2001 From: Mike Kiss Date: Mon, 15 Apr 2024 16:05:19 -0400 Subject: [PATCH] refactor: initial theme refactor #2445 --- .../File/FileComponent/FileComponent.tsx | 4 +- .../UploadedImagePlaceholder.tsx | 6 +- .../Channel/File/UploadingPreview.tsx | 4 +- .../ContextMenu/ContextMenu.component.tsx | 12 +-- .../UserProfileContextMenu.container.tsx | 8 +- .../LoadingPanel/JoiningPanelComponent.tsx | 2 +- .../LoadingPanel/StartingPanelComponent.tsx | 2 +- .../SearchModal/SearchModelComponent.tsx | 6 +- .../components/Settings/SettingsComponent.tsx | 4 +- .../src/renderer/components/Titlebar.tsx | 3 +- .../ui/ErrorModal/ErrorModalComponent.tsx | 2 +- .../renderer/components/ui/Modal/Modal.tsx | 2 +- .../ui/OpenlinkModal/OpenlinkModal.tsx | 4 +- .../components/ui/QuitApp/QuitAppDialog.tsx | 4 +- .../components/ui/Spinner/SpinnerLoader.tsx | 2 +- .../components/widgets/MessagesDivider.tsx | 2 +- .../widgets/channels/BasicMessage.tsx | 2 +- .../widgets/channels/ChannelHeader.tsx | 4 +- .../channels/ChannelInput/ChannelInput.tsx | 6 +- .../channels/ChannelInput/MentionElement.tsx | 2 +- .../widgets/channels/TextMessage.tsx | 6 +- packages/desktop/src/renderer/theme.ts | 78 ++++++++++--------- 22 files changed, 89 insertions(+), 76 deletions(-) diff --git a/packages/desktop/src/renderer/components/Channel/File/FileComponent/FileComponent.tsx b/packages/desktop/src/renderer/components/Channel/File/FileComponent/FileComponent.tsx index e55dd313b7..abb1818f39 100644 --- a/packages/desktop/src/renderer/components/Channel/File/FileComponent/FileComponent.tsx +++ b/packages/desktop/src/renderer/components/Channel/File/FileComponent/FileComponent.tsx @@ -31,14 +31,14 @@ const FileComponentStyled = styled('div')(({ theme }) => ({ padding: '16px', backgroundColor: theme.palette.colors.white, borderRadius: '8px', - border: `1px solid ${theme.palette.colors.veryLightGray}`, + border: `1px solid ${theme.palette.colors.border01}`, [`& .${classes.icon}`]: { minWidth: '40px', width: '40px', height: '40px', borderRadius: '8px', - backgroundColor: '#F0F0F0', + backgroundColor: theme.palette.background.paper, display: 'flex', alignItems: 'center', justifyContent: 'center', diff --git a/packages/desktop/src/renderer/components/Channel/File/UploadedImagePlaceholder/UploadedImagePlaceholder.tsx b/packages/desktop/src/renderer/components/Channel/File/UploadedImagePlaceholder/UploadedImagePlaceholder.tsx index 15f9f60c44..bbf25e41f2 100644 --- a/packages/desktop/src/renderer/components/Channel/File/UploadedImagePlaceholder/UploadedImagePlaceholder.tsx +++ b/packages/desktop/src/renderer/components/Channel/File/UploadedImagePlaceholder/UploadedImagePlaceholder.tsx @@ -18,7 +18,7 @@ const classes = { icon: `${PREFIX}icon`, } -const Root = styled('div')(() => ({ +const Root = styled('div')(({ theme }) => ({ maxWidth: '400px', height: '100%', @@ -29,7 +29,7 @@ const Root = styled('div')(() => ({ alignItems: 'center', minWidth: '50px', minHeight: '50px', - backgroundColor: '#e0e0e0', + backgroundColor: theme.palette.background.paper, }, [`& .${classes.placeholderIcon}`]: { @@ -41,7 +41,7 @@ const Root = styled('div')(() => ({ width: '40px', height: '40px', borderRadius: '8px', - backgroundColor: '#F0F0F0', + backgroundColor: theme.palette.background.paper, display: 'flex', alignItems: 'center', justifyContent: 'center', diff --git a/packages/desktop/src/renderer/components/Channel/File/UploadingPreview.tsx b/packages/desktop/src/renderer/components/Channel/File/UploadingPreview.tsx index efc5d8de0b..54ef0f18da 100644 --- a/packages/desktop/src/renderer/components/Channel/File/UploadingPreview.tsx +++ b/packages/desktop/src/renderer/components/Channel/File/UploadingPreview.tsx @@ -22,7 +22,7 @@ const classes = { tooltip: `${PREFIX}tooltip`, } -const StyledFilePreviewComponent = styled('div')(() => ({ +const StyledFilePreviewComponent = styled('div')(({ theme }) => ({ display: 'inline-block', float: 'left', cursor: 'pointer', @@ -49,7 +49,7 @@ const StyledFilePreviewComponent = styled('div')(() => ({ width: '64px', height: '64px', borderRadius: '15%', - backgroundColor: '#F0F0F0', + backgroundColor: theme.palette.background.paper, display: 'flex', alignItems: 'center', justifyContent: 'center', diff --git a/packages/desktop/src/renderer/components/ContextMenu/ContextMenu.component.tsx b/packages/desktop/src/renderer/components/ContextMenu/ContextMenu.component.tsx index 5078d29005..05aa046e87 100644 --- a/packages/desktop/src/renderer/components/ContextMenu/ContextMenu.component.tsx +++ b/packages/desktop/src/renderer/components/ContextMenu/ContextMenu.component.tsx @@ -10,6 +10,8 @@ import Icon from '../ui/Icon/Icon' import arrowLeft from '../../static/images/arrowLeft.svg' import arrowRightShort from '../../static/images/arrowRightShort.svg' +import theme from '../../theme' + export const ContextMenu: FC = ({ visible, handleClose, handleBack, title, children }) => { const ref = useRef(null) @@ -50,8 +52,8 @@ export const ContextMenu: FC = ({ visible, handleClose, handle display: 'flex', flexDirection: 'column', alignItems: 'flex-start', - backgroundColor: '#ffffff', - boxShadow: '0px 0px 4px rgba(0, 0, 0, 0.25)', + backgroundColor: theme.palette.background.default, + boxShadow: theme.shadows[1], maxWidth: '375px', pointerEvents: 'auto', }} @@ -65,7 +67,7 @@ export const ContextMenu: FC = ({ visible, handleClose, handle textAlign: 'center', height: 60, width: '100%', - borderBottom: '1px solid #F0F0F0', + borderBottom: `1px solid ${theme.palette.colors.border01}`, }} > = ({ hint }) => { width: '100%', padding: 16, borderTopWidth: 1, - borderColor: '#F0F0F0', + borderColor: theme.palette.colors.border01, }} > @@ -136,7 +138,7 @@ export const ContextMenuItem: FC = ({ title, action }) => padding: '11px 16px', width: '100%', cursor: 'pointer', - borderBottom: '1px solid #F0F0F0', + borderBottom: `1px solid ${theme.palette.colors.border01}`, }} onClick={action} data-testid={`contextMenuItem${title}`} diff --git a/packages/desktop/src/renderer/components/ContextMenu/menus/UserProfileContextMenu.container.tsx b/packages/desktop/src/renderer/components/ContextMenu/menus/UserProfileContextMenu.container.tsx index 2e02ff2dbd..31ab730701 100644 --- a/packages/desktop/src/renderer/components/ContextMenu/menus/UserProfileContextMenu.container.tsx +++ b/packages/desktop/src/renderer/components/ContextMenu/menus/UserProfileContextMenu.container.tsx @@ -26,7 +26,7 @@ const classes = { editPhotoButton: `${PREFIX}editPhotoButton`, } -const StyledContextMenuContent = styled(Grid)(() => ({ +const StyledContextMenuContent = styled(Grid)(({ theme }) => ({ zIndex: 9002, flex: 1, @@ -67,10 +67,10 @@ const StyledContextMenuContent = styled(Grid)(() => ({ [`& .${classes.editUsernameField}`]: { color: '#33333380', - background: '#F0F0F0', + background: theme.palette.background.paper, margin: '0px 16px', padding: '16px', - border: '1px solid #B3B3B3', + border: `1px solid ${theme.palette.colors.border02}`, borderRadius: '8px', fontSize: '14px', fontWeight: '400', @@ -81,7 +81,7 @@ const StyledContextMenuContent = styled(Grid)(() => ({ background: 'inherit', padding: '6px 12px', borderRadius: '16px', - border: '1px solid #B3B3B3', + border: `1px solid ${theme.palette.colors.border02}`, fontSize: '14px', fontWeight: '400', textTransform: 'none', diff --git a/packages/desktop/src/renderer/components/LoadingPanel/JoiningPanelComponent.tsx b/packages/desktop/src/renderer/components/LoadingPanel/JoiningPanelComponent.tsx index bdcb919c9b..44aa1f233f 100644 --- a/packages/desktop/src/renderer/components/LoadingPanel/JoiningPanelComponent.tsx +++ b/packages/desktop/src/renderer/components/LoadingPanel/JoiningPanelComponent.tsx @@ -62,7 +62,7 @@ const StyledGrid = styled(Grid)(({ theme, width }) => ({ color: theme.palette.colors.black30, }, [`& .${classes.progressBar}`]: { - backgroundColor: theme.palette.colors.veryLightGray, + backgroundColor: theme.palette.background.paper, width: '300px', height: '4px', position: 'relative', diff --git a/packages/desktop/src/renderer/components/LoadingPanel/StartingPanelComponent.tsx b/packages/desktop/src/renderer/components/LoadingPanel/StartingPanelComponent.tsx index b86951ced2..e1cee21c83 100644 --- a/packages/desktop/src/renderer/components/LoadingPanel/StartingPanelComponent.tsx +++ b/packages/desktop/src/renderer/components/LoadingPanel/StartingPanelComponent.tsx @@ -45,7 +45,7 @@ const StyledGrid = styled(Grid)(({ theme, width }) => ({ color: theme.palette.colors.black30, }, [`& .${classes.progressBar}`]: { - backgroundColor: theme.palette.colors.veryLightGray, + backgroundColor: theme.palette.background.paper, width: '300px', height: '4px', position: 'relative', diff --git a/packages/desktop/src/renderer/components/SearchModal/SearchModelComponent.tsx b/packages/desktop/src/renderer/components/SearchModal/SearchModelComponent.tsx index 66999b1c9b..c9f1b38fc8 100644 --- a/packages/desktop/src/renderer/components/SearchModal/SearchModelComponent.tsx +++ b/packages/desktop/src/renderer/components/SearchModal/SearchModelComponent.tsx @@ -40,8 +40,8 @@ const StyledModalContent = styled(Grid)(({ theme }) => ({ height: '100%', }, [`& .${classes.modalContainer}`]: { - backgroundColor: '#FFFFFF', - boxShadow: '0px 2px 25px rgba(0, 0, 0, 0.2)', + backgroundColor: theme.palette.background.default, + boxShadow: theme.shadows[4], borderRadius: '8px', width: '60%', overflow: 'hidden', @@ -68,7 +68,7 @@ const StyledModalContent = styled(Grid)(({ theme }) => ({ [`& .${classes.line}`]: { width: '100%', height: '1px', - backgroundColor: theme.palette.colors.veryLightGray, + backgroundColor: theme.palette.background.paper, }, [`& .${classes.channel}`]: {}, [`& .${classes.channelWrapper}`]: { diff --git a/packages/desktop/src/renderer/components/Settings/SettingsComponent.tsx b/packages/desktop/src/renderer/components/Settings/SettingsComponent.tsx index fbe4b1b6ed..04e09ff3be 100644 --- a/packages/desktop/src/renderer/components/Settings/SettingsComponent.tsx +++ b/packages/desktop/src/renderer/components/Settings/SettingsComponent.tsx @@ -31,8 +31,8 @@ const StyledTabsWrapper = styled(Grid)(() => ({ })) const StyledAppBar = styled(AppBar, { label: 'xxxxx' })(({ theme }) => ({ - backgroundColor: '#fff', - boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.0)', + backgroundColor: theme.palette.background.default, + boxShadow: theme.shadows[3], [`& .${classes.leaveComunity}`]: { opacity: '1', diff --git a/packages/desktop/src/renderer/components/Titlebar.tsx b/packages/desktop/src/renderer/components/Titlebar.tsx index 66e4b680c6..da6b6caaf8 100644 --- a/packages/desktop/src/renderer/components/Titlebar.tsx +++ b/packages/desktop/src/renderer/components/Titlebar.tsx @@ -1,10 +1,11 @@ import { Titlebar, Color } from 'custom-electron-titlebar' +import theme from '../theme' export const addTitlebar = () => { setTimeout(() => { // eslint-disable-next-line const titlebar = new Titlebar({ - backgroundColor: Color.fromHex('#521c74'), + backgroundColor: Color.fromHex(theme.palette.primary.main), overflow: 'hidden', }) }, 0) diff --git a/packages/desktop/src/renderer/components/ui/ErrorModal/ErrorModalComponent.tsx b/packages/desktop/src/renderer/components/ui/ErrorModal/ErrorModalComponent.tsx index a86644a198..14f7a7552d 100644 --- a/packages/desktop/src/renderer/components/ui/ErrorModal/ErrorModalComponent.tsx +++ b/packages/desktop/src/renderer/components/ui/ErrorModal/ErrorModalComponent.tsx @@ -54,7 +54,7 @@ const StyledModalContent = styled(Grid)(({ theme }) => ({ [`& .${classes.textfield}`]: {}, [`& .${classes.cssDisabled}`]: { - backgroundColor: theme.palette.colors.inputGray, + backgroundColor: theme.palette.background.paper, color: theme.palette.colors.red, }, diff --git a/packages/desktop/src/renderer/components/ui/Modal/Modal.tsx b/packages/desktop/src/renderer/components/ui/Modal/Modal.tsx index 6a0b4e924c..a1480dc917 100644 --- a/packages/desktop/src/renderer/components/ui/Modal/Modal.tsx +++ b/packages/desktop/src/renderer/components/ui/Modal/Modal.tsx @@ -72,7 +72,7 @@ const StyledMaterialModal = styled(StyledMaterialModalWithProps)(({ theme, zInde }, [`& .${classes.headerBorder}`]: { - borderBottom: `1px solid ${theme.palette.colors.contentGray}`, + borderBottom: `1px solid ${theme.palette.colors.border03}`, }, [`& .${classes.actions}`]: { diff --git a/packages/desktop/src/renderer/components/ui/OpenlinkModal/OpenlinkModal.tsx b/packages/desktop/src/renderer/components/ui/OpenlinkModal/OpenlinkModal.tsx index 2fec9632fb..ddc6f5c1d6 100644 --- a/packages/desktop/src/renderer/components/ui/OpenlinkModal/OpenlinkModal.tsx +++ b/packages/desktop/src/renderer/components/ui/OpenlinkModal/OpenlinkModal.tsx @@ -16,6 +16,8 @@ import Icon from '../Icon/Icon' import exclamationMark from '../../../static/images/exclamationMark.svg' import Modal from '../Modal/Modal' +import theme from '../../../theme' + const PREFIX = 'OpenlinkModal' const classes = { @@ -201,7 +203,7 @@ export const OpenlinkModal: React.FC = ({ ({ }, [`& .${classes.dialogContent}`]: { - borderBottom: `1px solid ${theme.palette.colors.veryLightGray}`, + borderBottom: `1px solid ${theme.palette.colors.border01}`, }, [`& .${classes.buttonNo}`]: { - borderRight: `1px solid ${theme.palette.colors.veryLightGray}`, + borderRight: `1px solid ${theme.palette.colors.border01}`, cursor: 'pointer', padding: 10, }, diff --git a/packages/desktop/src/renderer/components/ui/Spinner/SpinnerLoader.tsx b/packages/desktop/src/renderer/components/ui/Spinner/SpinnerLoader.tsx index dcb917480a..4627e2ba1e 100644 --- a/packages/desktop/src/renderer/components/ui/Spinner/SpinnerLoader.tsx +++ b/packages/desktop/src/renderer/components/ui/Spinner/SpinnerLoader.tsx @@ -16,7 +16,7 @@ const classes = { const StyledGrid = styled(Grid)(({ theme }) => ({ [`& .${classes.message}`]: { marginTop: theme.spacing(2), - color: theme.palette.primary.main, + color: theme.palette.colors.mediumGray, }, [`& .${classes.spinner}`]: (props: any) => ({ diff --git a/packages/desktop/src/renderer/components/widgets/MessagesDivider.tsx b/packages/desktop/src/renderer/components/widgets/MessagesDivider.tsx index d2e8792d38..cb3913da05 100644 --- a/packages/desktop/src/renderer/components/widgets/MessagesDivider.tsx +++ b/packages/desktop/src/renderer/components/widgets/MessagesDivider.tsx @@ -19,7 +19,7 @@ const StyledGrid = styled(Grid)(({ theme }) => ({ [`& .${classes.divider}`]: { height: 1, - backgroundColor: theme.palette.colors.veryLightGray, + backgroundColor: theme.palette.colors.border01, }, [`& .${classes.titleDiv}`]: { diff --git a/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.tsx b/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.tsx index 0f92ddfe6b..ecf542f346 100644 --- a/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.tsx +++ b/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.tsx @@ -97,7 +97,7 @@ const StyledListItem = styled(ListItem)(({ theme }) => ({ marginRight: 10, marginBottom: 4, borderRadius: 4, - backgroundColor: theme.palette.colors.grayBackgroud, + backgroundColor: theme.palette.background.paper, }, [`& .${classes.alignAvatar}`]: { diff --git a/packages/desktop/src/renderer/components/widgets/channels/ChannelHeader.tsx b/packages/desktop/src/renderer/components/widgets/channels/ChannelHeader.tsx index 0d065ecd10..608dce53cb 100644 --- a/packages/desktop/src/renderer/components/widgets/channels/ChannelHeader.tsx +++ b/packages/desktop/src/renderer/components/widgets/channels/ChannelHeader.tsx @@ -36,7 +36,7 @@ const Root = styled('div')(({ theme }) => ({ height: '75px', paddingLeft: 20, paddingRight: 24, - borderBottom: `1px solid ${theme.palette.colors.veryLightGray}`, + borderBottom: `1px solid ${theme.palette.colors.border01}`, }, [`& .${classes.title}`]: { @@ -92,7 +92,7 @@ const Root = styled('div')(({ theme }) => ({ top: 75, padding: '12px 25px 12px 20px', backgroundColor: theme.palette.colors.white, - boxShadow: `0px 1px 0px ${theme.palette.colors.veryLightGray}`, + boxShadow: theme.shadows[2], }, [`&.${classes.wrapper}`]: {}, diff --git a/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/ChannelInput.tsx b/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/ChannelInput.tsx index 7f5d2d2aac..88dbcbb14c 100644 --- a/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/ChannelInput.tsx +++ b/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/ChannelInput.tsx @@ -45,12 +45,12 @@ const maxHeight = 300 const StyledChannelInput = styled(Grid)(({ theme }) => ({ [`&.${classes.root}`]: { - background: '#fff', + background: theme.palette.background.default, height: '100%', width: '100%', }, [`& .${classes.rootContent}`]: { - background: '#fff', + background: theme.palette.background.default, height: '100%', width: '100%', }, @@ -86,7 +86,7 @@ const StyledChannelInput = styled(Grid)(({ theme }) => ({ paddingRight: '60px', }, [`& .${classes.textfield}`]: { - border: `1px solid ${theme.palette.colors.veryLightGray}`, + border: `1px solid ${theme.palette.colors.border01}`, maxHeight: maxHeight, overflowY: 'auto', borderRadius: 4, diff --git a/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/MentionElement.tsx b/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/MentionElement.tsx index 7d97ae2030..ccfe988c84 100644 --- a/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/MentionElement.tsx +++ b/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/MentionElement.tsx @@ -28,7 +28,7 @@ const StyledGrid = styled(Grid)(({ theme }) => ({ maxHeight: 18, maxWidth: 18, borderRadius: 4, - backgroundColor: theme.palette.colors.grayBackgroud, + backgroundColor: theme.palette.background.paper, }, [`& .${classes.alignAvatar}`]: { diff --git a/packages/desktop/src/renderer/components/widgets/channels/TextMessage.tsx b/packages/desktop/src/renderer/components/widgets/channels/TextMessage.tsx index 93dc4c4a49..17d78c3570 100644 --- a/packages/desktop/src/renderer/components/widgets/channels/TextMessage.tsx +++ b/packages/desktop/src/renderer/components/widgets/channels/TextMessage.tsx @@ -50,12 +50,12 @@ const StyledTypography = styled(Typography)(() => ({ }, [`& .${classes.code}`]: { - backgroundColor: theme.palette.colors.veryLightGray, + backgroundColor: theme.palette.background.paper, padding: '.25em', }, [`& .${classes.pre}`]: { - backgroundColor: theme.palette.colors.veryLightGray, + backgroundColor: theme.palette.background.paper, padding: '.25em', }, @@ -90,7 +90,7 @@ const StyledTypography = styled(Typography)(() => ({ [`& .${classes.tableHeaderCell}`]: { borderBottom: 'solid', borderBottomWidth: 1, - borderColor: theme.palette.colors.veryLightGray, + borderColor: theme.palette.colors.border01, textAlign: 'center', }, diff --git a/packages/desktop/src/renderer/theme.ts b/packages/desktop/src/renderer/theme.ts index 46bcafd117..e58747960f 100644 --- a/packages/desktop/src/renderer/theme.ts +++ b/packages/desktop/src/renderer/theme.ts @@ -62,53 +62,61 @@ export default createTheme({ }, }, palette: { + // type: 'light', // Currently commented out because of type errors + background: { + // Background colors (white-ish for light theme, black-ish for dark) + default: '#ffffff', + paper: '#F0F0F0', + }, + // text: {}, // font colors (black-ish for light theme, white-ish for dark) primary: { - light: '#e9e9e9', - main: '#8d8d8d', - dark: '#4a4a4a', + // Primary Quiet brand purple + main: '#521C74', + dark: '#461863', + }, + secondary: { + // Secondary Quiet brand red (TODO: Make sure this is Secondary, not error/warning) + main: '#E42656', + dark: '#C41743', }, + // TO BE ADDED IF NEEDED: Success, Warning, Error, Neutral colors: { - contentGray: '#D2D2D2', - titleGray: '#555555', + // Misc colors. For primary / secondary brand, text, and background colors, use those objects + mediumGray: '#8d8d8d', white: '#FFFFFF', blue: '#2196f3', - purple: '#521C74', - darkPurple: '#4d1a6d', + purple: '#521C74', // To be replaced with theme.palette.primary.main + darkPurple: '#4d1a6d', // To be replaced with theme.palette.primary.dark? gray: '#e7e7e7', - inputGray: '#E0E0E0', - black: '#333333', - trueBlack: '#000000', - quietBlue: '#521c74', - captionPurple: '#9B60A5', + trueBlack: '#000000', // To be replaced with text color and border color + quietBlue: '#521c74', // To be replaced with theme.palette.primary.main darkGray: '#7F7F7F', gray03: '#F7F7F7', - gray40: '#999999', lushSky: '#67BFD3', lushSky12: '#EDF7FA', - lightGray: '#B2B2B2', - veryLightGray: '#F0F0F0', - green: '#4CBB17', - greenDark: '#9BD174', - red: '#FF0000', - hotRed: '#E42656', - hotPink: '#E42656', - linkBlue: '#59c0d5', - buttonGray: '#E3E3E3', - black30: '#4C4C4C', - gray30: '#FAFAFA', - grayBackgroud: '#F3F0F6', - gray50: '#B3B3B3', - error: '#D13135', - logsDark: '#252526', - logsActiveDark: '#1E1E1E', - logsInactiveDark: '#2D2D2D', - logsTitleGray: '#D4D4D4', - logsTabWhite: '#A9A9A9', - logsScrollBar: '#3D3D3D', - logsScrollBarThumb: ' #787878', - yellow: '#E6BB46', + lightGray: '#B2B2B2', // To be replaced with gray30 + border01: '#F0F0F0', + border02: '#B3B3B3', + border03: '#D2D2D2', + red: '#FF0000', // Replace with D13135 ? + hotRed: '#E42656', // Replaced by theme.palette.secondary.main + hotPink: '#E42656', // Replaced by theme.palette.secondary.main + linkBlue: '#59c0d5', // Used in a variety of places - likely wants to be split / consolidated + black30: '#4C4C4C', // Rename to gray70 + gray30: '#FAFAFA', // Unused and not aligned with Figma + gray40: '#999999', + gray50: '#7F7F7F', + error: '#D13135', // Need to align with Figma }, }, + //@ts-ignore MUI types expect 25 shadows - see: https://github.com/mui/material-ui/issues/28820 + shadows: [ + 'none', + '0px 0px 4px rgba(0, 0, 0, 0.25)', + '0px 1px 0px #F0F0F0', + '0px 1px 3px rgba(0, 0, 0, 0.0)', + '0px 2px 25px rgba(0, 0, 0, 0.2)', + ], components: { // Body font size changed in mui v5: https://mui.com/material-ui/migration/v5-component-changes/#update-body-font-size MuiCssBaseline: {