ui: fix global styles

resources/scripts/api/admin/getVersion.ts

@@ -4,11 +4,11 @@ export interface VersionData {
     panel: {
         current: string;
         latest: string;
-    };
+    }
 
     wings: {
         latest: string;
-    };
+    }
 
     git: string | null;
 }

resources/scripts/assets/css/GlobalStylesheet.ts

@@ -1,72 +0,0 @@
-import tw from 'twin.macro';
-import { createGlobalStyle } from 'styled-components/macro';
-
-export default createGlobalStyle`
-    body {
-        ${tw`font-sans bg-neutral-800 text-neutral-200`};
-        letter-spacing: 0.015em;
-    }
-
-    h1, h2, h3, h4, h5, h6 {
-        ${tw`font-medium tracking-normal font-header`};
-    }
-
-    p {
-        ${tw`text-neutral-200 leading-snug font-sans`};
-    }
-
-    form {
-        ${tw`m-0`};
-    }
-
-    textarea, select, input, button, button:focus, button:focus-visible {
-        ${tw`outline-none`};
-    }
-
-    input[type=number]::-webkit-outer-spin-button,
-    input[type=number]::-webkit-inner-spin-button {
-        -webkit-appearance: none !important;
-        margin: 0;
-    }
-
-    input[type=number] {
-        -moz-appearance: textfield !important;
-    }
-
-    /* Scroll Bar Style */
-    ::-webkit-scrollbar {
-        background: none;
-        width: 16px;
-        height: 16px;
-    }
-
-    ::-webkit-scrollbar-thumb {
-        border: solid 0 rgb(0 0 0 / 0%);
-        border-right-width: 4px;
-        border-left-width: 4px;
-        -webkit-border-radius: 9px 4px;
-        -webkit-box-shadow: inset 0 0 0 1px hsl(211, 10%, 53%), inset 0 0 0 4px hsl(209deg 18% 30%);
-    }
-
-    ::-webkit-scrollbar-track-piece {
-        margin: 4px 0;
-    }
-
-    ::-webkit-scrollbar-thumb:horizontal {
-        border-right-width: 0;
-        border-left-width: 0;
-        border-top-width: 4px;
-        border-bottom-width: 4px;
-        -webkit-border-radius: 4px 9px;
-    }
-
-    ::-webkit-scrollbar-thumb:hover {
-        -webkit-box-shadow:
-        inset 0 0 0 1px hsl(212, 92%, 43%),
-        inset 0 0 0 4px hsl(212, 92%, 43%);
-    }
-
-    ::-webkit-scrollbar-corner {
-        background: transparent;
-    }
-`;

resources/scripts/components/App.tsx

@@ -11,10 +11,9 @@ import { SiteSettings } from '@/state/settings';
 import ProgressBar from '@/components/elements/ProgressBar';
 import { NotFound } from '@/components/elements/ScreenBlock';
 import tw from 'twin.macro';
-import GlobalStylesheet from '@/assets/css/GlobalStylesheet';
 import { history } from '@/components/history';
 import { setupInterceptors } from '@/api/interceptors';
-import TailwindGlobalStyles from '@/components/GlobalStyles';
+import GlobalStyles from '@/components/GlobalStyles';
 
 const ChunkedAdminRouter = lazy(() => import(/* webpackChunkName: "admin" */'@/routers/AdminRouter'));
 
@@ -81,11 +80,9 @@ const App = () => {
 
     return (
         <>
-            <GlobalStylesheet/>
-            <TailwindGlobalStyles/>
+            <GlobalStyles/>
             <StoreProvider store={store}>
                 <ProgressBar/>
-
                 <div css={tw`mx-auto w-auto`}>
                     <Router history={history}>
                         <Suspense fallback={<div>Loading...</div>}>

resources/scripts/components/GlobalStyles.tsx

@@ -1,6 +1,83 @@
 import React from 'react';
-import { GlobalStyles } from 'twin.macro';
+// eslint-disable-next-line no-restricted-imports
+import { createGlobalStyle } from 'styled-components';
+import tw, { GlobalStyles as BaseStyles } from 'twin.macro';
 
-export default () => {
-    return <GlobalStyles/>;
-};
+const CustomStyles = createGlobalStyle`
+    body {
+        ${tw`font-sans bg-neutral-800 text-neutral-200`};
+        letter-spacing: 0.015em;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+        ${tw`font-medium tracking-normal font-header`};
+    }
+
+    p {
+        ${tw`text-neutral-200 leading-snug font-sans`};
+    }
+
+    form {
+        ${tw`m-0`};
+    }
+
+    textarea, select, input, button, button:focus, button:focus-visible {
+        ${tw`outline-none`};
+    }
+
+    input[type=number]::-webkit-outer-spin-button,
+    input[type=number]::-webkit-inner-spin-button {
+        -webkit-appearance: none !important;
+        margin: 0;
+    }
+
+    input[type=number] {
+        -moz-appearance: textfield !important;
+    }
+
+    /* Scroll Bar Style */
+    ::-webkit-scrollbar {
+        background: none;
+        width: 16px;
+        height: 16px;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        border: solid 0 rgb(0 0 0 / 0%);
+        border-right-width: 4px;
+        border-left-width: 4px;
+        -webkit-border-radius: 9px 4px;
+        -webkit-box-shadow: inset 0 0 0 1px hsl(211, 10%, 53%), inset 0 0 0 4px hsl(209deg 18% 30%);
+    }
+
+    ::-webkit-scrollbar-track-piece {
+        margin: 4px 0;
+    }
+
+    ::-webkit-scrollbar-thumb:horizontal {
+        border-right-width: 0;
+        border-left-width: 0;
+        border-top-width: 4px;
+        border-bottom-width: 4px;
+        -webkit-border-radius: 4px 9px;
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+        -webkit-box-shadow:
+        inset 0 0 0 1px hsl(212, 92%, 43%),
+        inset 0 0 0 4px hsl(212, 92%, 43%);
+    }
+
+    ::-webkit-scrollbar-corner {
+        background: transparent;
+    }
+`;
+
+const GlobalStyles = () => (
+    <>
+        <BaseStyles/>
+        <CustomStyles/>
+    </>
+);
+
+export default GlobalStyles;