From 84bf50a3e4018530e077b04f1d63c4202792dd50 Mon Sep 17 00:00:00 2001 From: Mike Kiss Date: Fri, 10 May 2024 21:11:35 -0400 Subject: [PATCH] feat: #1502 Implement dark mode, tidy up loose styles and unused classes. --- packages/desktop/src/renderer/Root.tsx | 2 +- .../components/Settings/SettingsComponent.tsx | 2 -- .../renderer/components/ui/Modal/Modal.tsx | 1 - .../widgets/channels/ChannelHeader.tsx | 5 ---- .../channels/ChannelInput/ChannelInput.tsx | 4 ---- .../widgets/channels/ChannelMessages.tsx | 6 ----- packages/desktop/src/renderer/theme.ts | 24 +++++++++++++------ 7 files changed, 18 insertions(+), 26 deletions(-) diff --git a/packages/desktop/src/renderer/Root.tsx b/packages/desktop/src/renderer/Root.tsx index b9bd2b9e9a..c7e5b0aebd 100644 --- a/packages/desktop/src/renderer/Root.tsx +++ b/packages/desktop/src/renderer/Root.tsx @@ -43,7 +43,7 @@ export const persistor = persistStore(store) export default () => { return ( - + diff --git a/packages/desktop/src/renderer/components/Settings/SettingsComponent.tsx b/packages/desktop/src/renderer/components/Settings/SettingsComponent.tsx index 04e09ff3be..88e6523349 100644 --- a/packages/desktop/src/renderer/components/Settings/SettingsComponent.tsx +++ b/packages/desktop/src/renderer/components/Settings/SettingsComponent.tsx @@ -48,8 +48,6 @@ const StyledAppBar = styled(AppBar, { label: 'xxxxx' })(({ theme }) => ({ })) const StyledTabs = styled(Tabs)(({ theme }) => ({ - color: theme.palette.colors.trueBlack, - [`& .${classes.indicator}`]: { height: '0 !important', }, diff --git a/packages/desktop/src/renderer/components/ui/Modal/Modal.tsx b/packages/desktop/src/renderer/components/ui/Modal/Modal.tsx index 3ff750b5d5..8f9af1b641 100644 --- a/packages/desktop/src/renderer/components/ui/Modal/Modal.tsx +++ b/packages/desktop/src/renderer/components/ui/Modal/Modal.tsx @@ -60,7 +60,6 @@ const StyledMaterialModal = styled(StyledMaterialModalWithProps)(({ theme, zInde [`& .${classes.title}`]: { fontSize: 15, - color: theme.palette.colors.trueBlack, lineHeight: '18px', fontStyle: 'normal', fontWeight: 'normal', diff --git a/packages/desktop/src/renderer/components/widgets/channels/ChannelHeader.tsx b/packages/desktop/src/renderer/components/widgets/channels/ChannelHeader.tsx index cc3b03e414..fa972ee9fb 100644 --- a/packages/desktop/src/renderer/components/widgets/channels/ChannelHeader.tsx +++ b/packages/desktop/src/renderer/components/widgets/channels/ChannelHeader.tsx @@ -79,11 +79,6 @@ const Root = styled('div')(({ theme }) => ({ minHeight: 0, }, - [`& .${classes.selected}`]: { - color: theme.palette.colors.trueBlack, - backgroundColor: theme.palette.colors.white, - }, - [`& .${classes.indicator}`]: { maxHeight: 0, }, 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 88dbcbb14c..9514b4c084 100644 --- a/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/ChannelInput.tsx +++ b/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/ChannelInput.tsx @@ -33,7 +33,6 @@ const classes = { actions: `${PREFIX}actions`, picker: `${PREFIX}picker`, errorIcon: `${PREFIX}errorIcon`, - errorText: `${PREFIX}errorText`, errorBox: `${PREFIX}errorBox`, linkBlue: `${PREFIX}linkBlue`, notAllowed: `${PREFIX}notAllowed`, @@ -175,9 +174,6 @@ const StyledChannelInput = styled(Grid)(({ theme }) => ({ marginLeft: 20, marginRight: 5, }, - [`& .${classes.errorText}`]: { - color: theme.palette.colors.trueBlack, - }, [`& .${classes.errorBox}`]: { marginTop: 5, }, diff --git a/packages/desktop/src/renderer/components/widgets/channels/ChannelMessages.tsx b/packages/desktop/src/renderer/components/widgets/channels/ChannelMessages.tsx index 5445b7170d..b8624215e1 100644 --- a/packages/desktop/src/renderer/components/widgets/channels/ChannelMessages.tsx +++ b/packages/desktop/src/renderer/components/widgets/channels/ChannelMessages.tsx @@ -22,7 +22,6 @@ const classes = { scroll: `${PREFIX}scroll`, list: `${PREFIX}list`, link: `${PREFIX}link`, - info: `${PREFIX}info`, item: `${PREFIX}item`, bold: `${PREFIX}bold`, } @@ -51,11 +50,6 @@ const Root = styled('div')(({ theme }) => ({ cursor: 'pointer', }, - [`& .${classes.info}`]: { - color: theme.palette.colors.trueBlack, - letterSpacing: '0.4px', - }, - [`& .${classes.item}`]: { backgroundColor: theme.palette.colors.gray03, padding: '9px 16px', diff --git a/packages/desktop/src/renderer/theme.ts b/packages/desktop/src/renderer/theme.ts index 71bf92bb6d..3e3d8aa109 100644 --- a/packages/desktop/src/renderer/theme.ts +++ b/packages/desktop/src/renderer/theme.ts @@ -116,6 +116,8 @@ const lightTheme = createTheme({ border01: '#F0F0F0', border02: '#B3B3B3', border03: '#D2D2D2', + //Gradients and other fancy things + sidebarBackground: 'linear-gradient(290.29deg, #521576 18.61%, #E42656 96.07%)', }, }, //@ts-ignore MUI types expect 25 shadows - see: https://github.com/mui/material-ui/issues/28820 @@ -203,7 +205,6 @@ const darkTheme = createTheme({ caption: { fontSize: 12, lineHeight: '20px', - color: '#b2b2b2', }, body1: { fontSize: 16, @@ -246,12 +247,19 @@ const darkTheme = createTheme({ lineHeight: '26px', fontWeight: 500, }, + h6: { + fontSize: 16, + lineHeight: '26px', + fontWeight: 500, + color: '#fff', + }, }, palette: { + mode: 'dark', background: { // Background colors (white-ish for light theme, black-ish for dark) - default: '#ffffff', - paper: '#F0F0F0', + default: '#151515', + paper: '#222222', }, // text: {}, // font colors (black-ish for light theme, white-ish for dark) primary: { @@ -302,15 +310,17 @@ const darkTheme = createTheme({ border01: '#F0F0F0', border02: '#B3B3B3', border03: '#D2D2D2', + // Gradients and other run-of-the-mill things + sidebarBackground: 'linear-gradient(290.29deg, #1f092c 18.61%, #03081c 96.07%)', }, }, //@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)', + '0px 0px 4px rgba(1, 1, 1, 0.25)', + '0px 1px 0px #0F0F0F', + '0px 1px 3px rgba(1, 1, 1, 0.0)', + '0px 2px 25px rgba(1, 1, 1, 0.2)', ], components: { // Body font size changed in mui v5: https://mui.com/material-ui/migration/v5-component-changes/#update-body-font-size