Add dark mode to captcha component + formatting

frontend/components/FriendlyCaptcha.vue

@@ -1,17 +1,12 @@
 <template>
-  <button
-    class="flex items-center w-fit justify-center 2xl:space-x-10 xl:space-x-8 lg:space-x-4 md:space-x-4 lg:col-span-5 md:col-span-2 px-3 rounded border border-light-section-div dark:border-dark-section-div text-sm h-[48px] md:h-[40px] elem-shadow-sm"
-    type="button"
-    aria-label="test"
-  >
-    <span class="flex items-center space-x-4 whitespace-nowrap">
-      <Icon name="bi:shield-fill-check" size="28px" />
-      <span class="font-bold text-[18px] hidden lg:inline-block">{{
-        $t("components.friendly-captcha.i-am-human")
-      }}</span>
-    </span>
-    <span class="text-[12px] hidden lg:inline-block truncate">{{
-      $t("components.friendly-captcha.label")
-    }}</span>
-  </button>
+  <vue-friendly-captcha
+    @done="verifyCaptcha"
+    sitekey="<sitekey>"
+    :dark="($colorMode.preference = 'dark')"
+    language="en"
+  />
 </template>
+
+<script setup>
+import VueFriendlyCaptcha from "@somushq/vue3-friendly-captcha";
+</script>

frontend/components/PasswordStrengthIndicator.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="h-4">
-    <div class="h-1 bg-light-distinct-text dark:bg-dark-distinct-text rounded-md">
+    <div
+      class="h-1 bg-light-distinct-text dark:bg-dark-distinct-text rounded-md"
+    >
       <div
         class="h-1 transition-width ease-in duration-500 rounded-md"
         :class="!!passwordValue.length ? `${color}` : ''"