From 8b5a10e4d13425f115b4dd064f0c660f32f00539 Mon Sep 17 00:00:00 2001
From: oriofir <97814056+oriofir@users.noreply.github.com>
Date: Fri, 9 Sep 2022 16:23:38 -0700
Subject: [PATCH] styled recaptcha button

---
 .../sections/contact/form/form.module.scss    | 14 ++++++++++++-
 .../sections/contact/form/index.tsx           | 21 ++++++++++---------
 .../partners/contact/contact.module.scss      | 14 +++++++------
 3 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/src/components/sections/contact/form/form.module.scss b/src/components/sections/contact/form/form.module.scss
index ca8be98..b5f3f4a 100644
--- a/src/components/sections/contact/form/form.module.scss
+++ b/src/components/sections/contact/form/form.module.scss
@@ -143,6 +143,14 @@
           }
         }
 
+        iframe {
+          display: flex;
+          flex-direction: row;
+          justify-content: center;
+          border-radius: 8px;
+          margin-top: 5rem;
+        }
+
         > label:nth-child(2) {
           margin-top: tovw(60px, 'default', 35px);
         }
@@ -156,7 +164,11 @@
           width: fit-content;
           align-self: center;
           font-size: tovw(18px, 'default', 14px);
-          margin-top: tovw(50px, 'default', 35px);
+          margin-top: tovw(50px, 'default', 45px);
+        }
+
+        .recaptcha {
+          padding: 50px;
         }
       }
     }
diff --git a/src/components/sections/contact/form/index.tsx b/src/components/sections/contact/form/index.tsx
index 0d4bf02..b99a359 100644
--- a/src/components/sections/contact/form/index.tsx
+++ b/src/components/sections/contact/form/index.tsx
@@ -169,16 +169,17 @@ const CustomForm = ({ data }: FormProps) => {
             onChange={(e) => setText(e.target.value)}
           ></textarea>
         </label>
-        <script
-          src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
-          async
-          defer
-        ></script>
-        <ReCAPTCHA
-          className="recaptcha"
-          sitekey="6LcJ5LkhAAAAAJ841sJnn6LkwOg-5vt33X-wGEJW"
-          onSubmit={handleSubmitForm}
-        />
+        <div className="recaptcha">
+          <script
+            src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
+            async
+            defer
+          ></script>
+          <ReCAPTCHA
+            sitekey="6LcJ5LkhAAAAAJ841sJnn6LkwOg-5vt33X-wGEJW"
+            onSubmit={handleSubmitForm}
+          />
+        </div>
         <Button size="medium" variant="primary">
           {data?.formLabelButton}
         </Button>
diff --git a/src/components/sections/partners/contact/contact.module.scss b/src/components/sections/partners/contact/contact.module.scss
index 3a45974..b17fe65 100644
--- a/src/components/sections/partners/contact/contact.module.scss
+++ b/src/components/sections/partners/contact/contact.module.scss
@@ -188,12 +188,6 @@
               border: none;
               color: var(--color-white);
             }
-
-            .recaptcha {
-              display: flex;
-              flex-direction: column;
-              background-color: black;
-            }
           }
 
           select {
@@ -215,6 +209,14 @@
           margin-top: tovw(60px, 'default', 35px);
         }
 
+        iframe {
+          display: flex;
+          flex-direction: row;
+          justify-content: center;
+          border-radius: 8px;
+          margin-top: 2.5rem;
+        }
+
         button {
           @include respond-to('mobile') {
             width: 100%;