si register modal sab, scrollable and noyys kaayo iyang scroll bar.

src/Components/LoginModal/LoginModal.tsx

@@ -7,7 +7,6 @@ import IconButton from "@mui/material/IconButton";
 import Visibility from "@mui/icons-material/Visibility";
 import VisibilityOff from "@mui/icons-material/VisibilityOff";
 import Checkbox from "@mui/material/Checkbox";
-import Button from "../Button/Button";
 import { useNavigate } from "react-router-dom";
 import { LoginAPI } from "../API/API";
 import { useDispatch } from "react-redux";

src/Components/RegisterModal/RegisterModal.tsx

@@ -1,13 +1,11 @@
 import { useState } from "react";
-import styles from "../../styles";
-import { colors } from "../../styles";
+import styles, { colors } from "../../styles";
 import TextField from "@mui/material/TextField";
 import InputAdornment from "@mui/material/InputAdornment";
 import IconButton from "@mui/material/IconButton";
 import Visibility from "@mui/icons-material/Visibility";
 import VisibilityOff from "@mui/icons-material/VisibilityOff";
-import { AppRegistration } from "@mui/icons-material";
-import Button from "../Button/Button";
+import Logo_dako from "../../assets/Logo_dako.png";
 import { useNavigate } from "react-router-dom";
 import { RegisterAPI } from "../API/API";
 import { toast } from "react-toastify";
@@ -34,27 +32,61 @@ export default function RegisterModal() {
   const [error, setError] = useState("");
   return (
     <>
+      <div className="custom-scrollbar">
         <div
           style={{
-          ...styles.flex_row,
+            ...styles.flex_column,
             ...{
               alignItems: "center",
               justifyContent: "center",
-            overflowY: "scroll",
+              overflow: "auto",
+              scrollbarWidth: "thin",
+              WebkitOverflowScrolling: "touch",
             },
           }}
         >
-        <AppRegistration
-          style={{
-            height: 64,
-            width: 64,
-            fill: colors.font_dark,
-          }}
+          <img
+            style={{ width: "10rem", height: "auto", alignSelf: "center" }}
+            src={Logo_dako}
           />
-        <p style={{ ...styles.text_dark, ...styles.text_L }}>Get Started</p>
+
+          <p
+            style={{
+              ...styles.text_normal,
+              fontSize: 24,
+              margin: "0",
+              marginTop: 15,
+            }}
+          >
+            Create an Account
+          </p>
+          <p style={{ ...styles.text_normal, fontSize: 16, margin: "10" }}>
+            Enter required fields
+          </p>
         </div>
 
-      <div style={styles.flex_column}>
+        <div style={{ flex: 1, backgroundColor: "pink", margin: "10px" }}>
+          <p
+            style={{
+              ...styles.text_dark_red,
+              ...styles.text_S,
+              flex: 1,
+              textAlign: "left",
+              marginLeft: 15,
+            }}
+          >
+            {error}
+          </p>
+        </div>
+
+        <div
+          style={{
+            ...styles.flex_column,
+            marginTop: 30,
+            marginBottom: 55,
+            marginInline: 10,
+          }}
+        >
           <TextField
             id="outlined-helperText"
             label="First Name"
@@ -86,6 +118,7 @@ export default function RegisterModal() {
             value={user.email}
             placeholder={"Enter your email"}
           />
+
           <FormControl style={{ marginTop: "8px" }}>
             <FormLabel style={styles.text_dark} id="status-selection">
               Course
@@ -194,19 +227,18 @@ export default function RegisterModal() {
             value={user.confirm_password}
           />
         </div>
-      <p style={{ ...styles.text_dark, ...styles.text_M }}>{error}</p>
+
         <div
           style={{
             backgroundColor: colors.button_border,
-          marginTop: "16px",
-          width: "100%",
             height: "2px",
-          marginBottom: 8,
+            margin: "20px",
+            marginBottom: "40px",
           }}
         />
-      <Button
-        type={"dark"}
-        label={"Register"}
+
+        <div style={{ margin: "10px" }}>
+          <button
             onClick={async () => {
               if (user.password !== user.confirm_password) {
                 setError("Passwords do not match");
@@ -243,7 +275,20 @@ export default function RegisterModal() {
                 }
               }
             }}
-      />
+            style={{
+              display: "flex",
+              padding: "25px 38px",
+              justifyContent: "center",
+              alignItems: "center",
+              background: "#FBB217",
+              height: "40px",
+              width: "100%",
+            }}
+          >
+            Register
+          </button>
+        </div>
+      </div>
     </>
   );
 }

src/index.css

@@ -82,3 +82,25 @@ button:focus-visible {
     background-color: #f9f9f9;
   }
 }
+
+.custom-scrollbar {
+  overflow-y: scroll;
+  max-height: 800px;
+  scrollbar-width: thin; /* For Firefox */
+  -webkit-overflow-scrolling: touch; /* For smooth scrolling on iOS */
+  -ms-overflow-style: none; /* For IE */
+  scrollbar-color: transparent transparent; /* For WebKit */
+}
+
+.custom-scrollbar::-webkit-scrollbar {
+  width: 6px; /* Adjust the width as needed */
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background-color: #c4c4c4; /* Color of the thumb */
+  border-radius: 3px; /* Rounded corners of the thumb */
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background-color: #f0f0f0; /* Color of the track */
+}