Merge pull request #121 from LaconicNetwork/oriofir/captcha

centered recaptcha and made more responsive css

src/components/sections/contact/form/form.module.scss

@@ -144,11 +144,18 @@
         }
 
         iframe {
+          @media (max-width: 950px) {
+            margin-left: 75%;
+          }
+
           display: flex;
           flex-direction: row;
           justify-content: center;
+          align-items: center;
           border-radius: 8px;
-          margin-top: 5rem;
+          margin-top: 2.5rem;
+          margin-left: 65%;
+          position: relative;
         }
 
         > label:nth-child(2) {

src/components/sections/partners/contact/contact.module.scss

@@ -209,14 +209,6 @@
           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%;
@@ -225,12 +217,28 @@
 
           width: fit-content;
           align-self: center;
+          position: relative;
           font-size: tovw(18px, 'default', 14px);
           margin-top: tovw(50px, 'default', 35px);
         }
       }
     }
 
+    iframe {
+      @media (max-width: 950px) {
+        margin-left: 75%;
+      }
+
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      border-radius: 8px;
+      margin-top: 2.5rem;
+      margin-left: 65%;
+      position: relative;
+    }
+
     .gradient {
       @include respond-to('mobile') {
         bottom: tovw(1px, 'mobile', 90px);

src/components/sections/partners/contact/index.tsx

@@ -238,16 +238,18 @@ 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-container">
+          <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>
         <Button size="medium" variant="primary">
           {data?.contactButtonLabel}
         </Button>