feat: fix darkmode

Lasserich · Lasserich · commit 26001d91dd0b · 2025-08-21T22:13:52.000+02:00
diff --git a/src/components/Hints/CrossplaneHint.tsx b/src/components/Hints/CrossplaneHint.tsx
@@ -1,8 +1,9 @@
 import { Card, CardHeader, ProgressIndicator, Button } from '@ui5/webcomponents-react';
 import { RadarChart } from '@ui5/webcomponents-react-charts';
 import { useTranslation } from 'react-i18next';
+import cx from 'clsx';
 import { APIError } from '../../lib/api/error';
-import { getDisabledCardStyle } from './Hints';
+import { styles } from './Hints';
 import { ManagedResourceItem, Condition } from '../../lib/shared/types';
 import React from 'react';
 
@@ -25,8 +26,6 @@ export const CrossplaneHint: React.FC<CrossplaneHintProps> = ({
 }) => {
   const { t } = useTranslation();
 
-  const cardStyle = enabled ? {} : getDisabledCardStyle();
-
   // Aggregate healthiness by resource type
   const resourceTypeHealth: Record<string, number> = {};
   const resourceTypeTotal: Record<string, number> = {};
@@ -41,11 +40,26 @@ export const CrossplaneHint: React.FC<CrossplaneHintProps> = ({
     }
   });
 
-  // Prepare radar chart dataset: each resource type is a dimension, value is percent healthy
-  const radarDataset = Object.keys(resourceTypeTotal).map(type => ({
-    type,
-    health: `${Math.round(((resourceTypeHealth[type] || 0) / resourceTypeTotal[type]) * 100)}%`
-  }));
+  // Prepare radar chart dataset: each resource type is a dimension, values are counts for healthy and creating
+  const radarDataset = Object.keys(resourceTypeTotal).map(type => {
+    const total = resourceTypeTotal[type];
+    const healthy = resourceTypeHealth[type] || 0;
+    
+    // Count creating resources (no conditions yet or unknown status)
+    const creating = allItems.filter((item: ManagedResourceItem) => {
+      if (item.kind !== type) return false;
+      const conditions = item.status?.conditions || [];
+      const hasReadyCondition = conditions.some((c: Condition) => c.type === 'Ready');
+      const hasSyncedCondition = conditions.some((c: Condition) => c.type === 'Synced');
+      return !hasReadyCondition || !hasSyncedCondition;
+    }).length;
+    
+    return {
+      type,
+      healthy: Math.round((healthy / total) * 100),
+      creating: Math.round((creating / total) * 100)
+    };
+  });
 
   // Progress bar logic (unchanged)
   const healthyCount = allItems.filter((item: ManagedResourceItem) => {
@@ -88,19 +102,23 @@ export const CrossplaneHint: React.FC<CrossplaneHintProps> = ({
             }
             titleText={t('Hints.CrossplaneHint.title')}
             subtitleText={t('Hints.CrossplaneHint.subtitle')}
-            interactive={true}
+            interactive={enabled}
           />
         }
-        style={cardStyle}
-        onClick={() => {
+        className={cx({
+          [styles['disabled']]: !enabled,
+        })}
+        onClick={enabled ? () => {
           const el = document.querySelector('.crossplane-table-element');
           if (el) {
             el.scrollIntoView({ behavior: 'smooth', block: 'start' });
           }
-        }}
-        onMouseEnter={() => setHovered(true)}
-        onMouseLeave={() => setHovered(false)}
+        } : undefined}
+        onMouseEnter={enabled ? () => setHovered(true) : undefined}
+        onMouseLeave={enabled ? () => setHovered(false) : undefined}
       >
+        {/* Disabled overlay */}
+        {!enabled && <div className={styles.disabledOverlay} />}
         
         <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '1rem 0' }}>
           {isLoading ? (
@@ -138,19 +156,36 @@ export const CrossplaneHint: React.FC<CrossplaneHintProps> = ({
             />
           )}
         </div>
-        {/* Minimal RadarChart for resource healthiness, only show on hover */}
-        {hovered && !isLoading && !error && radarDataset.length > 0 && (
-          <div style={{ width: 260, height: 260, display: 'flex', justifyContent: 'center', alignItems: 'center', margin: '1rem 0', overflow: 'visible' }}>
+        {/* RadarChart for resource healthiness, only show on hover when enabled */}
+        {enabled && hovered && !isLoading && !error && radarDataset.length > 0 && (
+          <div style={{ 
+            width: '100%', 
+            height: 300, 
+            display: 'flex', 
+            justifyContent: 'center', 
+            alignItems: 'center', 
+            margin: '1rem 0',
+            overflow: 'visible'
+          }}>
             <RadarChart
               dataset={radarDataset}
               dimensions={[{ accessor: 'type' }]}
-              measures={[{
-                accessor: 'health',
-                color: 'green',
-                hideDataLabel: true,
-              }]}
-              style={{ width: 220, height: 220 }}
-              noLegend={true}
+              measures={[
+                {
+                  accessor: 'healthy',
+                  color: '#28a745',
+                  hideDataLabel: true,
+                  label: 'Healthy (%)'
+                },
+                {
+                  accessor: 'creating',
+                  color: '#fd7e14',
+                  hideDataLabel: true,
+                  label: 'Creating (%)'
+                }
+              ]}
+              style={{ width: '100%', height: '100%', minWidth: 280, minHeight: 280 }}
+              noLegend={false}
             />
           </div>
         )}
diff --git a/src/components/Hints/GitOpsHint.tsx b/src/components/Hints/GitOpsHint.tsx
@@ -1,7 +1,8 @@
 import { Card, CardHeader, ProgressIndicator, Button } from '@ui5/webcomponents-react';
 import { useTranslation } from 'react-i18next';
+import cx from 'clsx';
 import { APIError } from '../../lib/api/error';
-import { getDisabledCardStyle } from './Hints';
+import { styles } from './Hints';
 import { ManagedResourceItem } from '../../lib/shared/types';
 
 interface GitOpsHintProps {
@@ -48,8 +49,6 @@ export const GitOpsHint: React.FC<GitOpsHintProps> = ({
       : 'None'
     : 'None';
 
-  const cardStyle = enabled ? {} : getDisabledCardStyle();
-
   return (
     <div style={{ position: 'relative', width: '100%' }}>
       <Card
@@ -65,17 +64,21 @@ export const GitOpsHint: React.FC<GitOpsHintProps> = ({
             }
             titleText={t('Hints.GitOpsHint.title')}
             subtitleText={t('Hints.GitOpsHint.subtitle')}
-            interactive={true}
+            interactive={enabled}
           />
         }
-        style={cardStyle}
-        onClick={() => {
+        className={cx({
+          [styles['disabled']]: !enabled,
+        })}
+        onClick={enabled ? () => {
           const el = document.querySelector('.cp-page-section-gitops');
           if (el) {
             el.scrollIntoView({ behavior: 'smooth', block: 'start' });
           }
-        }}
+        } : undefined}
       >
+        {/* Disabled overlay */}
+        {!enabled && <div className={styles.disabledOverlay} />}
         <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '1rem 0' }}>
           {isLoading ? (
             <ProgressIndicator
diff --git a/src/components/Hints/Hints.module.css b/src/components/Hints/Hints.module.css
@@ -0,0 +1,29 @@
+.disabled {
+  position: relative;
+}
+
+.disabledOverlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.6);
+  backdrop-filter: grayscale(0.9) blur(0.5px);
+  border-radius: inherit;
+  z-index: 1;
+  pointer-events: none;
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  .disabledOverlay {
+    background: rgba(0, 0, 0, 0.4);
+  }
+}
+
+/* Also check for UI5 theme variables for dark themes */
+[data-ui5-theme-root*="dark"] .disabledOverlay,
+[data-ui5-theme*="dark"] .disabledOverlay {
+  background: rgba(0, 0, 0, 0.4);
+}
diff --git a/src/components/Hints/Hints.tsx b/src/components/Hints/Hints.tsx
@@ -14,12 +14,8 @@ interface HintsProps {
   mcp: ControlPlaneType;
 }
 
-// Utility function to create disabled card style
-export const getDisabledCardStyle = () => ({
-  background: '#f3f3f3',
-  filter: 'grayscale(0.7)',
-  opacity: 0.7,
-});
+// Export styles for use by hint components
+export { default as styles } from './Hints.module.css';
 
 // Utility function to flatten managed resources
 export const flattenManagedResources = (managedResources: any): ManagedResourceItem[] => {
@@ -50,9 +46,10 @@ const Hints: React.FC<HintsProps> = ({ mcp }) => {
         justifyContent: 'space-between',
         alignItems: 'stretch',
         width: '100%',
-        height: '150px',
-        zIndex: 9999,
-        position: 'relative',
+        // This breaks the scrolling currently since its zIndex is higher than the header bar
+        // height: '150px',
+        // zIndex: 9999,
+        // position: 'relative',
       }}
     >
       <CrossplaneHint
diff --git a/src/components/Hints/VaultHint.tsx b/src/components/Hints/VaultHint.tsx
@@ -1,7 +1,8 @@
 import { Card, CardHeader, ProgressIndicator, Button } from '@ui5/webcomponents-react';
 import { useTranslation } from 'react-i18next';
+import cx from 'clsx';
 import { APIError } from '../../lib/api/error';
-import { getDisabledCardStyle } from './Hints';
+import { styles } from './Hints';
 import { ManagedResourceItem } from '../../lib/shared/types';
 
 interface VaultHintProps {
@@ -23,8 +24,6 @@ export const VaultHint: React.FC<VaultHintProps> = ({
 }) => {
   const { t } = useTranslation();
 
-  const cardStyle = enabled ? {} : getDisabledCardStyle();
-
   return (
     <div style={{ position: 'relative', width: '100%' }}>
       <Card
@@ -43,8 +42,12 @@ export const VaultHint: React.FC<VaultHintProps> = ({
             interactive={false}
           />
         }
-        style={cardStyle}
+        className={cx({
+          [styles['disabled']]: !enabled,
+        })}
       >
+        {/* Disabled overlay */}
+        {!enabled && <div className={styles.disabledOverlay} />}
         <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '1rem 0' }}>
           {isLoading ? (
             <ProgressIndicator
@@ -62,7 +65,7 @@ export const VaultHint: React.FC<VaultHintProps> = ({
             />
           ) : (
             <ProgressIndicator
-              value={allItems.length > 0 ? 100 : 0}
+              value={allItems.length > 0 ? 0 : 0}
               displayValue={enabled ? (allItems.length > 0 ? `100${t('Hints.VaultHint.progressAvailable')}` : t('Hints.VaultHint.noResources')) : t('Hints.VaultHint.inactive')}
               valueState={enabled ? (allItems.length > 0 ? 'Positive' : 'None') : 'None'}
               style={{ width: '80%', maxWidth: 500, minWidth: 120 }}
