From b771df692b339c4fa8317d84f6f8b8b58f3dea90 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Fri, 28 Mar 2025 12:14:31 +0530
Subject: [PATCH] update: spacings on the overview sections.

---
 .../overview/bandwidth.svelte                 | 114 +++++++++---------
 .../overview/realtime.svelte                  |  52 ++++----
 .../overview/requests.svelte                  |  96 +++++++--------
 3 files changed, 134 insertions(+), 128 deletions(-)

diff --git a/src/routes/(console)/project-[project]/overview/bandwidth.svelte b/src/routes/(console)/project-[project]/overview/bandwidth.svelte
index 6b21ee997..bc46005c0 100644
--- a/src/routes/(console)/project-[project]/overview/bandwidth.svelte
+++ b/src/routes/(console)/project-[project]/overview/bandwidth.svelte
@@ -32,60 +32,62 @@
     $: bandwidth = humanFileSize(totalMetrics($usage?.network));
 </script>
 
-<Layout.Stack justifyContent="space-between" direction="row" alignItems="flex-start">
-    <div>
-        <Typography.Title>
-            {bandwidth.value}
-            <span class="body-text-2">{bandwidth.unit}</span>
-        </Typography.Title>
-        <Typography.Text>Bandwidth</Typography.Text>
-    </div>
-    <Popover let:toggle padding="none" let:showing>
-        <Button.Button on:click={toggle} variant="extra-compact">
-            {period}
-            <Icon icon={showing ? IconChevronUp : IconChevronDown} slot="end" />
-        </Button.Button>
-        <svelte:fragment slot="tooltip">
-            <ActionMenu.Root>
-                <ActionMenu.Item.Button on:click={() => dispatch('change', '24h')}
-                    >24h</ActionMenu.Item.Button>
-                <ActionMenu.Item.Button on:click={() => dispatch('change', '30d')}
-                    >30d</ActionMenu.Item.Button>
-                <ActionMenu.Item.Button on:click={() => dispatch('change', '90d')}
-                    >90d</ActionMenu.Item.Button>
-            </ActionMenu.Root>
-        </svelte:fragment>
-    </Popover>
+<Layout.Stack gap="l">
+    <Layout.Stack justifyContent="space-between" direction="row" alignItems="flex-start">
+        <div>
+            <Typography.Title>
+                {bandwidth.value}
+                <span class="body-text-2">{bandwidth.unit}</span>
+            </Typography.Title>
+            <Typography.Text>Bandwidth</Typography.Text>
+        </div>
+        <Popover let:toggle padding="none" let:showing>
+            <Button.Button on:click={toggle} variant="extra-compact">
+                {period}
+                <Icon icon={showing ? IconChevronUp : IconChevronDown} slot="end" />
+            </Button.Button>
+            <svelte:fragment slot="tooltip">
+                <ActionMenu.Root>
+                    <ActionMenu.Item.Button on:click={() => dispatch('change', '24h')}
+                        >24h</ActionMenu.Item.Button>
+                    <ActionMenu.Item.Button on:click={() => dispatch('change', '30d')}
+                        >30d</ActionMenu.Item.Button>
+                    <ActionMenu.Item.Button on:click={() => dispatch('change', '90d')}
+                        >90d</ActionMenu.Item.Button>
+                </ActionMenu.Root>
+            </svelte:fragment>
+        </Popover>
+    </Layout.Stack>
+    {#if bandwidth.value !== '0'}
+        <div style="height: 12rem;">
+            <BarChart
+                options={{
+                    yAxis: {
+                        axisLabel: {
+                            formatter: (value) =>
+                                value
+                                    ? `${humanFileSize(+value).value} ${humanFileSize(+value).unit}`
+                                    : '0'
+                        }
+                    }
+                }}
+                series={[
+                    {
+                        name: 'Bandwidth',
+                        data: [...network.map((e) => [e.date, e.value])],
+                        tooltip: {
+                            valueFormatter: (value) =>
+                                `${humanFileSize(+value).value} ${humanFileSize(+value).unit}`
+                        }
+                    }
+                ]} />
+        </div>
+    {:else}
+        <Card isDashed>
+            <Layout.Stack gap="xs" alignItems="center" justifyContent="center">
+                <Icon icon={IconChartSquareBar} size="l" />
+                <Typography.Text variant="m-600">No data to show</Typography.Text>
+            </Layout.Stack>
+        </Card>
+    {/if}
 </Layout.Stack>
-{#if bandwidth.value !== '0'}
-    <div style="height: 12rem;">
-        <BarChart
-            options={{
-                yAxis: {
-                    axisLabel: {
-                        formatter: (value) =>
-                            value
-                                ? `${humanFileSize(+value).value} ${humanFileSize(+value).unit}`
-                                : '0'
-                    }
-                }
-            }}
-            series={[
-                {
-                    name: 'Bandwidth',
-                    data: [...network.map((e) => [e.date, e.value])],
-                    tooltip: {
-                        valueFormatter: (value) =>
-                            `${humanFileSize(+value).value} ${humanFileSize(+value).unit}`
-                    }
-                }
-            ]} />
-    </div>
-{:else}
-    <Card isDashed>
-        <Layout.Stack gap="xs" alignItems="center" justifyContent="center">
-            <Icon icon={IconChartSquareBar} size="l" />
-            <Typography.Text variant="m-600">No data to show</Typography.Text>
-        </Layout.Stack>
-    </Card>
-{/if}
diff --git a/src/routes/(console)/project-[project]/overview/realtime.svelte b/src/routes/(console)/project-[project]/overview/realtime.svelte
index 9e21c4b9c..269e04312 100644
--- a/src/routes/(console)/project-[project]/overview/realtime.svelte
+++ b/src/routes/(console)/project-[project]/overview/realtime.svelte
@@ -13,29 +13,31 @@
     $: total = projectStats?.reduce((prev, next) => prev + next[1], 0) ?? 0;
 </script>
 
-<div class="heading-level-4">
-    {formatNum(current)}
-</div>
-<div>Realtime Connections</div>
-{#if total}
-    <div style="height: 18em">
-        <BarChart
-            series={[
-                {
-                    name: 'Realtime connection',
-                    data: $stats.get(projectId)
-                }
-            ]} />
+<Layout.Stack gap="l">
+    <div class="heading-level-4">
+        {formatNum(current)}
     </div>
-{:else}
-    <Card isDashed>
-        <Layout.Stack gap="xs" alignItems="center" justifyContent="center" height="10rem">
-            <Icon icon={IconChartSquareBar} size="l" />
-            <Typography.Text variant="m-600">No data to show</Typography.Text>
-            <Link.Anchor
-                href="https://appwrite.io/docs/apis/realtime"
-                target="_blank"
-                rel="noopener noreferrer">Get started with Realtime</Link.Anchor>
-        </Layout.Stack>
-    </Card>
-{/if}
+    <div>Realtime Connections</div>
+    {#if total}
+        <div style="height: 18em">
+            <BarChart
+                series={[
+                    {
+                        name: 'Realtime connection',
+                        data: $stats.get(projectId)
+                    }
+                ]} />
+        </div>
+    {:else}
+        <Card isDashed>
+            <Layout.Stack gap="xs" alignItems="center" justifyContent="center" height="10rem">
+                <Icon icon={IconChartSquareBar} size="l" />
+                <Typography.Text variant="m-600">No data to show</Typography.Text>
+                <Link.Anchor
+                    href="https://appwrite.io/docs/apis/realtime"
+                    target="_blank"
+                    rel="noopener noreferrer">Get started with Realtime</Link.Anchor>
+            </Layout.Stack>
+        </Card>
+    {/if}
+</Layout.Stack>
diff --git a/src/routes/(console)/project-[project]/overview/requests.svelte b/src/routes/(console)/project-[project]/overview/requests.svelte
index e9e193ed4..c4d5aa9fd 100644
--- a/src/routes/(console)/project-[project]/overview/requests.svelte
+++ b/src/routes/(console)/project-[project]/overview/requests.svelte
@@ -30,51 +30,53 @@
     }>;
 </script>
 
-<Layout.Stack justifyContent="space-between" direction="row" alignItems="flex-start">
-    <div>
-        <Typography.Title>
-            {formatNum(totalMetrics($usage?.requests))}
-        </Typography.Title>
-        <Typography.Text>Requests</Typography.Text>
-    </div>
-    <Popover let:toggle padding="none" let:showing>
-        <Button.Button on:click={toggle} variant="extra-compact">
-            {period}
-            <Icon icon={showing ? IconChevronUp : IconChevronDown} slot="end" />
-        </Button.Button>
-        <ActionMenu.Root slot="tooltip">
-            <ActionMenu.Item.Button on:click={() => dispatch('change', '24h')}
-                >24h</ActionMenu.Item.Button>
-            <ActionMenu.Item.Button on:click={() => dispatch('change', '30d')}
-                >30d</ActionMenu.Item.Button>
-            <ActionMenu.Item.Button on:click={() => dispatch('change', '90d')}
-                >90d</ActionMenu.Item.Button>
-        </ActionMenu.Root>
-    </Popover>
-</Layout.Stack>
-
-{#if totalMetrics($usage?.requests) !== 0}
-    <div style="height: 12rem;">
-        <LineChart
-            options={{
-                yAxis: {
-                    axisLabel: {
-                        formatter: formatNum
-                    }
-                }
-            }}
-            series={[
-                {
-                    name: 'Requests',
-                    data: [...requests.map((e) => [e.date, e.value])]
-                }
-            ]} />
-    </div>
-{:else}
-    <Card isDashed>
-        <Layout.Stack gap="xs" alignItems="center" justifyContent="center">
-            <Icon icon={IconChartSquareBar} size="l" />
-            <Typography.Text variant="m-600">No data to show</Typography.Text>
+<Layout.Stack gap="l">
+    <Layout.Stack justifyContent="space-between" direction="row" alignItems="flex-start">
+        <Layout.Stack gap="xxs">
+            <Typography.Title>
+                {formatNum(totalMetrics($usage?.requests))}
+            </Typography.Title>
+            <Typography.Text>Requests</Typography.Text>
         </Layout.Stack>
-    </Card>
-{/if}
+        <Popover let:toggle padding="none" let:showing>
+            <Button.Button on:click={toggle} variant="extra-compact">
+                {period}
+                <Icon icon={showing ? IconChevronUp : IconChevronDown} slot="end" />
+            </Button.Button>
+            <ActionMenu.Root slot="tooltip">
+                <ActionMenu.Item.Button on:click={() => dispatch('change', '24h')}
+                    >24h</ActionMenu.Item.Button>
+                <ActionMenu.Item.Button on:click={() => dispatch('change', '30d')}
+                    >30d</ActionMenu.Item.Button>
+                <ActionMenu.Item.Button on:click={() => dispatch('change', '90d')}
+                    >90d</ActionMenu.Item.Button>
+            </ActionMenu.Root>
+        </Popover>
+    </Layout.Stack>
+
+    {#if totalMetrics($usage?.requests) !== 0}
+        <div style="height: 12rem;">
+            <LineChart
+                options={{
+                    yAxis: {
+                        axisLabel: {
+                            formatter: formatNum
+                        }
+                    }
+                }}
+                series={[
+                    {
+                        name: 'Requests',
+                        data: [...requests.map((e) => [e.date, e.value])]
+                    }
+                ]} />
+        </div>
+    {:else}
+        <Card isDashed>
+            <Layout.Stack gap="xs" alignItems="center" justifyContent="center">
+                <Icon icon={IconChartSquareBar} size="l" />
+                <Typography.Text variant="m-600">No data to show</Typography.Text>
+            </Layout.Stack>
+        </Card>
+    {/if}
+</Layout.Stack>