Move theme and custom css to react components

src/components/CustomCss.tsx

@@ -0,0 +1,37 @@
+import React, { FC, useEffect, useState } from 'react';
+
+import { useApi } from 'hooks/useApi';
+import { useUserSettings } from 'hooks/useUserSettings';
+
+const CustomCss: FC = () => {
+    const { api } = useApi();
+    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}
+                />
+            )}
+            {userCustomCss && (
+                <style>
+                    {userCustomCss}
+                </style>
+            )}
+        </>
+    );
+};
+
+export default CustomCss;

src/components/ThemeCss.tsx

@@ -0,0 +1,34 @@
+import React, { FC, useEffect, useState } from 'react';
+
+import { useUserTheme } from 'hooks/useUserTheme';
+import { getDefaultTheme } from 'scripts/settings/webSettings';
+
+interface ThemeCssProps {
+    dashboard?: boolean
+}
+
+const getThemeUrl = (id: string) => `themes/${id}/theme.css`;;
+
+const DEFAULT_THEME_URL = getThemeUrl(getDefaultTheme().id);
+
+const ThemeCss: FC<ThemeCssProps> = ({
+    dashboard = false
+}) => {
+    const { theme, dashboardTheme } = useUserTheme();
+    const [ themeUrl, setThemeUrl ] = useState(DEFAULT_THEME_URL);
+
+    useEffect(() => {
+        const id = dashboard ? dashboardTheme : theme;
+        if (id) setThemeUrl(getThemeUrl(id));
+    }, [dashboard, dashboardTheme, theme]);
+
+    return (
+        <link
+            rel='stylesheet'
+            type='text/css'
+            href={themeUrl}
+        />
+    );
+};
+
+export default ThemeCss;