Workspaces in Workspaces all around

src/apps/officer-web/Screens/Dashboard/Plans/index.tsx

@@ -30,13 +30,13 @@ export const Plans = () => {
     <div className="flex flex-col h-full p-4">
         <Card className="flex-1 overflow-hidden">
           {/* Header with plan selector */}
-          <div className="shrink-0 flex items-center gap-3 px-4 py-2 border-b border-duck-dark/10 bg-white/60">
+          <div className="shrink-0 flex items-center gap-3 px-4 py-2 border-b border-duck-dark/10 bg-background/60">
             <span className="text-sm font-medium text-duck-dark/70">Plans</span>
             {plans.length > 1 && (
               <select
                 value={selectedPlan ?? ''}
                 onChange={(ev) => setSelectedPlan(ev.target.value)}
-                className="text-xs border border-duck-dark/20 rounded px-2 py-1 bg-white/80"
+                className="text-xs border border-duck-dark/20 rounded px-2 py-1 bg-background/80 text-duck-dark"
               >
                 {plans.map((p) => (
                   <option key={p} value={p}>
@@ -49,7 +49,7 @@ export const Plans = () => {
 
           {/* Markdown content */}
           <div className="overflow-y-auto h-full p-6">
-            <div className="prose prose-sm max-w-none prose-headings:text-duck-dark prose-a:text-duck-teal prose-pre:bg-gray-900 prose-pre:text-green-400 prose-code:text-duck-teal prose-code:before:content-none prose-code:after:content-none prose-td:text-sm prose-th:text-sm">
+            <div className="prose prose-sm dark:prose-invert max-w-none prose-headings:text-duck-dark prose-a:text-duck-teal prose-pre:bg-gray-900 prose-pre:text-green-400 prose-code:text-duck-teal prose-code:before:content-none prose-code:after:content-none prose-td:text-sm prose-th:text-sm">
               <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}>
                 {content}
               </ReactMarkdown>