address the PR comments

src/components/includes/CourseCard.tsx

@@ -38,28 +38,21 @@ const CourseCard = ({ course, role, onSelectCourse, editable, selected, inactive
     };
 
     let roleString = "";
-    let roleColor = "";
-    let selectedBackgroundColor = "var(selected-background-color)"; // variables can be changed based on different roles
-    let selectedBorderColor = "var(selected-border-color)";
+
     if (role === "ta") {
         roleString = "TA";
-        roleColor = "#var(role-color-ta)";
     } else if (role === "professor") {
         roleString = "PROF";
-        roleColor = "#var(role-color-professor)";
-    } else {
-        selectedBackgroundColor = "selectedBackgroundColor-role-student";
-        selectedBorderColor = "selectedBorderColor-role-student";
     }
 
     return (
         <div
             className={`CourseCard ${selected && editable ? "selected" : ""} ${inactive ? "inactive" : "active"} 
-            ${roleString === "" ? "editable" : "ineditable"}`}
+            ${role === "ta" || role === "professor" ? "ineditable" : "editable"}`}
             onClick={selectCourse}
             style={
                 selected && editable
-                    ? { backgroundColor: selectedBackgroundColor, borderColor: selectedBorderColor }
+                    ? { backgroundColor: "var(--selected-background-color)", borderColor: "var(--selected-border-color)" }
                     : {}
             }
         >
@@ -69,11 +62,11 @@ const CourseCard = ({ course, role, onSelectCourse, editable, selected, inactive
                         <span
                             className="courseRole"
                             style={{
-                                border: "2px solid " + roleColor,
-                                color: roleColor,
+                                border: `2px solid ${role === "ta" ? "var(--role-color-ta)" : role === "professor" ? "var(--role-color-professor)" : "transparent"}`,
+                                color: role === "ta" ? "var(--role-color-ta)" : role === "professor" ? "var(--role-color-professor)" : "inherit",
                             }}
                         >
-                            {roleString}
+                            {role === "ta" ? "TA" : role === "professor" ? "PROF" : ""}
                         </span>{" "}
                     </Grid>
                 ) : (

src/components/includes/CourseSelection.tsx

@@ -38,15 +38,15 @@ function CourseSelection({ user, isEdit, allCourses }: Props): React.ReactElemen
         setCurrentlyEnrolledCourseIds(new Set(user.courses));
     }, [user.courses]);
 
-    const filterOnActiveAndRole = () => {
+    const filterOnActiveAndRole = React.useCallback(() => {
         return allCourses
             .filter((course) => course.semester === CURRENT_SEMESTER)
             .sort((a, b) => {
                 const isUserTAorProfA = a.tas?.includes(user.userId) || a.professors?.includes(user.userId) ? 1 : 0;
                 const isUserTAorProfB = b.tas?.includes(user.userId) || b.professors?.includes(user.userId) ? 1 : 0;
                 return isUserTAorProfB - isUserTAorProfA; // Sort in descending order (1's before 0's)
             });
-    };
+    }, [allCourses, user.userId]);
 
     useEffect(() => {
         setCurrentCourses(filterOnActiveAndRole);
@@ -56,7 +56,7 @@ function CourseSelection({ user, isEdit, allCourses }: Props): React.ReactElemen
                 return course.semester !== CURRENT_SEMESTER;
             }),
         );
-    }, [allCourses]);
+    }, [filterOnActiveAndRole, allCourses]);
 
     const [currentlyEnrolledCourseIds, setCurrentlyEnrolledCourseIds] = useState(new Set<string>());
 
@@ -83,7 +83,7 @@ function CourseSelection({ user, isEdit, allCourses }: Props): React.ReactElemen
                 ({ courseId }) => currentlyEnrolledCourseIds.has(courseId) && user.roles[courseId] !== undefined,
             ),
         );
-    }, [user, filteredCourses, currentlyEnrolledCourseIds]);
+    }, [user, filteredCourses, currentlyEnrolledCourseIds, currentCourses]);
 
     const [selectedCourseIds, setSelectedCourseIds] = useState<string[]>([]);
 

src/styles/courses/CourseCard.scss

@@ -13,12 +13,12 @@
     overflow-wrap: anywhere;
 
 
-    selectedBackgroundColor: "#F5F5F5";  // the default background color
-    selectedBorderColor: "#D8D8D8";  // the default border color
-    role-color-ta:"#BF7913"; // the color for "TA" 
-    role-color-professor: "green"; // a purple thats closer to our brand colors- #726CFF
-    selectedBackgroundColor-role-student: "rgba(214, 234, 254, 0.4)"; //  "Student" role background color
-    selectedBorderColor-role-student: "#77BBFA"; //  "Student" role border color 
+    --selectedBackgroundColor: #F5F5F5;  // the default background color
+    --selectedBorderColor: #D8D8D8;  // the default border color
+    --role-color-ta: #BF7913; // the color for "TA" 
+    --role-color-professor: green; // a purple thats closer to our brand colors- #726CFF
+    --selectedBackgroundColor-role-student: rgba(214, 234, 254, 0.4); //  "Student" role background color
+    --selectedBorderColor-role-student: #77BBFA; //  "Student" role border color 
 
 
     &.selected {
@@ -68,8 +68,8 @@
             border-radius: 100px;
 
             //check coursecard for hex color of prof
-            border: 2px solid #BF7913;
-            color: #BF7913;
+            // border: 2px solid #BF7913;
+            // color: #BF7913;
             font-size: 15px;
             position: absolute;
         }

src/styles/courses/CourseSelection.scss

@@ -81,7 +81,8 @@
                     flex: 1;
                     border-radius: 15px;
                     border: none;
-                    font-size: 18px;
+                    font-size: 15px;
+                    font-family: 'Roboto', sans-serif;
                     font-weight: 400;
                     color: #7E7E7E;
                     padding: 12px 28px;