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 }) => ({