Realized you can do this all with Tailwind, instead of in globals.css

UTDNebula · Nov 27, 2024 · 5bb8fed · 5bb8fed
1 parent 87a2e97
commit 5bb8fed
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 34 deletions.
diff --git a/src/components/navigation/topMenu/topMenu.tsx b/src/components/navigation/topMenu/topMenu.tsx
@@ -52,7 +52,7 @@ export function TopMenu({ resultsLoading, setResultsLoading }: TopMenuProps) {
 
   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 change-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 flex-wrap sm:flex-nowrap">
         <Image
           src={Background}
           alt="gradient background"
@@ -69,7 +69,7 @@ export function TopMenu({ resultsLoading, setResultsLoading }: TopMenuProps) {
           manageQuery="onSelect"
           resultsLoading={resultsLoading}
           setResultsLoading={setResultsLoading}
-          className="change-order shrink"
+          className="order-last basis-full sm:order-none sm:basis-[32rem] shrink"
           input_className="[&>.MuiInputBase-root]:bg-white [&>.MuiInputBase-root]:dark:bg-haiti"
         />
         <Tooltip title="Share link to search" className="ml-auto">

diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx
@@ -881,13 +881,13 @@ export const Dashboard: NextPage<{ pageTitle: string }> = ({
           </Grid>
           <Grid size={{ xs: false, sm: 6, md: 6 }}></Grid>
         </Grid>
-        <div className="mobile-stacked-ui">
+        <div className="block sm:hidden">
           {carousel}
           {searchResultsTable}
         </div>
         <PanelGroup
           direction="horizontal"
-          className="desktop-sides-ui overflow-visible"
+          className="hidden sm:flex overflow-visible"
         >
           <Panel ref={panelLRef} minSize={40} defaultSize={50}>
             {searchResultsTable}

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -27,34 +27,4 @@ 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;
-    }
-  }
 }