add colors to summary

frontend/src/components/home/Summary/Summary.tsx

@@ -1,8 +1,8 @@
-import { ContainerStatus } from "@monitor/types";
 import { Component, createMemo } from "solid-js";
 import { useAppState } from "../../../state/StateProvider";
 import { useTheme } from "../../../state/ThemeProvider";
 import { combineClasses } from "../../../util/helpers";
+import Flex from "../../util/layout/Flex";
 import Grid from "../../util/layout/Grid";
 import s from "../home.module.scss";
 
@@ -10,23 +10,33 @@ const Summary: Component<{}> = (p) => {
   const deployentCount = useDeploymentCount();
   const serverCount = useServerCount();
   const { builds } = useAppState();
-	const { themeClass } = useTheme();
+  const { themeClass } = useTheme();
   return (
     <Grid class={combineClasses(s.Summary, "card shadow", themeClass())}>
-			<h1>summary</h1>
-      <div>
-        servers: {serverCount().total} ({serverCount().healthy} healthy,{" "}
-        {serverCount().unhealthy} unhealthy, {serverCount().disabled} disabled)
-      </div>
-      <div>
-        deployments: {deployentCount().total} ({deployentCount().running}{" "}
-        running, {deployentCount().stopped} stopped,{" "}
-        {deployentCount().notDeployed} not deployed, {deployentCount().unknown}{" "}
-        unknown)
-      </div>
-			<div>
-				builds: {builds.ids()?.length}
-			</div>
+      <h1>summary</h1>
+      <Flex justifyContent="space-between">
+        <Flex gap="0.2rem">
+          deployments: <h2>{deployentCount().total}</h2>
+        </Flex>
+        <Flex gap="0.2rem">
+          <h2 class="text-green">{deployentCount().running}</h2> running,
+          <h2 class="text-red">{deployentCount().stopped}</h2> stopped,
+          <h2 class="text-blue">{deployentCount().notDeployed}</h2> not
+          deployed,
+          <h2 class="text-orange">{deployentCount().unknown}</h2> unknown
+        </Flex>
+      </Flex>
+      <Flex justifyContent="space-between">
+        <Flex gap="0.2rem" alignItems="center">
+          servers: <h2>{serverCount().total}</h2>
+        </Flex>
+        <Flex gap="0.2rem" alignItems="center">
+          <h2 class="text-green">{serverCount().healthy}</h2> healthy,
+          <h2 class="text-red">{serverCount().unhealthy}</h2> unhealthy,
+          <h2 class="text-blue">{serverCount().disabled}</h2> disabled
+        </Flex>
+      </Flex>
+      <div>builds: {builds.ids()?.length}</div>
     </Grid>
   );
 };

frontend/src/style/colors.scss

@@ -12,8 +12,9 @@ $app-color: #1b1e1e;
 
 $lightgrey: #fcfcfc;
 $grey: rgb(227, 227, 227);
-$darkgrey: #c2c2c2;
+$darkgrey: #c1c0c0;
 
+$textblue: #1265e1;
 $lightblue: #186ded;
 $blue: #1964d4;
 $darkblue: #1b59b6;
@@ -30,6 +31,7 @@ $lightred: #b13a2d;
 $red: #952E23;
 $darkred: #631F17;
 
+$textorange: #984f2d;
 $lightorange: #d56b3a;
 $orange: #ac5c36;
 $darkorange: #984f2d;

frontend/src/style/index.scss

@@ -257,6 +257,7 @@ svg.dark {
   border: solid 1px c.$lightgreen;
 }
 
+
 .red {
   background-color: rgba(c.$red, 0.8);
 }
@@ -289,6 +290,22 @@ svg.dark {
   border: solid 1px c.$lightorange;
 }
 
+.text-green {
+  color: c.$textgreen;
+}
+
+.text-red {
+  color: c.$textred;
+}
+
+.text-blue {
+  color: c.$textblue;
+}
+
+.text-orange {
+  color: c.$textorange;
+}
+
 .shadow {
   box-shadow: rgba(0, 0, 0, 0.25) 0px 3px 8px;
   transition: all 250ms ease-in-out;