fix hcaptcha bugginess

components/Captcha/Captcha.tsx

@@ -1,12 +1,12 @@
 import { memo } from "react";
 import Head from "next/head";
 import HCaptcha from "@hcaptcha/react-hcaptcha";
+import { useHasMounted } from "../../hooks/use-has-mounted";
 import { useTheme } from "../../hooks/use-theme";
 
 export type CaptchaProps = {
   size?: "normal" | "compact" | "invisible";
   theme?: "light" | "dark";
-  id?: string;
   className?: string;
 
   // callbacks pulled verbatim from node_modules/@hcaptcha/react-hcaptcha/types/index.d.ts
@@ -21,7 +21,8 @@ export type CaptchaProps = {
   /* eslint-enable @typescript-eslint/no-explicit-any */
 };
 
-const Captcha = ({ size = "normal", theme, id, className, ...rest }: CaptchaProps) => {
+const Captcha = ({ size = "normal", theme, className, ...rest }: CaptchaProps) => {
+  const hasMounted = useHasMounted();
   const { resolvedTheme } = useTheme();
 
   return (
@@ -32,15 +33,16 @@ const Captcha = ({ size = "normal", theme, id, className, ...rest }: CaptchaProp
       </Head>
 
       <div className={className}>
-        <HCaptcha
-          sitekey={process.env.NEXT_PUBLIC_HCAPTCHA_SITE_KEY}
-          reCaptchaCompat={false}
-          tabIndex={0}
-          size={size}
-          theme={theme || (resolvedTheme === "dark" ? "dark" : "light")}
-          id={id}
-          {...rest}
-        />
+        {hasMounted && (
+          <HCaptcha
+            sitekey={process.env.NEXT_PUBLIC_HCAPTCHA_SITE_KEY}
+            reCaptchaCompat={false}
+            tabIndex={0}
+            size={size}
+            theme={theme || (resolvedTheme === "dark" ? "dark" : "light")}
+            {...rest}
+          />
+        )}
       </div>
     </>
   );

components/Selfie/Selfie.tsx

@@ -10,13 +10,13 @@ const Image = styled(NextImage, {
   display: "block",
   width: "50px",
   height: "50px",
-  border: "1px solid $light !important",
+  border: "1px solid $light",
   borderRadius: "50%",
 
   "@medium": {
     width: "70px",
     height: "70px",
-    borderWidth: "2px !important",
+    borderWidth: "2px",
   },
 });
 
@@ -31,7 +31,7 @@ const Link = styled("a", {
 
     "@medium": {
       [`${Image}`]: {
-        borderColor: "$linkUnderline !important",
+        borderColor: "$linkUnderline",
       },
     },
   },

components/ThemeScript/ThemeScript.tsx

@@ -20,7 +20,7 @@ const clientScript = () => {
     } else {
       var q = "__MEDIA_QUERY__",
         m = window.matchMedia(q);
-      m.media !== q || m.matches ? l.add(c["dark"]) : l.add(c["light"]);
+      l.add(c[m.media !== q || m.matches ? "dark" : "light"]);
     }
   } catch (e) {}
 };