From 2b165199d2638c4edebe2c34c0bcba6dc5f899fb Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Sun, 15 Feb 2026 19:48:37 -0500
Subject: [PATCH] refactor: migrate session sharing components to new design
 system

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../components/session/ShareSessionModal.tsx  | 76 +++++++++----------
 frontend/src/pages/MySharesPage.tsx           | 36 ++++-----
 frontend/src/pages/SharedSessionPage.tsx      | 42 +++++-----
 3 files changed, 77 insertions(+), 77 deletions(-)

diff --git a/frontend/src/components/session/ShareSessionModal.tsx b/frontend/src/components/session/ShareSessionModal.tsx
index 0adf3298..19b1e94d 100644
--- a/frontend/src/components/session/ShareSessionModal.tsx
+++ b/frontend/src/components/session/ShareSessionModal.tsx
@@ -185,16 +185,16 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
       />
 
       {/* Modal */}
-      <div className="relative w-full max-w-lg glass-card rounded-2xl shadow-lg">
+      <div className="relative w-full max-w-lg bg-card border border-border rounded-xl shadow-lg">
         {/* Header */}
-        <div className="flex items-center justify-between border-b border-white/[0.06] px-6 py-4">
+        <div className="flex items-center justify-between border-b border-border px-6 py-4">
           <div>
-            <h2 className="text-lg font-semibold text-white">Share Session</h2>
-            <p className="text-sm text-white/40">{sessionLabel}</p>
+            <h2 className="text-lg font-heading font-semibold text-foreground">Share Session</h2>
+            <p className="text-sm text-muted-foreground">{sessionLabel}</p>
           </div>
           <button
             onClick={onClose}
-            className="rounded-md p-1 text-white/40 hover:bg-white/[0.06] hover:text-white"
+            className="rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
           >
             <X className="h-5 w-5" />
           </button>
@@ -206,7 +206,7 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
           <div className="space-y-4">
             {/* Visibility */}
             <div>
-              <label className="mb-2 block text-sm font-medium text-white">
+              <label className="mb-2 block text-sm font-medium text-foreground">
                 Visibility
               </label>
               <div className="space-y-2">
@@ -215,17 +215,17 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
                   className={cn(
                     'flex w-full items-center gap-3 rounded-md border px-4 py-3 text-left transition-colors',
                     visibility === 'account'
-                      ? 'border-white/20 bg-white/10 text-white'
-                      : 'border-white/[0.06] bg-transparent text-white/50 hover:border-white/20 hover:bg-white/[0.06]'
+                      ? 'border-primary/30 bg-primary/10 text-foreground'
+                      : 'border-border bg-transparent text-muted-foreground hover:border-border hover:bg-accent'
                   )}
                 >
                   <Users className="h-4 w-4" />
                   <div className="flex-1">
                     <div className="text-sm font-medium">Account Only</div>
-                    <div className="text-xs text-white/40">Visible to your team</div>
+                    <div className="text-xs text-muted-foreground">Visible to your team</div>
                   </div>
                   {visibility === 'account' && (
-                    <div className="h-2 w-2 rounded-full bg-white" />
+                    <div className="h-2 w-2 rounded-full bg-primary" />
                   )}
                 </button>
                 <button
@@ -233,17 +233,17 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
                   className={cn(
                     'flex w-full items-center gap-3 rounded-md border px-4 py-3 text-left transition-colors',
                     visibility === 'public'
-                      ? 'border-white/20 bg-white/10 text-white'
-                      : 'border-white/[0.06] bg-transparent text-white/50 hover:border-white/20 hover:bg-white/[0.06]'
+                      ? 'border-primary/30 bg-primary/10 text-foreground'
+                      : 'border-border bg-transparent text-muted-foreground hover:border-border hover:bg-accent'
                   )}
                 >
                   <Globe className="h-4 w-4" />
                   <div className="flex-1">
                     <div className="text-sm font-medium">Public</div>
-                    <div className="text-xs text-white/40">Anyone with the link</div>
+                    <div className="text-xs text-muted-foreground">Anyone with the link</div>
                   </div>
                   {visibility === 'public' && (
-                    <div className="h-2 w-2 rounded-full bg-white" />
+                    <div className="h-2 w-2 rounded-full bg-primary" />
                   )}
                 </button>
               </div>
@@ -254,8 +254,8 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
 
             {/* Share Name */}
             <div>
-              <label className="mb-2 block text-sm font-medium text-white">
-                Share Name <span className="text-white/40">(optional)</span>
+              <label className="mb-2 block text-sm font-medium text-foreground">
+                Share Name <span className="text-muted-foreground">(optional)</span>
               </label>
               <input
                 type="text"
@@ -263,8 +263,8 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
                 onChange={(e) => setShareName(e.target.value.slice(0, 100))}
                 placeholder="e.g. Training link, Customer escalation"
                 className={cn(
-                  'w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white placeholder-white/30',
-                  'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
+                  'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground placeholder-muted-foreground',
+                  'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
                 )}
                 maxLength={100}
               />
@@ -272,7 +272,7 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
 
             {/* Expiration */}
             <div>
-              <label className="mb-2 block text-sm font-medium text-white">
+              <label className="mb-2 block text-sm font-medium text-foreground">
                 Expiration
               </label>
               <div className="flex flex-wrap gap-2">
@@ -283,8 +283,8 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
                     className={cn(
                       'rounded-md border px-3 py-1.5 text-sm transition-colors',
                       expirationPreset === preset.value
-                        ? 'border-white/20 bg-white/10 text-white'
-                        : 'border-white/10 text-white/50 hover:border-white/20 hover:bg-white/[0.06]'
+                        ? 'border-primary/30 bg-primary/10 text-foreground'
+                        : 'border-border text-muted-foreground hover:border-border hover:bg-accent'
                     )}
                   >
                     {preset.label}
@@ -297,8 +297,8 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
                   value={customDatetime}
                   onChange={(e) => setCustomDatetime(e.target.value)}
                   className={cn(
-                    'mt-2 w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white',
-                    'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
+                    'mt-2 w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
+                    'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
                     '[color-scheme:dark]'
                   )}
                 />
@@ -310,8 +310,8 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
               onClick={handleGenerateLink}
               disabled={isGenerating || (expirationPreset === 'custom' && !customDatetime)}
               className={cn(
-                'flex w-full items-center justify-center gap-2 rounded-md bg-white px-4 py-2 text-sm font-medium text-black',
-                'hover:bg-white/90 disabled:opacity-50 disabled:cursor-not-allowed'
+                'flex w-full items-center justify-center gap-2 rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
+                'hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed'
               )}
             >
               <Link2 className="h-4 w-4" />
@@ -322,7 +322,7 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
           {/* Existing Shares */}
           {shares.length > 0 && (
             <div>
-              <h3 className="mb-3 text-sm font-medium text-white">
+              <h3 className="mb-3 text-sm font-medium text-foreground">
                 Active Shares ({shares.length})
               </h3>
               <div className="space-y-3">
@@ -332,7 +332,7 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
                   return (
                     <div
                       key={share.id}
-                      className="glass-card rounded-xl p-4 space-y-2"
+                      className="bg-card border border-border rounded-xl p-4 space-y-2"
                     >
                       <div className="flex items-start justify-between gap-2">
                         <div className="flex-1 min-w-0">
@@ -340,8 +340,8 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
                             <span className={cn(
                               'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs',
                               share.visibility === 'public'
-                                ? 'bg-white/10 text-white/70'
-                                : 'bg-white/10 text-white/70'
+                                ? 'bg-accent text-muted-foreground'
+                                : 'bg-accent text-muted-foreground'
                             )}>
                               {share.visibility === 'public' ? (
                                 <Globe className="h-3 w-3" />
@@ -350,11 +350,11 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
                               )}
                               {share.visibility === 'public' ? 'Public' : 'Account'}
                             </span>
-                            <span className="truncate text-sm font-medium text-white">
+                            <span className="truncate text-sm font-medium text-foreground">
                               {share.share_name || 'Untitled share'}
                             </span>
                           </div>
-                          <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-white/40">
+                          <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground">
                             <span>{getRelativeTime(share.created_at)}</span>
                             <span>
                               {share.view_count > 0
@@ -375,10 +375,10 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
                             onClick={() => handleCopyUrl(share)}
                             title="Copy share URL"
                             className={cn(
-                              'rounded-md border border-white/10 p-1.5 text-sm transition-colors',
+                              'rounded-md border border-border p-1.5 text-sm transition-colors',
                               isCopied
                                 ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-400'
-                                : 'text-white/50 hover:bg-white/10 hover:text-white'
+                                : 'text-muted-foreground hover:bg-accent hover:text-foreground'
                             )}
                           >
                             {isCopied ? (
@@ -390,7 +390,7 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
                           <button
                             onClick={() => handleRevoke(share.id)}
                             title="Revoke share"
-                            className="rounded-md border border-white/10 p-1.5 text-white/50 hover:bg-red-500/10 hover:border-red-500/30 hover:text-red-400 transition-colors"
+                            className="rounded-md border border-border p-1.5 text-muted-foreground hover:bg-red-500/10 hover:border-red-500/30 hover:text-red-400 transition-colors"
                           >
                             <Trash2 className="h-3.5 w-3.5" />
                           </button>
@@ -406,18 +406,18 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
           {/* Loading state */}
           {isLoadingShares && shares.length === 0 && (
             <div className="flex items-center justify-center py-4">
-              <div className="h-5 w-5 animate-spin rounded-full border-2 border-white/20 border-t-white" />
+              <div className="h-5 w-5 animate-spin rounded-full border-2 border-border border-t-foreground" />
             </div>
           )}
         </div>
 
         {/* Footer */}
-        <div className="flex justify-end gap-3 border-t border-white/[0.06] px-6 py-4">
+        <div className="flex justify-end gap-3 border-t border-border px-6 py-4">
           <button
             onClick={onClose}
             className={cn(
-              'rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-white/60',
-              'hover:bg-white/10 hover:text-white'
+              'rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
+              'hover:bg-accent hover:text-foreground'
             )}
           >
             Close
diff --git a/frontend/src/pages/MySharesPage.tsx b/frontend/src/pages/MySharesPage.tsx
index 31c34c57..48062682 100644
--- a/frontend/src/pages/MySharesPage.tsx
+++ b/frontend/src/pages/MySharesPage.tsx
@@ -96,7 +96,7 @@ export default function MySharesPage() {
   if (loading) {
     return (
       <div className="flex items-center justify-center py-32">
-        <div className="h-8 w-8 animate-spin rounded-full border-4 border-white/20 border-t-white" />
+        <div className="h-8 w-8 animate-spin rounded-full border-4 border-border border-t-foreground" />
       </div>
     )
   }
@@ -105,12 +105,12 @@ export default function MySharesPage() {
   if (error) {
     return (
       <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
-        <div className="glass-card rounded-xl p-6 border border-red-400/20">
+        <div className="bg-card border border-red-400/20 rounded-xl p-6">
           <div className="text-center">
             <p className="text-red-400 text-sm mb-4">{error}</p>
             <button
               onClick={fetchShares}
-              className="bg-white text-black hover:bg-white/90 rounded-md px-4 py-2 text-sm font-medium transition-colors"
+              className="bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90 rounded-md px-4 py-2 text-sm font-medium transition-colors"
             >
               Try again
             </button>
@@ -125,7 +125,7 @@ export default function MySharesPage() {
       {/* Back link */}
       <Link
         to="/sessions"
-        className="inline-flex items-center gap-1.5 text-sm text-white/40 hover:text-white/70 transition-colors mb-6"
+        className="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors mb-6"
       >
         <ArrowLeft className="h-4 w-4" />
         Back to sessions
@@ -133,21 +133,21 @@ export default function MySharesPage() {
 
       {/* Header */}
       <div className="mb-6">
-        <h1 className="text-2xl font-bold text-white">My Shared Sessions</h1>
-        <p className="text-white/40 mt-1">Manage your session share links</p>
+        <h1 className="text-2xl font-heading font-bold text-foreground">My Shared Sessions</h1>
+        <p className="text-muted-foreground mt-1">Manage your session share links</p>
       </div>
 
       {/* Empty state */}
       {shares.length === 0 ? (
-        <div className="glass-card rounded-xl p-12 text-center">
-          <Link2 className="h-12 w-12 text-white/20 mx-auto mb-4" />
-          <h2 className="text-lg font-semibold text-white mb-2">No shared sessions</h2>
-          <p className="text-white/40 text-sm mb-6">
+        <div className="bg-card border border-border rounded-xl p-12 text-center">
+          <Link2 className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
+          <h2 className="text-lg font-heading font-semibold text-foreground mb-2">No shared sessions</h2>
+          <p className="text-muted-foreground text-sm mb-6">
             Share a session from the session detail page to create a link
           </p>
           <button
             onClick={() => navigate('/sessions')}
-            className="bg-white text-black hover:bg-white/90 rounded-md px-4 py-2 text-sm font-medium transition-colors"
+            className="bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90 rounded-md px-4 py-2 text-sm font-medium transition-colors"
           >
             Go to Sessions
           </button>
@@ -159,10 +159,10 @@ export default function MySharesPage() {
             const isCopied = copiedId === share.id
 
             return (
-              <div key={share.id} className="glass-card rounded-xl p-5">
+              <div key={share.id} className="bg-card border border-border rounded-xl p-5">
                 {/* Top row: badge + name */}
                 <div className="flex items-center gap-3 mb-3">
-                  <span className="inline-flex items-center gap-1.5 text-xs rounded-full px-2 py-0.5 bg-white/10 text-white/60">
+                  <span className="inline-flex items-center gap-1.5 text-xs rounded-full px-2 py-0.5 bg-accent text-muted-foreground">
                     {share.visibility === 'public' ? (
                       <Globe className="h-3 w-3" />
                     ) : (
@@ -170,18 +170,18 @@ export default function MySharesPage() {
                     )}
                     {share.visibility === 'public' ? 'Public' : 'Account Only'}
                   </span>
-                  <span className="text-sm font-medium text-white">
+                  <span className="text-sm font-medium text-foreground">
                     {share.share_name || 'Untitled share'}
                   </span>
                 </div>
 
                 {/* Session info */}
-                <p className="text-sm text-white/50 mb-2">
+                <p className="text-sm text-muted-foreground mb-2">
                   Session ID: {share.session_id.slice(0, 8)}...
                 </p>
 
                 {/* Meta row */}
-                <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-white/40 mb-4">
+                <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted-foreground mb-4">
                   <span>Created {formatRelativeTime(share.created_at)}</span>
                   <span className="hidden sm:inline">·</span>
                   <span>
@@ -203,7 +203,7 @@ export default function MySharesPage() {
                       'inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors',
                       isCopied
                         ? 'bg-emerald-400/10 text-emerald-400'
-                        : 'bg-white text-black hover:bg-white/90'
+                        : 'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90'
                     )}
                   >
                     {isCopied ? (
@@ -216,7 +216,7 @@ export default function MySharesPage() {
 
                   <Link
                     to={`/sessions/${share.session_id}`}
-                    className="inline-flex items-center gap-1.5 border border-white/10 text-white/60 hover:bg-white/10 rounded-md px-3 py-1.5 text-sm transition-colors"
+                    className="inline-flex items-center gap-1.5 border border-border text-muted-foreground hover:bg-accent rounded-md px-3 py-1.5 text-sm transition-colors"
                   >
                     <ExternalLink className="h-3.5 w-3.5" />
                     View Session
diff --git a/frontend/src/pages/SharedSessionPage.tsx b/frontend/src/pages/SharedSessionPage.tsx
index 7eeed622..10e518b1 100644
--- a/frontend/src/pages/SharedSessionPage.tsx
+++ b/frontend/src/pages/SharedSessionPage.tsx
@@ -53,16 +53,16 @@ function ErrorCard({ error }: { error: ErrorState }) {
   const Icon = iconMap[error.type]
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-black px-4">
-      <div className="glass-card w-full max-w-md rounded-2xl p-8 text-center">
-        <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-white/5">
-          <Icon className="h-8 w-8 text-white/40" />
+    <div className="flex min-h-screen items-center justify-center bg-background px-4">
+      <div className="bg-card border border-border w-full max-w-md rounded-xl p-8 text-center">
+        <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-accent">
+          <Icon className="h-8 w-8 text-muted-foreground" />
         </div>
-        <h1 className="mb-2 text-xl font-semibold text-white">{titleMap[error.type]}</h1>
-        <p className="mb-6 text-sm text-white/50">{error.message}</p>
+        <h1 className="mb-2 text-xl font-heading font-semibold text-foreground">{titleMap[error.type]}</h1>
+        <p className="mb-6 text-sm text-muted-foreground">{error.message}</p>
         <Link
           to="/"
-          className="inline-block rounded-lg bg-white px-6 py-2.5 text-sm font-medium text-black hover:bg-white/90"
+          className="inline-block rounded-lg bg-gradient-brand px-6 py-2.5 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90"
         >
           Go to ResolutionFlow
         </Link>
@@ -142,10 +142,10 @@ export function SharedSessionPage() {
 
   if (loading) {
     return (
-      <div className="flex min-h-screen items-center justify-center bg-black">
+      <div className="flex min-h-screen items-center justify-center bg-background">
         <div className="flex flex-col items-center gap-4">
-          <Loader2 className="h-8 w-8 animate-spin text-white/40" />
-          <p className="text-sm text-white/40">Loading shared session...</p>
+          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+          <p className="text-sm text-muted-foreground">Loading shared session...</p>
         </div>
       </div>
     )
@@ -160,17 +160,17 @@ export function SharedSessionPage() {
   }
 
   return (
-    <div className="min-h-screen bg-black">
+    <div className="min-h-screen bg-background">
       {/* Minimal header */}
-      <header className="border-b border-white/[0.06] px-6 py-4">
+      <header className="border-b border-border px-6 py-4">
         <div className="mx-auto flex max-w-7xl items-center justify-between">
           <Link to="/" className="flex items-center gap-2">
             <BrandLogo size="sm" />
-            <span className="text-lg font-semibold text-white">ResolutionFlow</span>
+            <span className="text-lg font-heading font-semibold text-foreground">ResolutionFlow</span>
           </Link>
           <Link
             to="/login"
-            className="rounded-lg border border-white/10 px-4 py-2 text-sm text-white/60 hover:bg-white/10 hover:text-white"
+            className="rounded-lg border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
           >
             Sign In
           </Link>
@@ -182,14 +182,14 @@ export function SharedSessionPage() {
         {/* Metadata section */}
         <div className="mb-8">
           {data.share_name && (
-            <h1 className="mb-2 text-2xl font-bold text-white">{data.share_name}</h1>
+            <h1 className="mb-2 text-2xl font-heading font-bold text-foreground">{data.share_name}</h1>
           )}
-          <p className="text-lg text-white/70">
-            <span className="text-white/40">Tree:</span> {data.tree_name}
+          <p className="text-lg text-muted-foreground">
+            <span className="text-muted-foreground">Tree:</span> {data.tree_name}
           </p>
 
           {(data.ticket_number || data.client_name) && (
-            <p className="mt-1 text-sm text-white/50">
+            <p className="mt-1 text-sm text-muted-foreground">
               {data.ticket_number && (
                 <span>Ticket: #{data.ticket_number}</span>
               )}
@@ -202,7 +202,7 @@ export function SharedSessionPage() {
             </p>
           )}
 
-          <div className="mt-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-white/40">
+          <div className="mt-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-muted-foreground">
             <span>Started: {formatDate(data.started_at)}</span>
             {data.completed_at && (
               <>
@@ -250,9 +250,9 @@ export function SharedSessionPage() {
       </main>
 
       {/* Footer */}
-      <footer className="py-8 text-center text-sm text-white/30">
+      <footer className="py-8 text-center text-sm text-muted-foreground">
         Powered by{' '}
-        <Link to="/" className="underline hover:text-white/50">
+        <Link to="/" className="underline hover:text-foreground">
           ResolutionFlow
         </Link>
       </footer>