chore(icons): migrate to non-deprecated Phosphor exports (#208)

Author: samsinghh

features/dashboard/audit-card.tsx

@@ -1,8 +1,8 @@
 import {
-  CopySimple,
-  DotsThree,
-  PencilSimpleLine,
-  Trash,
+  CopySimpleIcon,
+  DotsThreeIcon,
+  PencilSimpleLineIcon,
+  TrashIcon,
 } from "@phosphor-icons/react";
 import React from "react";
 
@@ -124,7 +124,7 @@ const DegreeAuditCard: React.FC<DegreeAuditCardProps> = ({
             }}
             aria-label="Audit options"
           >
-            <DotsThree size={22} weight="bold" />
+            <DotsThreeIcon size={22} weight="bold" />
           </button>
         </div>
       </div>
@@ -138,15 +138,15 @@ const DegreeAuditCard: React.FC<DegreeAuditCardProps> = ({
             className="flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-[15px] hover:bg-hover-bg"
             onClick={startRename}
           >
-            <PencilSimpleLine size={20} className="shrink-0" />
+            <PencilSimpleLineIcon size={20} className="shrink-0" />
             <span>Rename</span>
           </button>
           <button className="flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-[15px] hover:bg-hover-bg">
-            <CopySimple size={20} className="shrink-0" />
+            <CopySimpleIcon size={20} className="shrink-0" />
             <span>Duplicate</span>
           </button>
           <button className="flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-[15px] text-dap-delete hover:bg-hover-bg">
-            <Trash size={20} className="shrink-0" />
+            <TrashIcon size={20} className="shrink-0" />
             <span>Delete Audit</span>
           </button>
         </div>

features/dashboard/gpa-credit-cards.tsx

@@ -1,7 +1,7 @@
 import { HStack, VStack } from "@/components/ui/stack";
 import type { GpaSummary } from "@/features/audit/audit-calculations";
 import type { Status } from "@/domain/course";
-import { Check, X } from "@phosphor-icons/react";
+import { CheckIcon, XIcon } from "@phosphor-icons/react";
 
 type FramedStatusIconState = "completed" | "not-started" | "in-progress";
 
@@ -36,13 +36,13 @@ const FramedStatusIcon = ({ state }: { state: FramedStatusIconState }) => {
   if (state === "completed") {
     return (
       <div className="bg-dap-plan-green-light mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded">
-        <Check className="h-4 w-4 text-white" weight="bold" />
+        <CheckIcon className="h-4 w-4 text-white" weight="bold" />
       </div>
     );
   }
   return (
     <div className="bg-dap-status-slate mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded">
-      <X className="h-4 w-4 text-white" weight="bold" />
+      <XIcon className="h-4 w-4 text-white" weight="bold" />
     </div>
   );
 };

features/dashboard/navbar.tsx

@@ -4,11 +4,7 @@ import { usePreferences } from "@/features/preferences/preferences-provider";
 import { useAuditContext } from "@/features/audit/audit-provider";
 import { getAuditDisplayName } from "@/domain/audit";
 import { cn } from "@/lib/utils";
-import {
-  ExportIcon,
-  PencilIcon,
-  Sidebar as SidebarIcon,
-} from "@phosphor-icons/react";
+import { ExportIcon, PencilIcon, SidebarIcon } from "@phosphor-icons/react";
 
 const MAJOR_TAG_STYLES = [
   "bg-[#18a770] text-[#f3fff8]",

features/dashboard/requirement-breakdown.tsx

@@ -7,9 +7,9 @@ import { CATEGORY_COLORS, cn } from "@/lib/utils";
 import {
   CaretDownIcon,
   CaretUpIcon,
-  Check,
-  Minus,
-  X,
+  CheckIcon,
+  MinusIcon,
+  XIcon,
 } from "@phosphor-icons/react";
 import { useState } from "react";
 import EyeIcon from "@/assets/svgs/Eye.svg";
@@ -82,20 +82,20 @@ const RequirementStatusIcon = ({
   if (state === "completed") {
     return (
       <div className="flex items-center justify-center w-6 h-6 bg-dap-plan-green-light rounded shrink-0 mt-0.5">
-        <Check className="text-white w-4 h-4" weight="bold" />
+        <CheckIcon 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-dap-status-slate rounded shrink-0 mt-0.5">
-        <X className="text-white w-4 h-4" weight="bold" />
+        <XIcon className="text-white w-4 h-4" weight="bold" />
       </div>
     );
   }
   return (
     <div className="flex items-center justify-center w-6 h-6 bg-dap-gray rounded shrink-0 mt-0.5">
-      <Minus className="text-white w-4 h-4" weight="bold" />
+      <MinusIcon className="text-white w-4 h-4" weight="bold" />
     </div>
   );
 };