Try to fix

kokofixcomputers · Oct 7, 2024 · 9b7b297 · 9b7b297
1 parent 0eed984
commit 9b7b297
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 14 deletions.
diff --git a/package.json b/package.json
@@ -89,7 +89,7 @@
         "@types/react-router": "^5.1.3",
         "@types/react-router-dom": "^5.1.3",
         "@types/react-transition-group": "^4.4.0",
-        "@types/styled-components": "^5.1.7",
+        "@types/styled-components": "^5.1.34",
         "@types/uuid": "^3.4.5",
         "@types/webpack-env": "^1.15.2",
         "@types/yup": "^0.29.3",

diff --git a/resources/scripts/components/dashboard/ServerRow.tsx b/resources/scripts/components/dashboard/ServerRow.tsx
@@ -13,12 +13,11 @@ import getServerResourceUsage, { ServerPowerState, ServerStats } from '@/api/ser
 // than the more faded default style.
 const isAlarmState = (current: number, limit: number): boolean => limit > 0 && current / (limit * 1024 * 1024) >= 0.9;
 
-const IconDescription = styled.p<{ $alarm?: boolean }>`
-    ${tw`text-sm ml-2`};
-    ${(props) => props.$alarm && tw`text-red-300`};
-`;
+const IconDescription = ({ $alarm, children }: { $alarm?: boolean; children: React.ReactNode }) => (
+    <p style={{ color: $alarm ? 'red' : 'inherit' }}>{children}</p>
+);
 
-const StatusIndicatorBox = styled(GreyRowBox)<{ $status: ServerPowerState | undefined; $bg: string }>
+const StatusIndicatorBox = styled(GreyRowBox)<{ $status: ServerPowerState | undefined; $bg: string }>`
     ${tw`grid grid-cols-12 gap-4 relative`};
 
     ${({ $bg }) => `background-image: url("${$bg}");`}
@@ -40,7 +39,7 @@ const StatusIndicatorBox = styled(GreyRowBox)<{ $status: ServerPowerState | unde
     &:hover .status-bar {
         ${tw`opacity-75`};
     }
-};
+`;
 
 type Timer = ReturnType<typeof setInterval>;
 
@@ -59,8 +58,6 @@ export default ({ server, className }: { server: Server; className?: string }) =
     }, [stats?.isSuspended, server.status]);
 
     useEffect(() => {
-        // Don't waste a HTTP request if there is nothing important to show to the user because
-        // the server is suspended.
         if (isSuspended) return;
 
         getStats().then(() => {
@@ -103,6 +100,7 @@ export default ({ server, className }: { server: Server; className?: string }) =
                     <Spinner size={'small'} />
                 ) : isSuspended ? (
                     <div css={tw`flex-1 text-center`}>
+                        <span css={tw`bg-red-500 rounded px-2 py-1 text`}></span>
                         <span css={tw`bg-red-500 rounded px-2 py-1 text-red-100 text-xs`}>
                             {server.status === 'suspended' ? 'Suspended' : 'Connection Error'}
                         </span>
@@ -164,4 +162,4 @@ export default ({ server, className }: { server: Server; className?: string }) =
             <div className={'status-bar'} />
         </StatusIndicatorBox>
     );
-};
+};
diff --git a/yarn.lock b/yarn.lock
@@ -1860,10 +1860,10 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c"
   integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==
 
-"@types/styled-components@^5.1.7":
-  version "5.1.7"
-  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.7.tgz#3cd10b088c1cb1acde2e4b166b3e8275a3083710"
-  integrity sha512-BJzPhFygYspyefAGFZTZ/8lCEY4Tk+Iqktvnko3xmJf9LrLqs3+grxPeU3O0zLl6yjbYBopD0/VikbHgXDbJtA==
+"@types/styled-components@^5.1.34":
+  version "5.1.34"
+  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.34.tgz#4107df8ef8a7eaba4fa6b05f78f93fba4daf0300"
+  integrity sha512-mmiVvwpYklFIv9E8qfxuPyIt/OuyIrn6gMOAMOFUO3WJfSrSE+sGUoa4PiZj77Ut7bKZpaa6o1fBKS/4TOEvnA==
   dependencies:
     "@types/hoist-non-react-statics" "*"
     "@types/react" "*"