Updated audit card to be more like Figma

Author: Pranay-Katari

entrypoints/popup-app/main.tsx

@@ -133,6 +133,110 @@ export default function App() {
   //   setHypotheticalCourses((prev) => [...prev, course]);
   //   // TODO: Store in browser storage and send to degree audit page
   // };
+  const Pill = ({ text }: { text: string }) => (
+    <span className="inline-flex items-center rounded-full bg-[var(--color-dap-primary)] px-2.5 py-[2px] text-[12px] font-extrabold leading-none text-white">
+      {text}
+    </span>
+  );
+
+  const AuditCardDetailed = ({ audit }: { audit: DegreeAuditCardProps }) => (
+      <div
+        className="
+          group
+          w-full
+          rounded-[12px]
+          border
+          border-gray-200
+          bg-white
+          px-5
+          py-4
+          hover:cursor-pointer
+          hover:bg-[var(--color-dap-primary)]
+          transition-colors
+        "
+        onClick={(e) => {
+          e.stopPropagation();
+          handleOpenDegreeAuditPage(audit?.auditId);
+        }}
+      >
+      <div className="flex items-start justify-between gap-4">
+        {/* Left */}
+        <div className="min-w-0 flex-1">
+          <div
+            className="
+              text-[20px]
+              font-extrabold
+              text-[var(--color-dap-primary)]
+              leading-tight
+              transition-colors
+              group-hover:text-white
+            "
+          >
+            {audit.title}
+          </div>
+
+          <div className="mt-3 flex items-center gap-3">
+          <span
+            className="
+              text-[13px]
+              font-medium
+              tracking-wide
+              text-black
+              transition-colors
+              hover:text-white
+            "
+          >
+            MAJOR
+          </span>
+
+            {(audit.majors ?? []).map((m, i) => (
+              <span
+                key={`${m}-${i}`}
+                className="
+                  inline-flex items-center
+                  rounded-[6px]
+                  bg-[#068b5e]
+                  px-3 py-[3px]
+                  text-[12px]
+                  leading-none
+                  text-white
+                "
+              >
+                {m}
+              </span>
+            ))}
+          </div>
+
+          {/* Optional MINOR/CERT row if you want parity with the detailed card */}
+          {(audit.minors ?? []).length > 0 && (
+            <div className="mt-2 flex items-center gap-4">
+              <div className="text-[13px] font-extrabold tracking-wide text-[var(--color-ut-charcoal)]">
+                MINOR/CERT
+              </div>
+              <div className="flex flex-wrap gap-2">
+                {(audit.minors ?? []).map((m, i) => (
+                  <span
+                    key={`${m}-${i}`}
+                    className="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-[2px] text-[12px] font-bold leading-none text-[var(--color-ut-charcoal)]"
+                  >
+                    {m}
+                  </span>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Right badge */}
+        <div className="relative top-6">
+          <div className="rounded-[10px] bg-[var(--color-dap-primary)] px-3.5 py-2 text-white text-[16px] font-extrabold leading-none">
+            {audit.percentage}%
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
 
   return (
     <div className="w-[438px] h-full min-h-[300px] max-h-[600px] bg-white font-sans overflow-hidden flex flex-col border border-gray-100">
@@ -170,7 +274,7 @@ export default function App() {
               style={{ fontFamily: "Roboto Flex" }}
               className="text-[25.63px] font-bold text-[var(--color-dap-dark)]"
             >
-              Current Audits
+              {audits.length} AUDITS
             </h1>
             {isSyncing && (
               <div className="flex items-center gap-1.5 text-[var(--color-dap-gray-light)]">
@@ -224,12 +328,8 @@ export default function App() {
                     handleOpenDegreeAuditPage(audit?.auditId);
                   }}
                 >
-                  <DegreeAuditCardPopup
-                    title={audit.title}
-                    majors={audit.majors}
-                    minors={audit.minors}
-                    percentage={audit.percentage}
-                  />
+                  <AuditCardDetailed audit={audit} />
+
                 </div>
               ))}
             </div>

lib/audit-history-scraper.ts

@@ -9,22 +9,43 @@ function parseMajor(programText: string): string {
   // Clean up whitespace first (normalize spaces and newlines)
   const cleanText = programText.replace(/\s+/g, " ").trim();
 
+  // NEW: strip leading punctuation and an optional "major" label
+  function cleanExtractedMajor(raw: string): string {
+    return raw
+      .replace(/^\s*[:,-]+\s*/g, "")          // leading ": , -"
+      .replace(/^\s*major\s*[:,-]?\s*/i, "")  // leading "major", "Major:", etc.
+      .trim();
+  }
+  
+  // Accepts: "B S", "BS", "B.S.", "B A", "BA", "B.A."
+  const BSBA_PREFIX = /B\.?\s*[SA]\.?\s*/;
+  
   // Pattern 1: "B S in Communication and Leadership" (with "in")
-  const withInMatch = cleanText.match(/B [SA] in (.+?)(?:\(|$)/);
-  if (withInMatch) return withInMatch[1].trim();
+  const withInMatch = cleanText.match(
+    new RegExp(`${BSBA_PREFIX.source}in\\s+(.+?)(?:\\(|$)`, "i"),
+  );
+  if (withInMatch) return cleanExtractedMajor(withInMatch[1]);
+
+  // Pattern 2: "B S Computer Science, CS" or "B A Economics" or "B S Mathematics"
+  const spacedMatch = cleanText.match(
+    new RegExp(`${BSBA_PREFIX.source}(.+?)(?:,|\\(|$)`, "i"),
+  );
+  if (spacedMatch) return cleanExtractedMajor(spacedMatch[1]);
 
-  // Pattern 2: "B S Computer Science, CS" or "B A Economics"
-  const spacedMatch = cleanText.match(/B [SA] (.+?)(?:,|\()/);
-  if (spacedMatch) return spacedMatch[1].trim();
+  // Other degree letters (keep your behavior, just allow dots/no-space and end-of-string)
+  const degreeMatch = cleanText.match(/B\.?\s*[A-Z]\.?\s*(.+?)(?:,|\(|$)/i);
+  if (degreeMatch) return cleanExtractedMajor(degreeMatch[1]);
 
   // Pattern 3: "BSGS, Climate System Science" or "DEGREE_CODE, Major Name"
-  // Handles degrees where code comes first, then major name after comma
   const codeFirstMatch = cleanText.match(/^[A-Z]+,\s*(.+?)(?:\(|$)/);
-  if (codeFirstMatch) return codeFirstMatch[1].trim();
+  if (codeFirstMatch) return cleanExtractedMajor(codeFirstMatch[1]);
 
-  // Fallback: first line
+  // Fallback: first token
   return cleanText.split(" ")[0];
 }
+  
+
+
 
 function parseCredential(programText: string): string | null {
   const match = programText.match(/- Credential:\s*(.+?)\s*\(/);