From 2dfcd1f0998c8eddbb566497f5e2d07f11026663 Mon Sep 17 00:00:00 2001
From: MeowcaTheoRange <tabletmeowcat@gmail.com>
Date: Sun, 12 Nov 2023 15:48:31 -0600
Subject: [PATCH] Make that damn button the most important thing you've seen in
 your life

---
 src/components/AccssibilityBox/AccessibilityBox.tsx |  2 +-
 src/components/Floaty/Floaty.module.css             | 11 +++++++++++
 src/components/Floaty/Floaty.tsx                    | 12 +++++++-----
 3 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/components/AccssibilityBox/AccessibilityBox.tsx b/src/components/AccssibilityBox/AccessibilityBox.tsx
index 79cf514..f13f9c2 100644
--- a/src/components/AccssibilityBox/AccessibilityBox.tsx
+++ b/src/components/AccssibilityBox/AccessibilityBox.tsx
@@ -12,7 +12,7 @@ export default function AccessibilityBox() {
     }
   }, []);
   return (
-    <Floaty top>
+    <Floaty top important>
       <input
         id="accessibility"
         type="checkbox"
diff --git a/src/components/Floaty/Floaty.module.css b/src/components/Floaty/Floaty.module.css
index 7159d5f..0cf8271 100644
--- a/src/components/Floaty/Floaty.module.css
+++ b/src/components/Floaty/Floaty.module.css
@@ -38,6 +38,17 @@
   right: 64px;
 }
 
+.FloatyImportant {
+  display: inline-block;
+  z-index: 8 !important;
+  padding: 16px;
+  background-color: var(--backgroundColor);
+  min-width: 0;
+  max-width: none;
+  border: 1px solid var(--color);
+  /* width: 200px; */
+}
+
 @media only screen and (max-width: 875px) {
   .Floaty {
     position: static !important;
diff --git a/src/components/Floaty/Floaty.tsx b/src/components/Floaty/Floaty.tsx
index 19d46e1..e6e1f71 100644
--- a/src/components/Floaty/Floaty.tsx
+++ b/src/components/Floaty/Floaty.tsx
@@ -3,23 +3,25 @@ import styles from "./Floaty.module.css";
 export default function Floaty({
   children,
   top = false,
+  important = false,
   start = false,
   keepFloat = false,
   sticky = false,
 }: {
   children?: React.ReactNode;
   top?: boolean;
+  important?: boolean;
   start?: boolean;
   keepFloat?: boolean;
   sticky?: boolean;
 }) {
   return (
     <div
-      className={`${styles.Floaty} ${top ? styles.FloatyTop : ""} ${
-        start ? styles.FloatyStart : ""
-      } ${keepFloat ? styles.FloatyKeep : ""} ${
-        sticky ? styles.FloatySticky : ""
-      } FL-collapse-on-a11y`}
+      className={`${styles.Floaty} ${important ? styles.FloatyImportant : ""} ${
+        top ? styles.FloatyTop : ""
+      } ${start ? styles.FloatyStart : ""} ${
+        keepFloat ? styles.FloatyKeep : ""
+      } ${sticky ? styles.FloatySticky : ""} FL-collapse-on-a11y`}
     >
       {children}
     </div>