refactor: initial theme refactor #2445 (#2446)

TryQuiet · Apr 22, 2024 · f587ccc · f587ccc
1 parent b8ef745
commit f587ccc
Show file tree

Hide file tree

Showing 72 changed files with 226 additions and 205 deletions.
diff --git a/packages/desktop/src/renderer/components/ChangeUsername/ChangeUsername.component.tsx b/packages/desktop/src/renderer/components/ChangeUsername/ChangeUsername.component.tsx
@@ -38,7 +38,7 @@ const classes = {
 }
 
 const StyledGrid = styled(Grid)(({ theme }) => ({
- backgroundColor: theme.palette.colors.white,
+ backgroundColor: theme.palette.background.default,
  padding: '0px 32px',
 
  [`& .${classes.focus}`]: {

diff --git a/...ktop/src/renderer/components/ChangeUsername/UsernameChanged/UsernameChanged.component.tsx b/...ktop/src/renderer/components/ChangeUsername/UsernameChanged/UsernameChanged.component.tsx
@@ -16,7 +16,7 @@ const classes = {
 }
 
 const StyledGrid = styled(Grid)(({ theme }) => ({
- backgroundColor: theme.palette.colors.white,
+ backgroundColor: theme.palette.background.default,
  padding: '0px 32px',
 
  [`& .${classes.button}`]: {

diff --git a/packages/desktop/src/renderer/components/Channel/ChannelComponent.tsx b/packages/desktop/src/renderer/components/Channel/ChannelComponent.tsx
@@ -30,7 +30,7 @@ import { HandleOpenModalType } from '../widgets/userLabel/UserLabel.types'
 const ChannelMessagesWrapperStyled = styled(Grid)(({ theme }) => ({
  position: 'relative',
  height: 0,
- backgroundColor: theme.palette.colors.white,
+ backgroundColor: theme.palette.background.default,
 }))
 
 export interface ChannelComponentProps {

diff --git a/packages/desktop/src/renderer/components/Channel/CreateChannel/CreateChannelComponent.tsx b/packages/desktop/src/renderer/components/Channel/CreateChannel/CreateChannelComponent.tsx
@@ -30,7 +30,7 @@ const classes = {
 }
 
 const StyledModalContent = styled(Grid)(({ theme }) => ({
- backgroundColor: theme.palette.colors.white,
+ backgroundColor: theme.palette.background.default,
  padding: '0px 32px',
 
  [`& .${classes.fullContainer}`]: {

diff --git a/packages/desktop/src/renderer/components/Channel/DeleteChannel/DeleteChannel.test.tsx b/packages/desktop/src/renderer/components/Channel/DeleteChannel/DeleteChannel.test.tsx
@@ -21,7 +21,7 @@ describe('LeaveCommunity', () => {
  aria-hidden="true"
  />
  <div
- class="MuiModal-root css-1vjugmr-MuiModal-root"
+ class="MuiModal-root css-1evs64r-MuiModal-root"
  role="presentation"
  >
  <div
@@ -121,7 +121,7 @@ describe('LeaveCommunity', () => {
  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto DeleteChannelbuttonContainer css-1wrgmsj-MuiGrid-root"
  >
  <button
- class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth DeleteChannelbutton css-14mi2mx-MuiButtonBase-root-MuiButton-root"
+ class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth DeleteChannelbutton css-jk7ztx-MuiButtonBase-root-MuiButton-root"
  data-testid="deleteChannelButton"
  tabindex="0"
  type="button"
@@ -136,7 +136,7 @@ describe('LeaveCommunity', () => {
  class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-grid-xs-12 DeleteChannelsecondaryButtonContainer css-s2k0j8-MuiGrid-root"
  >
  <button
- class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth DeleteChannelsecondaryButton css-14mi2mx-MuiButtonBase-root-MuiButton-root"
+ class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth DeleteChannelsecondaryButton css-jk7ztx-MuiButtonBase-root-MuiButton-root"
  tabindex="0"
  type="button"
  >

diff --git a/packages/desktop/src/renderer/components/Channel/File/FileComponent/FileComponent.tsx b/packages/desktop/src/renderer/components/Channel/File/FileComponent/FileComponent.tsx
@@ -31,14 +31,14 @@ const FileComponentStyled = styled('div')(({ theme }) => ({
  padding: '16px',
  backgroundColor: theme.palette.colors.white,
  borderRadius: '8px',
- border: `1px solid ${theme.palette.colors.veryLightGray}`,
+ border: `1px solid ${theme.palette.colors.border01}`,
 
  [`& .${classes.icon}`]: {
  minWidth: '40px',
  width: '40px',
  height: '40px',
  borderRadius: '8px',
- backgroundColor: '#F0F0F0',
+ backgroundColor: theme.palette.background.paper,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',

diff --git a/packages/desktop/src/renderer/components/Channel/File/UploadedImage/UploadedImage.test.tsx b/packages/desktop/src/renderer/components/Channel/File/UploadedImage/UploadedImage.test.tsx
@@ -55,7 +55,7 @@ describe('UploadedFile', () => {
  class="css-gd4qex"
  >
  <div
- class="css-ytr8bc"
+ class="css-1i8wbh6"
  data-testid="abcd1234-imagePlaceholder"
  >
  <p
@@ -82,7 +82,7 @@ describe('UploadedFile', () => {
  class="UploadedImagePlaceholdericon"
  >
  <span
- class="MuiCircularProgress-root MuiCircularProgress-indeterminate MuiCircularProgress-colorPrimary css-9a4009-MuiCircularProgress-root"
+ class="MuiCircularProgress-root MuiCircularProgress-indeterminate MuiCircularProgress-colorPrimary css-acfop9-MuiCircularProgress-root"
  role="progressbar"
  style="width: 18px; height: 18px; position: absolute; color: rgb(178, 178, 178);"
  >

diff --git a/...nderer/components/Channel/File/UploadedImagePlaceholder/UploadedImagePlaceholder.test.tsx b/...nderer/components/Channel/File/UploadedImagePlaceholder/UploadedImagePlaceholder.test.tsx
@@ -27,7 +27,7 @@ describe('UploadedImagePlaceholder', () => {
  <body>
  <div>
  <div
- class="css-ytr8bc"
+ class="css-1i8wbh6"
  data-testid="hvb45FGa-imagePlaceholder"
  >
  <p
@@ -54,7 +54,7 @@ describe('UploadedImagePlaceholder', () => {
  class="UploadedImagePlaceholdericon"
  >
  <span
- class="MuiCircularProgress-root MuiCircularProgress-indeterminate MuiCircularProgress-colorPrimary css-9a4009-MuiCircularProgress-root"
+ class="MuiCircularProgress-root MuiCircularProgress-indeterminate MuiCircularProgress-colorPrimary css-acfop9-MuiCircularProgress-root"
  role="progressbar"
  style="width: 18px; height: 18px; position: absolute; color: rgb(178, 178, 178);"
  >
@@ -107,7 +107,7 @@ describe('UploadedImagePlaceholder', () => {
  <body>
  <div>
  <div
- class="css-ytr8bc"
+ class="css-1i8wbh6"
  data-testid="hvb45FGa-imagePlaceholder"
  >
  <p
@@ -134,7 +134,7 @@ describe('UploadedImagePlaceholder', () => {
  >
  <span
  aria-valuenow="100"
- class="MuiCircularProgress-root MuiCircularProgress-determinate MuiCircularProgress-colorPrimary css-1rhqaqh-MuiCircularProgress-root"
+ class="MuiCircularProgress-root MuiCircularProgress-determinate MuiCircularProgress-colorPrimary css-1036n7b-MuiCircularProgress-root"
  role="progressbar"
  style="width: 18px; height: 18px; transform: rotate(-90deg); position: absolute; color: rgb(231, 231, 231);"
  >
@@ -155,7 +155,7 @@ describe('UploadedImagePlaceholder', () => {
  </span>
  <span
  aria-valuenow="10"
- class="MuiCircularProgress-root MuiCircularProgress-determinate MuiCircularProgress-colorPrimary css-1rhqaqh-MuiCircularProgress-root"
+ class="MuiCircularProgress-root MuiCircularProgress-determinate MuiCircularProgress-colorPrimary css-1036n7b-MuiCircularProgress-root"
  role="progressbar"
  style="width: 18px; height: 18px; transform: rotate(-90deg); color: rgb(178, 178, 178);"
  >

diff --git a/...rc/renderer/components/Channel/File/UploadedImagePlaceholder/UploadedImagePlaceholder.tsx b/...rc/renderer/components/Channel/File/UploadedImagePlaceholder/UploadedImagePlaceholder.tsx
@@ -18,7 +18,7 @@ const classes = {
  icon: `${PREFIX}icon`,
 }
 
-const Root = styled('div')(() => ({
+const Root = styled('div')(({ theme }) => ({
  maxWidth: '400px',
  height: '100%',
 
@@ -29,7 +29,7 @@ const Root = styled('div')(() => ({
  alignItems: 'center',
  minWidth: '50px',
  minHeight: '50px',
- backgroundColor: '#e0e0e0',
+ backgroundColor: theme.palette.background.paper,
  },
 
  [`& .${classes.placeholderIcon}`]: {
@@ -41,7 +41,7 @@ const Root = styled('div')(() => ({
  width: '40px',
  height: '40px',
  borderRadius: '8px',
- backgroundColor: '#F0F0F0',
+ backgroundColor: theme.palette.background.paper,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',

diff --git a/packages/desktop/src/renderer/components/Channel/File/UploadingPreview.tsx b/packages/desktop/src/renderer/components/Channel/File/UploadingPreview.tsx
@@ -22,7 +22,7 @@ const classes = {
  tooltip: `${PREFIX}tooltip`,
 }
 
-const StyledFilePreviewComponent = styled('div')(() => ({
+const StyledFilePreviewComponent = styled('div')(({ theme }) => ({
  display: 'inline-block',
  float: 'left',
  cursor: 'pointer',
@@ -49,7 +49,7 @@ const StyledFilePreviewComponent = styled('div')(() => ({
  width: '64px',
  height: '64px',
  borderRadius: '15%',
- backgroundColor: '#F0F0F0',
+ backgroundColor: theme.palette.background.paper,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',

diff --git a/packages/desktop/src/renderer/components/ChannelCreationModal/ChannelCreationModal.test.tsx b/packages/desktop/src/renderer/components/ChannelCreationModal/ChannelCreationModal.test.tsx
@@ -13,7 +13,7 @@ describe('Create ChannelCreationModalComponent', () => {
  aria-hidden="true"
  />
  <div
- class="MuiModal-root css-1vjugmr-MuiModal-root"
+ class="MuiModal-root css-1evs64r-MuiModal-root"
  role="presentation"
  >
  <div

diff --git a/packages/desktop/src/renderer/components/ContextMenu/ContextMenu.component.tsx b/packages/desktop/src/renderer/components/ContextMenu/ContextMenu.component.tsx
@@ -10,6 +10,8 @@ import Icon from '../ui/Icon/Icon'
 import arrowLeft from '../../static/images/arrowLeft.svg'
 import arrowRightShort from '../../static/images/arrowRightShort.svg'
 
+import theme from '../../theme'
+
 export const ContextMenu: FC<ContextMenuProps> = ({ visible, handleClose, handleBack, title, children }) => {
  const ref = useRef<HTMLDivElement>(null)
 
@@ -50,8 +52,8 @@ export const ContextMenu: FC<ContextMenuProps> = ({ visible, handleClose, handle
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'flex-start',
- backgroundColor: '#ffffff',
- boxShadow: '0px 0px 4px rgba(0, 0, 0, 0.25)',
+ backgroundColor: theme.palette.background.default,
+ boxShadow: theme.shadows[1],
  maxWidth: '375px',
  pointerEvents: 'auto',
  }}
@@ -65,7 +67,7 @@ export const ContextMenu: FC<ContextMenuProps> = ({ visible, handleClose, handle
  textAlign: 'center',
  height: 60,
  width: '100%',
- borderBottom: '1px solid #F0F0F0',
+ borderBottom: `1px solid ${theme.palette.colors.border01}`,
  }}
  >
  <Grid
@@ -101,7 +103,7 @@ export const ContextMenuHint: FC<ContextMenuHintProps> = ({ hint }) => {
  width: '100%',
  padding: 16,
  borderTopWidth: 1,
- borderColor: '#F0F0F0',
+ borderColor: theme.palette.colors.border01,
  }}
  >
  <Typography fontSize={14} fontWeight={'normal'}>
@@ -136,7 +138,7 @@ export const ContextMenuItem: FC<ContextMenuItemProps> = ({ title, action }) =>
  padding: '11px 16px',
  width: '100%',
  cursor: 'pointer',
- borderBottom: '1px solid #F0F0F0',
+ borderBottom: `1px solid ${theme.palette.colors.border01}`,
  }}
  onClick={action}
  data-testid={`contextMenuItem${title}`}

diff --git a/...es/desktop/src/renderer/components/ContextMenu/menus/UserProfileContextMenu.container.tsx b/...es/desktop/src/renderer/components/ContextMenu/menus/UserProfileContextMenu.container.tsx
@@ -26,7 +26,7 @@ const classes = {
  editPhotoButton: `${PREFIX}editPhotoButton`,
 }
 
-const StyledContextMenuContent = styled(Grid)(() => ({
+const StyledContextMenuContent = styled(Grid)(({ theme }) => ({
  zIndex: 9002,
  flex: 1,
 
@@ -67,10 +67,10 @@ const StyledContextMenuContent = styled(Grid)(() => ({
 
  [`& .${classes.editUsernameField}`]: {
  color: '#33333380',
- background: '#F0F0F0',
+ background: theme.palette.background.paper,
  margin: '0px 16px',
  padding: '16px',
- border: '1px solid #B3B3B3',
+ border: `1px solid ${theme.palette.colors.border02}`,
  borderRadius: '8px',
  fontSize: '14px',
  fontWeight: '400',
@@ -81,7 +81,7 @@ const StyledContextMenuContent = styled(Grid)(() => ({
  background: 'inherit',
  padding: '6px 12px',
  borderRadius: '16px',
- border: '1px solid #B3B3B3',
+ border: `1px solid ${theme.palette.colors.border02}`,
  fontSize: '14px',
  fontWeight: '400',
  textTransform: 'none',

diff --git a/...s/desktop/src/renderer/components/CreateJoinCommunity/PerformCommunityActionComponent.tsx b/...s/desktop/src/renderer/components/CreateJoinCommunity/PerformCommunityActionComponent.tsx
@@ -42,7 +42,7 @@ const classes = {
 }
 
 const StyledModalContent = styled(Grid)(({ theme }) => ({
- backgroundColor: theme.palette.colors.white,
+ backgroundColor: theme.palette.background.default,
  padding: '0px 32px',
 
  [`& .${classes.focus}`]: {

diff --git a/packages/desktop/src/renderer/components/CreateUsername/CreateUsernameComponent.tsx b/packages/desktop/src/renderer/components/CreateUsername/CreateUsernameComponent.tsx
@@ -42,7 +42,7 @@ const classes = {
 }
 
 const StyledGrid = styled(Grid)(({ theme }) => ({
- backgroundColor: theme.palette.colors.white,
+ backgroundColor: theme.palette.background.default,
  padding: '0px 32px',
 
  [`& .${classes.focus}`]: {

diff --git a/...s/desktop/src/renderer/components/CreateUsername/UsernameCreated/UsernameCreated.test.tsx b/...s/desktop/src/renderer/components/CreateUsername/UsernameCreated/UsernameCreated.test.tsx
@@ -32,7 +32,7 @@ describe('UsernameCreated', () => {
  class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto UsernameCreatedbuttonContainer css-1wrgmsj-MuiGrid-root"
  >
  <button
- class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth UsernameCreatedbutton css-14mi2mx-MuiButtonBase-root-MuiButton-root"
+ class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth UsernameCreatedbutton css-jk7ztx-MuiButtonBase-root-MuiButton-root"
  tabindex="0"
  type="button"
  >

diff --git a/packages/desktop/src/renderer/components/LoadingPanel/JoiningPanelComponent.test.tsx b/packages/desktop/src/renderer/components/LoadingPanel/JoiningPanelComponent.test.tsx
@@ -22,7 +22,7 @@ describe('Create JoiningPanelComponent', () => {
  aria-hidden="true"
  />
  <div
- class="MuiModal-root css-1vjugmr-MuiModal-root"
+ class="MuiModal-root css-1evs64r-MuiModal-root"
  role="presentation"
  >
  <div
@@ -158,7 +158,7 @@ describe('Create JoiningPanelComponent', () => {
  aria-hidden="true"
  />
  <div
- class="MuiModal-root css-1vjugmr-MuiModal-root"
+ class="MuiModal-root css-1evs64r-MuiModal-root"
  role="presentation"
  >
  <div

diff --git a/packages/desktop/src/renderer/components/LoadingPanel/JoiningPanelComponent.tsx b/packages/desktop/src/renderer/components/LoadingPanel/JoiningPanelComponent.tsx
@@ -62,7 +62,7 @@ const StyledGrid = styled(Grid)(({ theme, width }) => ({
  color: theme.palette.colors.black30,
  },
  [`& .${classes.progressBar}`]: {
- backgroundColor: theme.palette.colors.veryLightGray,
+ backgroundColor: theme.palette.background.paper,
  width: '300px',
  height: '4px',
  position: 'relative',

diff --git a/packages/desktop/src/renderer/components/LoadingPanel/StartingPanelComponent.test.tsx b/packages/desktop/src/renderer/components/LoadingPanel/StartingPanelComponent.test.tsx
@@ -13,7 +13,7 @@ describe('Create StartingPanelComponent', () => {
  aria-hidden="true"
  />
  <div
- class="MuiModal-root css-1vjugmr-MuiModal-root"
+ class="MuiModal-root css-1evs64r-MuiModal-root"
  role="presentation"
  >
  <div

diff --git a/packages/desktop/src/renderer/components/LoadingPanel/StartingPanelComponent.tsx b/packages/desktop/src/renderer/components/LoadingPanel/StartingPanelComponent.tsx
@@ -45,7 +45,7 @@ const StyledGrid = styled(Grid)(({ theme, width }) => ({
  color: theme.palette.colors.black30,
  },
  [`& .${classes.progressBar}`]: {
- backgroundColor: theme.palette.colors.veryLightGray,
+ backgroundColor: theme.palette.background.paper,
  width: '300px',
  height: '4px',
  position: 'relative',

diff --git a/packages/desktop/src/renderer/components/SearchModal/SearchModal.test.tsx b/packages/desktop/src/renderer/components/SearchModal/SearchModal.test.tsx
@@ -77,7 +77,7 @@ describe('Search Modal', () => {
  aria-hidden="true"
  />
  <div
- class="MuiModal-root css-1vjugmr-MuiModal-root"
+ class="MuiModal-root css-1evs64r-MuiModal-root"
  role="presentation"
  >
  <div
@@ -145,7 +145,7 @@ describe('Search Modal', () => {
  class="MuiGrid-root MuiGrid-container MuiGrid-item Modalcontent Modaltransparent css-1f064cs-MuiGrid-root"
  >
  <div
- class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column SearchModalComponentroot css-tno7k-MuiGrid-root"
+ class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column SearchModalComponentroot css-oy8l91-MuiGrid-root"
  >
  <div
  class="MuiGrid-root MuiGrid-container SearchModalComponentoverlay css-1hbmzt3-MuiGrid-root"
@@ -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-11mf5jz-MuiInputBase-root-MuiInput-root"
+ class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth Mui-focused MuiInputBase-formControl css-o4kyh4-MuiInputBase-root-MuiInput-root"
  >
  <input
  aria-invalid="false"

diff --git a/packages/desktop/src/renderer/components/SearchModal/SearchModelComponent.tsx b/packages/desktop/src/renderer/components/SearchModal/SearchModelComponent.tsx
@@ -40,8 +40,8 @@ const StyledModalContent = styled(Grid)(({ theme }) => ({
  height: '100%',
  },
  [`& .${classes.modalContainer}`]: {
- backgroundColor: '#FFFFFF',
- boxShadow: '0px 2px 25px rgba(0, 0, 0, 0.2)',
+ backgroundColor: theme.palette.background.default,
+ boxShadow: theme.shadows[4],
  borderRadius: '8px',
  width: '60%',
  overflow: 'hidden',
@@ -68,7 +68,7 @@ const StyledModalContent = styled(Grid)(({ theme }) => ({
  [`& .${classes.line}`]: {
  width: '100%',
  height: '1px',
- backgroundColor: theme.palette.colors.veryLightGray,
+ backgroundColor: theme.palette.background.paper,
  },
  [`& .${classes.channel}`]: {},
  [`& .${classes.channelWrapper}`]: {