ux improvements

client/src/actions/user_actions.js

@@ -51,3 +51,12 @@ export const ClearLocalCourses = () => {
         type: "CLEAR_LOCAL_COURSES",
     };
 };
+
+export const UpdateReadOnlyCourses = (readOnly) => {
+    return {
+        type: "UPDATE_READONLY_COURSES",
+        payload: {
+            readOnly,
+        },
+    };
+};

client/src/components/navbar/components/logo/styles.scss

@@ -1,6 +1,15 @@
-.logo{
+.logo {
     font-weight: bold;
     font-size: 2rem;
     font-family: 'Black';
     cursor: pointer;
+    display: inline-block;
+    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+
+    &:hover {
+        transform: scale(1.04);
+    }
+    &:active {
+        transform: scale(0.96);
+    }
 }

client/src/components/navbar/components/navlink/styles.scss

@@ -1,10 +1,38 @@
 .nav-link {
-    font-family: 'bold';
+    font-family: 'Bold';
     font-size: 1.1rem;
     margin-left: 2rem;
     cursor: pointer;
+    position: relative;
+    display: inline-block;
+    color: #fff;
+    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
+                color 0.2s ease;
+
+    &::after {
+        content: "";
+        position: absolute;
+        bottom: -4px;
+        left: 0;
+        width: 100%;
+        height: 2px;
+        background-color: #FECF6F;
+        transform: scaleX(0);
+        transform-origin: right;
+        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+    }
 
     &:hover {
-        scale: 1.1;
+        color: #FECF6F;
+        transform: translateY(-2px);
+
+        &::after {
+            transform: scaleX(1);
+            transform-origin: left;
+        }
+    }
+
+    &:active {
+        transform: translateY(0px) scale(0.96);
     }
 }

client/src/components/navbar/components/searchbar/styles.scss

@@ -46,14 +46,27 @@
         position: absolute;
         width: 518px;
         height: auto;
-        min-height: 100px;
+        min-height: 80px;
         max-height: 400px;
         background-color: #fff;
-        z-index: 2;
+        z-index: 20;
         margin-left: 21px;
         color: #222;
         padding: 10px 20px;
         overflow-y: hidden;
+        border-radius: 4px;
+        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
+        animation: searchSlideIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+
+        p {
+            transition: transform 0.15s ease, background-color 0.15s ease;
+            border-radius: 3px;
+
+            &:hover {
+                transform: translateX(4px);
+            }
+        }
+
         .code {
             margin-right: 1rem;
             font-family: "Bold";
@@ -63,6 +76,17 @@
             font-family: "Bold";
         }
     }
+
+@keyframes searchSlideIn {
+    from {
+        opacity: 0;
+        transform: translateY(-8px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
     @media screen and (max-width: 1240px) {
         width: 500px;
         .search-results {

client/src/components/navbar/styles.scss

@@ -142,6 +142,10 @@ nav {
                 text-decoration: none;
                 white-space: nowrap; // Prevent text wrapping
 
+                &::after {
+                    display: none;
+                }
+
                 &:hover {
                     background-color: #fecf6f;
                     color: #2c3e50;

client/src/index.css

@@ -42,3 +42,14 @@
         font-size: 14px;
     }
 }
+
+@media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+        scroll-behavior: auto !important;
+    }
+}

client/src/reducers/user_reducer.js

@@ -15,41 +15,44 @@ const UserReducer = (
             return {
                 ...state,
                 loggedIn: true,
-                user: action.payload.user,
-                favourites: action.payload.user.favourites,
+                user: { ...state.user, ...action.payload.user },
+                favourites: action.payload.user?.favourites ?? state.favourites ?? [],
+            };
+        case "UPDATE_READONLY_COURSES":
+            return {
+                ...state,
+                user: {
+                    ...state.user,
+                    readOnly: action.payload.readOnly,
+                },
             };
         case "LOG_OUT":
             return { ...state, loggedIn: false };
         case "UPDATE_FAVOURITES":
             return { ...state, favourites: action.payload.favourites };
-        case "ADD_COURSE_LOCAL":
-            if (
-                state.user?.courses?.find(
-                    (course) =>
-                        course.code.toLowerCase() === action.payload.course.code.toLowerCase()
-                )
-            )
-                return state;
-            if (
-                state.user?.previousCourses?.flatMap((sem) => sem.courses)?.find(
-                    (course) =>
-                        course.code.toLowerCase() === action.payload.course.code.toLowerCase()
-                )
-            )
-                return state;
-            if (
-                state.user?.readOnly?.find(
-                    (course) =>
-                        course.code.toLowerCase() === action.payload.course.code.toLowerCase()
-                )
-            )
-                return state;
-            if (state.localCourses?.find((course) => course.code === action.payload.course.code))
-                return state;
+        case "ADD_COURSE_LOCAL": {
+            const incomingCode = action.payload.course?.code?.toString()?.replace(/\s+/g, "")?.toLowerCase();
+            if (!incomingCode) return state;
+
+            const matchesIncoming = (c) => c?.code?.toString()?.replace(/\s+/g, "")?.toLowerCase() === incomingCode;
+
+            if (state.user?.courses?.some(matchesIncoming)) return state;
+            if (state.user?.previousCourses?.flatMap((sem) => sem.courses || []).some(matchesIncoming)) return state;
+            if (state.user?.readOnly?.some(matchesIncoming)) return state;
+            if (state.localCourses?.some(matchesIncoming)) return state;
+
             upsertLocalCourseCache(action.payload.course);
             return { ...state, localCourses: [...state.localCourses, action.payload.course] };
-        case "LOAD_LOCAL_COURSES":
-            return { ...state, localCourses: [...state.localCourses, ...action.payload.courses] };
+        }
+        case "LOAD_LOCAL_COURSES": {
+            const existingCodes = new Set(
+                (state.localCourses || []).map((c) => c?.code?.toString()?.replace(/\s+/g, "")?.toLowerCase())
+            );
+            const newUnique = (action.payload.courses || []).filter(
+                (c) => c?.code && !existingCodes.has(c.code.toString().replace(/\s+/g, "").toLowerCase())
+            );
+            return { ...state, localCourses: [...state.localCourses, ...newUnique] };
+        }
         case "CLEAR_LOCAL_COURSES":
             return { ...state, localCourses: [] };
         case "UPDATE_USER":

client/src/screens/browse/components/browsefolder/confirmDialog.jsx

@@ -2,18 +2,6 @@ import React from "react";
 import cross from "./cross.svg";
 
 const styles = {
-    overlay: {
-        position: "fixed",
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        backgroundColor: "rgba(0, 0, 0, 0.4)",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        zIndex: 1000,
-    },
     dialog: {
         backgroundColor: "#fff",
         padding: "25px 30px",
@@ -73,8 +61,13 @@ const ConfirmDialog = ({ isOpen, onConfirm, onCancel, isLoading = false }) => {
     if (!isOpen) return null;
 
     return (
-        <div style={styles.overlay}>
-            <div style={styles.dialog}>
+        <div
+            className="confirm-dialog-overlay"
+            onClick={(e) => {
+                if (e.target === e.currentTarget) onCancel();
+            }}
+        >
+            <div style={styles.dialog} className="confirm-modal-box">
                 <img src={cross} alt="Delete" style={styles.iconImage} />
                 <h3 style={styles.heading}>Are you sure?</h3>
                 <p style={styles.message}>

client/src/screens/browse/components/browsefolder/index.jsx

@@ -17,6 +17,7 @@ const BrowseFolder = ({
     folderData,
     parentFolder,
     isMobileView = false,
+    index = 0,
 }) => {
     const dispatch = useDispatch();
     const navigate = useNavigate();
@@ -95,7 +96,11 @@ const BrowseFolder = ({
 
     return (
         <>
-            <div className="browse-folder" onClick={() => onClick(folderData)}>
+            <div
+                className="browse-folder"
+                onClick={() => onClick(folderData)}
+                style={{ animationDelay: `${Math.min(index * 30, 150)}ms` }}
+            >
                 <div className="content">
                     <div className="top">
                         <p className="path">{""}</p>

client/src/screens/browse/components/browsefolder/styles.scss

@@ -4,12 +4,18 @@
     margin: 10px;
     z-index: 2;
     cursor: pointer;
-    transition: 200ms ease;
+    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s ease;
+    animation: folderItemSlideIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) backwards;
     background: url(./folder.svg), none;
     background-position: center;
     background-repeat: no-repeat;
     &:hover {
-        transform: translateY(-2px);
+        transform: translateY(-4px);
+        filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.12));
+    }
+    &:active {
+        transform: translateY(0px) scale(0.97);
+        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
     }
     @media (max-width: 768px) {
         width: calc(50% - 4px); // Reduced gap for larger folders

client/src/screens/browse/components/collapsible/components/file-controller/index.jsx

@@ -11,8 +11,8 @@ const FileController = ({ files, code, isMobileView = false }) => {
         return file.isVerified;
     });
 
-    return visibleFiles.map((file) => (
-        <FileDisplay file={file} key={file._id} code={code} isMobileView={isMobileView} />
+    return visibleFiles.map((file, idx) => (
+        <FileDisplay file={file} key={file._id} code={code} isMobileView={isMobileView} index={idx} />
     ));
 };
 

client/src/screens/browse/components/collapsible/components/folder/styles.scss

@@ -18,15 +18,35 @@
         .text-content{
             width: 100%;
             background-color: #fff;
+            padding: 0.3em;
+            border-radius: 4px;
+            transition: background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
+                        padding-left 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
+                        transform 0.15s ease;
+
             &.current{
                 background-color: #FECF6F;
             }
 
-            padding: 0.3em;
+            &:hover:not(.current) {
+                background-color: rgba(254, 207, 111, 0.2);
+                padding-left: 0.6em;
+            }
+
+            &:active {
+                transform: scale(0.98);
+            }
+
             .text{
                 font-size: 1rem;
                 font-family: 'Bold';
                 cursor: pointer;
+                transition: color 0.15s ease;
+
+                &:hover {
+                    color: #000;
+                }
+
                 &.nobold{
                 font-family: 'Regular';
                 }

client/src/screens/browse/components/collapsible/styles.scss

@@ -4,6 +4,12 @@
     .main{
         cursor: pointer;
         display: flex;
+        transition: background-color 0.15s ease;
+
+        &:hover {
+            background-color: rgba(0, 0, 0, 0.03);
+        }
+
         .color{
             height: 100px;
             width: 12px;
@@ -27,7 +33,7 @@
                 }
             }
             .arrow{
-                transition: 200ms;
+                transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
                 transform: rotateZ(-90deg);
                 width: 20px;
                 height: 20px;
@@ -47,12 +53,17 @@
             }
         }
         .collapsible-content{
-            display: block;
+            max-height: 1200px;
+            opacity: 1;
             border-bottom: 1px solid rgba(0, 0, 0, 0.33);
         }
 
     }
     .collapsible-content{
-        display: none;
+        max-height: 0;
+        opacity: 0;
+        overflow: hidden;
+        transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1),
+                    opacity 0.25s ease;
     }
 }