UI changes

backend/accounts/serializers.py

@@ -25,6 +25,9 @@ def create(self, validated_data):
         Override the create mehtod with objects.create_user,
         since the former saves with an unencrypted password
         """
+
+        # Normalize roll number to ensure uniformity
+        validated_data['roll_number'] = validated_data.get('roll_number', '').upper()
         return User.objects.create_user(**validated_data)
 
 

frontend/src/components/Navbar.js

@@ -22,12 +22,23 @@ import {
 
 
 export default function Navbar(props){
+  const style = {
+    boxShadow: "0px 0px 20px 0px rgba(0,0,0,0.75)",
+  }
 
     return(
-        <nav className="navbar navbar-expand-lg bg-body-tertiary">
+        <nav className="navbar navbar-expand-lg bg-body-tertiary" style={style}>
         <div className="container-fluid">
           <a className="navbar-brand" href="/">{props.title}</a>
-          <button classNameName="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+          <button 
+            classNameName="navbar-toggler" 
+            type="button" 
+            data-bs-toggle="collapse" 
+            data-bs-target="#navbarSupportedContent" 
+            aria-controls="navbarSupportedContent" 
+            aria-expanded="false" 
+            aria-label="Toggle navigation"
+          >
             <span classNameName="navbar-toggler-icon"></span>
           </button>
           <div className="collapse navbar-collapse" id="navbarSupportedContent">
@@ -47,7 +58,7 @@ export default function Navbar(props){
                 <a className="nav-link" href="/previous_projects">Login</a>
               </li>
               <li className="nav-item">
-                <a className="nav-link" href="/">Past Certificates</a>
+                <a className="nav-link" href="https://itc.gymkhana.iitb.ac.in/certificates/">Past Certificates</a>
               </li>
               <li className="nav-item dropdown">
                 <a className="nav-link dropdown-toggle" href="/" role="button" data-bs-toggle="dropdown" aria-expanded="false">
@@ -60,9 +71,6 @@ export default function Navbar(props){
                   <li><a classNameName="dropdown-item" href="/">Something else here</a></li>
                 </ul>
               </li>
-              <li className="nav-item">
-                <a className="nav-link disabled" aria-disabled="true" href="/">Disabled</a>
-              </li>
             </ul>
             <form className="d-flex" role="search">
               <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>

frontend/src/components/Textform.js

@@ -4,7 +4,7 @@ import "./scrollable.css"
 
 export default function Textform(){
     return(
-    <>
+    <div className="textform">
         <div >
             <h2 class="forSOC">
                 What is SOC?
@@ -45,6 +45,6 @@ export default function Textform(){
                 Reviews
             </h2>
         </div>
-    </>
+    </div>
     )
 }

frontend/src/components/form.css

@@ -0,0 +1,78 @@
+/* Register.css */
+
+/* Styles for the main form container */
+.form {
+    max-width: 400px;
+    margin: 5vh auto;
+    padding: 20px;
+    border-radius: 5px;
+    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
+    background-color: #ffff;
+  }
+
+  /* Styles for the form title */
+  .form h1 {
+    text-align: center;
+    margin-bottom: 20px;
+  }
+
+  /* Styles for buttons (Mentor/Mentee selection) */
+  .form .btn {
+    display: inline-block;
+    padding: 10px 20px;
+    margin: 5px;
+    background-color: #007bff;
+    color: #fff;
+    border: none;
+    cursor: pointer;
+    border-radius: 5px;
+  }
+
+  /* Styles for labels and input fields */
+  .form .label {
+    font-weight: bold;
+  }
+
+  .form .input {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+  }
+
+  /* Styles for error and success messages */
+  .form .error,.form  .success {
+    background-color: rgba(244, 67, 54); /* Red for errors */
+    color: #fff;
+    padding: 10px;
+    margin-bottom: 10px;
+    border-radius: 5px;
+  }
+
+  .form .success {
+    background-color: #4CAF50; /* Green for success */
+  }
+
+  /* Center buttons horizontally within the form */
+  .form .messages {
+    text-align: center;
+  }
+
+  /* Additional styling for the submit button */
+  .form .btn[type="submit"] {
+    background-color: #007bff;
+    color: #fff;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+
+
+  /* Highlight the selected option */
+.form .active {
+    background-color: #2f00ff; /* Change the background color to your desired color */
+    color: #fff; /* Change the text color to match */
+  }
+

frontend/src/components/project_form.css

@@ -0,0 +1,65 @@
+.project_form {
+    max-width: 400px;
+    margin: 5vh auto;
+    padding: 20px;
+    background-color: rgba(255, 255, 255, 0.5);
+    background: blur(100px);
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  }
+
+  .project_form h1 {
+    text-align: center;
+    color: #333;
+  }
+
+  .project_form form {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .project_form label {
+    margin: 10px 0;
+    font-weight: bold;
+    color: #555;
+  }
+
+  .project_form input[type="text"],
+  .project_form input[type="number"],
+  .project_form select,
+  .project_form input[type="file"] {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    font-size: 14px;
+    background: transparent;
+    color: #333;
+  }
+
+  .project_form select {
+    appearance: none;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    color: #333;
+    cursor: pointer;
+  }
+
+  .project_form button {
+    margin: 20px 0;
+    padding: 10px 20px;
+    background-color: transparent;
+    border: 1px solid #007BFF;
+    border-radius: 5px;
+    font-size: 16px;
+    color: #007BFF;
+    cursor: pointer;
+    transition: background-color 0.3s, color 0.3s;
+  }
+
+  .project_form button:hover {
+    background-color: #007BFF;
+    color: #fff;
+  }
+

frontend/src/components/scrollable.css

@@ -13,12 +13,29 @@
     background-color: aqua;
     background-repeat: no-repeat;
     background-size: cover;
+    min-height: 100vh;
+    overflow-x: hidden;
 }
 
-.LinkCSS{
-    height: 50px;
-    width: 100px;
-    border: 2px solid black;
-    margin-left: 6px;
-    background-color: white;
-}
+.LinkCSS {
+    text-align: center;
+    padding: 20px;
+  }
+
+  .LinkCSS a {
+    display: inline-block;
+    padding: 10px 20px;
+    background-color: #ffff;
+    color: black;
+    text-decoration: none;
+    box-shadow: 3px 10px 10px rgba(0, 0, 0, .3);
+    border-radius: 5px;
+    font-size: 16px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+  }
+
+  .LinkCSS a:hover {
+    background-color: #0056b3;
+  }
+

frontend/src/pages/Login.jsx

@@ -7,6 +7,7 @@ export default function Login() {
     // States for registration
     // role: 1 for mentor, 0 for mentee
     const [profile, setProfile] = useState({
+        role: 0,    
         roll_number: '',
         password: '',
     });
@@ -97,8 +98,13 @@ export default function Login() {
             </div>
 
             <form onSubmit={handleSubmit}>
-                <button onClick={role0} className='btn' defaultChecked>Mentee</button>
-                <button onClick={role1} className='btn'>Mentor</button>
+                <button onClick={role0} className={`btn ${profile.role === 0 ? 'active' : ''}`} type="button">
+                    Mentee
+                </button>
+                <button onClick={role1} className={`btn ${profile.role === 1 ? 'active' : ''}`} type="button">
+                    Mentor
+                </button>
+                <br />
                 {/* Labels and inputs for form data */}
 
                 <label className="label">Roll Number</label>

frontend/src/pages/ProjectFrom.jsx

@@ -3,6 +3,7 @@ import axios from "axios";
 import { useState } from "react";
 import MyComponent from "../components/MyComponent";
 import MyComponent2 from "../components/MyComponent2";
+import '../components/project_form.css'
 
 
 
@@ -69,7 +70,7 @@ export default function ProjectForm(){
 
     }
     return (
-        <>
+        <div className="project_form">
             <h1>Project Form</h1>
             <form>
                 <label>Project Title</label>
@@ -133,6 +134,6 @@ export default function ProjectForm(){
             <button onClick={detailsSubmit}>
                 Submit Project
             </button>
-        </>
+        </div>
     )
 }

frontend/src/pages/Projects.jsx

@@ -2,7 +2,7 @@ import ProjectCard from "../components/ProjectCard"
 import axios from "axios";
 import { useEffect } from "react";
 import { useState } from "react";
-import "./ProjectCard.css";
+import "../components/ProjectCard.css";
 
 export default function Projects() {
 
@@ -21,13 +21,14 @@ export default function Projects() {
           });
       }, []);
 
-    return (<section className="project-card">
+    return (
+    <section className="project-card">
         <h1>Projects</h1>
+
         {details.map((details,index)=>(
         <div key={index}>
             <ProjectCard link={details.banner_image} title={details.title} />
         </div>
         ))}
-
     </section>);
 }