From 9fe8a5dba721bb619648cefc6942ee183af2882e Mon Sep 17 00:00:00 2001
From: Julius Volz <julius.volz@gmail.com>
Date: Thu, 14 Mar 2024 12:19:41 +0100
Subject: [PATCH] Make spacing, shadows, and radius sizes more consistent

Signed-off-by: Julius Volz <julius.volz@gmail.com>
---
 web/ui/mantine-ui/src/RuleDefinition.tsx         | 2 +-
 web/ui/mantine-ui/src/pages/AgentPage.tsx        | 2 +-
 web/ui/mantine-ui/src/pages/ConfigPage.tsx       | 4 ++--
 web/ui/mantine-ui/src/pages/FlagsPage.tsx        | 2 +-
 web/ui/mantine-ui/src/pages/RulesPage.tsx        | 5 ++---
 web/ui/mantine-ui/src/pages/StatusPage.tsx       | 6 +++---
 web/ui/mantine-ui/src/pages/TSDBStatusPage.tsx   | 4 ++--
 web/ui/mantine-ui/src/pages/query/QueryPage.tsx  | 7 +++----
 web/ui/mantine-ui/src/pages/query/QueryPanel.tsx | 2 +-
 9 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/web/ui/mantine-ui/src/RuleDefinition.tsx b/web/ui/mantine-ui/src/RuleDefinition.tsx
index 95249f2d6a..d8546b3951 100644
--- a/web/ui/mantine-ui/src/RuleDefinition.tsx
+++ b/web/ui/mantine-ui/src/RuleDefinition.tsx
@@ -22,7 +22,7 @@ const RuleDefinition: FC<{ rule: Rule }> = ({ rule }) => {
 
   return (
     <>
-      <Card p="xs" className={codeboxClasses.codebox} radius="sm" shadow="none">
+      <Card p="xs" className={codeboxClasses.codebox} shadow="xs">
         <CodeMirror
           basicSetup={false}
           value={rule.query}
diff --git a/web/ui/mantine-ui/src/pages/AgentPage.tsx b/web/ui/mantine-ui/src/pages/AgentPage.tsx
index ae1c7ada78..34c0a6708d 100644
--- a/web/ui/mantine-ui/src/pages/AgentPage.tsx
+++ b/web/ui/mantine-ui/src/pages/AgentPage.tsx
@@ -4,7 +4,7 @@ import { FC } from "react";
 
 const AgentPage: FC = () => {
   return (
-    <Card shadow="xs" withBorder radius="md" p="md">
+    <Card shadow="xs" withBorder p="md" mt="xs">
       <Group wrap="nowrap" align="center" ml="xs" mb="sm" gap="xs">
         <IconSpy size={22} />
         <Text fz="xl" fw={600}>
diff --git a/web/ui/mantine-ui/src/pages/ConfigPage.tsx b/web/ui/mantine-ui/src/pages/ConfigPage.tsx
index 644ed5d886..a8419a8db4 100644
--- a/web/ui/mantine-ui/src/pages/ConfigPage.tsx
+++ b/web/ui/mantine-ui/src/pages/ConfigPage.tsx
@@ -13,11 +13,11 @@ export default function ConfigPage() {
     <CodeHighlight
       code={yaml}
       language="yaml"
-      miw="30vw"
+      miw="50vw"
       w="fit-content"
       maw="calc(100vw - 75px)"
       mx="auto"
-      mt="lg"
+      mt="xs"
     />
   );
 }
diff --git a/web/ui/mantine-ui/src/pages/FlagsPage.tsx b/web/ui/mantine-ui/src/pages/FlagsPage.tsx
index 2ba8459d4f..d90328f964 100644
--- a/web/ui/mantine-ui/src/pages/FlagsPage.tsx
+++ b/web/ui/mantine-ui/src/pages/FlagsPage.tsx
@@ -124,7 +124,7 @@ export default function FlagsPage() {
   ));
 
   return (
-    <Card shadow="xs" maw={1000} mx="auto" mt="lg" withBorder>
+    <Card shadow="xs" maw={1000} mx="auto" mt="xs" withBorder>
       <TextInput
         placeholder="Filter by flag name or value"
         mb="md"
diff --git a/web/ui/mantine-ui/src/pages/RulesPage.tsx b/web/ui/mantine-ui/src/pages/RulesPage.tsx
index 56578d8bca..50708405bd 100644
--- a/web/ui/mantine-ui/src/pages/RulesPage.tsx
+++ b/web/ui/mantine-ui/src/pages/RulesPage.tsx
@@ -31,12 +31,11 @@ export default function RulesPage() {
   const { data } = useSuspenseAPIQuery<RulesMap>({ path: `/rules` });
 
   return (
-    <>
+    <Stack mt="xs">
       {data.data.groups.map((g, i) => (
         <Card
           shadow="xs"
           withBorder
-          radius="md"
           p="md"
           mb="md"
           key={i} // TODO: Find a stable and definitely unique key.
@@ -153,6 +152,6 @@ export default function RulesPage() {
           </Table>
         </Card>
       ))}
-    </>
+    </Stack>
   );
 }
diff --git a/web/ui/mantine-ui/src/pages/StatusPage.tsx b/web/ui/mantine-ui/src/pages/StatusPage.tsx
index 43aef6dca4..5555e74ef4 100644
--- a/web/ui/mantine-ui/src/pages/StatusPage.tsx
+++ b/web/ui/mantine-ui/src/pages/StatusPage.tsx
@@ -36,8 +36,8 @@ export default function StatusPage() {
   });
 
   return (
-    <Stack gap="lg" maw={1000} mx="auto" mt="lg">
-      <Card shadow="xs" withBorder radius="md" p="md">
+    <Stack gap="lg" maw={1000} mx="auto" mt="xs">
+      <Card shadow="xs" withBorder p="md">
         <Group wrap="nowrap" align="center" ml="xs" mb="sm" gap="xs">
           <IconWall size={22} />
           <Text fz="xl" fw={600}>
@@ -55,7 +55,7 @@ export default function StatusPage() {
           </Table.Tbody>
         </Table>
       </Card>
-      <Card shadow="xs" withBorder radius="md" p="md">
+      <Card shadow="xs" withBorder p="md">
         <Group wrap="nowrap" align="center" ml="xs" mb="sm" gap="xs">
           <IconRun size={22} />
           <Text fz="xl" fw={600}>
diff --git a/web/ui/mantine-ui/src/pages/TSDBStatusPage.tsx b/web/ui/mantine-ui/src/pages/TSDBStatusPage.tsx
index 0b3aaae240..5da498e0df 100644
--- a/web/ui/mantine-ui/src/pages/TSDBStatusPage.tsx
+++ b/web/ui/mantine-ui/src/pages/TSDBStatusPage.tsx
@@ -35,7 +35,7 @@ export default function TSDBStatusPage() {
   ];
 
   return (
-    <Stack gap="lg" maw={1000} mx="auto" mt="lg">
+    <Stack gap="lg" maw={1000} mx="auto" mt="xs">
       {[
         {
           title: "TSDB Head Status",
@@ -64,7 +64,7 @@ export default function TSDBStatusPage() {
           formatAsCode: true,
         },
       ].map(({ title, unit = "Count", stats, formatAsCode }) => (
-        <Card shadow="xs" withBorder radius="md" p="md">
+        <Card shadow="xs" withBorder p="md">
           <Group wrap="nowrap" align="center" ml="xs" mb="sm" gap="xs">
             <Text fz="xl" fw={600}>
               {title}
diff --git a/web/ui/mantine-ui/src/pages/query/QueryPage.tsx b/web/ui/mantine-ui/src/pages/query/QueryPage.tsx
index d80c8d5485..cb2a75c217 100644
--- a/web/ui/mantine-ui/src/pages/query/QueryPage.tsx
+++ b/web/ui/mantine-ui/src/pages/query/QueryPage.tsx
@@ -1,4 +1,4 @@
-import { Alert, Button, Notification, Stack, rem } from "@mantine/core";
+import { Alert, Box, Button, Notification, Stack, rem } from "@mantine/core";
 import {
   IconAlertCircle,
   IconAlertTriangle,
@@ -40,13 +40,12 @@ export default function QueryPage() {
 
       const browserTime = new Date().getTime() / 1000;
       const serverTime = timeResult.data.result[0];
-      console.log(browserTime, serverTime, Math.abs(browserTime - serverTime));
       setTimeDelta(Math.abs(browserTime - serverTime));
     }
   }, [timeResult]);
 
   return (
-    <>
+    <Box mt="xs">
       <Stack gap="sm">
         {metricNamesError && (
           <Alert
@@ -107,6 +106,6 @@ export default function QueryPage() {
       >
         Add query
       </Button>
-    </>
+    </Box>
   );
 }
diff --git a/web/ui/mantine-ui/src/pages/query/QueryPanel.tsx b/web/ui/mantine-ui/src/pages/query/QueryPanel.tsx
index 67467648ac..3319d2eb65 100644
--- a/web/ui/mantine-ui/src/pages/query/QueryPanel.tsx
+++ b/web/ui/mantine-ui/src/pages/query/QueryPanel.tsx
@@ -47,7 +47,7 @@ const QueryPanel: FC<PanelProps> = ({ idx, metricNames }) => {
   const dispatch = useAppDispatch();
 
   return (
-    <Stack gap="lg" mt="sm">
+    <Stack gap="lg">
       <ExpressionInput
         initialExpr={panel.expr}
         metricNames={metricNames}