From d3fabeb3ed8d08e6d3d1eafc308be806a2181159 Mon Sep 17 00:00:00 2001 From: Mike Kiss Date: Tue, 14 May 2024 12:48:28 -0400 Subject: [PATCH] feat: #1502 Tweak more backgrounds in sidebar, Jdenticons, etc. --- .../menus/UserProfileContextMenu.container.tsx | 14 ++++++++------ .../components/Sidebar/SidebarComponent.tsx | 2 +- .../Sidebar/UserProfilePanel/UserProfilePanel.tsx | 6 ++++-- .../desktop/src/renderer/components/ui/Tab/Tab.tsx | 2 +- packages/desktop/src/renderer/theme.ts | 4 ++-- 5 files changed, 16 insertions(+), 12 deletions(-) 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 31ab730701..56898401fa 100644 --- a/packages/desktop/src/renderer/components/ContextMenu/menus/UserProfileContextMenu.container.tsx +++ b/packages/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,7 +58,6 @@ const StyledContextMenuContent = styled(Grid)(({ theme }) => ({ }, [`& .${classes.editUsernameFieldLabel}`]: { - color: '#4C4C4C', margin: '0px 16px 8px 16px', fontSize: '14px', fontWeight: '400', @@ -66,7 +65,6 @@ const StyledContextMenuContent = styled(Grid)(({ theme }) => ({ }, [`& .${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 = ( 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 = ( style={{ width: '96px', height: '96px', - background: '#F3F0F6', + background: theme.palette.background.paper, borderRadius: '8px', marginBottom: '16px', }} @@ -315,6 +315,8 @@ export const UserProfileMenuEditView: FC = ({ 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 = ({ 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 index f7c62c9161..af83eb7e89 100644 --- 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 index 87da257f2a..7e843f2b1f 100644 --- 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 = ({ userProfile, userProfileContextMenu, }) => { + const theme = useTheme() + const username = currentIdentity?.nickname || '' return ( @@ -90,7 +92,7 @@ export const UserProfilePanel: React.FC = ({ 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 index c148b94fda..cd1870329b 100644 --- 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 index 774136685f..87ac6f0827 100644 --- 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