Add sticky navbar and side panels, update GPA cards styling

- Make navbar sticky at top with z-index and white background
- Add sticky positioning to side panels in audit and planner pages
- Use completion percentage from context instead of calculating
- Add shadow to GPA and Credit Hour cards

Author: spotta85

entrypoints/degree-audit/components/degree-audit-page.tsx

@@ -10,8 +10,8 @@ const SidePanel = () => {
   const { sections } = useAuditContext();
 
   // Find GPA Totals section
-  const gpaSection = sections.find(
-    (section) => section.title.toLowerCase().includes("gpa"),
+  const gpaSection = sections.find((section) =>
+    section.title.toLowerCase().includes("gpa"),
   );
 
   // Extract GPA values from first rule (if exists)
@@ -20,7 +20,12 @@ const SidePanel = () => {
   const currentGPA = gpaRule?.appliedHours ?? 0.0;
 
   return (
-    <VStack fill className="h-full" y="stretch" x="center">
+    <VStack
+      fill
+      className="h-full sticky top-[75px] z-20 bg-white"
+      y="stretch"
+      x="center"
+    >
       <SimpleDegreeCompletionDonut size={300} />
       <VStack gap={4} className="w-sm mt-10">
         <GPATotalsCard
@@ -61,7 +66,9 @@ const MainContent = () => {
       <Title text="Degree Progress Overview" />
       {nonGPASections.map((section) => {
         // Find the correct progress index from original sections array
-        const originalIdx = sections.findIndex((s) => s.title === section.title);
+        const originalIdx = sections.findIndex(
+          (s) => s.title === section.title,
+        );
         const sectionProgress = progresses.sections[originalIdx];
 
         return (

entrypoints/degree-audit/components/degree-completion-donut.tsx

@@ -7,7 +7,7 @@ import { useAuditContext } from "./audit-provider";
 import { CATEGORY_COLORS } from "./requirement-breakdown";
 
 const DegreeCompletionDonut = (styleProps: GraphStyleProps) => {
-  const { progresses } = useAuditContext();
+  const { progresses, completion } = useAuditContext();
   const bars = progresses.sections
     .filter((section) => section.progress.total > 0)
     .sort((a, b) => b.progress.total - a.progress.total)
@@ -17,9 +17,7 @@ const DegreeCompletionDonut = (styleProps: GraphStyleProps) => {
       percentage: section.progress,
     })) satisfies Bar[];
 
-  const overallPercentage = Math.round(
-    (progresses.total.current / progresses.total.total) * 100,
-  );
+  const overallPercentage = completion;
 
   return (
     <MultiDonutGraph
@@ -61,7 +59,7 @@ const DegreeCompletionDonut = (styleProps: GraphStyleProps) => {
 };
 
 export const SimpleDegreeCompletionDonut = (styleProps: GraphStyleProps) => {
-  const { progresses } = useAuditContext();
+  const { progresses, completion } = useAuditContext();
   const bars = progresses.sections
     .filter((section) => section.progress.total > 0)
     .sort((a, b) => b.progress.total - a.progress.total)
@@ -71,9 +69,7 @@ export const SimpleDegreeCompletionDonut = (styleProps: GraphStyleProps) => {
       percentage: section.progress,
     })) satisfies Bar[];
 
-  const overallPercentage = Math.round(
-    (progresses.total.current / progresses.total.total) * 100,
-  );
+  const overallPercentage = completion;
 
   return (
     <MultiDonutGraph {...styleProps} bars={bars}>

entrypoints/degree-audit/components/degree-planner-page.tsx

@@ -15,7 +15,7 @@ import SemesterCard from "./semester-card";
 
 const SidePanel = () => {
   return (
-    <VStack fill className="h-full" y="stretch" x="center">
+    <VStack fill className="h-full sticky top-[75px] z-20 bg-white" y="stretch" x="center">
       <SimpleDegreeCompletionDonut size={300} />
       <div className="w-sm mt-10 p-3 rounded-lg border border-gray-200 bg-[#FAFAF9]">
         <CourseSearchContent />

entrypoints/degree-audit/components/gpa-credit-cards.tsx

@@ -14,7 +14,7 @@ export const GPATotalsCard = ({
   points = 320,
 }: GPATotalsProps) => {
   return (
-    <div className="p-5 rounded-lg border border-gray-200 bg-white">
+    <div className="p-5 rounded-lg border border-gray-200 bg-white shadow-md">
       <HStack x="between" y="top" fill>
         <h3 className="text-xl font-bold text-gray-900">GPA Totals</h3>
         <img src="/Info.svg" alt="Info" className="w-6 h-6 cursor-pointer" />
@@ -70,7 +70,7 @@ export const CreditHourTotalsCard = ({
   ],
 }: CreditHourTotalsProps) => {
   return (
-    <div className="p-5 rounded-lg border border-gray-200 bg-white">
+    <div className="p-5 rounded-lg border border-gray-200 bg-white shadow-md">
       <h3 className="text-xl font-bold text-gray-900">Credit Hour Totals</h3>
 
       <VStack gap={3} className="mt-4">

entrypoints/degree-audit/components/navbar.tsx

@@ -30,7 +30,7 @@ const Navbar = () => {
       fill
       x="between"
       y="middle"
-      className="border-b-2 border-gray-100 px-10 py-2"
+      className="border-b-2 border-gray-100 px-10 py-2 sticky top-0 z-10 bg-white"
       style={{
         height: "75px",
       }}