improve pie chart home page

frontend/src/components/home/Home.tsx

@@ -17,14 +17,13 @@ const Home: Component<{}> = (p) => {
   const { servers } = useAppState();
   return (
     <>
-      {/* <Grid
+      <Grid
         style={{ width: "100%" }}
         gridTemplateColumns={isSemiMobile() ? "1fr" : "1fr 1fr"}
       >
         <Summary />
         <Updates />
-      </Grid> */}
-      <Summary />
+      </Grid>
       <TreeProvider>
         <SimpleTabs
           containerStyle={{ width: "100%" }}

frontend/src/components/home/Summary.tsx

@@ -5,17 +5,21 @@ import Grid from "../shared/layout/Grid";
 import Flex from "../shared/layout/Flex";
 import PieChart, { PieChartSection } from "../shared/PieChart";
 import { COLORS } from "../../style/colors";
+import { useAppDimensions } from "../../state/DimensionProvider";
 
 const PIE_CHART_HEIGHT = 250;
 
 const Summary: Component<{}> = (p) => {
+  const { isMobile } = useAppDimensions();
   const deployentCount = useDeploymentCount();
   const serverCount = useServerCount();
   return (
     <Grid
       class="card shadow"
-      gridTemplateColumns="1fr 1fr 1fr"
-      style={{ width: "100%", "box-sizing": "border-box" }}
+      gridTemplateColumns={isMobile() ? "1fr" : "1fr 1fr"}
+      style={{ width: "100%", height: "100%", "box-sizing": "border-box", padding: "0.5rem" }}
+      placeItems="center"
+      gap="0"
     >
       <div style={{ width: "100%", height: `${PIE_CHART_HEIGHT}px` }}>
         <PieChart title="deployments" sections={deployentCount()} />
@@ -23,7 +27,6 @@ const Summary: Component<{}> = (p) => {
       <div style={{ width: "100%", height: `${PIE_CHART_HEIGHT}px` }}>
         <PieChart title="servers" sections={serverCount()} />
       </div>
-      <BuildsSummary />
     </Grid>
   );
 };

frontend/src/components/shared/PieChart.tsx

@@ -77,7 +77,7 @@ const PieChart: Component<{
         }}
       >
         <div style={{ display: "grid", gap: "0.2rem" }}>
-          <h2>{p.title}</h2>
+          <h2 style={{ "margin-bottom": "0.5rem" }}>{p.title}</h2>
           <For each={sections()}>
             {(section, index) => (
               <div
@@ -85,20 +85,25 @@ const PieChart: Component<{
                   display: "flex",
                   gap: "0.5rem",
                   "justify-content": "space-between",
-                  opacity:
-                    selected() === undefined || selected() === index()
-                      ? 1
-                      : 0.5,
                 }}
               >
-                {section.title}:{" "}
+                <div
+                  style={{
+                    opacity:
+                      selected() === index()
+                        ? 1
+                        : 0.7,
+                  }}
+                >
+                  {section.title}:
+                </div>
                 <div style={{ color: section.color }}>{section.amount}</div>
               </div>
             )}
           </For>
         </div>
       </Grid>
-      <canvas ref={canvas!} />
+      <canvas ref={canvas!} style={{ "z-index": 1 }} />
     </Grid>
   );
 };
@@ -121,7 +126,7 @@ class PieChartCanvas {
     private canvas: HTMLCanvasElement,
     sections: PieChartSection[],
     private onSelectedUpdate: (selected: number | undefined) => void,
-    private donutProportion = 0.75,
+    private donutProportion = 0.8,
     private seperation = 0.02 // private initAngle = -Math.PI / 8
   ) {
     this.sections = [];
@@ -153,9 +158,7 @@ class PieChartCanvas {
         seg.endAngle - this.seperation / this.donutProportion;
 
       ctx.fillStyle =
-        this.selected === undefined || Number(segIndex) === this.selected
-          ? seg.color
-          : `${seg.color}80`;
+        Number(segIndex) === this.selected ? seg.color : `${seg.color}B3`;
 
       ctx.beginPath();
       ctx.moveTo(
@@ -230,8 +233,8 @@ class PieChartCanvas {
     this.cy = this.canvas.height / 2;
     this.r =
       this.canvas.width < this.canvas.height
-        ? this.canvas.width / 2 - 8
-        : this.canvas.height / 2 - 8;
+        ? this.canvas.width / 2 - 2
+        : this.canvas.height / 2 - 2;
     this.draw();
   }
 }

frontend/src/style/colors.scss

@@ -14,7 +14,7 @@ $lightgreen: #4f8d5c;
 $green: #41764c;
 $darkgreen: #2b4f33;
 
-$textred: #f04633;
+$textred: #f76858;
 $lightred: #b13a2d;
 $red: #952E23;
 $darkred: #631F17;

frontend/src/style/colors.tsx

@@ -15,7 +15,7 @@ export const COLORS = {
   green: "#41764c",
   darkgreen: "#2b4f33",
 
-  textred: "#f04633",
+  textred: "#f76858",
   lightred: "#b13a2d",
   red: "#952E23",
   darkred: "#631F17",