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,216 +32,263 @@ export default function RegisterModal() {
   const [error, setError] = useState("");
   return (
     <>
-      <div
-        style={{
-          ...styles.flex_row,
-          ...{
-            alignItems: "center",
-            justifyContent: "center",
-            overflowY: "scroll",
-          },
-        }}
-      >
-        <AppRegistration
+      <div className="custom-scrollbar">
+        <div
           style={{
-            height: 64,
-            width: 64,
-            fill: colors.font_dark,
+            ...styles.flex_column,
+            ...{
+              alignItems: "center",
+              justifyContent: "center",
+              overflow: "auto",
+              scrollbarWidth: "thin",
+              WebkitOverflowScrolling: "touch",
+            },
           }}
-        />
-        <p style={{ ...styles.text_dark, ...styles.text_L }}>Get Started</p>
-      </div>
+        >
+          <img
+            style={{ width: "10rem", height: "auto", alignSelf: "center" }}
+            src={Logo_dako}
+          />
 
-      <div style={styles.flex_column}>
-        <TextField
-          id="outlined-helperText"
-          label="First Name"
-          style={styles.input_form}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-            setUser({ ...user, first_name: e.target.value });
-            setError("");
-          }}
-          value={user.first_name}
-          placeholder={"Enter your first name"}
-        />
-        <TextField
-          id="outlined-helperText"
-          label="Last Name"
-          style={styles.input_form}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-            setUser({ ...user, last_name: e.target.value })
-          }
-          value={user.last_name}
-          placeholder={"Enter your last name"}
-        />
-        <TextField
-          id="outlined-helperText"
-          label="Email"
-          style={styles.input_form}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-            setUser({ ...user, email: e.target.value })
-          }
-          value={user.email}
-          placeholder={"Enter your email"}
-        />
-        <FormControl style={{ marginTop: "8px" }}>
-          <FormLabel style={styles.text_dark} id="status-selection">
-            Course
-          </FormLabel>
-          <RadioGroup
-            aria-labelledby="demo-radio-buttons-group-label"
-            value={user.course}
-            defaultValue="BS Chemistry"
-            name="radio-buttons-group"
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-              setUser({ ...user, course: e.target.value });
-              setError("");
+          <p
+            style={{
+              ...styles.text_normal,
+              fontSize: 24,
+              margin: "0",
+              marginTop: 15,
             }}
           >
-            <div
-              style={{
-                ...styles.flex_column,
-                ...{ overflowY: "scroll", maxHeight: "72px" },
+            Create an Account
+          </p>
+          <p style={{ ...styles.text_normal, fontSize: 16, margin: "10" }}>
+            Enter required fields
+          </p>
+        </div>
+
+        <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"
+            style={styles.input_form}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              setUser({ ...user, first_name: e.target.value });
+              setError("");
+            }}
+            value={user.first_name}
+            placeholder={"Enter your first name"}
+          />
+          <TextField
+            id="outlined-helperText"
+            label="Last Name"
+            style={styles.input_form}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              setUser({ ...user, last_name: e.target.value })
+            }
+            value={user.last_name}
+            placeholder={"Enter your last name"}
+          />
+          <TextField
+            id="outlined-helperText"
+            label="Email"
+            style={styles.input_form}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              setUser({ ...user, email: e.target.value })
+            }
+            value={user.email}
+            placeholder={"Enter your email"}
+          />
+
+          <FormControl style={{ marginTop: "8px" }}>
+            <FormLabel style={styles.text_dark} id="status-selection">
+              Course
+            </FormLabel>
+            <RadioGroup
+              aria-labelledby="demo-radio-buttons-group-label"
+              value={user.course}
+              defaultValue="BS Chemistry"
+              name="radio-buttons-group"
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                setUser({ ...user, course: e.target.value });
+                setError("");
               }}
             >
-              <FormControlLabel
-                value="BS Chemistry"
-                control={<Radio />}
-                label="BS Chemistry"
-                style={styles.text_dark}
-              />
-              <FormControlLabel
-                value="BS Food Technology"
-                control={<Radio />}
-                label="BS Food Technology"
-                style={styles.text_dark}
-              />
-              <FormControlLabel
-                value="BS Applied Physics"
-                control={<Radio />}
-                label="BS Applied Physics"
-                style={styles.text_dark}
-              />
-              <FormControlLabel
-                value="BS Environmental Science"
-                control={<Radio />}
-                label="BS Environmental Science"
-                style={styles.text_dark}
-              />
-            </div>
-          </RadioGroup>
-        </FormControl>
-        <TextField
-          id="outlined-helperText"
-          label="Username"
-          style={styles.input_form}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-            setUser({ ...user, username: e.target.value });
-            setError("");
-          }}
-          value={user.username}
-          placeholder={"Enter username"}
-        />
-        <TextField
-          id="outlined-helperText"
-          type={showPassword ? "text" : "password"}
-          style={styles.input_form}
-          InputProps={{
-            endAdornment: (
-              <InputAdornment position="end">
-                <IconButton
-                  aria-label="toggle password visibility"
-                  onClick={() => setShowPassword(!showPassword)}
-                  edge="end"
-                >
-                  {showPassword ? <VisibilityOff /> : <Visibility />}
-                </IconButton>
-              </InputAdornment>
-            ),
-          }}
-          label="Password"
-          placeholder={"Enter password"}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-            setUser({ ...user, password: e.target.value })
-          }
-          value={user.password}
-        />
-        <TextField
-          id="outlined-helperText"
-          type={showPassword ? "text" : "password"}
-          style={styles.input_form}
-          InputProps={{
-            endAdornment: (
-              <InputAdornment position="end">
-                <IconButton
-                  aria-label="toggle password visibility"
-                  onClick={() => setShowPassword(!showPassword)}
-                  edge="end"
-                >
-                  {showPassword ? <VisibilityOff /> : <Visibility />}
-                </IconButton>
-              </InputAdornment>
-            ),
-          }}
-          label="Confirm Password"
-          placeholder={"Re-enter password"}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-            setUser({ ...user, confirm_password: e.target.value });
-            setError("");
-          }}
-          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,
-        }}
-      />
-      <Button
-        type={"dark"}
-        label={"Register"}
-        onClick={async () => {
-          if (user.password !== user.confirm_password) {
-            setError("Passwords do not match");
-          } else {
-            const status = await RegisterAPI(user);
-            if (status[0]) {
-              setError(
-                "Registration successful. Please activate your account using the email provided"
-              );
-              toast("Registration successful", {
-                position: "top-right",
-                autoClose: 2000,
-                hideProgressBar: false,
-                closeOnClick: true,
-                pauseOnHover: true,
-                draggable: true,
-                progress: undefined,
-                theme: "light",
-              });
-              setTimeout(() => {
-                navigate(0);
-              }, 3000);
-              setUser({
-                first_name: "",
-                last_name: "",
-                username: "",
-                email: "",
-                password: "",
-                confirm_password: "",
-                course: "",
-              });
-            } else {
-              setError(JSON.stringify(status[1]));
+              <div
+                style={{
+                  ...styles.flex_column,
+                  ...{ overflowY: "scroll", maxHeight: "72px" },
+                }}
+              >
+                <FormControlLabel
+                  value="BS Chemistry"
+                  control={<Radio />}
+                  label="BS Chemistry"
+                  style={styles.text_dark}
+                />
+                <FormControlLabel
+                  value="BS Food Technology"
+                  control={<Radio />}
+                  label="BS Food Technology"
+                  style={styles.text_dark}
+                />
+                <FormControlLabel
+                  value="BS Applied Physics"
+                  control={<Radio />}
+                  label="BS Applied Physics"
+                  style={styles.text_dark}
+                />
+                <FormControlLabel
+                  value="BS Environmental Science"
+                  control={<Radio />}
+                  label="BS Environmental Science"
+                  style={styles.text_dark}
+                />
+              </div>
+            </RadioGroup>
+          </FormControl>
+          <TextField
+            id="outlined-helperText"
+            label="Username"
+            style={styles.input_form}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              setUser({ ...user, username: e.target.value });
+              setError("");
+            }}
+            value={user.username}
+            placeholder={"Enter username"}
+          />
+          <TextField
+            id="outlined-helperText"
+            type={showPassword ? "text" : "password"}
+            style={styles.input_form}
+            InputProps={{
+              endAdornment: (
+                <InputAdornment position="end">
+                  <IconButton
+                    aria-label="toggle password visibility"
+                    onClick={() => setShowPassword(!showPassword)}
+                    edge="end"
+                  >
+                    {showPassword ? <VisibilityOff /> : <Visibility />}
+                  </IconButton>
+                </InputAdornment>
+              ),
+            }}
+            label="Password"
+            placeholder={"Enter password"}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              setUser({ ...user, password: e.target.value })
             }
-          }
-        }}
-      />
+            value={user.password}
+          />
+          <TextField
+            id="outlined-helperText"
+            type={showPassword ? "text" : "password"}
+            style={styles.input_form}
+            InputProps={{
+              endAdornment: (
+                <InputAdornment position="end">
+                  <IconButton
+                    aria-label="toggle password visibility"
+                    onClick={() => setShowPassword(!showPassword)}
+                    edge="end"
+                  >
+                    {showPassword ? <VisibilityOff /> : <Visibility />}
+                  </IconButton>
+                </InputAdornment>
+              ),
+            }}
+            label="Confirm Password"
+            placeholder={"Re-enter password"}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              setUser({ ...user, confirm_password: e.target.value });
+              setError("");
+            }}
+            value={user.confirm_password}
+          />
+        </div>
+
+        <div
+          style={{
+            backgroundColor: colors.button_border,
+            height: "2px",
+            margin: "20px",
+            marginBottom: "40px",
+          }}
+        />
+
+        <div style={{ margin: "10px" }}>
+          <button
+            onClick={async () => {
+              if (user.password !== user.confirm_password) {
+                setError("Passwords do not match");
+              } else {
+                const status = await RegisterAPI(user);
+                if (status[0]) {
+                  setError(
+                    "Registration successful. Please activate your account using the email provided"
+                  );
+                  toast("Registration successful", {
+                    position: "top-right",
+                    autoClose: 2000,
+                    hideProgressBar: false,
+                    closeOnClick: true,
+                    pauseOnHover: true,
+                    draggable: true,
+                    progress: undefined,
+                    theme: "light",
+                  });
+                  setTimeout(() => {
+                    navigate(0);
+                  }, 3000);
+                  setUser({
+                    first_name: "",
+                    last_name: "",
+                    username: "",
+                    email: "",
+                    password: "",
+                    confirm_password: "",
+                    course: "",
+                  });
+                } else {
+                  setError(JSON.stringify(status[1]));
+                }
+              }
+            }}
+            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 */
+}