Merge pull request #80 from UTDNebula/72-duplicate-trends-pr-332

72 duplicate trends pr 332

src/components/TableSortLabel.tsx

@@ -1,28 +1,13 @@
-import {
-  styled,
-  TableSortLabel as _TableSortLabel,
-  type TableSortLabelProps,
-  useMediaQuery,
-} from '@mui/material';
-import React from 'react';
-
-function TableSortLabel(props: TableSortLabelProps) {
-  //Selected arrow color
-  const sortArrowColor = useMediaQuery('(prefers-color-scheme: dark)')
-    ? 'white'
-    : 'black';
-
-  //Change arrow color for TableSortLabel
-  const StyledTableSortLabel = styled(_TableSortLabel)({
-    '& .MuiTableSortLabel-icon': {
-      opacity: 0.5, // Ensure the arrow is always visible
-    },
-    '&.Mui-active .MuiTableSortLabel-icon': {
-      color: sortArrowColor, // Brighten the arrow
-    },
-  });
-
-  return <StyledTableSortLabel {...props} />;
-}
-
-export default TableSortLabel;
+import { styled, TableSortLabel } from '@mui/material';
+
+//Change arrow color for TableSortLabel
+const StyledTableSortLabel = styled(TableSortLabel)({
+  '& .MuiTableSortLabel-icon': {
+    opacity: 0.5, // Ensure the arrow is always visible
+  },
+  '&.Mui-active .MuiTableSortLabel-icon': {
+    color: 'var(--mui-palette-text-primary)', // Brighten the arrow
+  },
+});
+
+export default StyledTableSortLabel;

src/popup.tsx

@@ -31,7 +31,7 @@ async function checkPermissions() {
 }
 checkPermissions();
 
-const fullConfig = resolveConfig(tailwindConfig);
+const fullTailwindConfig = resolveConfig(tailwindConfig);
 
 function IndexPopup() {
   const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
@@ -40,19 +40,28 @@ function IndexPopup() {
       mode: prefersDarkMode ? 'dark' : 'light',
       //copied from tailwind.config.js
       primary: {
-        main: fullConfig.theme.colors.royal,
+        main: fullTailwindConfig.theme.colors.royal,
       },
       secondary: {
-        main: fullConfig.theme.colors.royal,
-        light: fullConfig.theme.colors.periwinkle,
+        main: fullTailwindConfig.theme.colors.royal,
+        light: fullTailwindConfig.theme.colors.periwinkle,
       },
       error: {
-        main: fullConfig.theme.colors.persimmon['500'],
+        main: fullTailwindConfig.theme.colors.persimmon['500'],
       },
     },
     typography: {
       fontFamily: 'inherit',
     },
+    breakpoints: {
+      values: {
+        xs: 0,
+        sm: parseInt(fullTailwindConfig.theme.screens.sm),
+        md: parseInt(fullTailwindConfig.theme.screens.md),
+        lg: parseInt(fullTailwindConfig.theme.screens.lg),
+        xl: parseInt(fullTailwindConfig.theme.screens.xl),
+      },
+    },
   });
 
   return (