filters overhaul

src/app/globals.css

@@ -13,6 +13,10 @@ html {
 	overflow-y: scroll;
 }
 
+body {
+	min-width: 380px;
+}
+
 a {
 	text-decoration: none;
 	color: #0000ee;
@@ -35,17 +39,10 @@ h1 {
 	text-decoration: underline;
 }
 
-.flex-column-center {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	padding: 0.75rem;
-}
-
 .title {
-	margin-top: -1rem;
-	margin-left: -1rem;
-	padding-right: 2rem;
+	margin-top: -1.5rem;
+	padding-right: 1.5rem;
+	margin-bottom: -1.25rem;
 }
 
 .hidden {
@@ -161,14 +158,28 @@ h1 {
 	top: 3vmin;
 }
 
+.filter-chips {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: center;
+	row-gap: 0.75rem;
+	column-gap: 0.75rem;
+	padding: 0 0.5rem 0.25rem 0.5rem;
+}
+
+.filter-chip:hover {
+	cursor: pointer;
+}
+
 .filters {
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
 	justify-content: center;
-	margin-bottom: 1.5rem;
 	row-gap: 1rem;
 	column-gap: 1rem;
+	padding-bottom: 0.5rem;
 }
 
 .filter {
@@ -224,7 +235,6 @@ h1 {
 }
 
 .controls {
-	margin-bottom: 1rem;
 }
 
 .form {
@@ -247,11 +257,7 @@ h1 {
 }
 
 .user-btn {
-	position: absolute;
-	top: 1.25rem;
-	left: 1.25rem;
-	width: 3rem;
-	height: 3rem;
+	position: relative;
 }
 
 .user-btn-loading-spinner {
@@ -260,12 +266,6 @@ h1 {
 	left: 0.25rem;
 }
 
-.settings-btn {
-	position: absolute;
-	top: 1.25rem;
-	right: 1.25rem;
-}
-
 .bag-list-dropdown {
 	padding-right: 0.5rem;
 	padding-top: 0.85rem;

src/app/page.tsx

@@ -1,5 +1,6 @@
 import { auth } from "@clerk/nextjs/server";
 import { AppContextProvider, Controls, DiscGrid, Filters, Header, ScrollToTop } from "@components";
+import { Stack } from "@mui/material";
 import { getBags, getDiscs } from "@services";
 
 import type { ViewOption } from "@types";
@@ -20,12 +21,14 @@ export default async function HomePage({
 			initialView={view as ViewOption}
 			initialDiscSlug={Array.isArray(disc) ? disc[0] : disc}
 		>
-			<main className="flex-column-center">
-				<Header />
-				<Filters />
-				<Controls />
-				<DiscGrid />
-				<ScrollToTop />
+			<main>
+				<Stack alignItems="center" spacing="0.75rem">
+					<Header />
+					<Filters />
+					<Controls />
+					<DiscGrid />
+					<ScrollToTop />
+				</Stack>
 			</main>
 		</AppContextProvider>
 	);

src/components/index.ts

@@ -8,6 +8,7 @@ export * from "./disc/DiscCount";
 export * from "./disc/DiscDetail";
 export * from "./disc/DiscGrid";
 export * from "./misc/Controls";
+export * from "./misc/FilterChip";
 export * from "./misc/Filters";
 export * from "./misc/Header";
 export * from "./misc/IconButton";

src/components/misc/FilterChip.tsx

@@ -0,0 +1,15 @@
+import { Chip } from "@mui/material";
+
+import type { FilterChipProps } from "@types";
+
+export const FilterChip = ({ label, isSelected, onClick }: FilterChipProps) => {
+	return (
+		<Chip
+			className="filter-chip"
+			variant="filled"
+			label={label}
+			onClick={onClick}
+			sx={{ backgroundColor: isSelected ? "#bebebe !important" : "#ebebeb" }}
+		/>
+	);
+};