Fix: An issue that would cause Matugen colors to not apply. (#929)

* Eslint updates

* linter fixes

* Type fixes

* More type fixes

* Fix isvis

* More type fixes

* Type Fixes

* Consolidate logic to manage options

* Linter fixes

* Package lock update

* Update configs

* Version checker

* Debug pipeline

* Package lock update

* Update ci

* Strict check

* Revert ci

* Eslint

* Remove rule since it causes issues in CI

* Actual matugen fix

src/components/menus/dashboard/shortcuts/buttons/RecordingButton.tsx

@@ -15,7 +15,12 @@ const MonitorListDropdown = (): JSX.Element => {
     });
 
     return (
-        <Menu className={'dropdown recording'} halign={Gtk.Align.FILL} onDestroy={() => monitorBinding.drop()} hexpand>
+        <Menu
+            className={'dropdown recording'}
+            halign={Gtk.Align.FILL}
+            onDestroy={() => monitorBinding.drop()}
+            hexpand
+        >
             {bind(monitorList).as((monitors) =>
                 monitors.map((monitor) => {
                     const sanitizedPath = getRecordingPath().replace(/"/g, '\\"');

src/components/menus/dashboard/shortcuts/buttons/ShortcutButtons.tsx

@@ -1,8 +1,8 @@
 import { Widget } from 'astal/gtk3';
-import { ShortcutVariable } from 'src/lib/types/dashboard';
 import { isPrimaryClick } from 'src/lib/utils';
 import { handleClick, hasCommand } from '../helpers';
 import options from 'src/options';
+import { ShortcutVariable } from 'src/lib/types/dashboard.types';
 
 const { left, right } = options.menus.dashboard.shortcuts;
 
@@ -41,7 +41,7 @@ export const LeftShortcut2 = (): JSX.Element => {
         return <box />;
     }
 
-    return <ShortcutButton shortcut={left.shortcut2} className={`dashboard-button`} />;
+    return <ShortcutButton shortcut={left.shortcut2} className={'dashboard-button'} />;
 };
 
 export const LeftShortcut3 = (): JSX.Element => {
@@ -62,7 +62,7 @@ export const LeftShortcut4 = (): JSX.Element => {
         return <box />;
     }
 
-    return <ShortcutButton shortcut={left.shortcut4} className={`dashboard-button `} />;
+    return <ShortcutButton shortcut={left.shortcut4} className={'dashboard-button '} />;
 };
 
 export const RightShortcut1 = (): JSX.Element => {
@@ -70,7 +70,7 @@ export const RightShortcut1 = (): JSX.Element => {
         return <box />;
     }
 
-    return <ShortcutButton shortcut={right.shortcut1} className={`dashboard-button top-button paired`} />;
+    return <ShortcutButton shortcut={right.shortcut1} className={'dashboard-button top-button paired'} />;
 };
 
 export const RightShortcut3 = (): JSX.Element => {
@@ -78,7 +78,7 @@ export const RightShortcut3 = (): JSX.Element => {
         return <box />;
     }
 
-    return <ShortcutButton shortcut={right.shortcut3} className={`dashboard-button top-button paired`} />;
+    return <ShortcutButton shortcut={right.shortcut3} className={'dashboard-button top-button paired'} />;
 };
 
 interface ShortcutButtonProps extends Widget.ButtonProps {

src/components/menus/dashboard/shortcuts/helpers.ts

@@ -1,7 +1,7 @@
 import { bind, execAsync, timeout, Variable } from 'astal';
 import { App } from 'astal/gtk3';
 import { BashPoller } from 'src/lib/poller/BashPoller';
-import { ShortcutVariable } from 'src/lib/types/dashboard';
+import { ShortcutVariable } from 'src/lib/types/dashboard.types';
 import options from 'src/options';
 
 const { left } = options.menus.dashboard.shortcuts;

src/components/menus/dashboard/shortcuts/sections/Column.tsx

@@ -1,7 +1,7 @@
 export const LeftColumn = ({ isVisible, children }: LeftColumnProps): JSX.Element => {
     return (
-        <box className={`card-button-section-container ${isVisible ? 'visible' : ''}`}>
-            {isVisible ? (
+        <box className={`card-button-section-container ${isVisible === true ? 'visible' : ''}`}>
+            {isVisible === true ? (
                 <box vertical hexpand vexpand>
                     {children}
                 </box>
@@ -14,7 +14,7 @@ export const LeftColumn = ({ isVisible, children }: LeftColumnProps): JSX.Elemen
 
 export const RightColumn = ({ children }: RightColumnProps): JSX.Element => {
     return (
-        <box className={`card-button-section-container`}>
+        <box className={'card-button-section-container'}>
             <box vertical hexpand vexpand>
                 {children}
             </box>

src/components/menus/dashboard/shortcuts/sections/Section.tsx

@@ -77,7 +77,9 @@ export const RightShortcuts = (): JSX.Element => {
         <box>
             {Variable.derive(rightBindings, () => {
                 return (
-                    <box className={`container utilities dashboard-card ${!leftCardHidden.get() ? 'paired' : ''}`}>
+                    <box
+                        className={`container utilities dashboard-card ${!leftCardHidden.get() ? 'paired' : ''}`}
+                    >
                         <LeftColumn isVisible={true}>
                             <RightShortcut1 />
                             <SettingsButton />