feat: [IAC-5075]: dark theme support

Author: supritbeck-harness

plugins/harness-iacm/src/components/WorkspaceList/ResourceDetailDrawer/AttributeList.tsx

@@ -60,13 +60,11 @@ const AttributeList: React.FC<AttributeListProps> = ({
               <Box className={classes.valueComparison}>
                 <ValueDisplay
                   value={driftValue}
-                  isDrift
                   label="Actual Value:"
                   copyTopOffset="25px"
                 />
                 <ValueDisplay
                   value={item.value}
-                  isDrift
                   label="Expected Value:"
                   copyTopOffset="25px"
                 />

plugins/harness-iacm/src/components/WorkspaceList/ResourceDetailDrawer/ValueDisplay.tsx

@@ -10,13 +10,17 @@ const useStyles = makeStyles(theme => ({
     borderRadius: 4,
     overflow: 'auto',
     marginTop: theme.spacing(0.5),
-    border: '1px solid #e0e0e0',
+    border: `1px solid ${theme.palette.divider}`,
     fontFamily: 'inherit',
+    backgroundColor:
+      theme.palette.type === 'dark'
+        ? theme.palette.background.default
+        : '#F3F3FA',
   },
   attributeValue: {
     fontSize: '1rem',
     fontWeight: 400,
-    color: '#212121',
+    color: theme.palette.text.primary,
     flex: 1,
     wordBreak: 'break-word',
     fontFamily: 'inherit',
@@ -35,47 +39,40 @@ const useStyles = makeStyles(theme => ({
   stringValue: {
     padding: '8px',
     borderRadius: 4,
-    border: '1px solid #e0e0e0',
+    border: `1px solid ${theme.palette.divider}`,
     fontFamily: 'inherit',
+    backgroundColor:
+      theme.palette.type === 'dark'
+        ? theme.palette.background.default
+        : '#F3F3FA',
   },
 }));
 
 interface ValueDisplayProps {
   value: any;
-  isDrift?: boolean;
   showCopy?: boolean;
   label?: string;
   copyTopOffset?: string;
 }
 
 export const formatValueDisplay = (
   value: any,
-  isDrift: boolean = false,
   classes: any,
 ): React.ReactNode => {
   if (typeof value === 'object') {
     return (
-      <pre
-        className={classes.jsonValue}
-        style={{ backgroundColor: isDrift ? '' : '#F3F3FA' }}
-      >
-        {JSON.stringify(value, null, 2)}
-      </pre>
+      <pre className={classes.jsonValue}>{JSON.stringify(value, null, 2)}</pre>
     );
   }
   return (
-    <div
-      className={classes.stringValue}
-      style={{ backgroundColor: isDrift ? '' : '#F3F3FA' }}
-    >
+    <div className={classes.stringValue}>
       {isValueUnknown(value) ? 'Unknown' : String(value)}
     </div>
   );
 };
 
 const ValueDisplay: React.FC<ValueDisplayProps> = ({
   value,
-  isDrift = false,
   showCopy = true,
   label,
   copyTopOffset,
@@ -93,7 +90,7 @@ const ValueDisplay: React.FC<ValueDisplayProps> = ({
         </Box>
       )}
       {label && <Typography className={classes.valueLabel}>{label}</Typography>}
-      {formatValueDisplay(value, isDrift, classes)}
+      {formatValueDisplay(value, classes)}
     </Box>
   );
 };

plugins/harness-iacm/src/components/WorkspaceList/ResourceDetailDrawer/styles.ts

@@ -76,30 +76,31 @@ export const useStyles = makeStyles(theme => ({
     color: theme.palette.text.secondary,
   },
   attributeRow: {
-    backgroundColor: '#ffffff',
-    border: '1px solid #e0e0e0',
+    backgroundColor: theme.palette.background.paper,
+    border: `1px solid ${theme.palette.divider}`,
     borderRadius: 4,
     marginBottom: theme.spacing(1),
     padding: theme.spacing(1.5),
     paddingBottom: theme.spacing(1),
     position: 'relative',
   },
   attributeRowDrift: {
-    backgroundColor: '#fff3e0',
+    backgroundColor:
+      theme.palette.type === 'dark' ? 'rgba(255, 183, 77, 0.1)' : '#fff3e0',
     borderColor: '#ffb74d',
   },
   attributeKey: {
     fontWeight: 500,
     marginBottom: theme.spacing(0.75),
-    color: '#424242',
+    color: theme.palette.text.primary,
     display: 'flex',
     alignItems: 'center',
     gap: theme.spacing(0.5),
     fontFamily: 'inherit',
   },
   attributeValue: {
     fontWeight: 400,
-    color: '#212121',
+    color: theme.palette.text.primary,
     flex: 1,
     wordBreak: 'break-word',
     fontFamily: 'inherit',
@@ -109,14 +110,16 @@ export const useStyles = makeStyles(theme => ({
     borderRadius: 4,
     overflow: 'auto',
     marginTop: theme.spacing(0.5),
-    border: '1px solid #e0e0e0',
+    border: `1px solid ${theme.palette.divider}`,
     fontFamily: 'inherit',
   },
   deletedBadge: {
     fontWeight: 600,
     textTransform: 'uppercase',
-    backgroundColor: '#ffebee',
-
+    backgroundColor:
+      theme.palette.type === 'dark' ? 'rgba(244, 67, 54, 0.2)' : '#ffebee',
+    color:
+      theme.palette.type === 'dark' ? '#ffcdd2' : theme.palette.text.primary,
     padding: '2px 6px',
     borderRadius: 4,
     display: 'inline-flex',