From a0ddea0bfc67f1c8c75fd08ad33d1a822e788bc5 Mon Sep 17 00:00:00 2001
From: Bill Thornton <thornbill@users.noreply.github.com>
Date: Mon, 24 Mar 2025 13:11:25 -0400
Subject: [PATCH] Fix custom css requiring page refresh

---
 src/apps/stable/AppLayout.tsx |  2 +-
 src/components/CustomCss.tsx  | 25 +++++++------------------
 src/components/ThemeCss.tsx   |  2 +-
 3 files changed, 9 insertions(+), 20 deletions(-)

diff --git a/src/apps/stable/AppLayout.tsx b/src/apps/stable/AppLayout.tsx
index 1e653ee1a8..e4bd8b938f 100644
--- a/src/apps/stable/AppLayout.tsx
+++ b/src/apps/stable/AppLayout.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { Outlet } from 'react-router-dom';
 
 import AppBody from 'components/AppBody';
-import ThemeCss from 'components/ThemeCss';
 import CustomCss from 'components/CustomCss';
+import ThemeCss from 'components/ThemeCss';
 
 export default function AppLayout() {
     return (
diff --git a/src/components/CustomCss.tsx b/src/components/CustomCss.tsx
index b9c60b48e6..48c684724d 100644
--- a/src/components/CustomCss.tsx
+++ b/src/components/CustomCss.tsx
@@ -1,29 +1,18 @@
-import React, { FC, useEffect, useState } from 'react';
+import React, { type FC } from 'react';
 
-import { useApi } from 'hooks/useApi';
 import { useUserSettings } from 'hooks/useUserSettings';
+import { useBrandingOptions } from 'apps/dashboard/features/branding/api/useBrandingOptions';
 
 const CustomCss: FC = () => {
-    const { api } = useApi();
+    const { data: brandingOptions } = useBrandingOptions();
     const { customCss: userCustomCss, disableCustomCss } = useUserSettings();
-    const [ brandingCssUrl, setBrandingCssUrl ] = useState<string>();
-
-    useEffect(() => {
-        if (!api) return;
-
-        setBrandingCssUrl(api.getUri('/Branding/Css.css'));
-    }, [ api ]);
-
-    if (!api) return null;
 
     return (
         <>
-            {!disableCustomCss && brandingCssUrl && (
-                <link
-                    rel='stylesheet'
-                    type='text/css'
-                    href={brandingCssUrl}
-                />
+            {!disableCustomCss && brandingOptions?.CustomCss && (
+                <style>
+                    {brandingOptions.CustomCss}
+                </style>
             )}
             {userCustomCss && (
                 <style>
diff --git a/src/components/ThemeCss.tsx b/src/components/ThemeCss.tsx
index 53defc1ddf..9dabeee15a 100644
--- a/src/components/ThemeCss.tsx
+++ b/src/components/ThemeCss.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useState } from 'react';
+import React, { type FC, useEffect, useState } from 'react';
 
 import { useUserTheme } from 'hooks/useUserTheme';
 import { getDefaultTheme } from 'scripts/settings/webSettings';