From 07564bbde34ba60abda291dd39f4cacae6ea97a0 Mon Sep 17 00:00:00 2001
From: Harvey Tindall <hrfee@protonmail.ch>
Date: Thu, 15 Jun 2023 17:35:51 +0100
Subject: [PATCH] captcha: recaptcha respects dark mode

also removed the ugly border around it.
---
 css/base.css        | 13 +++++++++++++
 html/form-base.html |  3 ++-
 html/form.html      |  4 ++--
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/css/base.css b/css/base.css
index f912d3e..5358312 100644
--- a/css/base.css
+++ b/css/base.css
@@ -560,3 +560,16 @@ div.card:contains(section.banner.footer) {
 input[type="checkbox" i], [class^="ri-"], [class*=" ri-"], .ri-refresh-line:before, .modal-close {
     cursor: pointer;
 }
+
+
+.g-recaptcha {
+    overflow: hidden;
+    width: 296px;
+    height: 72px;
+    transform: scale(1.1);
+    transform-origin: top left;
+}
+
+.g-recaptcha iframe {
+    margin: -2px 0px 0px -4px;
+}
diff --git a/html/form-base.html b/html/form-base.html
index 9b9e667..b5f2e2a 100644
--- a/html/form-base.html
+++ b/html/form-base.html
@@ -39,7 +39,8 @@
     var reCAPTCHACallback = () => {
         const el = document.getElementsByClassName("g-recaptcha")[0];
         grecaptcha.render(el, {
-            "sitekey": window.reCAPTCHASiteKey
+            "sitekey": window.reCAPTCHASiteKey,
+            "theme": document.documentElement.classList.contains("dark") ? "dark" : "light"
         });
     }
 </script>
diff --git a/html/form.html b/html/form.html
index c88721f..48d8992 100644
--- a/html/form.html
+++ b/html/form.html
@@ -167,7 +167,7 @@
                             </label>
                         </form>
                     </div>
-                    <div class="flex-1">
+                    <div class="flex-initial">
                         <div class="card ~neutral @low mb-4">
                             <span class="label supra" for="inv-uses">{{ .strings.passwordRequirementsHeader }}</span>
                             <ul>
@@ -180,7 +180,7 @@
                         </div>
                         {{ if .captcha }}
                         <div class="card ~neutral @low mb-4">
-                            <span class="label supra mb-2">CAPTCHA {{ if not .reCAPTCHA }}<span id="captcha-regen" title="{{ .strings.refresh }}" class="badge lg @low ~info ml-2 float-right"><i class="ri-refresh-line"></i></span>{{ end }}<span id="captcha-success" class="badge lg @low ~critical ml-2 float-right"><i class="ri-close-line"></i></span></span>
+                            <span class="label supra mb-2">CAPTCHA {{ if not .reCAPTCHA }}<span id="captcha-regen" title="{{ .strings.refresh }}" class="badge lg @low ~info ml-2 float-right"><i class="ri-refresh-line"></i></span><span id="captcha-success" class="badge lg @low ~critical ml-2 float-right"><i class="ri-close-line"></i></span>{{ end }}</span>
                             <div id="captcha-img" class="mt-2 mb-2 {{ if .reCAPTCHA }}g-recaptcha{{ end }}"></div>
                             {{ if not .reCAPTCHA }}
                             <input class="field ~neutral @low" id="captcha-input" class="mt-2" placeholder="CAPTCHA">