libs/shared/lib/components/tableUI/TableUI.tsx

@@ -64,9 +64,9 @@ export const TableUI = <T extends Record<string, any>>({ data, fieldConfigs, dro
 
   return (
     <div className="mt-2 w-full overflow-x-auto">
-      <table className="min-w-full bg-white border border-gray-300 rounded-md">
+      <table className="min-w-full bg-light border border-secondary-300 rounded-md">
         <thead>
-          <tr className="bg-gray-100 border-b">
+          <tr className="bg-secondary-100 border-b">
             {fieldConfigs.map((field) => (
               <th key={field.key.toString()} className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
                 {field.label}
@@ -79,7 +79,7 @@ export const TableUI = <T extends Record<string, any>>({ data, fieldConfigs, dro
           {data.map((item, index) => (
             <tr key={index} className="border-b rounded-md">
               {fieldConfigs.map((field) => (
-                <td key={field.key.toString()} className="px-6 py-4 text-sm text-gray-700">
+                <td key={field.key.toString()} className="px-6 py-4 text-sm text-light-700">
                   {editingIndex === index ? (
                     field.type === 'dropdown' ? (
                       <Input
@@ -103,7 +103,7 @@ export const TableUI = <T extends Record<string, any>>({ data, fieldConfigs, dro
                   )}
                 </td>
               ))}
-              <td className="px-6 py-4 text-sm text-gray-700">
+              <td className="px-6 py-4 text-sm text-secondary-700">
                 <div className="flex space-x-2">
                   {editingIndex === index ? (
                     <>

libs/shared/lib/vis/components/VisualizationPanel.tsx

@@ -136,7 +136,7 @@ export const VisualizationPanel = ({ fullSize }: { fullSize: () => void }) => {
           </div>
         )}
       </div>
-      <VisualizationTabBar fullSize={fullSize} exportImage={exportImage} />
+      <VisualizationTabBar fullSize={fullSize} exportImage={exportImage} handleSelect={handleSelect} />
     </div>
   );
 };

libs/shared/lib/vis/components/VisualizationTabBar.tsx

@@ -7,7 +7,7 @@ import { useActiveSaveState, useActiveSaveStateAuthorization, useAppDispatch, us
 import { addVisualization, removeVisualization, reorderVisState, setActiveVisualization } from '../../data-access/store/visualizationSlice';
 import { Visualizations } from './VisualizationPanel';
 
-export default function VisualizationTabBar(props: { fullSize: () => void; exportImage: () => void }) {
+export default function VisualizationTabBar(props: { fullSize: () => void; exportImage: () => void; handleSelect: () => void }) {
   const { activeVisualizationIndex, openVisualizationArray } = useVisualization();
   const saveStateAuthorization = useActiveSaveStateAuthorization();
   const [open, setOpen] = useState(false);
@@ -34,6 +34,7 @@ export default function VisualizationTabBar(props: { fullSize: () => void; expor
 
   const onDelete = (id: number) => {
     dispatch(removeVisualization(id));
+    props.handleSelect();
   };
 
   useEffect(() => {