Refactor colors

src/components/Apps/Apps-styles.tsx

@@ -18,7 +18,7 @@ export const AppsParent = styled(Box)(({ theme }) => ({
   scrollbarWidth: 'none', // Hides the scrollbar in Firefox
 
   // Optional for better cross-browser consistency
-  '-msOverflowStyle': 'none', // Hides scrollbar in IE and Edge
+  msOverflowStyle: 'none', // Hides scrollbar in IE and Edge
 
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
@@ -56,61 +56,59 @@ export const AppsWidthLimiter = styled(Box)(({ theme }) => ({
 }));
 
 export const AppsSearchContainer = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  width: '90%',
-  justifyContent: 'space-between',
   alignItems: 'center',
-  borderRadius: '8px',
-  padding: '0px 10px',
-  height: '36px',
   backgroundColor: theme.palette.background.default,
+  borderRadius: '8px',
   color: theme.palette.text.primary,
+  display: 'flex',
+  height: '36px',
+  justifyContent: 'space-between',
+  padding: '0px 10px',
+  width: '90%',
 }));
 
 export const AppsSearchLeft = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  width: '90%',
-  justifyContent: 'flex-start',
   alignItems: 'center',
-  gap: '10px',
-  flexGrow: 1,
-  flexShrink: 0,
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
+  display: 'flex',
+  flexGrow: 1,
+  flexShrink: 0,
+  gap: '10px',
+  justifyContent: 'flex-start',
+  width: '90%',
 }));
 
 export const AppsSearchRight = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  width: '90%',
-  justifyContent: 'flex-end',
   alignItems: 'center',
-  flexShrink: 1,
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
+  display: 'flex',
+  flexShrink: 1,
+  justifyContent: 'flex-end',
+  width: '90%',
 }));
 
 export const AppCircleContainer = styled(Box)(({ theme }) => ({
+  alignItems: 'center',
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
   display: 'flex',
   flexDirection: 'column',
   gap: '5px',
-  alignItems: 'center',
   width: '100%',
-  backgroundColor: theme.palette.background.default,
-  color: theme.palette.text.primary,
 }));
 
 export const Add = styled(Typography)(({ theme }) => ({
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
   fontSize: '36px',
   fontWeight: 500,
   lineHeight: '43.57px',
   textAlign: 'left',
-  backgroundColor: theme.palette.background.default,
-  color: theme.palette.text.primary,
 }));
 
 export const AppCircleLabel = styled(Typography)(({ theme }) => ({
-  '-webkit-box-orient': 'vertical',
-  '-webkit-line-clamp': '2',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
   display: '-webkit-box',
@@ -119,15 +117,17 @@ export const AppCircleLabel = styled(Typography)(({ theme }) => ({
   lineHeight: 1.2,
   overflow: 'hidden',
   textOverflow: 'ellipsis',
+  WebkitBoxOrient: 'vertical',
+  WebkitLineClamp: '2',
   width: '120%',
 }));
 
 export const AppLibrarySubTitle = styled(Typography)(({ theme }) => ({
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
   fontSize: '16px',
   fontWeight: 500,
   lineHeight: 1.2,
-  backgroundColor: theme.palette.background.default,
-  color: theme.palette.text.primary,
 }));
 
 export const AppCircle = styled(Box)(({ theme }) => ({

src/styles/theme-common.ts

@@ -1,7 +1,7 @@
 // Extend the Theme interface
 const commonThemeOptions = {
   typography: {
-    fontFamily: ['Inter'].join(','),
+    fontFamily: ['Roboto'].join(','),
     h1: {
       fontSize: '2rem',
       fontWeight: 600,

src/styles/theme-dark.ts

@@ -15,7 +15,7 @@ const darkTheme = createTheme({
     },
     background: {
       default: 'rgb(49, 51, 56)',
-      paper: 'rgb(30, 30, 32)',
+      paper: 'rgb(46, 46, 49)',
     },
     text: {
       primary: 'rgb(255, 255, 255)',
@@ -50,7 +50,7 @@ const darkTheme = createTheme({
         ':root': {
           '--color-instance': 'rgb(30, 30, 32)',
           '--color-instance-popover-bg': 'rgb(34, 34, 34)',
-          '--Mail-Background': 'rgb(101, 248, 174)',
+          '--Mail-Background': 'rgb(43, 43, 43)',
           '--new-message-text': 'rgb(0, 0, 0)',
           '--bg-primary': 'rgba(31, 32, 35, 1)',
           '--bg-2': 'rgb(39, 40, 44)',

src/styles/theme-light.ts

@@ -15,7 +15,7 @@ const lightTheme = createTheme({
     },
     background: {
       default: 'rgba(250, 250, 250, 1)',
-      paper: 'rgb(240, 239, 202)',
+      paper: 'rgb(228, 228, 228)',
     },
     text: {
       primary: 'rgba(0, 0, 0, 1)',