From 066694a6f10e7a970ea1e7f21e899429a5980366 Mon Sep 17 00:00:00 2001
From: Subhajit Ghosh <99127578+subhajit20@users.noreply.github.com>
Date: Sat, 2 Dec 2023 20:47:25 +0530
Subject: [PATCH] Replaced all the css into tailwind css on RegistrationForm
 component (#1780)

Co-authored-by: Kyle Holmberg <kylemh.email@gmail.com>
---
 .../RegistrationForm/RegistrationForm.js      | 24 ++++-------
 .../RegistrationForm.module.css               | 43 -------------------
 .../RegistrationForm.test.js.snap             | 18 ++++----
 3 files changed, 18 insertions(+), 67 deletions(-)
 delete mode 100644 components/Forms/RegistrationForm/RegistrationForm.module.css

diff --git a/components/Forms/RegistrationForm/RegistrationForm.js b/components/Forms/RegistrationForm/RegistrationForm.js
index b3183800d..ad800b895 100644
--- a/components/Forms/RegistrationForm/RegistrationForm.js
+++ b/components/Forms/RegistrationForm/RegistrationForm.js
@@ -15,7 +15,6 @@ import Input from 'components/Form/Input/Input';
 import Alert from 'components/Alert/Alert';
 import Link from 'next/link';
 import OutboundLink from 'components/OutboundLink/OutboundLink';
-import styles from './RegistrationForm.module.css';
 
 export const PASSWORD_FOR_EVERYBODY = 'nOnEeDfOrP@ssw0rd!';
 
@@ -115,7 +114,7 @@ function RegistrationForm({ initialValues, onSubmit, onSuccess }) {
       validationSchema={registrationSchema}
     >
       {({ isSubmitting }) => (
-        <Form className={styles.RegistrationForm}>
+        <Form className="w-full flex items-center flex-col [&>p]:my-5 [&>p]:mx-auto">
           <p>
             We work closely with military veterans, service members, and spouses who are passionate
             about transitioning into the tech industry. We work with over 7,000 members who are all
@@ -126,7 +125,7 @@ function RegistrationForm({ initialValues, onSubmit, onSuccess }) {
             </Link>
           </p>
 
-          <div className={styles.formContainer}>
+          <div className="flex flex-col justify-between max-w-lg w-full">
             <Field
               type="email"
               name="email"
@@ -146,7 +145,7 @@ function RegistrationForm({ initialValues, onSubmit, onSuccess }) {
             />
 
             <Field
-              className={styles.invisible}
+              className="hidden"
               type="password"
               name="password"
               label="Password*"
@@ -156,7 +155,7 @@ function RegistrationForm({ initialValues, onSubmit, onSuccess }) {
             />
 
             <Field
-              className={styles.invisible}
+              className="hidden"
               type="password"
               name="confirm-password"
               label="Confirm Password*"
@@ -215,24 +214,19 @@ function RegistrationForm({ initialValues, onSubmit, onSuccess }) {
 
           {errorMessage && <Alert type="error">{errorMessage}</Alert>}
 
-          <hr className={styles.seperator} />
+          <hr className="my-8 mx-0 w-1/4" />
 
-          <p className={styles.aside}>
+          <p className="bg-white border-1 border-solid border-secondary rounded-md text-sm py-2 px-3">
             The demographic information you provide, helps us understand our community needs, ensure
             diversity, and provide specific resources to reach our mission. Thank you in advance for
             providing honest answers.
             <br />
-            <span className={styles.bold}>We do not sell your information to anyone.</span>
+            <span className="font-bold">We do not sell your information to anyone.</span>
           </p>
 
-          <hr className={styles.seperator} />
+          <hr className="my-8 mx-0 w-1/4" />
 
-          <Button
-            className={styles.topMargin}
-            type="submit"
-            theme="secondary"
-            disabled={isSubmitting}
-          >
+          <Button className="mt-4" type="submit" theme="secondary" disabled={isSubmitting}>
             Submit
           </Button>
         </Form>
diff --git a/components/Forms/RegistrationForm/RegistrationForm.module.css b/components/Forms/RegistrationForm/RegistrationForm.module.css
deleted file mode 100644
index 404079b18..000000000
--- a/components/Forms/RegistrationForm/RegistrationForm.module.css
+++ /dev/null
@@ -1,43 +0,0 @@
-.RegistrationForm {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-}
-
-.topMargin {
-  margin-top: 1rem;
-}
-
-.RegistrationForm > p {
-  margin: 1.25rem auto;
-}
-
-.formContainer {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  max-width: 500px;
-  width: 100%;
-}
-
-.seperator {
-  margin: 2rem 0;
-  width: 25%;
-}
-
-.aside {
-  background-color: var(--white);
-  border: 1px solid var(--secondary);
-  border-radius: 4px;
-  font-size: 14px;
-  padding: 0.5rem 0.75rem;
-}
-
-.invisible {
-  display: none;
-}
-
-.bold {
-  font-weight: 700;
-}
diff --git a/components/Forms/RegistrationForm/__tests__/__snapshots__/RegistrationForm.test.js.snap b/components/Forms/RegistrationForm/__tests__/__snapshots__/RegistrationForm.test.js.snap
index b7f200abc..302348f86 100644
--- a/components/Forms/RegistrationForm/__tests__/__snapshots__/RegistrationForm.test.js.snap
+++ b/components/Forms/RegistrationForm/__tests__/__snapshots__/RegistrationForm.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`RegistrationForm should render with required props 1`] = `
 <form
-  className="RegistrationForm"
+  className="w-full flex items-center flex-col [&>p]:my-5 [&>p]:mx-auto"
   noValidate={true}
   onReset={[Function]}
   onSubmit={[Function]}
@@ -19,7 +19,7 @@ exports[`RegistrationForm should render with required props 1`] = `
     </a>
   </p>
   <div
-    className="formContainer"
+    className="flex flex-col justify-between max-w-lg w-full"
   >
     <div
       className="field"
@@ -78,7 +78,7 @@ exports[`RegistrationForm should render with required props 1`] = `
       </div>
     </div>
     <div
-      className="invisible field"
+      className="hidden field"
       data-testid="INPUT"
     >
       <label
@@ -106,7 +106,7 @@ exports[`RegistrationForm should render with required props 1`] = `
       </div>
     </div>
     <div
-      className="invisible field"
+      className="hidden field"
       data-testid="INPUT"
     >
       <label
@@ -259,24 +259,24 @@ exports[`RegistrationForm should render with required props 1`] = `
     </div>
   </div>
   <hr
-    className="seperator"
+    className="my-8 mx-0 w-1/4"
   />
   <p
-    className="aside"
+    className="bg-white border-1 border-solid border-secondary rounded-md text-sm py-2 px-3"
   >
     The demographic information you provide, helps us understand our community needs, ensure diversity, and provide specific resources to reach our mission. Thank you in advance for providing honest answers.
     <br />
     <span
-      className="bold"
+      className="font-bold"
     >
       We do not sell your information to anyone.
     </span>
   </p>
   <hr
-    className="seperator"
+    className="my-8 mx-0 w-1/4"
   />
   <button
-    className="Button topMargin secondary"
+    className="Button mt-4 secondary"
     data-testid="BUTTON"
     disabled={false}
     onClick={[Function]}