prettier status page

app/(home)/status/cluster.component.tsx

···
 import Image from "next/image";
+import type { ReactNode } from "react";
 import { HiLightningBolt } from "react-icons/hi";
 
 import { Badge } from "@/components/ui/badge";
···
             </div>
 
             <div className="md:flex w-2/3 justify-between text-primary-foreground">
-                <div className="md:w-1/4">
-                    <span className="text-muted-foreground mr-1 text-xs">Uptime:</span>
+                <Row name="uptime">
                     {cluster.uptime}
-                </div>
-                <div className="md:w-1/4">
-                    <span className="text-muted-foreground mr-1 text-xs">Memory:</span>
+                </Row>
+                <Row name="memory">
                     {intl.format(cluster.memory)}mb
-                </div>
-                <div className="md:w-1/4">
-                    <span className="text-muted-foreground mr-1 text-xs">Users:</span>
+                </Row>
+                <Row name="users">
                     {intl.format(cluster.users)}
-                </div>
-                <div className="md:w-1/5">
-                    <span className="text-muted-foreground mr-1 text-xs">Guilds:</span>
+                </Row>
+                <Row name="servers" className="w-1/5">
                     {intl.format(cluster.guilds)}
-                </div>
+                </Row>
             </div>
 
             <Badge
-                className={cn(cluster.ping > 0 && "text-neutral-400 bg-wamellow max-w-1/6")}
+                className={cn(cluster.ping > 0 && "max-w-1/6")}
                 variant={cluster.ping < 0 ? "destructive" : "default"}
                 radius="rounded"
             >
···
             width={32}
             height={32}
         />
+    );
+}
+
+
+function Row({ name, children, className }: { name: string; children: ReactNode; className?: string; }) {
+    return (
+        <div className={cn("md:w-1/5", className)}>
+            {children}
+            <span className="text-muted-foreground mr-1 text-sm">{" "}{name}</span>
+        </div>
     );
 }

app/(home)/status/node.component.tsx

···
                 </span>
             </div>
 
-            <div>
+            <div className="text-primary-foreground">
                 <Row name="uptime">
                     {node.uptime}
                 </Row>
···
 function Row({ name, children }: { name: string; children: ReactNode; }) {
     return (
         <div>
-            <span className="text-neutral-300 font-medium">{children}</span>
-            {" "}{name}
+            {children}
+            <span className="text-muted-foreground mr-1 text-sm">{" "}{name}</span>
         </div>
     );
 }

app/(home)/status/page.tsx

···
         <div className="md:flex gap-4 mb-12">
             {error
                 ? <Notice message="Failed to fetch cluster status" />
-                :
-                <div className="space-y-2 w-full md:w-3/4">
+                : <div className="space-y-2 w-full md:w-3/4">
                     {status.clusters.map((cluster) => (
                         <Cluster
                             key={"cluster-" + cluster.id}

components/header.tsx

···
                         size={96}
                     />
 
-                    <p className="mr-1 relative bottom-[1px] truncate block">{user.globalName || user.username}</p>
+                    <p className="mr-1 relative bottom-[1px] truncate block text-primary-foreground font-medium tracking-tight">{user.globalName || user.username}</p>
                     <HiChevronDown />
                 </>
             }

components/section.tsx

···
 export function Section({
     title,
     showDivider = true,
+    tight = false,
     children,
 
     className,
···
 }: {
     title: string;
     showDivider?: boolean;
+    tight?: boolean;
     children?: React.ReactNode;
 } & React.HTMLAttributes<HTMLDivElement>) {
     return (<>
-        {showDivider && <Separator className="mt-12 mb-4" />}
+        {showDivider && <Separator className={cn("mb-4 mt-12", tight && "mt-5")} />}
 
         <div
             className={cn("mb-3", className)}
             {...props}
         >
-            <h3 className="text-xl text-neutral-200">{title}</h3>
+            <h3 className="text-xl font-medium tracking-tight text-neutral-200">{title}</h3>
             {children && (
-                <p className="dark:text-neutral-500 text-neutral-400">
+                <p className="text-muted-foreground">
                     {children}
                 </p>
             )}
···
 } & React.HTMLAttributes<HTMLDivElement>) {
     return (
         <div {...props}>
-            <h3 className="text-medium font-medium text-neutral-300 mt-5">{title}</h3>
-            <div className="dark:text-neutral-500 text-neutral-400 mb-3">
+            <h3 className="text-medium font-medium tracking-tight text-neutral-300 mt-5">{title}</h3>
+            <div className="text-muted-foreground mb-3">
                 {description && (
                     <div className="mb-3">
                         {description}