feat: TryQuiet#1502 Tweak more backgrounds in sidebar, Jdenticons, etc.

mike-kiss · May 14, 2024 · d3fabeb · d3fabeb
1 parent 1fb3969
commit d3fabeb
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 12 deletions.
diff --git a/...es/desktop/src/renderer/components/ContextMenu/menus/UserProfileContextMenu.container.tsx b/...es/desktop/src/renderer/components/ContextMenu/menus/UserProfileContextMenu.container.tsx
@@ -2,7 +2,7 @@ import React, { FC, useRef, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { AutoSizer } from 'react-virtualized'
 import { Scrollbars } from 'rc-scrollbars'
-import { styled, Grid, List, Typography } from '@mui/material'
+import { styled, Grid, List, Typography, useTheme } from '@mui/material'
 
 import { identity, users } from '@quiet/state-manager'
 
@@ -58,15 +58,13 @@ const StyledContextMenuContent = styled(Grid)(({ theme }) => ({
   },
 
   [`& .${classes.editUsernameFieldLabel}`]: {
-    color: '#4C4C4C',
     margin: '0px 16px 8px 16px',
     fontSize: '14px',
     fontWeight: '400',
     fontFamily: 'Rubik, sans-serif',
   },
 
   [`& .${classes.editUsernameField}`]: {
-    color: '#33333380',
     background: theme.palette.background.paper,
     margin: '0px 16px',
     padding: '16px',
@@ -88,7 +86,7 @@ const StyledContextMenuContent = styled(Grid)(({ theme }) => ({
     fontFamily: 'Rubik, sans-serif',
     cursor: 'pointer',
     '&:hover': {
-      backgroundColor: '#B3B3B31A',
+      backgroundColor: theme.palette.background.paper,
     },
   },
 }))
@@ -160,6 +158,8 @@ export const UserProfileMenuProfileView: FC<UserProfileMenuProfileViewProps> = (
   const scrollbarRef = useRef(null)
   const [offset, setOffset] = useState(0)
 
+  const theme = useTheme()
+
   const adjustOffset = () => {
     if (!contentRef?.clientWidth) return
     if (contentRef.clientWidth > 800) {
@@ -209,7 +209,7 @@ export const UserProfileMenuProfileView: FC<UserProfileMenuProfileViewProps> = (
                           style={{
                             width: '96px',
                             height: '96px',
-                            background: '#F3F0F6',
+                            background: theme.palette.background.paper,
                             borderRadius: '8px',
                             marginBottom: '16px',
                           }}
@@ -315,6 +315,8 @@ export const UserProfileMenuEditView: FC<UserProfileMenuEditViewProps> = ({
   const scrollbarRef = useRef(null)
   const [offset, setOffset] = useState(0)
 
+  const theme = useTheme()
+
   const adjustOffset = () => {
     if (!contentRef?.clientWidth) return
     if (contentRef.clientWidth > 800) {
@@ -418,7 +420,7 @@ export const UserProfileMenuEditView: FC<UserProfileMenuEditViewProps> = ({
                           style={{
                             width: '96px',
                             height: '96px',
-                            background: '#F3F0F6',
+                            background: theme.palette.background.paper,
                             borderRadius: '8px',
                             marginBottom: '16px',
                           }}

diff --git a/packages/desktop/src/renderer/components/Sidebar/SidebarComponent.tsx b/packages/desktop/src/renderer/components/Sidebar/SidebarComponent.tsx
@@ -25,7 +25,7 @@ const StyledGrid = styled(Grid)(({ theme }) => ({
     minHeight: '100%',
     width: '220px',
     position: 'relative',
-    backgroundImage: theme.palette.colors.sidebarBackground,
+    backgroundColor: theme.palette.colors.sidebarBackground,
     color: theme.palette.colors.white,
   },
 

diff --git a/packages/desktop/src/renderer/components/Sidebar/UserProfilePanel/UserProfilePanel.tsx b/packages/desktop/src/renderer/components/Sidebar/UserProfilePanel/UserProfilePanel.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { styled } from '@mui/material/styles'
-import { Button } from '@mui/material'
+import { Button, useTheme } from '@mui/material'
 import Grid from '@mui/material/Grid'
 import Typography from '@mui/material/Typography'
 
@@ -69,6 +69,8 @@ export const UserProfilePanel: React.FC<UserProfilePanelProps> = ({
   userProfile,
   userProfileContextMenu,
 }) => {
+  const theme = useTheme()
+
   const username = currentIdentity?.nickname || ''
   return (
     <UserProfilePanelButtonStyled>
@@ -90,7 +92,7 @@ export const UserProfilePanel: React.FC<UserProfilePanelProps> = ({
             style={{
               width: '24px',
               height: '24px',
-              background: '#F3F0F6',
+              background: theme.palette.background.paper,
               borderRadius: '4px',
               marginRight: '8px',
             }}

diff --git a/packages/desktop/src/renderer/components/ui/Tab/Tab.tsx b/packages/desktop/src/renderer/components/ui/Tab/Tab.tsx
@@ -23,7 +23,7 @@ const StyledMuiTab = styled(MuiTab)(({ theme }) => ({
   },
 
   [`&.${classes.selected}`]: {
-    backgroundColor: theme.palette.colors.lushSky,
+    backgroundColor: theme.palette.background.paper,
     borderRadius: 5,
     color: `${theme.palette.colors.white} !important`,
   },

diff --git a/packages/desktop/src/renderer/theme.ts b/packages/desktop/src/renderer/theme.ts
@@ -119,7 +119,7 @@ const lightTheme = createTheme({
       border02: '#B3B3B3',
       border03: '#D2D2D2',
       //Gradients and other fancy things
-      sidebarBackground: 'linear-gradient(290.29deg, #521576 18.61%, #E42656 96.07%)',
+      sidebarBackground: '#711FA5',
     },
   },
   //@ts-ignore MUI types expect 25 shadows - see: https://github.com/mui/material-ui/issues/28820
@@ -313,7 +313,7 @@ const darkTheme = createTheme({
       border02: '#B3B3B3',
       border03: '#D2D2D2',
       // Gradients and other run-of-the-mill things
-      sidebarBackground: 'linear-gradient(290.29deg, #1f092c 18.61%, #03081c 96.07%)',
+      sidebarBackground: '#2F193D',
     },
   },
   //@ts-ignore MUI types expect 25 shadows - see: https://github.com/mui/material-ui/issues/28820