Fix button styles

app/components/layout/AnythingAdder.tsx

@@ -1,3 +1,4 @@
+import { Button } from "react-aria-components";
 import { useTranslation } from "react-i18next";
 import { useUser } from "~/features/auth/core/user";
 import { FF_SCRIMS_ENABLED } from "~/features/scrims/scrims-constants";
@@ -14,7 +15,6 @@ import {
 	plusSuggestionsNewPage,
 	userNewBuildPage,
 } from "~/utils/urls";
-import { SendouButton } from "../elements/Button";
 import {
 	SendouMenu,
 	SendouMenuItem,
@@ -100,12 +100,12 @@ export function AnythingAdder() {
 	return (
 		<SendouMenu
 			trigger={
-				<SendouButton
+				<Button
 					className="layout__header__button"
 					data-testid="anything-adder-menu-button"
 				>
 					<PlusIcon className="layout__header__button__icon" />
-				</SendouButton>
+				</Button>
 			}
 		>
 			{items.map((item) => (

app/components/layout/index.module.css

@@ -0,0 +1,23 @@
+.hamburger.fab {
+	display: grid;
+	position: fixed;
+	right: 27.5px;
+	bottom: 105px;
+	border-radius: 100%;
+	width: 3.75rem;
+	height: 3.75rem;
+	backdrop-filter: var(--backdrop-filter);
+	background-color: transparent;
+	border-color: var(--theme-transparent);
+}
+
+.hamburger.fab svg {
+	width: 2.25rem;
+	stroke-width: 2px;
+}
+
+@media screen and (min-width: 600px) {
+	.hamburger.fab {
+		display: none;
+	}
+}

app/components/layout/index.tsx

@@ -11,6 +11,8 @@ import { Footer } from "./Footer";
 import { NavDialog } from "./NavDialog";
 import { TopRightButtons } from "./TopRightButtons";
 
+import styles from "./index.module.css";
+
 function useBreadcrumbs() {
 	const { t } = useTranslation();
 	const matches = useMatches();
@@ -56,7 +58,7 @@ export function Layout({
 			{isFrontPage ? (
 				<SendouButton
 					icon={<HamburgerIcon />}
-					className="layout__hamburger-fab"
+					className={clsx(styles.hamburger, styles.fab)}
 					variant="outlined"
 					onPress={() => setNavDialogOpen(true)}
 				/>

app/styles/layout.css

@@ -79,24 +79,6 @@
 	letter-spacing: 0.02rem;
 }
 
-.layout__hamburger-fab {
-	display: grid;
-	position: fixed;
-	right: 27.5px;
-	bottom: 105px;
-	border-radius: 100%;
-	width: 3.75rem;
-	height: 3.75rem;
-	backdrop-filter: var(--backdrop-filter);
-	background-color: transparent;
-	border-color: var(--theme-transparent);
-}
-
-.layout__hamburger-fab svg {
-	width: 2.25rem;
-	stroke-width: 2px;
-}
-
 .layout__header__right-container {
 	display: flex;
 	gap: var(--s-3);
@@ -381,12 +363,6 @@
 	}
 }
 
-@media screen and (min-width: 600px) {
-	.layout__hamburger-fab {
-		display: none;
-	}
-}
-
 @media screen and (max-width: 640px) {
 	.layout__hamburger-button {
 		display: initial;