style updates

Author: rob-at-cortex

src/components/DigitalColleagues/AddEpicModal.tsx

@@ -6,7 +6,7 @@ import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { Epic } from './KanbanBoard';
+import { Epic } from '../dc-temp/Views/KanbanBoard';
 
 interface AddEpicModalProps {
   isOpen: boolean;

src/components/DigitalColleagues/AddSprintModal.tsx

@@ -10,7 +10,7 @@ import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover
 import { CalendarIcon } from 'lucide-react';
 import { format } from 'date-fns';
 import { cn } from '@/lib/utils';
-import { Sprint } from './KanbanBoard';
+import { Sprint } from '../dc-temp/Views/KanbanBoard';
 
 interface AddSprintModalProps {
   isOpen: boolean;

src/components/DigitalColleagues/AddTaskModal.tsx

@@ -9,7 +9,7 @@ import { Label } from '@/components/ui/label';
 import { Badge } from '@/components/ui/badge';
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 import { BookOpen, Bug, Zap, AlertCircle } from 'lucide-react';
-import { Task, Epic, Sprint } from './KanbanBoard';
+import { Task, Epic, Sprint } from './types';
 
 interface AddTaskModalProps {
   isOpen: boolean;
@@ -20,16 +20,16 @@ interface AddTaskModalProps {
 }
 
 const taskTypes = [
-  { value: 'story', label: 'Story', color: 'bg-blue-100 text-blue-800', icon: BookOpen },
-  { value: 'task', label: 'Task', color: 'bg-green-100 text-green-800', icon: AlertCircle },
-  { value: 'bug', label: 'Bug', color: 'bg-red-100 text-red-800', icon: Bug },
-  { value: 'spike', label: 'Spike', color: 'bg-purple-100 text-purple-800', icon: Zap },
+  { value: 'story', label: 'Story', color: 'bg-primary/20 text-primary', icon: BookOpen },
+  { value: 'task', label: 'Task', color: 'bg-secondary/20 text-secondary-foreground', icon: AlertCircle },
+  { value: 'bug', label: 'Bug', color: 'bg-destructive/20 text-destructive', icon: Bug },
+  { value: 'spike', label: 'Spike', color: 'bg-accent/20 text-accent', icon: Zap },
 ];
 
 const priorities = [
-  { value: 'low', label: 'Low', color: 'bg-green-100 text-green-800' },
-  { value: 'medium', label: 'Medium', color: 'bg-yellow-100 text-yellow-800' },
-  { value: 'high', label: 'High', color: 'bg-red-100 text-red-800' },
+  { value: 'low', label: 'Low', color: 'bg-success/20 text-success' },
+  { value: 'medium', label: 'Medium', color: 'bg-warning/20 text-warning' },
+  { value: 'high', label: 'High', color: 'bg-destructive/20 text-destructive' },
 ];
 
 export const AddTaskModal: React.FC<AddTaskModalProps> = ({

src/components/DigitalColleagues/CommentSection.tsx

@@ -44,20 +44,20 @@ export const CommentSection: React.FC<CommentSectionProps> = ({ comments, onAddC
       {/* Comments List */}
       <div className="space-y-4 max-h-60 overflow-y-auto">
         {comments.map((comment) => (
-          <div key={comment.id} className="flex gap-3 p-3 bg-gray-50 rounded-lg">
+          <div key={comment.id} className="flex gap-3 p-3 bg-muted/50 rounded-lg">
             <Avatar className="h-8 w-8 mt-1">
-              <AvatarFallback className="text-xs bg-gray-200 text-gray-700">
+              <AvatarFallback className="text-xs bg-muted text-muted-foreground">
                 {getInitials(comment.author)}
               </AvatarFallback>
             </Avatar>
             <div className="flex-1">
               <div className="flex items-center gap-2 mb-1">
                 <span className="font-medium text-sm">{comment.author}</span>
-                <span className="text-xs text-gray-500">
+                <span className="text-xs text-muted-foreground">
                   {comment.createdAt.toLocaleDateString()} at {comment.createdAt.toLocaleTimeString()}
                 </span>
               </div>
-              <p className="text-sm text-gray-700">{comment.text}</p>
+              <p className="text-sm text-muted-foreground">{comment.text}</p>
             </div>
           </div>
         ))}

src/components/DigitalColleagues/DocumentationView.tsx

@@ -128,16 +128,16 @@ export const DocumentationView: React.FC = () => {
           {doc.isFolder ? (
             <>
               {expandedFolders.has(doc.id) ? (
-                <ChevronDown className="h-4 w-4 text-gray-500" />
+                <ChevronDown className="h-4 w-4 text-muted-foreground" />
               ) : (
-                <ChevronRight className="h-4 w-4 text-gray-500" />
+                <ChevronRight className="h-4 w-4 text-muted-foreground" />
               )}
-              <Folder className="h-4 w-4 text-blue-500" />
+              <Folder className="h-4 w-4 text-primary" />
             </>
           ) : (
             <>
               <div className="w-4" />
-              <FileText className="h-4 w-4 text-gray-500" />
+              <FileText className="h-4 w-4 text-muted-foreground" />
             </>
           )}
           <span className="text-sm font-medium text-gray-700">{doc.title}</span>

src/components/DigitalColleagues/EditableField.tsx

@@ -75,14 +75,14 @@ export const EditableField: React.FC<EditableFieldProps> = ({
       ) : (
         <div
           onClick={handleFieldClick}
-          className={`cursor-pointer hover:bg-gray-50 p-2 rounded border border-transparent hover:border-gray-200 transition-colors group ${
+          className={`cursor-pointer hover:bg-muted/50 p-2 rounded border border-transparent hover:border-border transition-colors group ${
             multiline ? "min-h-[100px]" : "min-h-[40px]"
           } flex items-start gap-2`}
         >
-          <span className={multiline ? "text-sm text-gray-700" : "text-lg font-medium text-gray-900"}>
+          <span className={multiline ? "text-sm text-muted-foreground" : "text-lg font-medium text-foreground"}>
             {value || "Click to edit..."}
           </span>
-          <Edit className="h-4 w-4 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity" />
+          <Edit className="h-4 w-4 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity" />
         </div>
       )}
     </div>

src/components/DigitalColleagues/EpicFilter.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { Card } from '@/components/ui/card';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Badge } from '@/components/ui/badge';
-import { Epic } from './KanbanBoard';
+import { Epic } from './types';
 
 interface EpicFilterProps {
   epics: Epic[];
@@ -33,13 +33,13 @@ export const EpicFilter: React.FC<EpicFilterProps> = ({
   };
 
   return (
-    <Card className="p-4 bg-white shadow-sm">
+    <Card className="p-4 bg-card shadow-sm">
       <div className="space-y-3">
         <div className="flex items-center justify-between">
-          <h3 className="font-medium text-gray-900">Filter by Epic</h3>
+          <h3 className="font-medium text-foreground">Filter by Epic</h3>
           <button
             onClick={handleSelectAll}
-            className="text-sm text-blue-600 hover:text-blue-800 font-medium"
+            className="text-sm text-primary hover:text-primary/80 font-medium"
           >
             {selectedEpics.length === epics.length ? 'Deselect All' : 'Select All'}
           </button>