feat(overview): update the overall look of the overview page

src/constants/index.ts

@@ -47,7 +47,7 @@ export enum ROUTES {
 export const CHART_MAX_XAXIS = 10
 
 export const DEFAULT_CHART_OPTIONS: ApexOptions = {
-  title: { align: 'center', style: { color: 'gray' } },
+  title: { align: 'center', style: { color: 'gray', fontSize: '8px' } },
   chart: {
     toolbar: { show: false },
     zoom: { enabled: false },
@@ -55,9 +55,10 @@ export const DEFAULT_CHART_OPTIONS: ApexOptions = {
   },
   noData: { text: 'Loading...' },
   legend: {
-    fontSize: '14px',
+    showForSingleSeries: true,
+    fontSize: '8px',
     labels: { colors: 'gray' },
-    itemMargin: { horizontal: 64 },
+    itemMargin: { horizontal: 32 },
   },
   dataLabels: { enabled: false },
   grid: { yaxis: { lines: { show: false } } },
@@ -70,7 +71,7 @@ export const DEFAULT_CHART_OPTIONS: ApexOptions = {
   },
   yaxis: {
     labels: {
-      style: { colors: 'gray' },
+      style: { colors: 'gray', fontSize: '8px' },
       formatter: (val) => byteSize(val).toString(),
     },
   },

src/pages/Config.tsx

@@ -188,13 +188,13 @@ const ConfigForm = () => {
           {t('updateGEODatabases')}
         </Button>
 
-        <Button loading={restarting()} onClick={onRestart}>
-          {t('restartCore')}
-        </Button>
-
         <Button loading={upgrading()} onClick={onUpgrade}>
           {t('upgradeCore')}
         </Button>
+
+        <Button loading={restarting()} onClick={onRestart}>
+          {t('restartCore')}
+        </Button>
       </div>
     </div>
   )

src/pages/Overview.tsx

@@ -19,9 +19,9 @@ import { secret, wsEndpointURL } from '~/signals'
 import type { Connection } from '~/types'
 
 const TrafficWidget: ParentComponent<{ label: JSX.Element }> = (props) => (
-  <div class="stat flex-1">
+  <div class="stat flex-1 place-items-center">
     <div class="stat-title text-primary-content">{props.label}</div>
-    <div class="stat-value text-primary-content">
+    <div class="stat-value text-2xl text-primary-content lg:text-3xl">
       {children(() => props.children)()}
     </div>
   </div>
@@ -102,7 +102,9 @@ export default () => {
     merge({ title: { text: t('memory') } }, DEFAULT_CHART_OPTIONS),
   )
 
-  const memoryChartSeries = createMemo(() => [{ data: memories() }])
+  const memoryChartSeries = createMemo(() => [
+    { name: t('memory'), data: memories() },
+  ])
 
   const connectionsWS = createReconnectingWS(
     `${wsEndpointURL()}/connections?token=${secret()}`,