fixes

Author: lucasgoral

public/yaml-icon-dark.svg

@@ -116,9 +116,10 @@ export default function FluxList() {
         accessor: 'created',
       },
       {
-        Header: '',
-        accessor: 'item',
-        hAlign: 'End',
+        Header: 'YAML',
+        hAlign: 'Center',
+        width: 85,
+        accessor: 'yaml',
         Cell: (cellData: CellData<FluxRow>) => (
           <YamlViewButton resourceObject={cellData.cell.row.original?.item} />
         ),

public/yaml-icon-light.svg

@@ -0,0 +1,14 @@
+import { useThemeMode } from '../../lib/useThemeMode.ts';
+
+export const YamlIcon = () => {
+  const { isDarkMode } = useThemeMode();
+  return (
+    <img
+      className="logo"
+      src={isDarkMode ? '/yaml-icon-dark.svg' : '/yaml-icon-light.svg'}
+      alt="Yaml icon"
+      width={32}
+      height={16}
+    />
+  );
+};

public/yaml-icon.svg

@@ -8,6 +8,7 @@ import {
   removeManagedFieldsProperty,
   Resource,
 } from '../../utils/removeManagedFieldsProperty.ts';
+import { YamlIcon } from './YamlIcon.tsx';
 
 export type YamlViewButtonProps = {
   resourceObject: unknown;
@@ -54,13 +55,7 @@ export const YamlViewButton: FC<YamlViewButtonProps> = ({ resourceObject }) => {
           setIsOpen(true);
         }}
       >
-        <img
-          className="logo"
-          src="/yaml-icon.svg"
-          alt="Yaml icon"
-          width={32}
-          height={16}
-        />
+        <YamlIcon />
       </Button>
     </span>
   );

src/components/ControlPlane/FluxList.tsx

@@ -3,6 +3,7 @@ import { FC, useState } from 'react';
 import { YamlLoader } from './YamlLoader.tsx';
 import { useTranslation } from 'react-i18next';
 import styles from './YamlViewer.module.css';
+import { YamlIcon } from './YamlIcon.tsx';
 
 export type YamlViewButtonProps = {
   workspaceName?: string;
@@ -54,13 +55,7 @@ export const YamlViewButtonWithLoader: FC<YamlViewButtonProps> = ({
           setIsOpen(true);
         }}
       >
-        <img
-          className="logo"
-          src="/yaml-icon.svg"
-          alt="Yaml icon"
-          width={32}
-          height={16}
-        />
+        <YamlIcon />
       </Button>
     </span>
   );

src/components/Yaml/YamlIcon.tsx

@@ -14,6 +14,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+
   img {
     width: 32px;
     transform: translateY(1px);