Uncodedtech · pull · Jan 20, 2026 · Jan 20, 2026 · Jan 20, 2026 · Jan 20, 2026
diff --git a/frontend/firebase.json b/frontend/firebase.json
@@ -6,6 +6,10 @@
       {
         "source": "/@(test|settings|account|about|login|profile|friends|account-settings|leaderboards){,/**}",
         "destination": "/index.html"
+      },
+      {
+        "source": "/verify",
+        "destination": "/index.html"
       }
     ],
     "cleanUrls": true,

diff --git a/frontend/src/html/head.html b/frontend/src/html/head.html
@@ -106,14 +106,25 @@
   <meta name="twitter:card" content="summary_large_image" />
   <meta name="darkreader-lock" />
   <meta http-equiv="Cache-Control" content="no-store" />
-
-  <!-- 
-    order of the style imports is not important EXCEPT for index
-    index has to be first because it contains the order of css layers
-  -->
-  <link rel="stylesheet" href="styles/index.scss" />
-  <link rel="stylesheet" href="styles/tailwind.css" />
-  <link rel="stylesheet" href="styles/vendor.scss" />
+  <style>
+    /* 
+      Layer order NEEDS to be here and one layer per line.
+      This is because vite changes the order of the css imports,
+      and the layer definition needs to be at the very very top, otherwise things break.
+    */
+    @layer normalize;
+    @layer theme;
+    @layer base;
+    @layer components;
+    @layer properties;
+    @layer vendor;
+    @layer custom-styles;
+    @layer hidden;
+    @layer utilities;
+  </style>
+  <link rel="stylesheet" class="testtesttest" href="styles/index.scss" />
+  <link rel="stylesheet" class="testtest" href="styles/tailwind.css" />
+  <link rel="stylesheet" class="test" href="styles/vendor.scss" />
 
   <style class="customFont" type="text/css"></style>
 </head>
diff --git a/frontend/src/html/popups.html b/frontend/src/html/popups.html
@@ -1,5 +1,3 @@
-<Modals />
-
 <dialog id="registerCaptchaModal" class="modalWrapper hidden">
   <div class="modal">
     <div class="g-recaptcha"></div>

diff --git a/frontend/src/index.html b/frontend/src/index.html
@@ -3,13 +3,13 @@
   <load src="html/head.html" />
 
   <body>
-    <Overlays />
+    <mount data-component="overlays"></mount>
     <div id="mediaQueryDebug"></div>
     <load src="html/warnings.html" />
     <div class="customBackground"></div>
 
     <!-- theme component adds to the head element, don't move to head.html -->
-    <Theme />
+    <mount data-component="theme"></mount>
     <div id="notificationCenter">
       <div class="clearAll button hidden">
         <i class="fas fa-times"></i>
@@ -22,6 +22,7 @@
         <div class="bar"></div>
       </div>
     </div>
+    <mount data-component="modals" id="solidmodals"></mount>
     <div id="popups">
       <load src="html/popups.html" />
     </div>
@@ -38,11 +39,8 @@
           <div id="ad-vertical-right"></div>
         </div>
         <load src="html/pages/loading.html" />
-        <div
-          class="page pageAbout full-width content-grid grid hidden gap-8"
-          id="pageAbout"
-        >
-          <AboutPage />
+        <div class="page pageAbout full-width hidden" id="pageAbout">
+          <mount data-component="aboutpage"></mount>
         </div>
         <load src="html/pages/settings.html" />
         <load src="html/pages/login.html" />
@@ -54,7 +52,7 @@
         <load src="html/pages/friends.html" />
         <load src="html/pages/leaderboards.html" />
       </main>
-      <footer />
+      <mount data-component="footer"></mount>
       <div
         id="ad-footer-wrapper"
         class="full-width ad advertisement ad-h focus"

diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
@@ -1,11 +1,3 @@
-// layer order
-@layer normalize; /* Normalize stuff */
-@layer theme, base, components, properties; /* Tailwind stuff */
-@layer vendor; /* Vendor files */
-@layer custom-styles; /* scss files */
-@layer hidden; /* custom hidden layer */
-@layer utilities; /* Tailwind again, make them override scss files */
-
 @layer hidden {
   // custom layer to hide elements without using !important
   // (as long as this layer is higher than custom-styles)

diff --git a/frontend/src/styles/nav.scss b/frontend/src/styles/nav.scss
@@ -197,6 +197,7 @@ nav {
 
         a,
         button {
+          justify-items: start;
           justify-content: left;
           padding-left: 0;
           border-radius: 0;

diff --git a/frontend/src/ts/components/layout/footer/ScrollToTop.tsx b/frontend/src/ts/components/layout/footer/ScrollToTop.tsx
@@ -24,7 +24,7 @@ export function ScrollToTop(): JSXElement {
   return (
     <div class="content-grid ScrollToTop pointer-events-none fixed top-0 left-0 z-999999 h-full w-full">
       <button
-        class="breakout bg-sub-alt text-sub ring-bg hover:text-bg pointer-events-auto mb-8 grid h-16 w-16 place-self-end rounded-full text-[2rem] ring-8"
+        class="breakout bg-sub-alt text-sub ring-bg hover:text-bg hover:bg-text pointer-events-auto mb-8 grid h-16 w-16 place-self-end rounded-full text-[2rem] ring-8"
         style={{
           "grid-column": "content-end/breakout-end",
         }}

diff --git a/frontend/src/ts/components/mount.tsx b/frontend/src/ts/components/mount.tsx
@@ -10,22 +10,21 @@ import { Modals } from "./modals/Modals";
 import { AboutPage } from "./pages/AboutPage";
 
 const components: Record<string, () => JSXElement> = {
-  Footer: () => <Footer />,
-  Modals: () => <Modals />,
-  AboutPage: () => <AboutPage />,
-  Overlays: () => <Overlays />,
-  Theme: () => <Theme />,
+  footer: () => <Footer />,
+  aboutpage: () => <AboutPage />,
+  modals: () => <Modals />,
+  overlays: () => <Overlays />,
+  theme: () => <Theme />,
 };
 
 function mountToMountpoint(name: string, component: () => JSXElement): void {
   for (const mountPoint of qsa(name)) {
     render(() => component(), mountPoint.native);
-    mountPoint.native.replaceWith(...mountPoint.native.children);
   }
 }
 
 export function mountComponents(): void {
   for (const [query, component] of Object.entries(components)) {
-    mountToMountpoint(query, component);
+    mountToMountpoint(`mount[data-component=${query}]`, component);
   }
 }