From 078b3a16af7c3d96901df3d77bfc28968557e899 Mon Sep 17 00:00:00 2001 From: Mike <142341848+mike-kiss@users.noreply.github.com> Date: Thu, 9 May 2024 16:10:34 -0400 Subject: [PATCH] refactor: second-pass color consolidation (issue #2445) (#2484) --- CHANGELOG.md | 2 +- .../ChangeUsername/ChangeUsername.component.tsx | 16 ++++++++-------- .../CreateChannel/CreateChannelComponent.tsx | 14 +++++++------- .../components/Channel/File/UploadingPreview.tsx | 2 +- .../PerformCommunityActionComponent.tsx | 2 +- .../CreateUsername/CreateUsernameComponent.tsx | 4 ++-- .../LoadingPanel/JoiningPanelComponent.tsx | 2 +- .../LoadingPanel/StartingPanelComponent.tsx | 2 +- .../components/SearchModal/SearchModal.test.tsx | 4 ++-- .../SearchModal/SearchModelComponent.tsx | 2 +- .../components/ui/ErrorModal/ErrorModal.test.tsx | 2 +- .../components/ui/Slider/Slider.test.tsx | 6 +++--- .../src/renderer/components/ui/Slider/Slider.tsx | 2 +- .../widgets/channels/ChannelMessageActions.tsx | 2 +- .../widgets/userLabel/UserLabel.component.tsx | 2 +- packages/desktop/src/renderer/theme.ts | 11 ++++++++--- 16 files changed, 40 insertions(+), 35 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5100c53495..80b828916d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,9 +6,9 @@ * Use server for downloading initial community metadata if v2 invitation link is detected ([#2295](https://github.com/TryQuiet/quiet/issues/2295)) # Refactorings: +* Consolidate colors and align theme with MUI standards ([#2445](https://github.com/TryQuiet/quiet/issues/2445)) # Fixes: - * Disable spellCheck/autoCorrect on non-spelling sensitive fields like usernames and channels ([#373](https://github.com/TryQuiet/quiet/issues/373)) * Fixes issue with reconnecting to peers on resume on iOS ([#2424](https://github.com/TryQuiet/quiet/issues/2424)) diff --git a/packages/desktop/src/renderer/components/ChangeUsername/ChangeUsername.component.tsx b/packages/desktop/src/renderer/components/ChangeUsername/ChangeUsername.component.tsx index 669eaa1391..ff8cd8a01d 100644 --- a/packages/desktop/src/renderer/components/ChangeUsername/ChangeUsername.component.tsx +++ b/packages/desktop/src/renderer/components/ChangeUsername/ChangeUsername.component.tsx @@ -28,8 +28,8 @@ const classes = { button: `${PREFIX}button`, title: `${PREFIX}title`, iconDiv: `${PREFIX}iconDiv`, - warrningIcon: `${PREFIX}warrningIcon`, - warrningMessage: `${PREFIX}warrningMessage`, + warningIcon: `${PREFIX}warningIcon`, + warningMessage: `${PREFIX}warningMessage`, rootBar: `${PREFIX}rootBar`, progressBar: `${PREFIX}progressBar`, info: `${PREFIX}info`, @@ -96,11 +96,11 @@ const StyledGrid = styled(Grid)(({ theme }) => ({ marginRight: 8, }, - [`& .${classes.warrningIcon}`]: { - color: '#FFCC00', + [`& .${classes.warningIcon}`]: { + color: theme.palette.warning.main, }, - [`& .${classes.warrningMessage}`]: { + [`& .${classes.warningMessage}`]: { wordBreak: 'break-word', }, @@ -122,7 +122,7 @@ const StyledGrid = styled(Grid)(({ theme }) => ({ [`& .${classes.inputLabel}`]: { marginTop: 24, marginBottom: 2, - color: theme.palette.colors.black30, + color: theme.palette.colors.gray70, }, [`& .${classes.marginMedium}`]: { @@ -257,10 +257,10 @@ export const ChangeUsername: React.FC = ({ {!errors.userName && userName.length > 0 && parsedNameDiffers && ( - + - + Your username will be registered as {`@${userName}`} diff --git a/packages/desktop/src/renderer/components/Channel/CreateChannel/CreateChannelComponent.tsx b/packages/desktop/src/renderer/components/Channel/CreateChannel/CreateChannelComponent.tsx index 51197f2a59..3e70e00d30 100644 --- a/packages/desktop/src/renderer/components/Channel/CreateChannel/CreateChannelComponent.tsx +++ b/packages/desktop/src/renderer/components/Channel/CreateChannel/CreateChannelComponent.tsx @@ -22,8 +22,8 @@ const classes = { button: `${PREFIX}button`, title: `${PREFIX}title`, iconDiv: `${PREFIX}iconDiv`, - warrningIcon: `${PREFIX}warrningIcon`, - warrningMessage: `${PREFIX}warrningMessage`, + warningIcon: `${PREFIX}warningIcon`, + warningMessage: `${PREFIX}warningMessage`, rootBar: `${PREFIX}rootBar`, progressBar: `${PREFIX}progressBar`, info: `${PREFIX}info`, @@ -65,11 +65,11 @@ const StyledModalContent = styled(Grid)(({ theme }) => ({ marginRight: 8, }, - [`& .${classes.warrningIcon}`]: { - color: '#FFCC00', + [`& .${classes.warningIcon}`]: { + color: theme.palette.warning.main, }, - [`& .${classes.warrningMessage}`]: { + [`& .${classes.warningMessage}`]: { wordBreak: 'break-word', }, @@ -198,12 +198,12 @@ export const CreateChannelComponent: React.FC = ({ {!errors.channelName && channelName.length > 0 && parsedNameDiffers && ( - + Your channel will be created as {`#${channelName}`} diff --git a/packages/desktop/src/renderer/components/Channel/File/UploadingPreview.tsx b/packages/desktop/src/renderer/components/Channel/File/UploadingPreview.tsx index 54ef0f18da..f326202845 100644 --- a/packages/desktop/src/renderer/components/Channel/File/UploadingPreview.tsx +++ b/packages/desktop/src/renderer/components/Channel/File/UploadingPreview.tsx @@ -59,7 +59,7 @@ const StyledFilePreviewComponent = styled('div')(({ theme }) => ({ position: 'absolute', margin: '0 0 0 51px', // Left margin is equal fileContainer width minus half the own width padding: '0', - backgroundColor: 'white', + backgroundColor: theme.palette.background.default, borderRadius: '100%', width: '22px', height: '22px', diff --git a/packages/desktop/src/renderer/components/CreateJoinCommunity/PerformCommunityActionComponent.tsx b/packages/desktop/src/renderer/components/CreateJoinCommunity/PerformCommunityActionComponent.tsx index b1e3546e60..116fc32c10 100644 --- a/packages/desktop/src/renderer/components/CreateJoinCommunity/PerformCommunityActionComponent.tsx +++ b/packages/desktop/src/renderer/components/CreateJoinCommunity/PerformCommunityActionComponent.tsx @@ -99,7 +99,7 @@ const StyledModalContent = styled(Grid)(({ theme }) => ({ }, [`& .${classes.warrningIcon}`]: { - color: '#FFCC00', + color: theme.palette.warning.main, }, [`& .${classes.warrningMessage}`]: { diff --git a/packages/desktop/src/renderer/components/CreateUsername/CreateUsernameComponent.tsx b/packages/desktop/src/renderer/components/CreateUsername/CreateUsernameComponent.tsx index a445d4c858..9f20950ac7 100644 --- a/packages/desktop/src/renderer/components/CreateUsername/CreateUsernameComponent.tsx +++ b/packages/desktop/src/renderer/components/CreateUsername/CreateUsernameComponent.tsx @@ -105,7 +105,7 @@ const StyledGrid = styled(Grid)(({ theme }) => ({ }, [`& .${classes.warrningIcon}`]: { - color: '#FFCC00', + color: theme.palette.warning.main, }, [`& .${classes.warrningMessage}`]: { @@ -130,7 +130,7 @@ const StyledGrid = styled(Grid)(({ theme }) => ({ [`& .${classes.inputLabel}`]: { marginTop: 24, marginBottom: 2, - color: theme.palette.colors.black30, + color: theme.palette.colors.gray70, }, [`& .${classes.marginMedium}`]: { diff --git a/packages/desktop/src/renderer/components/LoadingPanel/JoiningPanelComponent.tsx b/packages/desktop/src/renderer/components/LoadingPanel/JoiningPanelComponent.tsx index 44aa1f233f..5daf5c7bed 100644 --- a/packages/desktop/src/renderer/components/LoadingPanel/JoiningPanelComponent.tsx +++ b/packages/desktop/src/renderer/components/LoadingPanel/JoiningPanelComponent.tsx @@ -59,7 +59,7 @@ const StyledGrid = styled(Grid)(({ theme, width }) => ({ marginTop: '16px', }, [`& .${classes.text}`]: { - color: theme.palette.colors.black30, + color: theme.palette.colors.gray70, }, [`& .${classes.progressBar}`]: { backgroundColor: theme.palette.background.paper, diff --git a/packages/desktop/src/renderer/components/LoadingPanel/StartingPanelComponent.tsx b/packages/desktop/src/renderer/components/LoadingPanel/StartingPanelComponent.tsx index e1cee21c83..4a3069ce79 100644 --- a/packages/desktop/src/renderer/components/LoadingPanel/StartingPanelComponent.tsx +++ b/packages/desktop/src/renderer/components/LoadingPanel/StartingPanelComponent.tsx @@ -42,7 +42,7 @@ const StyledGrid = styled(Grid)(({ theme, width }) => ({ marginTop: '16px', }, [`& .${classes.text}`]: { - color: theme.palette.colors.black30, + color: theme.palette.colors.gray70, }, [`& .${classes.progressBar}`]: { backgroundColor: theme.palette.background.paper, diff --git a/packages/desktop/src/renderer/components/SearchModal/SearchModal.test.tsx b/packages/desktop/src/renderer/components/SearchModal/SearchModal.test.tsx index 5a10f28be0..06f57e06ad 100644 --- a/packages/desktop/src/renderer/components/SearchModal/SearchModal.test.tsx +++ b/packages/desktop/src/renderer/components/SearchModal/SearchModal.test.tsx @@ -168,7 +168,7 @@ describe('Search Modal', () => { data-testid="searchChannelInput" >
{

({ }, }, [`& .${classes.recentChannels}`]: { - color: '#7F7F7F', + color: theme.palette.colors.gray50, }, [`& .${classes.inputWrapper}`]: { display: 'flex', diff --git a/packages/desktop/src/renderer/components/ui/ErrorModal/ErrorModal.test.tsx b/packages/desktop/src/renderer/components/ui/ErrorModal/ErrorModal.test.tsx index 09c35d23d3..9d63f212d2 100644 --- a/packages/desktop/src/renderer/components/ui/ErrorModal/ErrorModal.test.tsx +++ b/packages/desktop/src/renderer/components/ui/ErrorModal/ErrorModal.test.tsx @@ -128,7 +128,7 @@ describe('ErrorModal', () => { class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-wb57ya-MuiFormControl-root-MuiTextField-root" >