refactor: initial theme refactor TryQuiet#2445

mike-kiss · Apr 15, 2024 · 312cf5f · 312cf5f
1 parent 3d769cc
commit 312cf5f
Show file tree

Hide file tree

Showing 22 changed files with 89 additions and 76 deletions.
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/...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/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/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.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/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}`]: {

diff --git a/packages/desktop/src/renderer/components/Settings/SettingsComponent.tsx b/packages/desktop/src/renderer/components/Settings/SettingsComponent.tsx
@@ -31,8 +31,8 @@ const StyledTabsWrapper = styled(Grid)(() => ({
 }))
 
 const StyledAppBar = styled(AppBar, { label: 'xxxxx' })(({ theme }) => ({
-  backgroundColor: '#fff',
-  boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.0)',
+  backgroundColor: theme.palette.background.default,
+  boxShadow: theme.shadows[3],
 
   [`& .${classes.leaveComunity}`]: {
     opacity: '1',

diff --git a/packages/desktop/src/renderer/components/Titlebar.tsx b/packages/desktop/src/renderer/components/Titlebar.tsx
@@ -1,10 +1,11 @@
 import { Titlebar, Color } from 'custom-electron-titlebar'
+import theme from '../theme'
 
 export const addTitlebar = () => {
   setTimeout(() => {
     // eslint-disable-next-line
     const titlebar = new Titlebar({
-      backgroundColor: Color.fromHex('#521c74'),
+      backgroundColor: Color.fromHex(theme.palette.primary.main),
       overflow: 'hidden',
     })
   }, 0)

diff --git a/packages/desktop/src/renderer/components/ui/ErrorModal/ErrorModalComponent.tsx b/packages/desktop/src/renderer/components/ui/ErrorModal/ErrorModalComponent.tsx
@@ -54,7 +54,7 @@ const StyledModalContent = styled(Grid)(({ theme }) => ({
   [`& .${classes.textfield}`]: {},
 
   [`& .${classes.cssDisabled}`]: {
-    backgroundColor: theme.palette.colors.inputGray,
+    backgroundColor: theme.palette.background.paper,
     color: theme.palette.colors.red,
   },
 

diff --git a/packages/desktop/src/renderer/components/ui/Modal/Modal.tsx b/packages/desktop/src/renderer/components/ui/Modal/Modal.tsx
@@ -72,7 +72,7 @@ const StyledMaterialModal = styled(StyledMaterialModalWithProps)(({ theme, zInde
   },
 
   [`& .${classes.headerBorder}`]: {
-    borderBottom: `1px solid ${theme.palette.colors.contentGray}`,
+    borderBottom: `1px solid ${theme.palette.colors.border03}`,
   },
 
   [`& .${classes.actions}`]: {

diff --git a/packages/desktop/src/renderer/components/ui/OpenlinkModal/OpenlinkModal.tsx b/packages/desktop/src/renderer/components/ui/OpenlinkModal/OpenlinkModal.tsx
@@ -16,6 +16,8 @@ import Icon from '../Icon/Icon'
 import exclamationMark from '../../../static/images/exclamationMark.svg'
 import Modal from '../Modal/Modal'
 
+import theme from '../../../theme'
+
 const PREFIX = 'OpenlinkModal'
 
 const classes = {
@@ -201,7 +203,7 @@ export const OpenlinkModal: React.FC<OpenLinkModalProps> = ({
                   <Grid item xs>
                     <a
                       style={{
-                        color: '#67BFD3',
+                        color: theme.palette.colors.lushSky,
                         textDecoration: 'none',
                         wordBreak: 'break-all',
                       }}

diff --git a/packages/desktop/src/renderer/components/ui/QuitApp/QuitAppDialog.tsx b/packages/desktop/src/renderer/components/ui/QuitApp/QuitAppDialog.tsx
@@ -28,11 +28,11 @@ const StyledDialog = styled(Dialog)(({ theme }) => ({
   },
 
   [`& .${classes.dialogContent}`]: {
-    borderBottom: `1px solid ${theme.palette.colors.veryLightGray}`,
+    borderBottom: `1px solid ${theme.palette.colors.border01}`,
   },
 
   [`& .${classes.buttonNo}`]: {
-    borderRight: `1px solid ${theme.palette.colors.veryLightGray}`,
+    borderRight: `1px solid ${theme.palette.colors.border01}`,
     cursor: 'pointer',
     padding: 10,
   },

diff --git a/packages/desktop/src/renderer/components/ui/Spinner/SpinnerLoader.tsx b/packages/desktop/src/renderer/components/ui/Spinner/SpinnerLoader.tsx
@@ -16,7 +16,7 @@ const classes = {
 const StyledGrid = styled(Grid)(({ theme }) => ({
   [`& .${classes.message}`]: {
     marginTop: theme.spacing(2),
-    color: theme.palette.primary.main,
+    color: theme.palette.colors.mediumGray,
   },
 
   [`& .${classes.spinner}`]: (props: any) => ({

diff --git a/packages/desktop/src/renderer/components/widgets/MessagesDivider.tsx b/packages/desktop/src/renderer/components/widgets/MessagesDivider.tsx
@@ -19,7 +19,7 @@ const StyledGrid = styled(Grid)(({ theme }) => ({
 
   [`& .${classes.divider}`]: {
     height: 1,
-    backgroundColor: theme.palette.colors.veryLightGray,
+    backgroundColor: theme.palette.colors.border01,
   },
 
   [`& .${classes.titleDiv}`]: {

diff --git a/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.tsx b/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.tsx
@@ -97,7 +97,7 @@ const StyledListItem = styled(ListItem)(({ theme }) => ({
     marginRight: 10,
     marginBottom: 4,
     borderRadius: 4,
-    backgroundColor: theme.palette.colors.grayBackgroud,
+    backgroundColor: theme.palette.background.paper,
   },
 
   [`& .${classes.alignAvatar}`]: {

diff --git a/packages/desktop/src/renderer/components/widgets/channels/ChannelHeader.tsx b/packages/desktop/src/renderer/components/widgets/channels/ChannelHeader.tsx
@@ -36,7 +36,7 @@ const Root = styled('div')(({ theme }) => ({
     height: '75px',
     paddingLeft: 20,
     paddingRight: 24,
-    borderBottom: `1px solid ${theme.palette.colors.veryLightGray}`,
+    borderBottom: `1px solid ${theme.palette.colors.border01}`,
   },
 
   [`& .${classes.title}`]: {
@@ -92,7 +92,7 @@ const Root = styled('div')(({ theme }) => ({
     top: 75,
     padding: '12px 25px 12px 20px',
     backgroundColor: theme.palette.colors.white,
-    boxShadow: `0px 1px 0px ${theme.palette.colors.veryLightGray}`,
+    boxShadow: theme.shadows[2],
   },
 
   [`&.${classes.wrapper}`]: {},

diff --git a/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/ChannelInput.tsx b/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/ChannelInput.tsx
@@ -45,12 +45,12 @@ const maxHeight = 300
 
 const StyledChannelInput = styled(Grid)(({ theme }) => ({
   [`&.${classes.root}`]: {
-    background: '#fff',
+    background: theme.palette.background.default,
     height: '100%',
     width: '100%',
   },
   [`& .${classes.rootContent}`]: {
-    background: '#fff',
+    background: theme.palette.background.default,
     height: '100%',
     width: '100%',
   },
@@ -86,7 +86,7 @@ const StyledChannelInput = styled(Grid)(({ theme }) => ({
     paddingRight: '60px',
   },
   [`& .${classes.textfield}`]: {
-    border: `1px solid ${theme.palette.colors.veryLightGray}`,
+    border: `1px solid ${theme.palette.colors.border01}`,
     maxHeight: maxHeight,
     overflowY: 'auto',
     borderRadius: 4,

diff --git a/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/MentionElement.tsx b/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/MentionElement.tsx
@@ -28,7 +28,7 @@ const StyledGrid = styled(Grid)(({ theme }) => ({
     maxHeight: 18,
     maxWidth: 18,
     borderRadius: 4,
-    backgroundColor: theme.palette.colors.grayBackgroud,
+    backgroundColor: theme.palette.background.paper,
   },
 
   [`& .${classes.alignAvatar}`]: {

diff --git a/packages/desktop/src/renderer/components/widgets/channels/TextMessage.tsx b/packages/desktop/src/renderer/components/widgets/channels/TextMessage.tsx
@@ -50,12 +50,12 @@ const StyledTypography = styled(Typography)(() => ({
   },
 
   [`& .${classes.code}`]: {
-    backgroundColor: theme.palette.colors.veryLightGray,
+    backgroundColor: theme.palette.background.paper,
     padding: '.25em',
   },
 
   [`& .${classes.pre}`]: {
-    backgroundColor: theme.palette.colors.veryLightGray,
+    backgroundColor: theme.palette.background.paper,
     padding: '.25em',
   },
 
@@ -90,7 +90,7 @@ const StyledTypography = styled(Typography)(() => ({
   [`& .${classes.tableHeaderCell}`]: {
     borderBottom: 'solid',
     borderBottomWidth: 1,
-    borderColor: theme.palette.colors.veryLightGray,
+    borderColor: theme.palette.colors.border01,
     textAlign: 'center',
   },