From 7c7d574aa76e781062b62e3c9eb81a0d060ebf83 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Thu, 9 Apr 2026 19:49:32 +0200
Subject: [PATCH] fix: replace hardcoded text-white with DS variables, fix
 label/value layout

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 ui/src/pages/AdminTenantsPage.tsx |  3 +-
 ui/src/pages/DashboardPage.tsx    | 23 +++++++--------
 ui/src/pages/LicensePage.tsx      | 47 ++++++++++++++-----------------
 ui/src/styles/platform.module.css | 20 +++++++++++++
 4 files changed, 55 insertions(+), 38 deletions(-)
 create mode 100644 ui/src/styles/platform.module.css

diff --git a/ui/src/pages/AdminTenantsPage.tsx b/ui/src/pages/AdminTenantsPage.tsx
index 09360ed..9c8063c 100644
--- a/ui/src/pages/AdminTenantsPage.tsx
+++ b/ui/src/pages/AdminTenantsPage.tsx
@@ -9,6 +9,7 @@ import type { Column } from '@cameleer/design-system';
 import { useAllTenants } from '../api/hooks';
 import { useOrgStore } from '../auth/useOrganization';
 import type { TenantResponse } from '../types/api';
+import styles from '../styles/platform.module.css';
 
 const columns: Column<TenantResponse>[] = [
   { key: 'name', header: 'Name' },
@@ -59,7 +60,7 @@ export function AdminTenantsPage() {
   return (
     <div className="space-y-6 p-6">
       <div className="flex items-center justify-between">
-        <h1 className="text-2xl font-semibold text-white">All Tenants</h1>
+        <h1 className={styles.heading}>All Tenants</h1>
         <Badge label="Platform Admin" color="warning" />
       </div>
 
diff --git a/ui/src/pages/DashboardPage.tsx b/ui/src/pages/DashboardPage.tsx
index 940dd98..a6a9488 100644
--- a/ui/src/pages/DashboardPage.tsx
+++ b/ui/src/pages/DashboardPage.tsx
@@ -8,6 +8,7 @@ import {
 } from '@cameleer/design-system';
 import { useAuth } from '../auth/useAuth';
 import { useTenant, useLicense } from '../api/hooks';
+import styles from '../styles/platform.module.css';
 
 function tierColor(tier: string): 'primary' | 'success' | 'warning' | 'error' {
   switch (tier?.toLowerCase()) {
@@ -68,7 +69,7 @@ export function DashboardPage() {
       {/* Tenant Header */}
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-3">
-          <h1 className="text-2xl font-semibold text-white">
+          <h1 className={styles.heading}>
             {tenant?.name ?? tenantId}
           </h1>
           {tenant?.tier && (
@@ -92,28 +93,28 @@ export function DashboardPage() {
 
       {/* Tenant Info */}
       <Card title="Tenant Information">
-        <div className="space-y-2 text-sm">
-          <div className="flex justify-between text-white/80">
-            <span>Slug</span>
-            <span className="font-mono">{tenant?.slug ?? '-'}</span>
+        <div className="space-y-2">
+          <div className={styles.kvRow}>
+            <span className={styles.kvLabel}>Slug</span>
+            <span className={styles.kvValueMono}>{tenant?.slug ?? '-'}</span>
           </div>
-          <div className="flex justify-between text-white/80">
-            <span>Status</span>
+          <div className={styles.kvRow}>
+            <span className={styles.kvLabel}>Status</span>
             <Badge
               label={tenant?.status ?? 'UNKNOWN'}
               color={tenant?.status === 'ACTIVE' ? 'success' : 'warning'}
             />
           </div>
-          <div className="flex justify-between text-white/80">
-            <span>Created</span>
-            <span>{tenant?.createdAt ? new Date(tenant.createdAt).toLocaleDateString() : '-'}</span>
+          <div className={styles.kvRow}>
+            <span className={styles.kvLabel}>Created</span>
+            <span className={styles.kvValue}>{tenant?.createdAt ? new Date(tenant.createdAt).toLocaleDateString() : '-'}</span>
           </div>
         </div>
       </Card>
 
       {/* Server Dashboard Link */}
       <Card title="Server Management">
-        <p className="text-sm text-white/60 mb-3">
+        <p className={`${styles.description} mb-3`}>
           Environments, applications, and deployments are managed through the server dashboard.
         </p>
         <Button
diff --git a/ui/src/pages/LicensePage.tsx b/ui/src/pages/LicensePage.tsx
index f07352a..5a25bf8 100644
--- a/ui/src/pages/LicensePage.tsx
+++ b/ui/src/pages/LicensePage.tsx
@@ -7,6 +7,7 @@ import {
 } from '@cameleer/design-system';
 import { useAuth } from '../auth/useAuth';
 import { useLicense } from '../api/hooks';
+import styles from '../styles/platform.module.css';
 
 const FEATURE_LABELS: Record<string, string> = {
   topology: 'Topology',
@@ -82,7 +83,7 @@ export function LicensePage() {
     <div className="space-y-6 p-6">
       {/* Header */}
       <div className="flex items-center gap-3">
-        <h1 className="text-2xl font-semibold text-white">License</h1>
+        <h1 className={styles.heading}>License</h1>
         <Badge
           label={license.tier.toUpperCase()}
           color={tierColor(license.tier)}
@@ -91,10 +92,10 @@ export function LicensePage() {
 
       {/* Expiry info */}
       <Card title="Validity">
-        <div className="flex flex-col gap-2 text-sm">
-          <div className="flex items-center justify-between">
-            <span className="text-white/60">Issued</span>
-            <span className="text-white">
+        <div className="flex flex-col gap-2">
+          <div className={styles.kvRow}>
+            <span className={styles.kvLabel}>Issued</span>
+            <span className={styles.kvValue}>
               {new Date(license.issuedAt).toLocaleDateString(undefined, {
                 year: 'numeric',
                 month: 'long',
@@ -102,12 +103,12 @@ export function LicensePage() {
               })}
             </span>
           </div>
-          <div className="flex items-center justify-between">
-            <span className="text-white/60">Expires</span>
-            <span className="text-white">{expDate}</span>
+          <div className={styles.kvRow}>
+            <span className={styles.kvLabel}>Expires</span>
+            <span className={styles.kvValue}>{expDate}</span>
           </div>
-          <div className="flex items-center justify-between">
-            <span className="text-white/60">Days remaining</span>
+          <div className={styles.kvRow}>
+            <span className={styles.kvLabel}>Days remaining</span>
             <Badge
               label={isExpired ? 'Expired' : `${days} days`}
               color={isExpired ? 'error' : isExpiringSoon ? 'warning' : 'success'}
@@ -118,15 +119,12 @@ export function LicensePage() {
 
       {/* Feature matrix */}
       <Card title="Features">
-        <div className="divide-y divide-white/10">
+        <div className={styles.dividerList}>
           {Object.entries(FEATURE_LABELS).map(([key, label]) => {
             const enabled = license.features[key] ?? false;
             return (
-              <div
-                key={key}
-                className="flex items-center justify-between py-3 first:pt-0 last:pb-0"
-              >
-                <span className="text-sm text-white">{label}</span>
+              <div key={key} className={styles.dividerRow}>
+                <span className={styles.kvLabel}>{label}</span>
                 <Badge
                   label={enabled ? 'Enabled' : 'Not included'}
                   color={enabled ? 'success' : 'auto'}
@@ -139,16 +137,13 @@ export function LicensePage() {
 
       {/* Limits */}
       <Card title="Limits">
-        <div className="divide-y divide-white/10">
+        <div className={styles.dividerList}>
           {Object.entries(LIMIT_LABELS).map(([key, label]) => {
             const value = license.limits[key];
             return (
-              <div
-                key={key}
-                className="flex items-center justify-between py-3 first:pt-0 last:pb-0"
-              >
-                <span className="text-sm text-white/60">{label}</span>
-                <span className="text-sm font-mono text-white">
+              <div key={key} className={styles.dividerRow}>
+                <span className={styles.kvLabel}>{label}</span>
+                <span className={styles.kvValueMono}>
                   {value !== undefined ? value : '—'}
                 </span>
               </div>
@@ -160,7 +155,7 @@ export function LicensePage() {
       {/* License token */}
       <Card title="License Token">
         <div className="space-y-3">
-          <p className="text-sm text-white/60">
+          <p className={styles.description}>
             Use this token when registering Cameleer agents with your tenant.
           </p>
           <button
@@ -171,8 +166,8 @@ export function LicensePage() {
             {tokenExpanded ? 'Hide token' : 'Show token'}
           </button>
           {tokenExpanded && (
-            <div className="mt-2 rounded bg-white/5 border border-white/10 p-3 overflow-x-auto">
-              <code className="text-xs font-mono text-white/80 break-all">
+            <div className={styles.tokenBlock}>
+              <code className={styles.tokenCode}>
                 {license.token}
               </code>
             </div>
diff --git a/ui/src/styles/platform.module.css b/ui/src/styles/platform.module.css
new file mode 100644
index 0000000..ed61388
--- /dev/null
+++ b/ui/src/styles/platform.module.css
@@ -0,0 +1,20 @@
+.heading { font-size: 1.5rem; font-weight: 600; color: var(--text-primary); }
+.textPrimary { color: var(--text-primary); }
+.textMuted { color: var(--text-muted); }
+.mono { font-family: var(--font-mono); }
+
+.kvRow { display: flex; align-items: center; justify-content: space-between; width: 100%; }
+.kvLabel { font-size: 0.875rem; color: var(--text-muted); }
+.kvValue { font-size: 0.875rem; color: var(--text-primary); }
+.kvValueMono { font-size: 0.875rem; color: var(--text-primary); font-family: var(--font-mono); }
+
+.dividerList { display: flex; flex-direction: column; }
+.dividerList > * + * { border-top: 1px solid var(--border-subtle); }
+.dividerRow { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0; }
+.dividerRow:first-child { padding-top: 0; }
+.dividerRow:last-child { padding-bottom: 0; }
+
+.description { font-size: 0.875rem; color: var(--text-muted); }
+
+.tokenBlock { margin-top: 0.5rem; border-radius: var(--radius-sm); background: var(--bg-inset); border: 1px solid var(--border-subtle); padding: 0.75rem; overflow-x: auto; }
+.tokenCode { font-size: 0.75rem; font-family: var(--font-mono); color: var(--text-secondary); word-break: break-all; }