refactor: second-pass color consolidation (issue #2445)

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))
 
 # Chores

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<ChangeUsernameProps> = ({
             {!errors.userName && userName.length > 0 && parsedNameDiffers && (
               <Grid container alignItems='center' direction='row'>
                 <Grid item className={classes.iconDiv}>
-                  <WarningIcon className={classes.warrningIcon} />
+                  <WarningIcon className={classes.warningIcon} />
                 </Grid>
                 <Grid item xs>
-                  <Typography variant='body2' className={classes.warrningMessage}>
+                  <Typography variant='body2' className={classes.warningMessage}>
                     Your username will be registered as <b>{`@${userName}`}</b>
                   </Typography>
                 </Grid>

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<CreateChannelProps> = ({
               {!errors.channelName && channelName.length > 0 && parsedNameDiffers && (
                 <Grid container alignItems='center' direction='row'>
                   <Grid item className={classes.iconDiv}>
-                    <WarningIcon className={classes.warrningIcon} />
+                    <WarningIcon className={classes.warningIcon} />
                   </Grid>
                   <Grid item xs>
                     <Typography
                       variant='body2'
-                      className={classes.warrningMessage}
+                      className={classes.warningMessage}
                       data-testid={'createChannelNameWarning'}
                     >
                       Your channel will be created as <b>{`#${channelName}`}</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',

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}`]: {

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}`]: {

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,

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,

packages/desktop/src/renderer/components/SearchModal/SearchModal.test.tsx

@@ -168,7 +168,7 @@ describe('Search Modal', () => {
                               data-testid="searchChannelInput"
                             >
                               <div
-                                class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth Mui-focused MuiInputBase-formControl css-o4kyh4-MuiInputBase-root-MuiInput-root"
+                                class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth Mui-focused MuiInputBase-formControl css-1hw1r9z-MuiInputBase-root-MuiInput-root"
                               >
                                 <input
                                   aria-invalid="false"
@@ -182,7 +182,7 @@ describe('Search Modal', () => {
                               </div>
                             </div>
                             <p
-                              class="MuiTypography-root MuiTypography-body2 css-xseqde-MuiTypography-root"
+                              class="MuiTypography-root MuiTypography-body2 css-6gbt2m-MuiTypography-root"
                             />
                           </div>
                           <img

packages/desktop/src/renderer/components/SearchModal/SearchModelComponent.tsx

@@ -95,7 +95,7 @@ const StyledModalContent = styled(Grid)(({ theme }) => ({
     },
   },
   [`& .${classes.recentChannels}`]: {
-    color: '#7F7F7F',
+    color: theme.palette.colors.gray50,
   },
   [`& .${classes.inputWrapper}`]: {
     display: 'flex',

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"
                       >
                         <div
-                          class="MuiInputBase-root MuiOutlinedInput-root ErrorModalComponenttextfield MuiInputBase-colorPrimary Mui-disabled ErrorModalComponentcssDisabled MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-multiline ErrorModalComponentstackTrace css-159m4o8-MuiInputBase-root-MuiOutlinedInput-root"
+                          class="MuiInputBase-root MuiOutlinedInput-root ErrorModalComponenttextfield MuiInputBase-colorPrimary Mui-disabled ErrorModalComponentcssDisabled MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-multiline ErrorModalComponentstackTrace css-nqh2he-MuiInputBase-root-MuiOutlinedInput-root"
                         >
                           <textarea
                             aria-invalid="false"

packages/desktop/src/renderer/components/ui/Slider/Slider.test.tsx

@@ -20,7 +20,7 @@ describe('Slider', () => {
       <body>
         <div>
           <div
-            class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column css-19axq9c-MuiGrid-root"
+            class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column css-12km9n7-MuiGrid-root"
           >
             <span
               class="MuiTypography-root MuiTypography-caption Slidertitle css-1d4bzk2-MuiTypography-root"
@@ -88,7 +88,7 @@ describe('Slider', () => {
       <body>
         <div>
           <div
-            class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column css-19axq9c-MuiGrid-root"
+            class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column css-12km9n7-MuiGrid-root"
           >
             <span
               class="MuiTypography-root MuiTypography-caption Slidertitle css-1d4bzk2-MuiTypography-root"
@@ -160,7 +160,7 @@ describe('Slider', () => {
       <body>
         <div>
           <div
-            class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column css-19axq9c-MuiGrid-root"
+            class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column css-12km9n7-MuiGrid-root"
           >
             <span
               class="MuiTypography-root MuiTypography-caption Slidertitle css-1d4bzk2-MuiTypography-root"

packages/desktop/src/renderer/components/ui/Slider/Slider.tsx

@@ -47,7 +47,7 @@ const StyledGrid = styled(Grid)(({ theme }) => ({
   },
 
   [`& .${classes.track}`]: {
-    backgroundColor: '#979797',
+    backgroundColor: theme.palette.colors.gray40,
     height: 0.5,
     opacity: 1,
   },

packages/desktop/src/renderer/components/widgets/channels/ChannelMessageActions.tsx

@@ -19,7 +19,7 @@ const StyledGrid = styled(Grid)(({ theme }) => ({
   [`& .${classes.warrning}`]: {
     marginLeft: 8,
     letterSpacing: 0.4,
-    color: theme.palette.colors.error,
+    color: theme.palette.error.main,
   },
 
   [`& .${classes.tryAgain}`]: {

packages/desktop/src/renderer/components/widgets/userLabel/UserLabel.component.tsx

@@ -29,7 +29,7 @@ const StyledGrid = styled(Grid)(({ theme }) => ({
     backgroundColor: theme.palette.colors.gray03,
   },
   [`& .${classes.wrapperRed}`]: {
-    backgroundColor: theme.palette.colors.error,
+    backgroundColor: theme.palette.error.main,
   },
   [`& .${classes.textWhite}`]: {
     color: 'white',

packages/desktop/src/renderer/theme.ts

@@ -78,7 +78,13 @@ export default createTheme({
       main: '#E42656',
       dark: '#C41743',
     },
-    // TO BE ADDED IF NEEDED: Success, Warning, Error, Neutral
+    error: {
+      main: '#D13135',
+    },
+    warning: {
+      main: '#FFCC00',
+    },
+    // TO BE ADDED IF NEEDED: Success, Warning, Neutral
     colors: {
       // Misc colors. For primary / secondary brand, text, and background colors, use those objects
       // For canonical colors, see: https://www.figma.com/file/0j7Nna9zWmfOSNmRmQK1Uh/Quiet-Design-Library?type=design&node-id=2667-0&mode=design&t=i0cXovHohRKxWGaA-0
@@ -94,7 +100,6 @@ export default createTheme({
       red: '#FF0000', // Replace with D13135 ?
       hotRed: '#E42656', // Replaced by theme.palette.secondary.main?
       hotPink: '#E42656', // Replaced by theme.palette.secondary.main?
-      error: '#D13135', // Need to align with Figma and replace with theme.palette.error.main
       // Grays (including white and black)
       white: '#FFFFFF',
       trueBlack: '#000000', // To be replaced with text color and border color
@@ -106,7 +111,7 @@ export default createTheme({
       gray30: '#FAFAFA', // Unused and not aligned with Figma
       gray40: '#999999',
       gray50: '#7F7F7F',
-      black30: '#4C4C4C', // Rename to gray70
+      gray70: '#4C4C4C',
       // Border colors
       border01: '#F0F0F0',
       border02: '#B3B3B3',