Fixed Requirement Section Card Color Inconsistencies (#110)

* Fixed Requirement Section Card Color Inconsistencies

* Changed Sub Requirement Properties, fixes DAP-54 as well

* Fixes several visual bugs

Author: tarpat

entrypoints/degree-audit/components/requirement-breakdown.tsx

@@ -5,18 +5,18 @@ import {
   PlannableStatus,
   Progress,
   RequirementRule,
-  Status,
 } from "@/lib/general-types";
 import { cn } from "@/lib/utils";
 import {
   CaretDownIcon,
   CaretUpIcon,
-  PlusCircleIcon,
+  PlusIcon,
+  Check,
+  Minus,
+  X,
 } from "@phosphor-icons/react";
 import { CalendarBlankIcon } from "@phosphor-icons/react/dist/ssr";
-import { CheckIcon } from "lucide-react";
 import { useState } from "react";
-import { FramedStatusIcon } from "./gpa-credit-cards";
 import { useAuditContext } from "../providers/audit-provider";
 import { useCourseModalContext } from "../providers/course-modal-provider";
 
@@ -35,50 +35,57 @@ const getRequirementCompletionState = (
   return "in-progress";
 };
 
-const StatusIcon = ({
-  current,
-  total,
-}: {
-  current: number;
-  total: number;
-}) => {
+const RequirementStatusIcon = ({ current, total }: { current: number; total: number }) => {
   const state = getRequirementCompletionState(current, total);
 
-  return <FramedStatusIcon state={state} />;
+  if (state === "completed") {
+    return (
+      <div className="flex items-center justify-center w-6 h-6 bg-[#5BA753] rounded shrink-0 mt-0.5">
+        <Check className="text-white w-4 h-4" weight="bold" />
+      </div>
+    );
+  }
+  if (state === "not-started") {
+    return (
+      <div className="flex items-center justify-center w-6 h-6 bg-[#4A5568] rounded shrink-0 mt-0.5">
+        <X className="text-white w-4 h-4" weight="bold" />
+      </div>
+    );
+  }
+  return (
+    <div className="flex items-center justify-center w-6 h-6 bg-[#9CA3AF] rounded shrink-0 mt-0.5">
+      <Minus className="text-white w-4 h-4" weight="bold" />
+    </div>
+  );
 };
 
 // Hours badge component
 const HoursBadge = ({ current, total }: { current: number; total: number }) => {
   const isComplete = current >= total;
   const formatHours = (h: number) => `${h} hour${h === 1 ? '' : 's'}`;
   return (
-    <span className="text-sm text-gray-600 border border-gray-300 rounded-full px-3 py-1">
+    <span className="text-sm text-gray-900 border border-gray-800 rounded-full px-3 py-0.5 font-medium">
       {isComplete ? formatHours(total) : `${current} / ${formatHours(total)}`}
     </span>
   );
 };
 
 const statusIcons = {
   Completed: {
-    icon: (
-      <CheckIcon className="-ml-1 text-white w-5 h-5 bg-green-500 rounded-full p-1" />
-    ),
-    color: "bg-[var(--color-course-applied)]",
+    icon: null,
+    color: "bg-[#ECF8D0] border-[#9FCA5B]",
   },
   Planned: {
-    icon: (
-      <CalendarBlankIcon className="-ml-1 text-white w-5 h-5 bg-blue-500 rounded-full p-1" />
-    ),
-    color: "bg-[var(--color-course-applied)]",
+    icon: null,
+    color: "bg-[var(--color-course-applied)] border-gray-200",
   },
   "In Progress": {
     icon: null, 
-    color: "bg-[var(--color-course-in-progress)]",
+    color: "bg-[var(--color-course-in-progress)] border-gray-200",
   },
-// TODO: make sure this is valid
   "Not Started": {
     icon: null, 
-    color: "bg-[var(--color-course-unknown)]",
+    color: "bg-[var(--color-course-unknown)] border-gray-200",
   },
 } as const satisfies Record<
   PlannableStatus,
@@ -93,17 +100,17 @@ const CoursePill = ({ course }: { course: Course }) => {
   return (
     <div
       className={cn(
-        "flex items-center gap-6 px-4 py-3 rounded-lg text-sm w-[80%]",
+        "grid grid-cols-[100px_1fr_auto] items-center gap-4 px-4 py-3 rounded-lg text-sm w-full border",
         statusIcons[course.status].color,
       )}
     >
-      <span className="font-semibold min-w-[80px]">{course.code}</span>
-      <span className="flex-1">
+      <span className="font-bold text-gray-900 text-left">{course.code}</span>
+      <span className="text-left font-medium text-gray-900">
         {course.name}
       </span>
-      <span className="text-gray-700">
+      <span className="text-right text-gray-800">
         {isValidSemester ? course.semester : ''}
-        {isApplied && course.grade && `${isValidSemester ? ' - ' : ''}Grade: ${course.grade}`}
+        {isApplied && course.grade ? ` - Grade: ${course.grade}` : ''}
       </span>
     </div>
   );
@@ -126,6 +133,8 @@ const parseRequirementCode = (
 // Individual requirement row with expandable courses
 const RequirementRow = ({ requirement }: { requirement: RequirementRule }) => {
   const { getCourseById } = useAuditContext();
+  const { openModal } = useCourseModalContext();
+  
   const courses = requirement.courses.map((courseId) =>
     getCourseById(courseId),
   );
@@ -136,40 +145,51 @@ const RequirementRow = ({ requirement }: { requirement: RequirementRule }) => {
   );
 
   return (
-    <div className="border-b border-gray-100 last:border-b-0">
+    <div className="border border-gray-200 rounded-lg mb-3 last:mb-0 overflow-hidden">
       {/* Requirement header */}
       <button
-        className="w-full py-3 px-2 flex items-start gap-3 hover:bg-gray-50 transition-colors"
+        className="w-full py-3 px-3 flex items-start gap-3 hover:bg-gray-50 transition-colors bg-white"
         onClick={() => setIsExpanded(!isExpanded)}
       >
-        <StatusIcon
+        <RequirementStatusIcon
           current={requirement.appliedHours}
           total={requirement.requiredHours}
         />
         <VStack gap={0} className="flex-1 text-left">
-          <span className="font-bold text-base">{code}</span>
-          <span className="text-sm text-gray-500">{description}</span>
+          <span className="font-bold text-base text-gray-900">{code}</span>
+          <span className="text-sm text-gray-600 mt-0.5">{description}</span>
         </VStack>
-        <HStack y="middle" gap={2}>
+        <HStack y="middle" gap={3}>
           <HoursBadge
             current={requirement.appliedHours}
             total={requirement.requiredHours}
           />
           {isExpanded ? (
-            <CaretUpIcon className="w-5 h-5 text-gray-400" />
+            <CaretUpIcon className="w-5 h-5 text-gray-900" weight="bold" />
           ) : (
-            <CaretDownIcon className="w-5 h-5 text-gray-400" />
+            <CaretDownIcon className="w-5 h-5 text-gray-900" weight="bold" />
           )}
         </HStack>
       </button>
 
-      {/* Expanded courses */}
-      {isExpanded && requirement.courses.length > 0 && (
-        <VStack gap={2} className="pl-11 pr-4 pb-3">
+      {/* Expanded courses and add button */}
+      {isExpanded && (
+        <div className="flex flex-col gap-3 pl-12 pr-4 pb-4 bg-white">
           {courses.map((course, idx) => (
             <CoursePill key={`${course.code}-${idx}`} course={course} />
           ))}
-        </VStack>
+          
+          <div className="w-full flex justify-center mt-2">
+            <Button
+              fill="solid"
+              className="bg-[var(--color-dap-orange)] hover:opacity-90 text-white border-none w-max px-[24px] h-[40px] rounded-md font-semibold text-base flex items-center justify-center gap-[16px]"
+              onClick={openModal}
+            >
+              <PlusIcon className="w-5 h-5" weight="bold" />
+              Add Planned Course
+            </Button>
+          </div>
+        </div>
       )}
     </div>
   );
@@ -212,9 +232,14 @@ const ProgressBar = ({
 }) => {
   const color = CATEGORY_COLORS[colorIndex % CATEGORY_COLORS.length];
   const percentage = Math.min((current / total) * 100, 100);
+  
+  const trackColor = color.rgb.replace("rgb", "rgba").replace(")", ", 0.2)"); 
 
   return (
-    <div className="w-40 h-2 bg-gray-200 rounded-full overflow-hidden">
+    <div 
+      className="w-40 h-2 rounded-full overflow-hidden" 
+      style={{ backgroundColor: trackColor }}
+    > 
       <div
         className="h-full rounded-full transition-all"
         style={{ width: `${percentage}%`, backgroundColor: color.tailwind }}
@@ -230,73 +255,56 @@ type RequirementBreakdownProps = {
   colorIndex?: number;
 };
 const RequirementBreakdown = (props: RequirementBreakdownProps) => {
-  const { openModal } = useCourseModalContext();
   const { title, hours, requirements, colorIndex = 0 } = props;
   const [isOpen, setIsOpen] = useState(false);
   const borderColor = CATEGORY_COLORS[colorIndex % CATEGORY_COLORS.length];
 
   return (
     <div
-      className="w-full bg-gray-50 rounded-md border border-gray-200 overflow-hidden border-l-8"
+      className="w-full bg-white rounded-md border border-gray-200 overflow-hidden border-l-4"
       style={{ borderLeftColor: borderColor.tailwind }}
     >
       {/* Main header */}
       <button
-        className={cn(
-          "w-full p-4 flex items-center justify-between hover:bg-gray-50 transition-colors",
-          isOpen && "bg-gray-50",
-        )}
+        className="w-full p-4 flex items-center justify-between hover:bg-gray-50 transition-colors bg-white" 
         onClick={() => setIsOpen(!isOpen)}
       >
-        <VStack gap={1}>
-          <span className="font-bold text-lg">{title}</span>
+        <VStack gap={2}>
+          <span className="font-bold text-base text-gray-900">{title}</span>
           <ProgressBar
             current={hours.current}
             total={hours.total}
             colorIndex={colorIndex}
           />
         </VStack>
         <HStack y="middle" gap={2}>
-          <span className="text-gray-600">
+          <span className="text-gray-900 font-medium text-sm">
             {hours.current.toString().padStart(2, "0")} / {hours.total} hours
           </span>
           {isOpen ? (
-            <CaretUpIcon className="w-5 h-5 text-gray-400" />
+            <CaretUpIcon className="w-5 h-5 text-gray-900" weight="bold" />
           ) : (
-            <CaretDownIcon className="w-5 h-5 text-gray-400" />
+            <CaretDownIcon className="w-5 h-5 text-gray-900" weight="bold" />
           )}
         </HStack>
       </button>
 
       {/* Expanded content */}
       {isOpen && (
-        <div className="border-t border-gray-200">
+        <div className="bg-white">
           {/* Requirement rows */}
-          <div className="px-4 py-2">
+          <div className="px-4 py-4">
             {requirements.map((requirement, idx) => (
               <RequirementRow
                 key={`${requirement.text.slice(0, 20)}-${idx}`}
                 requirement={requirement}
               />
             ))}
           </div>
-
-          {/* Add course button */}
-          <div className="px-4 pb-4">
-            <Button
-              color="black"
-              fill="solid"
-              className="w-full text-base font-semibold py-3 px-6"
-              onClick={openModal}
-            >
-              <PlusCircleIcon className="w-5 h-5" />
-              Add Hypothetical Course
-            </Button>
-          </div>
         </div>
       )}
     </div>
   );
 };
 
-export default RequirementBreakdown;
+export default RequirementBreakdown;