Fix UI hook ordering and simplify Customize button states

src/common/components/organisms/MobileNavbar.tsx

@@ -135,8 +135,10 @@ const MobileNavbar: React.FC<MobileNavbarProps> = ({
     rightGradientOpacity: 1,
   });
 
-  // Early return if there are no tabs
-  if (!tabs || tabs.length === 0) return null;
+  const uiColors = useUIColors();
+  const navFontColor = "var(--ns-nav-font-color, #0f172a)";
+  const navFontFamily = "var(--ns-nav-font, var(--font-sans, Inter, system-ui, -apple-system, sans-serif))";
+  const backgroundColor = uiColors.backgroundColor || theme?.properties?.background || "white";
 
   /**
    * Gets the appropriate display name for a tab, using custom tab names if available
@@ -309,11 +311,7 @@ const MobileNavbar: React.FC<MobileNavbarProps> = ({
     }
   }, [tabs, selected, onSelect]);
 
-  // Get theme colors for active tab indicators
-  const navFontColor = "var(--ns-nav-font-color, #0f172a)";
-  const navFontFamily = "var(--ns-nav-font, var(--font-sans, Inter, system-ui, -apple-system, sans-serif))";
-  const uiColors = useUIColors();
-  const backgroundColor = uiColors.backgroundColor || theme?.properties?.background || "white";
+  if (!tabs || tabs.length === 0) return null;
 
   return (
     <Tabs

src/common/components/organisms/TabBar.tsx

@@ -71,6 +71,24 @@ function TabBar({
       uiColors.castButtonFontColor,
     ],
   );
+  const customizeButtonStyle = React.useMemo<React.CSSProperties>(
+    () => ({
+      "--cast-bg-color": castButtonColors.backgroundColor,
+      "--cast-hover-color": castButtonColors.hoverColor,
+      "--cast-active-color": castButtonColors.activeColor,
+      backgroundColor: "var(--cast-bg-color)",
+      color: castButtonColors.fontColor,
+      fontFamily: uiColors.fontFamily,
+      boxShadow: "none",
+    }),
+    [
+      castButtonColors.activeColor,
+      castButtonColors.backgroundColor,
+      castButtonColors.fontColor,
+      castButtonColors.hoverColor,
+      uiColors.fontFamily,
+    ],
+  );
 
   const { getIsLoggedIn, getIsInitializing, homebaseLoadTab, setCurrentTabName } = useAppStore((state) => ({
     setModalOpen: state.setup.setModalOpen,
@@ -314,35 +332,12 @@ function TabBar({
               {!inEditMode && (
                 <Button
                   onClick={() => setEditMode(true)}
-                  className="flex items-center rounded-md p-2 font-semibold transition-colors"
-                  style={{
-                    backgroundColor: castButtonColors.backgroundColor,
-                    color: castButtonColors.fontColor,
-                    fontFamily: uiColors.fontFamily,
-                    boxShadow: "none",
-                  }}
-                  onMouseEnter={(e) => {
-                    e.currentTarget.style.backgroundColor = castButtonColors.hoverColor;
-                  }}
-                  onMouseLeave={(e) => {
-                    e.currentTarget.style.backgroundColor = castButtonColors.backgroundColor;
-                  }}
-                  onMouseDown={(e) => {
-                    e.currentTarget.style.backgroundColor = castButtonColors.activeColor;
-                  }}
-                  onMouseUp={(e) => {
-                    e.currentTarget.style.backgroundColor = castButtonColors.hoverColor;
-                  }}
-                  onFocus={(e) => {
-                    e.currentTarget.style.backgroundColor = castButtonColors.hoverColor;
-                  }}
-                  onBlur={(e) => {
-                    e.currentTarget.style.backgroundColor = castButtonColors.backgroundColor;
-                  }}
+                  className="flex items-center rounded-md p-2 font-semibold transition-colors bg-[var(--cast-bg-color)] hover:bg-[var(--cast-hover-color)] active:bg-[var(--cast-active-color)] focus:bg-[var(--cast-hover-color)] focus-visible:outline-none focus-visible:ring-0"
+                  style={customizeButtonStyle}
                 >
-                  <FaPaintbrush style={{ color: castButtonColors.fontColor }} />
+                  <FaPaintbrush />
                   {!isMobile && (
-                    <span className="ml-2" style={{ color: castButtonColors.fontColor }}>
+                    <span className="ml-2">
                       Customize
                     </span>
                   )}

src/common/lib/hooks/useUIColors.ts

@@ -40,6 +40,24 @@ export const useUIColors = ({ systemConfig }: UseUIColorsProps = {}) => {
     }
 
     const parsedFontFamily = extractFontFamilyFromUrl(ui?.url);
+    const castButton = {
+      ...(ui?.castButton || {}),
+      backgroundColor:
+        ui?.castButton?.backgroundColor ??
+        cssCastButtonBackgroundColor ??
+        ui?.primaryColor ??
+        "rgb(37, 99, 235)",
+      hoverColor:
+        ui?.castButton?.hoverColor ??
+        cssCastButtonHoverColor ??
+        ui?.primaryHoverColor ??
+        "rgb(29, 78, 216)",
+      activeColor:
+        ui?.castButton?.activeColor ??
+        cssCastButtonActiveColor ??
+        ui?.primaryActiveColor ??
+        "rgb(30, 64, 175)",
+    };
 
     return {
       fontColor: ui?.fontColor || cssFontColor || "#0f172a",
@@ -56,20 +74,7 @@ export const useUIColors = ({ systemConfig }: UseUIColorsProps = {}) => {
       primaryColor: ui?.primaryColor || "rgb(37, 99, 235)",
       primaryHoverColor: ui?.primaryHoverColor || "rgb(29, 78, 216)",
       primaryActiveColor: ui?.primaryActiveColor || "rgb(30, 64, 175)",
-      castButton: ui?.castButton || {
-        backgroundColor:
-          cssCastButtonBackgroundColor ||
-          ui?.primaryColor ||
-          "rgb(37, 99, 235)",
-        hoverColor:
-          cssCastButtonHoverColor ||
-          ui?.primaryHoverColor ||
-          "rgb(29, 78, 216)",
-        activeColor:
-          cssCastButtonActiveColor ||
-          ui?.primaryActiveColor ||
-          "rgb(30, 64, 175)",
-      },
+      castButton,
     };
   }, [systemConfig]);
 };