Form styles done

public/css/index.css

@@ -388,4 +388,51 @@ header h2 {
   color: #ffffff5f;
 }
 
+.form-container {
+  font-family: Arial, Helvetica, sans-serif;
+}
+.form-container .options-container {
+  display: flex;
+  height: 10vh;
+  width: 100%;
+}
+.form-container .options-container .option {
+  color: #fff;
+  background-color: #3670c9;
+  cursor: pointer;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: ease-in-out 0.2s;
+}
+.form-container .options-container .option.active {
+  cursor: initial;
+  background-color: #364f75;
+  transition: ease-in-out 0.4s;
+}
+.form-container form {
+  height: 64vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 3vh;
+}
+.form-container form input {
+  width: 33vw;
+  height: 5vh;
+  padding: 0;
+  box-sizing: content-box;
+  margin-bottom: 0.5vh;
+  border: 0;
+  border-bottom: 1px solid #797979;
+  outline: none;
+}
+.form-container form input[type=submit] {
+  margin-top: 1vh;
+  border-bottom: 0;
+  border: 1px solid #797979;
+}
+
 /*# sourceMappingURL=index.css.map */

public/css/index.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../sass/index.scss","../sass/_header.scss","../sass/_game-container.scss","../sass/_hangman.scss","../sass/_word.scss","../sass/_current-score.scss","../sass/_categories.scss","../sass/_defeat-victory.scss","../sass/_loading.scss","../sass/_letters-registered.scss","../sass/_letter-input.scss"],"names":[],"mappings":";AAAA;EACI;EACA;;;ACFJ;EACI;EAEA;EAEA;EACA;EACA;EACA;;AAEA;EDHA;EACA;EAIA;EACA;;ACGA;EDTA;EACA;EAIA;EACA;ECMI;EACA;EAEA;;;AAIR;EAIQ;IAEI;IACA;IAEA;IACA;IAEA;;EAEA;IACI;IACA;;;AC1ChB;EAEI;EACA;EAEA;;AAMA;EACI;EACA;EAEA;;;AAIR;EAEI;IAEI;IACA;IACA;;EAEA;IACI;;EAII;IAEI;;EAKZ;IACI;IACA;IAEA;IACA;IACA;;;AAKZ;;AAAA;AClDA;EAEI;;AAEA;EACI;;;ACLR;EJkBI;EACA;EIhBA;EAEA;EACA;EAEA;EAEA;EACA;;AAEA;EACI;EACA;EACA;EAEA;EAEA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EAEA;EAEA;;;AAIR;EAIQ;IAEI;;EAGJ;IACI;;;AAKZ;EAIQ;IAEI;;;AC3DZ;EAEI;EAEA;ELGA;EACA;EKAA;EAEA;;AAEA;EACI;;;ACbR;EAEI;;AAEA;EAEI;EAEA;EACA;EAEA;EACA;EAEA;EAEA;EAEA;EACA;EACA;EACA;EAEA;;AAKA;EACI;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACI;EACA;;AA0BJ;EArBI,OAFuD;EAIvD,kBAoBc;EAnBd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAYZ;EA3BI,OAFuD;EAIvD,kBA0Bc;EAzBd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAkBZ;EAjCI,OAFuD;EAIvD,kBAgCc;EA/Bd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAwBZ;EAvCI,OAyCY;EAvCZ,kBAsCc;EArCd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AA+BZ;EA9CI,OAFuD;EAIvD,kBA6Cc;EA5Cd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAqCZ;EApDI,OAsDY;EApDZ,kBAmDc;EAlDd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AA4CZ;EA3DI,OAFuD;EAIvD,kBA0Dc;EAzDd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAmDhB;EACI;EAEA;EACA;;AAEA;EAEI;;AAIR;EACI;;AAIJ;EACI;EACA;;AAEA;EAEI;;AAGJ;EAEI;;;AAMhB;EAIQ;IACI;;EAEA;IAEI;;;AClKhB;EACI;EACA;EACA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EAEA;EAEA;EAEA;;AAEA;EACI;EACA;;;AAIR;EACI;;;AAGJ;EACI;;;AAGJ;EAEI;IAEI;IACA;;;ACvCR;EACI;EACA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EACA;;AAEA;EACI;EACA;;;ACnBR;EACI;EAEA;EAEA;EAEA;EACA;EACA;EAEA;;AAEA;EACI;;;ACdR;EACI;EAEA;EACA;EACA;;AAEA;EAII,OAFO;EAGP,QAHO;EAKP;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../sass/index.scss","../sass/_header.scss","../sass/_game-container.scss","../sass/_hangman.scss","../sass/_word.scss","../sass/_current-score.scss","../sass/_categories.scss","../sass/_defeat-victory.scss","../sass/_loading.scss","../sass/_letters-registered.scss","../sass/_letter-input.scss","../sass/_form.scss"],"names":[],"mappings":";AAAA;EACI;EACA;;;ACFJ;EACI;EAEA;EAEA;EACA;EACA;EACA;;AAEA;EDHA;EACA;EAIA;EACA;;ACGA;EDTA;EACA;EAIA;EACA;ECMI;EACA;EAEA;;;AAIR;EAIQ;IAEI;IACA;IAEA;IACA;IAEA;;EAEA;IACI;IACA;;;AC1ChB;EAEI;EACA;EAEA;;AAMA;EACI;EACA;EAEA;;;AAIR;EAEI;IAEI;IACA;IACA;;EAEA;IACI;;EAII;IAEI;;EAKZ;IACI;IACA;IAEA;IACA;IACA;;;AAKZ;;AAAA;AClDA;EAEI;;AAEA;EACI;;;ACLR;EJkBI;EACA;EIhBA;EAEA;EACA;EAEA;EAEA;EACA;;AAEA;EACI;EACA;EACA;EAEA;EAEA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EAEA;EAEA;;;AAIR;EAIQ;IAEI;;EAGJ;IACI;;;AAKZ;EAIQ;IAEI;;;AC3DZ;EAEI;EAEA;ELGA;EACA;EKAA;EAEA;;AAEA;EACI;;;ACbR;EAEI;;AAEA;EAEI;EAEA;EACA;EAEA;EACA;EAEA;EAEA;EAEA;EACA;EACA;EACA;EAEA;;AAKA;EACI;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACI;EACA;;AA0BJ;EArBI,OAFuD;EAIvD,kBAoBc;EAnBd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAYZ;EA3BI,OAFuD;EAIvD,kBA0Bc;EAzBd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAkBZ;EAjCI,OAFuD;EAIvD,kBAgCc;EA/Bd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAwBZ;EAvCI,OAyCY;EAvCZ,kBAsCc;EArCd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AA+BZ;EA9CI,OAFuD;EAIvD,kBA6Cc;EA5Cd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAqCZ;EApDI,OAsDY;EApDZ,kBAmDc;EAlDd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AA4CZ;EA3DI,OAFuD;EAIvD,kBA0Dc;EAzDd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAmDhB;EACI;EAEA;EACA;;AAEA;EAEI;;AAIR;EACI;;AAIJ;EACI;EACA;;AAEA;EAEI;;AAGJ;EAEI;;;AAMhB;EAIQ;IACI;;EAEA;IAEI;;;AClKhB;EACI;EACA;EACA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EAEA;EAEA;EAEA;;AAEA;EACI;EACA;;;AAIR;EACI;;;AAGJ;EACI;;;AAGJ;EAEI;IAEI;IACA;;;ACvCR;EACI;EACA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EACA;;AAEA;EACI;EACA;;;ACnBR;EACI;EAEA;EAEA;EAEA;EACA;EACA;EAEA;;AAEA;EACI;;;ACdR;EACI;EAEA;EACA;EACA;;AAEA;EAII,OAFO;EAGP,QAHO;EAKP;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;;ACvBR;EAEI;;AAEA;EAEI;EAGA;EACA;;AAEA;EAGI;EACA,kBAHkB;EAKlB;EAEA;EACA;EAEA;EACA;EACA;EACA;;AAEA;EAEI;EACA;EACA;;AAMZ;EAEI;EAEA;EACA;EAEA;EAEA;;AAEA;EAEI;EACA;EAEA;EACA;EAEA;EAEA;EACA;EAEA;;AAEA;EACI;EAEA;EACA","file":"index.css"}

public/sass/_form.scss

@@ -0,0 +1,74 @@
+.form-container {
+
+    font-family: Arial, Helvetica, sans-serif;
+
+    .options-container {
+        
+        display: flex;
+
+
+        height: 10vh;
+        width: 100%;
+        
+        .option {
+            $backgroundColor: rgb(54, 112, 201);
+
+            color: #fff;
+            background-color: $backgroundColor;
+
+            cursor: pointer;
+
+            width: 100%;
+            height: 100%;
+
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            transition: ease-in-out 0.2s;
+
+            &.active {
+
+                cursor: initial;
+                background-color: adjust-color($color: $backgroundColor, $blackness: 33%, $alpha: 1.0);
+                transition: ease-in-out 0.4s;
+        }
+
+        }
+    }
+
+    form {
+
+        height: 64vh;
+
+        display: flex;
+        flex-direction: column;
+
+        align-items: center;
+        
+        padding-top: 3vh;
+
+        input {
+            
+            width: 33vw;
+            height: 5vh;
+
+            padding: 0;
+            box-sizing: content-box;
+
+            margin-bottom: 0.5vh;
+
+            border: 0;
+            border-bottom: 1px solid rgb(121, 121, 121);
+
+            outline: none;
+            
+            &[type="submit"] {
+                margin-top: 1vh;
+                
+                border-bottom: 0;
+                border: 1px solid rgb(121, 121, 121);
+
+            }
+        }
+    }
+}

public/sass/index.scss

@@ -25,4 +25,5 @@ html, body {
 @import 'defeat-victory';
 @import 'loading';
 @import 'letters-registered';
-@import 'letter-input'
+@import 'letter-input';
+@import 'form';

src/components/Admin/Identify/Form/Form.jsx

@@ -7,10 +7,10 @@ const Form = () => {
     return (
         <div className="form-container">
             <nav className="options-container">
-                <div className={option === 'login' ? "active login" : 'login'} onClick={() => setOption('login')}>
+                <div className={option === 'login' ? "active option" : 'option'} onClick={() => setOption('login')}>
                     LOGIN
                 </div>
-                <div className={option === 'register' ? "active register" : 'register'} onClick={() => setOption('register')}>
+                <div className={option === 'register' ? "active option" : 'option'} onClick={() => setOption('register')}>
                     REGISTER
                 </div>
             </nav>
@@ -33,7 +33,7 @@ const Form = () => {
                         <input type="email" placeholder="Email" id="register-email"/>
                         <input type="password" placeholder="Password" id="register-password"/>
                         <input type="password" placeholder="Confirm Password" id="register-confirm-password"/>
-                        <input type="password" placeholder="Admin Reffer Code" id="register-admin-code"/>
+                        <input type="password" placeholder="Admin Referred Code" id="register-admin-code"/>
                         <input type="submit" value="Register" id=""/>
                     </form>