From 84b6ff5ae1129a6f5432f96d2592ba4ee76f4f64 Mon Sep 17 00:00:00 2001
From: Tyler Hill <gotyhill@gmail.com>
Date: Sun, 5 Jan 2025 18:06:15 -0600
Subject: [PATCH 1/2] Simplify tablesortlabel

---
 src/components/TableSortLabel.tsx | 41 ++++++++++---------------------
 1 file changed, 13 insertions(+), 28 deletions(-)

diff --git a/src/components/TableSortLabel.tsx b/src/components/TableSortLabel.tsx
index d56d953..708b021 100644
--- a/src/components/TableSortLabel.tsx
+++ b/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;

From 6183b719d2bd1a2f9595c9dc53a5f4f3bc7a56ae Mon Sep 17 00:00:00 2001
From: Tyler Hill <gotyhill@gmail.com>
Date: Sun, 5 Jan 2025 18:06:20 -0600
Subject: [PATCH 2/2] Match mui/tailwind breakpoints

---
 src/popup.tsx | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/popup.tsx b/src/popup.tsx
index ffdcef3..d06c21a 100644
--- a/src/popup.tsx
+++ b/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 (