Remove useMediaQueries

UTDNebula · Nov 25, 2024 · 34158a7 · 34158a7
1 parent 8299411
commit 34158a7
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 75 deletions.
diff --git a/src/components/common/TableSortLabel/tableSortLabel.tsx b/src/components/common/TableSortLabel/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;
diff --git a/src/components/navigation/topMenu/topMenu.tsx b/src/components/navigation/topMenu/topMenu.tsx
@@ -1,5 +1,5 @@
 import { Share } from '@mui/icons-material';
-import { IconButton, Snackbar, Tooltip, useMediaQuery } from '@mui/material';
+import { IconButton, Snackbar, Tooltip } from '@mui/material';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
@@ -50,25 +50,9 @@ export function TopMenu({ resultsLoading, setResultsLoading }: TopMenuProps) {
     alert(url);
   }
 
-  const matches = useMediaQuery('(min-width: 640px)');
-  const searchBar = (
-    <SearchBar
-      manageQuery="onSelect"
-      resultsLoading={resultsLoading}
-      setResultsLoading={setResultsLoading}
-      className={'shrink ' + (matches ? 'basis-[32rem]' : 'basis-full')}
-      input_className="[&>.MuiInputBase-root]:bg-white [&>.MuiInputBase-root]:dark:bg-haiti"
-    />
-  );
-
   return (
     <>
-      <div
-        className={
-          'relative overflow-hidden flex items-center gap-y-0 gap-x-4 md:gap-x-8 lg:gap-x-16 py-1 md:py-2 px-4 md:px-8 lg:px-16 bg-lighten dark:bg-darken' +
-          (matches ? '' : ' flex-wrap')
-        }
-      >
+      <div className="relative overflow-hidden flex items-center gap-y-0 gap-x-4 md:gap-x-8 lg:gap-x-16 py-1 md:py-2 px-4 md:px-8 lg:px-16 bg-lighten dark:bg-darken change-wrap">
         <Image
           src={Background}
           alt="gradient background"
@@ -81,7 +65,13 @@ export function TopMenu({ resultsLoading, setResultsLoading }: TopMenuProps) {
         >
           UTD TRENDS
         </Link>
-        {matches && searchBar}
+        <SearchBar
+          manageQuery="onSelect"
+          resultsLoading={resultsLoading}
+          setResultsLoading={setResultsLoading}
+          className="change-order shrink"
+          input_className="[&>.MuiInputBase-root]:bg-white [&>.MuiInputBase-root]:dark:bg-haiti"
+        />
         <Tooltip title="Share link to search" className="ml-auto">
           <IconButton
             className="aspect-square"
@@ -101,7 +91,6 @@ export function TopMenu({ resultsLoading, setResultsLoading }: TopMenuProps) {
             <Share className="text-3xl mr-1" />
           </IconButton>
         </Tooltip>
-        {!matches && searchBar}
       </div>
       <Snackbar
         open={openCopied}

diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx
@@ -1,4 +1,4 @@
-import { Card, Grid2 as Grid, useMediaQuery } from '@mui/material';
+import { Card, Grid2 as Grid } from '@mui/material';
 import type { NextPage, NextPageContext } from 'next';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
@@ -794,7 +794,6 @@ export const Dashboard: NextPage<{ pageTitle: string }> = ({
 
   const panelLRef = useRef<ImperativePanelHandle>(null);
   const panelRRef = useRef<ImperativePanelHandle>(null);
-  const isSmallScreen = useMediaQuery('(max-width: 600px)');
   // Resets RHS & LHS to 50/50 when double clicking handle
   const handleResizeDoubleClick = () => {
     panelLRef.current?.resize(50);
@@ -882,32 +881,32 @@ export const Dashboard: NextPage<{ pageTitle: string }> = ({
           </Grid>
           <Grid size={{ xs: false, sm: 6, md: 6 }}></Grid>
         </Grid>
-        {isSmallScreen ? (
-          <div>
-            {carousel}
+        <div className="mobile-stacked-ui">
+          {carousel}
+          {searchResultsTable}
+        </div>
+        <PanelGroup
+          direction="horizontal"
+          className="desktop-sides-ui overflow-visible"
+        >
+          <Panel ref={panelLRef} minSize={40} defaultSize={50}>
             {searchResultsTable}
-          </div>
-        ) : (
-          <PanelGroup direction="horizontal" className="overflow-visible">
-            <Panel ref={panelLRef} minSize={40} defaultSize={50}>
-              {searchResultsTable}
-            </Panel>
-            <PanelResizeHandle
-              className="mt-4 p-1 mx-1 w-0.5 rounded-full opacity-25 data-[resize-handle-state=drag]:opacity-50 transition ease-in-out bg-transparent hover:bg-royal data-[resize-handle-state=drag]:bg-royal"
-              onDoubleClick={handleResizeDoubleClick}
-            />
-            <Panel
-              className="overflow-visible min-w-0"
-              ref={panelRRef}
-              minSize={30}
-              defaultSize={50}
-            >
-              <div className="sticky top-4 max-h-[calc(100vh-2rem)] overflow-y-auto mt-4">
-                {carousel}
-              </div>
-            </Panel>
-          </PanelGroup>
-        )}
+          </Panel>
+          <PanelResizeHandle
+            className="mt-4 p-1 mx-1 w-0.5 rounded-full opacity-25 data-[resize-handle-state=drag]:opacity-50 transition ease-in-out bg-transparent hover:bg-royal data-[resize-handle-state=drag]:bg-royal"
+            onDoubleClick={handleResizeDoubleClick}
+          />
+          <Panel
+            className="overflow-visible min-w-0"
+            ref={panelRRef}
+            minSize={30}
+            defaultSize={50}
+          >
+            <div className="sticky top-4 max-h-[calc(100vh-2rem)] overflow-y-auto mt-4">
+              {carousel}
+            </div>
+          </Panel>
+        </PanelGroup>
       </>
     );
   }

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -27,4 +27,34 @@ body,
   .bg-darken {
     background-color: rgba(0, 0, 0, 0.6);
   }
+
+  .change-order {
+    @apply order-last basis-full;
+  }
+  .change-wrap {
+    @apply flex-wrap;
+  }
+  @media screen(sm) {
+    .change-order {
+      @apply order-none basis-[32rem];
+    }
+    .change-wrap {
+      @apply flex-nowrap;
+    }
+  }
+
+  .mobile-stacked-ui {
+    display: block;
+  }
+  .desktop-sides-ui {
+    display: none;
+  }
+  @media screen(sm) {
+    .mobile-stacked-ui {
+      display: none;
+    }
+    .desktop-sides-ui {
+      display: flex;
+    }
+  }
 }