ci: update artifact hub metadata for v0.3.4

fix: add dark mode support using MUI CSS variables

artifacthub-pkg.yml

@@ -1,4 +1,4 @@
-version: 0.3.1
+version: 0.3.4
 name: headlamp-polaris-plugin
 displayName: Polaris
 createdAt: "2026-02-05T19:00:00Z"
@@ -28,7 +28,7 @@ maintainers:
   - name: cpfarhood
     email: "chris@farhood.org"
 annotations:
-  headlamp/plugin/archive-url: "https://github.com/cpfarhood/headlamp-polaris-plugin/releases/download/v0.3.1/headlamp-polaris-plugin-0.3.1.tar.gz"
+  headlamp/plugin/archive-url: "https://github.com/cpfarhood/headlamp-polaris-plugin/releases/download/v0.3.4/headlamp-polaris-plugin-0.3.4.tar.gz"
   headlamp/plugin/version-compat: ">=0.26"
-  headlamp/plugin/archive-checksum: sha256:36a79050e920ee26c9371763182fc8bc2a4ddcac5086e108a7828f0467b111c8
+  headlamp/plugin/archive-checksum: sha256:175a7bdedaf6a9329abc9041b505bfa07029e1ae512fc8207301d216e01ce5b1
   headlamp/plugin/distro-compat: in-cluster

package.json

@@ -1,6 +1,6 @@
 {
   "name": "headlamp-polaris-plugin",
-  "version": "0.3.1",
+  "version": "0.3.4",
   "description": "Headlamp plugin for Fairwinds Polaris audit results",
   "scripts": {
     "start": "headlamp-plugin start",

src/components/AppBarScoreBadge.tsx

@@ -1,5 +1,3 @@
-import { Chip } from '@mui/material';
-import { Shield as ShieldIcon } from '@mui/icons-material';
 import React from 'react';
 import { useHistory } from 'react-router-dom';
 import { usePolarisDataContext } from '../api/PolarisDataContext';
@@ -21,10 +19,10 @@ export default function AppBarScoreBadge() {
   const score = computeScore(counts);
 
   // Color based on score
-  const getColor = (score: number): 'success' | 'warning' | 'error' => {
-    if (score >= 80) return 'success';
-    if (score >= 50) return 'warning';
-    return 'error';
+  const getColor = (score: number): string => {
+    if (score >= 80) return '#4caf50'; // green
+    if (score >= 50) return '#ff9800'; // orange
+    return '#f44336'; // red
   };
 
   const handleClick = () => {
@@ -32,13 +30,26 @@ export default function AppBarScoreBadge() {
   };
 
   return (
-    <Chip
-      icon={<ShieldIcon />}
-      label={`Polaris: ${score}%`}
-      color={getColor(score)}
-      size="small"
+    <button
       onClick={handleClick}
-      style={{ cursor: 'pointer', marginRight: '8px' }}
-    />
+      style={{
+        cursor: 'pointer',
+        marginRight: '8px',
+        padding: '4px 12px',
+        borderRadius: '16px',
+        border: 'none',
+        backgroundColor: getColor(score),
+        color: 'white',
+        fontSize: '13px',
+        fontWeight: 500,
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: '4px',
+      }}
+      aria-label={`Polaris cluster score: ${score}%`}
+    >
+      <span>🛡️</span>
+      <span>Polaris: {score}%</span>
+    </button>
   );
 }

src/components/DashboardView.tsx

@@ -8,8 +8,6 @@ import {
   SimpleTable,
   StatusLabel,
 } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
-import { Button } from '@mui/material';
-import { Refresh as RefreshIcon } from '@mui/icons-material';
 import React from 'react';
 import { AuditData, computeScore, countResults, ResultCounts } from '../api/polaris';
 import { usePolarisDataContext } from '../api/PolarisDataContext';
@@ -114,9 +112,25 @@ export default function DashboardView() {
             <span style={{ fontSize: '14px', color: 'var(--mui-palette-text-secondary, #666)' }}>
               Last updated: {formatAuditTime(data.AuditTime)}
             </span>
-            <Button variant="outlined" startIcon={<RefreshIcon />} onClick={refresh} size="small">
-              Refresh
-            </Button>
+            <button
+              onClick={refresh}
+              style={{
+                padding: '6px 16px',
+                backgroundColor: 'transparent',
+                color: 'var(--mui-palette-primary-main, #1976d2)',
+                border: '1px solid var(--mui-palette-primary-main, #1976d2)',
+                borderRadius: '4px',
+                cursor: 'pointer',
+                fontSize: '13px',
+                fontWeight: 500,
+                display: 'inline-flex',
+                alignItems: 'center',
+                gap: '4px',
+              }}
+            >
+              <span>🔄</span>
+              <span>Refresh</span>
+            </button>
           </div>
         )}
       </div>

src/components/ExemptionManager.tsx

@@ -1,6 +1,5 @@
 import { NameValueTable, SectionBox, Dialog } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
 import { ApiProxy } from '@kinvolk/headlamp-plugin/lib';
-import { Button, Checkbox, FormControlLabel, FormGroup } from '@mui/material';
 import React from 'react';
 import { Result } from '../api/polaris';
 import { getCheckName } from '../api/checkMapping';
@@ -147,16 +146,23 @@ export default function ExemptionManager({
             rows={currentExemptions.map(exemption => ({
               name: exemption,
               value: (
-                <Button
-                  size="small"
-                  color="error"
+                <button
+                  style={{
+                    padding: '4px 12px',
+                    backgroundColor: 'var(--mui-palette-error-main, #f44336)',
+                    color: 'var(--mui-palette-error-contrastText, #fff)',
+                    border: 'none',
+                    borderRadius: '4px',
+                    cursor: 'pointer',
+                    fontSize: '12px',
+                  }}
                   onClick={() => {
                     // Remove exemption logic
                     alert('Remove exemption: ' + exemption);
                   }}
                 >
                   Remove
-                </Button>
+                </button>
               ),
             }))}
           />
@@ -164,58 +170,114 @@ export default function ExemptionManager({
           <p>No exemptions configured</p>
         )}
 
-        <Button
-          variant="outlined"
+        <button
           onClick={() => setDialogOpen(true)}
           disabled={failingChecks.length === 0}
-          style={{ marginTop: '8px' }}
+          style={{
+            marginTop: '8px',
+            padding: '6px 16px',
+            backgroundColor:
+              failingChecks.length === 0
+                ? 'var(--mui-palette-action-disabledBackground, #e0e0e0)'
+                : 'transparent',
+            color:
+              failingChecks.length === 0
+                ? 'var(--mui-palette-action-disabled, #9e9e9e)'
+                : 'var(--mui-palette-primary-main, #1976d2)',
+            border: '1px solid',
+            borderColor:
+              failingChecks.length === 0
+                ? 'var(--mui-palette-divider, #e0e0e0)'
+                : 'var(--mui-palette-primary-main, #1976d2)',
+            borderRadius: '4px',
+            cursor: failingChecks.length === 0 ? 'not-allowed' : 'pointer',
+            fontSize: '13px',
+          }}
         >
           Add Exemption
-        </Button>
+        </button>
       </SectionBox>
 
       <Dialog open={dialogOpen} onClose={() => setDialogOpen(false)} title="Add Exemptions">
         <div style={{ padding: '16px', minWidth: '400px' }}>
-          <FormControlLabel
-            control={
-              <Checkbox checked={exemptAll} onChange={e => setExemptAll(e.target.checked)} />
-            }
-            label="Exempt from all checks"
-          />
+          <label style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer' }}>
+            <input
+              type="checkbox"
+              checked={exemptAll}
+              onChange={e => setExemptAll(e.target.checked)}
+            />
+            <span>Exempt from all checks</span>
+          </label>
 
           {!exemptAll && (
             <>
               <div style={{ marginTop: '16px', marginBottom: '8px', fontWeight: 600 }}>
                 Select checks to exempt:
               </div>
-              <FormGroup>
+              <div>
                 {failingChecks.map(check => (
-                  <FormControlLabel
+                  <label
                     key={check.checkId}
-                    control={
-                      <Checkbox
-                        checked={selectedChecks.has(check.checkId)}
-                        onChange={() => handleCheckToggle(check.checkId)}
-                      />
-                    }
-                    label={check.checkName}
-                  />
+                    style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: '8px',
+                      marginBottom: '8px',
+                      cursor: 'pointer',
+                    }}
+                  >
+                    <input
+                      type="checkbox"
+                      checked={selectedChecks.has(check.checkId)}
+                      onChange={() => handleCheckToggle(check.checkId)}
+                    />
+                    <span>{check.checkName}</span>
+                  </label>
                 ))}
-              </FormGroup>
+              </div>
             </>
           )}
 
           <div
             style={{ marginTop: '16px', display: 'flex', gap: '8px', justifyContent: 'flex-end' }}
           >
-            <Button onClick={() => setDialogOpen(false)}>Cancel</Button>
-            <Button
-              variant="contained"
+            <button
+              onClick={() => setDialogOpen(false)}
+              style={{
+                padding: '6px 16px',
+                backgroundColor: 'transparent',
+                color: 'var(--mui-palette-primary-main, #1976d2)',
+                border: 'none',
+                borderRadius: '4px',
+                cursor: 'pointer',
+                fontSize: '13px',
+              }}
+            >
+              Cancel
+            </button>
+            <button
               onClick={applyExemptions}
               disabled={applying || (!exemptAll && selectedChecks.size === 0)}
+              style={{
+                padding: '6px 16px',
+                backgroundColor:
+                  applying || (!exemptAll && selectedChecks.size === 0)
+                    ? 'var(--mui-palette-action-disabledBackground, #e0e0e0)'
+                    : 'var(--mui-palette-primary-main, #1976d2)',
+                color:
+                  applying || (!exemptAll && selectedChecks.size === 0)
+                    ? 'var(--mui-palette-action-disabled, #9e9e9e)'
+                    : 'var(--mui-palette-primary-contrastText, #fff)',
+                border: 'none',
+                borderRadius: '4px',
+                cursor:
+                  applying || (!exemptAll && selectedChecks.size === 0) ? 'not-allowed' : 'pointer',
+                fontSize: '13px',
+                fontWeight: 500,
+              }}
             >
               {applying ? 'Applying...' : 'Apply'}
-            </Button>
+            </button>
           </div>
         </div>
       </Dialog>

src/components/PolarisSettings.tsx

@@ -4,7 +4,6 @@ import {
   StatusLabel,
 } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
 import { ApiProxy } from '@kinvolk/headlamp-plugin/lib';
-import { Button } from '@mui/material';
 import React from 'react';
 import {
   getDashboardUrl,
@@ -106,12 +105,20 @@ export default function PolarisSettings(props: PluginSettingsProps) {
                   style={{
                     width: '100%',
                     padding: '4px 8px',
-                    border: '1px solid #ccc',
+                    border: '1px solid var(--mui-palette-divider, #e0e0e0)',
                     borderRadius: '4px',
                     fontSize: '14px',
+                    backgroundColor: 'var(--mui-palette-background-paper, #fff)',
+                    color: 'var(--mui-palette-text-primary, #000)',
                   }}
                 />
-                <div style={{ fontSize: '12px', color: '#666', marginTop: '4px' }}>
+                <div
+                  style={{
+                    fontSize: '12px',
+                    color: 'var(--mui-palette-text-secondary, #666)',
+                    marginTop: '4px',
+                  }}
+                >
                   Examples:
                   <br />• K8s proxy:{' '}
                   <code>/api/v1/namespaces/polaris/services/polaris-dashboard:80/proxy/</code>
@@ -124,14 +131,26 @@ export default function PolarisSettings(props: PluginSettingsProps) {
             name: 'Connection Test',
             value: (
               <div>
-                <Button
-                  variant="contained"
+                <button
                   onClick={testConnection}
                   disabled={testing}
-                  size="small"
+                  style={{
+                    padding: '6px 16px',
+                    backgroundColor: testing
+                      ? 'var(--mui-palette-action-disabledBackground, #e0e0e0)'
+                      : 'var(--mui-palette-primary-main, #1976d2)',
+                    color: testing
+                      ? 'var(--mui-palette-action-disabled, #9e9e9e)'
+                      : 'var(--mui-palette-primary-contrastText, #fff)',
+                    border: 'none',
+                    borderRadius: '4px',
+                    cursor: testing ? 'not-allowed' : 'pointer',
+                    fontSize: '13px',
+                    fontWeight: 500,
+                  }}
                 >
                   {testing ? 'Testing...' : 'Test Connection'}
-                </Button>
+                </button>
                 {testResult && (
                   <div style={{ marginTop: '8px' }}>
                     <StatusLabel status={testResult.success ? 'success' : 'error'}>

src/index.tsx

@@ -66,7 +66,7 @@ registerRoute({
 });
 
 // Register plugin settings
-registerPluginSettings('polaris', PolarisSettings);
+registerPluginSettings('headlamp-polaris-plugin', PolarisSettings, true);
 
 // Register details view section for supported controller types
 registerDetailsViewSection(({ resource }) => {