Migration Harika lbdashboard/register css to module css

Author: Harika

src/components/LBDashboard/Register/LBRegister.jsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import axios from 'axios';
 import { toast } from 'react-toastify';
 import { ENDPOINTS } from '../../../utils/URL';
-import './LBRegister.css';
+import styles from './LBRegister.module.css';
 import logo from '../../../assets/images/logo2.png';
 
 function LBRegister() {
@@ -64,21 +64,21 @@ function LBRegister() {
   };
 
   return (
-    <div className="lb-register-page">
-      <div className="lb-register-logo">
+    <div className={`${styles.lbRegisterPage}`}>
+      <div className={`${styles.lbRegisterLogo}`}>
         <img src={logo} alt="One Community Logo" />
       </div>
-      <div className="lb-register-container">
-        <div className="lb-register-top" />
-        <div className="lb-register-main">
+      <div className={`${styles.lbRegisterContainer}`}>
+        <div className={`${styles.lbRegisterTop}`} />
+        <div className={`${styles.lbRegisterMain}`}>
           <h2>Registration Page</h2>
           <p>
             Filling the details below will allow you to bid or rent a unit from a village of your
             choice in our property. Clicking the submit button will confirm all your details with us
             and will take you to our login page.
           </p>
-          <div className="lb-register-form-wrapper">
-            <form className="lb-register-form" onSubmit={handleSubmit}>
+          <div className={`${styles.lbRegisterFormWrapper}`}>
+            <form className={`${styles.lbRegisterForm}`} onSubmit={handleSubmit}>
               <input
                 type="text"
                 name="firstName"
@@ -87,7 +87,9 @@ function LBRegister() {
                 onChange={handleChange}
                 required
               />
-              {errors.firstName && <p className="lb-register-error">{errors.firstName}</p>}
+              {errors.firstName && (
+                <p className={`${styles.lbRegisterError}`}>{errors.firstName}</p>
+              )}
 
               <input
                 type="text"
@@ -97,7 +99,7 @@ function LBRegister() {
                 onChange={handleChange}
                 required
               />
-              {errors.lastName && <p className="lb-register-error">{errors.lastName}</p>}
+              {errors.lastName && <p className={`${styles.lbRegisterError}`}>{errors.lastName}</p>}
 
               <input
                 type="email"
@@ -107,7 +109,7 @@ function LBRegister() {
                 onChange={handleChange}
                 required
               />
-              {errors.email && <p className="lb-register-error">{errors.email}</p>}
+              {errors.email && <p className={`${styles.lbRegisterError}`}>{errors.email}</p>}
 
               <input
                 type="text"
@@ -117,7 +119,7 @@ function LBRegister() {
                 onChange={handleChange}
                 required
               />
-              {errors.phone && <p className="lb-register-error">{errors.phone}</p>}
+              {errors.phone && <p className={`${styles.lbRegisterError}`}>{errors.phone}</p>}
 
               <input
                 type="password"
@@ -127,7 +129,7 @@ function LBRegister() {
                 onChange={handleChange}
                 required
               />
-              {errors.password && <p className="lb-register-error">{errors.password}</p>}
+              {errors.password && <p className={`${styles.lbRegisterError}`}>{errors.password}</p>}
 
               <button type="submit">Click to Register</button>
             </form>

…ents/LBDashboard/Register/LBRegister.css …Dashboard/Register/LBRegister.module.csssrc/components/LBDashboard/Register/LBRegister.css renamed to src/components/LBDashboard/Register/LBRegister.module.css src/components/LBDashboard/Register/LBRegister.css renamed to src/components/LBDashboard/Register/LBRegister.module.css

@@ -1,4 +1,4 @@
-.lb-register-page {
+.lbRegisterPage {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -9,26 +9,26 @@
   overflow: hidden;
 }
 
-.lb-register-logo {
+.lbRegisterLogo {
   text-align: center;
   margin-bottom: 20px;
 }
 
-.lb-register-logo img {
+.lbRegisterLogo img {
   max-width: 30%;
   height: auto;
   min-width: 250px;
 }
 
-.lb-register-container {
+.lbRegisterContainer {
   background-color: white;
   border: 1px solid #ccc;
   border-radius: 8px;
   width: 66%;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
 
-.lb-register-top {
+.lbRegisterTop {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -37,7 +37,7 @@
   background-color: #9dd425;
 }
 
-.lb-register-main {
+.lbRegisterMain {
   background-color: #e0e0e0;
   display: flex;
   flex-direction: column;
@@ -48,41 +48,41 @@
   min-height: 560px;
 }
 
-.lb-register-main h2 {
+.lbRegisterMain h2 {
   font-size: 28px;
   text-align: center;
   margin-bottom: 30px;
   color: #202020;
 }
 
-.lb-register-main > p {
+.lbRegisterMain > p {
   font-weight: 500;
   font-size: 14px;
   text-align: left;
   color: #202020;
   margin: 0 10% 40px 10%;
 }
 
-.lb-register-form-wrapper {
+.lbRegisterFormWrapper {
   width: 40%;
   min-width: 140px;
 }
 
-.lb-register-form {
+.lbRegisterForm {
   display: flex;
   flex-direction: column;
   width: 100%;
 }
 
-.lb-register-form input {
+.lbRegisterForm input {
   margin-bottom: 15px;
   padding: 5px 10px;
   border: 1px solid #ccc;
   border-radius: 4px;
   font-size: 14px;
 }
 
-.lb-register-form button {
+.lbRegisterForm button {
   margin-top: 10px;
   margin-left: auto;
   width: 40%;
@@ -97,11 +97,11 @@
   cursor: pointer;
 }
 
-.lb-register-form button:hover {
+.lbRegisterForm button:hover {
   background-color: #218838;
 }
 
-.lb-register-error {
+.lbRegisterError {
   color: red;
   font-size: 12px;
   margin-top: -10px;