feat: TryQuiet#1502 Implement dark mode, tidy up loose styles and unu…

…sed classes.
mike-kiss · May 11, 2024 · 84bf50a · 84bf50a
1 parent 450e02f
commit 84bf50a
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 26 deletions.
diff --git 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 (
     <StyledEngineProvider injectFirst>
-      <ThemeProvider theme={lightTheme}>
+      <ThemeProvider theme={darkTheme}>
         <DndProvider backend={HTML5Backend}>
           <HashRouter>
             <Provider store={store}>

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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