From 02348073e4c476ae4757dbbd48ef774efdfd2065 Mon Sep 17 00:00:00 2001 From: Willy Ogorzaly Date: Tue, 30 Dec 2025 16:20:49 -0600 Subject: [PATCH 1/9] Align UI elements with community font settings --- .../components/atoms/icons/ExploreIcon.tsx | 2 +- .../components/atoms/icons/HomeIcon.tsx | 2 +- .../components/atoms/icons/LoginIcon.tsx | 2 +- .../components/atoms/icons/LogoutIcon.tsx | 2 +- .../atoms/icons/NotificationsIcon.tsx | 2 +- .../components/atoms/icons/RobotIcon.tsx | 3 +- .../components/atoms/icons/RocketIcon.tsx | 2 +- .../components/atoms/icons/SearchIcon.tsx | 2 +- src/common/components/molecules/Modal.tsx | 6 ++++ .../components/organisms/Navigation.tsx | 2 ++ src/common/components/organisms/Player.tsx | 36 ++++++++++++++++--- src/fidgets/ui/profile.tsx | 7 +++- 12 files changed, 53 insertions(+), 15 deletions(-) diff --git a/src/common/components/atoms/icons/ExploreIcon.tsx b/src/common/components/atoms/icons/ExploreIcon.tsx index ee1171185..2e36d86a5 100644 --- a/src/common/components/atoms/icons/ExploreIcon.tsx +++ b/src/common/components/atoms/icons/ExploreIcon.tsx @@ -2,7 +2,7 @@ import React from "react"; const ExploreIcon = () => (
+
{metadata?.thumbnail && ( poster @@ -223,19 +242,26 @@ export const Player: React.FC = ({ url, shrunk = false }) => {
-

+

{metadata?.title || ""}

-

+

{metadata?.channel || ""}

diff --git a/src/fidgets/ui/profile.tsx b/src/fidgets/ui/profile.tsx index 98f587948..2d5c25e63 100644 --- a/src/fidgets/ui/profile.tsx +++ b/src/fidgets/ui/profile.tsx @@ -131,9 +131,14 @@ const Profile: React.FC> = ({ const hasLocation = location.length > 0; const bioText = user.profile?.bio?.text || ""; + const uiFontFamily = + "var(--ns-nav-font, var(--font-sans, Inter, system-ui, -apple-system, sans-serif))"; return ( -
+
{user.pfp_url ? ( From ebe36e621301ba545f778144c60b1f5217b82931 Mon Sep 17 00:00:00 2001 From: Willy Ogorzaly Date: Tue, 30 Dec 2025 17:14:47 -0600 Subject: [PATCH 2/9] Apply ui-config background color across UI surfaces (#1642) --- src/app/layout.tsx | 2 ++ src/common/components/molecules/Modal.tsx | 1 + .../components/organisms/MobileHeader.tsx | 9 ++++++++- .../components/organisms/MobileNavbar.tsx | 11 +++++++---- .../components/organisms/Navigation.tsx | 6 ++++-- src/common/components/organisms/TabBar.tsx | 19 +++++++++++++++---- src/common/lib/hooks/useUIColors.ts | 4 ++++ src/fidgets/ui/profile.tsx | 7 ++++++- 8 files changed, 47 insertions(+), 12 deletions(-) diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 59906136c..706ce50f0 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -120,6 +120,7 @@ export default async function RootLayout({ : "var(--font-sans, Inter, system-ui, -apple-system, sans-serif)"; const navFontColor = systemConfig.ui?.fontColor || "#0f172a"; const castButtonFontColor = systemConfig.ui?.castButtonFontColor || "#ffffff"; + const navBackgroundColor = systemConfig.ui?.backgroundColor || "#ffffff"; return ( @@ -134,6 +135,7 @@ export default async function RootLayout({ ["--ns-nav-font" as string]: navFontStack, ["--ns-nav-font-color" as string]: navFontColor, ["--ns-cast-button-font-color" as string]: castButtonFontColor, + ["--ns-background-color" as string]: navBackgroundColor, } as React.CSSProperties } > diff --git a/src/common/components/molecules/Modal.tsx b/src/common/components/molecules/Modal.tsx index 0253b9fc0..13bb7966c 100644 --- a/src/common/components/molecules/Modal.tsx +++ b/src/common/components/molecules/Modal.tsx @@ -41,6 +41,7 @@ const Modal = ({ fontFamily: "var(--ns-nav-font, var(--font-sans, Inter, system-ui, -apple-system, sans-serif))", color: "var(--ns-nav-font-color, #0f172a)", + backgroundColor: "var(--ns-background-color, #ffffff)", }; const handleContentRef = React.useCallback((node: HTMLDivElement | null) => { diff --git a/src/common/components/organisms/MobileHeader.tsx b/src/common/components/organisms/MobileHeader.tsx index 30d93125d..7564c1e8f 100644 --- a/src/common/components/organisms/MobileHeader.tsx +++ b/src/common/components/organisms/MobileHeader.tsx @@ -266,7 +266,14 @@ const MobileHeader = ({ systemConfig }: MobileHeaderProps) => { }, [shouldConfirmCastClose]); return ( -
+
{isLoggedIn ? userAvatar : menuButton}
diff --git a/src/common/components/organisms/MobileNavbar.tsx b/src/common/components/organisms/MobileNavbar.tsx index b862fb7ee..93ac327e1 100644 --- a/src/common/components/organisms/MobileNavbar.tsx +++ b/src/common/components/organisms/MobileNavbar.tsx @@ -5,6 +5,7 @@ import { UserTheme } from "@/common/lib/theme"; import { MdGridView } from "react-icons/md"; import { BsImage, BsImageFill, BsFillPinFill, BsPin } from "react-icons/bs"; import { CompleteFidgets } from "@/fidgets"; +import { useUIColors } from "@/common/lib/hooks/useUIColors"; export interface TabItem { id: string; @@ -311,17 +312,19 @@ const MobileNavbar: React.FC = ({ // 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"; return ( @@ -333,7 +336,7 @@ const MobileNavbar: React.FC = ({
= ({
{shrunk ? ( diff --git a/src/common/components/organisms/TabBar.tsx b/src/common/components/organisms/TabBar.tsx index cde161f65..654b2fb59 100644 --- a/src/common/components/organisms/TabBar.tsx +++ b/src/common/components/organisms/TabBar.tsx @@ -14,6 +14,7 @@ import ClaimButtonWithModal from "../molecules/ClaimButtonWithModal"; import { useSidebarContext } from "./Sidebar"; import TokenDataHeader from "./TokenDataHeader"; import { validateTabName } from "@/common/utils/tabUtils"; +import { useUIColors } from "@/common/lib/hooks/useUIColors"; interface TabBarProps { inHomebase: boolean; @@ -55,6 +56,7 @@ function TabBar({ }: TabBarProps) { const isMobile = useIsMobile(); const { setEditMode } = useSidebarContext(); + const uiColors = useUIColors(); const { getIsLoggedIn, getIsInitializing, homebaseLoadTab, setCurrentTabName } = useAppStore((state) => ({ setModalOpen: state.setup.setModalOpen, @@ -243,13 +245,22 @@ function TabBar({ return ( -
+
{isTokenPage && contractAddress && ( -
+
)} -
+
{/* Tabs Section - grows until it hits buttons */}
@@ -315,4 +326,4 @@ function TabBar({ ); } -export default TabBar; \ No newline at end of file +export default TabBar; diff --git a/src/common/lib/hooks/useUIColors.ts b/src/common/lib/hooks/useUIColors.ts index b786eee4e..1c38a173f 100644 --- a/src/common/lib/hooks/useUIColors.ts +++ b/src/common/lib/hooks/useUIColors.ts @@ -18,6 +18,7 @@ export const useUIColors = ({ systemConfig }: UseUIColorsProps = {}) => { let cssFontColor: string | undefined; let cssFontFamily: string | undefined; let cssCastButtonFontColor: string | undefined; + let cssBackgroundColor: string | undefined; if (typeof document !== "undefined") { const styles = getComputedStyle(document.body); @@ -25,6 +26,8 @@ export const useUIColors = ({ systemConfig }: UseUIColorsProps = {}) => { cssFontFamily = styles.getPropertyValue("--ns-nav-font")?.trim() || undefined; cssCastButtonFontColor = styles.getPropertyValue("--ns-cast-button-font-color")?.trim() || undefined; + cssBackgroundColor = + styles.getPropertyValue("--ns-background-color")?.trim() || undefined; } const parsedFontFamily = extractFontFamilyFromUrl(ui?.url); @@ -36,6 +39,7 @@ export const useUIColors = ({ systemConfig }: UseUIColorsProps = {}) => { ? `${parsedFontFamily}, var(--font-sans, sans-serif)` : cssFontFamily || "var(--font-sans, Inter, system-ui, -apple-system, sans-serif)", fontUrl: ui?.url, + backgroundColor: ui?.backgroundColor || cssBackgroundColor || "#ffffff", primaryColor: ui?.primaryColor || "rgb(37, 99, 235)", primaryHoverColor: ui?.primaryHoverColor || "rgb(29, 78, 216)", primaryActiveColor: ui?.primaryActiveColor || "rgb(30, 64, 175)", diff --git a/src/fidgets/ui/profile.tsx b/src/fidgets/ui/profile.tsx index 2d5c25e63..8ec0ad3a3 100644 --- a/src/fidgets/ui/profile.tsx +++ b/src/fidgets/ui/profile.tsx @@ -133,11 +133,16 @@ const Profile: React.FC> = ({ const bioText = user.profile?.bio?.text || ""; const uiFontFamily = "var(--ns-nav-font, var(--font-sans, Inter, system-ui, -apple-system, sans-serif))"; + const uiFontColor = "var(--ns-nav-font-color, #0f172a)"; return (
From 92b8fe71c2d90e9188c9fca87630261386719f01 Mon Sep 17 00:00:00 2001 From: Willy Ogorzaly Date: Wed, 31 Dec 2025 08:37:18 -0600 Subject: [PATCH 3/9] Align tab and customize button colors with UI config (#1645) --- src/app/layout.tsx | 20 +++++- .../components/atoms/reorderable-tab.tsx | 8 ++- src/common/components/organisms/TabBar.tsx | 50 ++++++++++++-- src/common/lib/hooks/useUIColors.ts | 30 ++++++-- src/config/systemConfig.ts | 1 + .../farcaster/components/CreateCast.tsx | 69 ++++++++++++++++++- 6 files changed, 164 insertions(+), 14 deletions(-) diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 706ce50f0..6a4a72234 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -119,8 +119,23 @@ export default async function RootLayout({ ? `${navFontFamily}, var(--font-sans, Inter, system-ui, -apple-system, sans-serif)` : "var(--font-sans, Inter, system-ui, -apple-system, sans-serif)"; const navFontColor = systemConfig.ui?.fontColor || "#0f172a"; - const castButtonFontColor = systemConfig.ui?.castButtonFontColor || "#ffffff"; + const castButtonFontColor = + systemConfig.ui?.castButton?.fontColor || + systemConfig.ui?.castButtonFontColor || + "#ffffff"; const navBackgroundColor = systemConfig.ui?.backgroundColor || "#ffffff"; + const castButtonBackgroundColor = + systemConfig.ui?.castButton?.backgroundColor || + systemConfig.ui?.primaryColor || + "rgb(37, 99, 235)"; + const castButtonHoverColor = + systemConfig.ui?.castButton?.hoverColor || + systemConfig.ui?.primaryHoverColor || + "rgb(29, 78, 216)"; + const castButtonActiveColor = + systemConfig.ui?.castButton?.activeColor || + systemConfig.ui?.primaryActiveColor || + "rgb(30, 64, 175)"; return ( @@ -136,6 +151,9 @@ export default async function RootLayout({ ["--ns-nav-font-color" as string]: navFontColor, ["--ns-cast-button-font-color" as string]: castButtonFontColor, ["--ns-background-color" as string]: navBackgroundColor, + ["--ns-cast-button-background-color" as string]: castButtonBackgroundColor, + ["--ns-cast-button-hover-color" as string]: castButtonHoverColor, + ["--ns-cast-button-active-color" as string]: castButtonActiveColor, } as React.CSSProperties } > diff --git a/src/common/components/atoms/reorderable-tab.tsx b/src/common/components/atoms/reorderable-tab.tsx index 8847d0ee4..63e21c456 100644 --- a/src/common/components/atoms/reorderable-tab.tsx +++ b/src/common/components/atoms/reorderable-tab.tsx @@ -33,6 +33,10 @@ export const Tab = ({ preloadTabData, }: Props) => { const uiColors = useUIColors(); + const activeTabColor = uiColors.castButton.backgroundColor; + const tabTextColor = isSelected ? activeTabColor : uiColors.fontColor; + const underlineColor = isSelected ? activeTabColor : uiColors.primaryColor; + return (
diff --git a/src/common/components/organisms/TabBar.tsx b/src/common/components/organisms/TabBar.tsx index 654b2fb59..852c7f6fe 100644 --- a/src/common/components/organisms/TabBar.tsx +++ b/src/common/components/organisms/TabBar.tsx @@ -34,7 +34,7 @@ interface TabBarProps { isEditable?: boolean; } -const isEditableTab = (tabName: string, defaultTab: string) => +const isEditableTab = (tabName: string, defaultTab: string) => tabName !== defaultTab; function TabBar({ @@ -57,6 +57,20 @@ function TabBar({ const isMobile = useIsMobile(); const { setEditMode } = useSidebarContext(); const uiColors = useUIColors(); + const castButtonColors = React.useMemo( + () => ({ + backgroundColor: uiColors.castButton.backgroundColor, + hoverColor: uiColors.castButton.hoverColor, + activeColor: uiColors.castButton.activeColor, + fontColor: uiColors.castButtonFontColor, + }), + [ + uiColors.castButton.backgroundColor, + uiColors.castButton.hoverColor, + uiColors.castButton.activeColor, + uiColors.castButtonFontColor, + ], + ); const { getIsLoggedIn, getIsInitializing, homebaseLoadTab, setCurrentTabName } = useAppStore((state) => ({ setModalOpen: state.setup.setModalOpen, @@ -300,10 +314,38 @@ function TabBar({ {!inEditMode && ( )} {(inEditMode) && ( diff --git a/src/common/lib/hooks/useUIColors.ts b/src/common/lib/hooks/useUIColors.ts index 1c38a173f..5da49626f 100644 --- a/src/common/lib/hooks/useUIColors.ts +++ b/src/common/lib/hooks/useUIColors.ts @@ -18,6 +18,9 @@ export const useUIColors = ({ systemConfig }: UseUIColorsProps = {}) => { let cssFontColor: string | undefined; let cssFontFamily: string | undefined; let cssCastButtonFontColor: string | undefined; + let cssCastButtonBackgroundColor: string | undefined; + let cssCastButtonHoverColor: string | undefined; + let cssCastButtonActiveColor: string | undefined; let cssBackgroundColor: string | undefined; if (typeof document !== "undefined") { @@ -26,6 +29,12 @@ export const useUIColors = ({ systemConfig }: UseUIColorsProps = {}) => { cssFontFamily = styles.getPropertyValue("--ns-nav-font")?.trim() || undefined; cssCastButtonFontColor = styles.getPropertyValue("--ns-cast-button-font-color")?.trim() || undefined; + cssCastButtonBackgroundColor = + styles.getPropertyValue("--ns-cast-button-background-color")?.trim() || undefined; + cssCastButtonHoverColor = + styles.getPropertyValue("--ns-cast-button-hover-color")?.trim() || undefined; + cssCastButtonActiveColor = + styles.getPropertyValue("--ns-cast-button-active-color")?.trim() || undefined; cssBackgroundColor = styles.getPropertyValue("--ns-background-color")?.trim() || undefined; } @@ -34,7 +43,11 @@ export const useUIColors = ({ systemConfig }: UseUIColorsProps = {}) => { return { fontColor: ui?.fontColor || cssFontColor || "#0f172a", - castButtonFontColor: ui?.castButtonFontColor || cssCastButtonFontColor || "#ffffff", + castButtonFontColor: + ui?.castButton?.fontColor || + ui?.castButtonFontColor || + cssCastButtonFontColor || + "#ffffff", fontFamily: parsedFontFamily ? `${parsedFontFamily}, var(--font-sans, sans-serif)` : cssFontFamily || "var(--font-sans, Inter, system-ui, -apple-system, sans-serif)", @@ -44,9 +57,18 @@ export const useUIColors = ({ systemConfig }: UseUIColorsProps = {}) => { primaryHoverColor: ui?.primaryHoverColor || "rgb(29, 78, 216)", primaryActiveColor: ui?.primaryActiveColor || "rgb(30, 64, 175)", castButton: ui?.castButton || { - backgroundColor: ui?.primaryColor || "rgb(37, 99, 235)", - hoverColor: ui?.primaryHoverColor || "rgb(29, 78, 216)", - activeColor: ui?.primaryActiveColor || "rgb(30, 64, 175)", + backgroundColor: + cssCastButtonBackgroundColor || + ui?.primaryColor || + "rgb(37, 99, 235)", + hoverColor: + cssCastButtonHoverColor || + ui?.primaryHoverColor || + "rgb(29, 78, 216)", + activeColor: + cssCastButtonActiveColor || + ui?.primaryActiveColor || + "rgb(30, 64, 175)", }, }; }, [systemConfig]); diff --git a/src/config/systemConfig.ts b/src/config/systemConfig.ts index bf754498b..a267b4444 100644 --- a/src/config/systemConfig.ts +++ b/src/config/systemConfig.ts @@ -44,6 +44,7 @@ export interface UIConfig { primaryHoverColor: string; primaryActiveColor: string; castButton: { + fontColor?: string; backgroundColor: string; hoverColor: string; activeColor: string; diff --git a/src/fidgets/farcaster/components/CreateCast.tsx b/src/fidgets/farcaster/components/CreateCast.tsx index b578ed32a..77c374579 100644 --- a/src/fidgets/farcaster/components/CreateCast.tsx +++ b/src/fidgets/farcaster/components/CreateCast.tsx @@ -60,6 +60,7 @@ import { renderEmbedForUrl } from "./Embeds"; import { useTokenGate } from "@/common/lib/hooks/useTokenGate"; import { type SystemConfig } from "@/config"; +import { useUIColors } from "@/common/lib/hooks/useUIColors"; // SPACE_CONTRACT_ADDR will be loaded when needed (async) // For now, we'll use it in a way that handles the Promise @@ -150,6 +151,23 @@ const CreateCast: React.FC = ({ onShouldConfirmCloseChange, systemConfig, }) => { + const uiColors = useUIColors({ systemConfig }); + const castButtonColors = useMemo( + () => ({ + backgroundColor: uiColors.castButton.backgroundColor, + hoverColor: uiColors.castButton.hoverColor, + activeColor: uiColors.castButton.activeColor, + fontColor: uiColors.castButtonFontColor, + fontFamily: uiColors.fontFamily, + }), + [ + uiColors.castButton.backgroundColor, + uiColors.castButton.hoverColor, + uiColors.castButton.activeColor, + uiColors.castButtonFontColor, + uiColors.fontFamily, + ], + ); const castModalPortalContainer = useCastModalPortalContainer(); const isMobile = useIsMobile(); const [currentMod, setCurrentMod] = useState(null); @@ -930,7 +948,30 @@ const CreateCast: React.FC = ({
-
+
{navigation?.showMusicPlayer !== false && (
Date: Wed, 31 Dec 2025 13:05:07 -0600 Subject: [PATCH 5/9] Adjust nav border thickness (#1648) --- .../components/organisms/Navigation.tsx | 13 ++++++--- src/common/components/organisms/Player.tsx | 27 ++++++++++++++----- 2 files changed, 30 insertions(+), 10 deletions(-) diff --git a/src/common/components/organisms/Navigation.tsx b/src/common/components/organisms/Navigation.tsx index 8ddb15490..7890e9e05 100644 --- a/src/common/components/organisms/Navigation.tsx +++ b/src/common/components/organisms/Navigation.tsx @@ -66,6 +66,8 @@ type NavProps = { onNavigate?: () => void; }; +const NAV_BORDER_COLOR = "rgba(128, 128, 128, 0.5)"; + const NavIconBadge: React.FC<{ children: React.ReactNode; systemConfig: SystemConfig; @@ -73,8 +75,11 @@ const NavIconBadge: React.FC<{ const uiColors = useUIColors({ systemConfig }); return ( {children} @@ -113,7 +118,6 @@ const Navigation = React.memo( activeColor: uiColors.castButton.activeColor, fontColor: uiColors.castButtonFontColor, }; - const NAV_BORDER_COLOR = "rgba(128, 128, 128, 0.2)"; const navTextStyle: React.CSSProperties = { color: uiColors.fontColor, fontFamily: uiColors.fontFamily, @@ -365,7 +369,7 @@ const Navigation = React.memo(
)} diff --git a/src/common/components/organisms/Player.tsx b/src/common/components/organisms/Player.tsx index 9d8ee2f11..36b476abf 100644 --- a/src/common/components/organisms/Player.tsx +++ b/src/common/components/organisms/Player.tsx @@ -38,11 +38,13 @@ export type PlayerProps = { shrunk?: boolean; fontColor?: string; fontFamily?: string; + borderColor?: string; }; const DEFAULT_UI_FONT_COLOR = "var(--ns-nav-font-color, #0f172a)"; const DEFAULT_UI_FONT_FAMILY = "var(--ns-nav-font, var(--font-sans, Inter, system-ui, -apple-system, sans-serif))"; +const DEFAULT_BORDER_COLOR = "rgba(128, 128, 128, 0.5)"; const getToggleIcon = ({ playing, started, ready }): [IconType, string] => { if ((playing && !started) || !ready) { @@ -59,6 +61,7 @@ export const Player: React.FC = ({ shrunk = false, fontColor = DEFAULT_UI_FONT_COLOR, fontFamily = DEFAULT_UI_FONT_FAMILY, + borderColor = DEFAULT_BORDER_COLOR, }) => { const hasWindow = useHasWindow(); const playerRef = useRef(null); @@ -199,9 +202,17 @@ export const Player: React.FC = ({ )} > {playing ? ( - + ) : ( - + )}
)} @@ -232,8 +243,8 @@ export const Player: React.FC = ({ return ( <>
{metadata?.thumbnail && ( @@ -258,10 +269,14 @@ export const Player: React.FC = ({ From 2695ddd4d2a4c0e636401117085fa43cd38516e4 Mon Sep 17 00:00:00 2001 From: Willy Ogorzaly Date: Wed, 31 Dec 2025 13:30:51 -0600 Subject: [PATCH 6/9] Fix UI hook ordering and simplify Customize button states (#1649) --- .../components/organisms/MobileNavbar.tsx | 12 ++--- src/common/components/organisms/TabBar.tsx | 49 +++++++++---------- src/common/lib/hooks/useUIColors.ts | 33 +++++++------ 3 files changed, 46 insertions(+), 48 deletions(-) diff --git a/src/common/components/organisms/MobileNavbar.tsx b/src/common/components/organisms/MobileNavbar.tsx index 93ac327e1..ebb3b0e7a 100644 --- a/src/common/components/organisms/MobileNavbar.tsx +++ b/src/common/components/organisms/MobileNavbar.tsx @@ -135,8 +135,10 @@ const MobileNavbar: React.FC = ({ 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 = ({ } }, [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 ( ( + () => ({ + "--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 && (