From c6f0b2a8fccc6e8d934a4e42eaf802b38e1f9ca4 Mon Sep 17 00:00:00 2001
From: Vixalie <vixalie@outlook.com>
Date: Thu, 20 Mar 2025 11:29:13 +0800
Subject: [PATCH] refactor StatusBar font size.

---
 src/icons/shared-props.ts                              | 2 +-
 src/page-components/device/DeviceList.module.css       | 4 +++-
 src/page-components/state-bar/BleState.tsx             | 3 ++-
 src/page-components/state-bar/ChannelStates.module.css | 4 +++-
 src/page-components/state-bar/DeviceStates.tsx         | 5 +++--
 src/page-components/state-bar/StateBar.module.css      | 4 +++-
 6 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/icons/shared-props.ts b/src/icons/shared-props.ts
index ef266fc..42c6e5d 100644
--- a/src/icons/shared-props.ts
+++ b/src/icons/shared-props.ts
@@ -12,6 +12,6 @@ export const defaultIconProps: Partial<IconProps> = {
 };
 
 export const smallIconProps: Partial<IconProps> = {
-  height: 16,
+  height: 14,
   stroke: 0.5,
 };
diff --git a/src/page-components/device/DeviceList.module.css b/src/page-components/device/DeviceList.module.css
index b4d90c2..f3f7f7e 100644
--- a/src/page-components/device/DeviceList.module.css
+++ b/src/page-components/device/DeviceList.module.css
@@ -31,9 +31,11 @@
       flex-direction: row;
       align-items: center;
       gap: calc(var(--spacing) * 1);
+      font-size: var(--body-medium-font-size);
+      line-height: var(--body-medium-line-height);
+      font-weight: var(--body-medium-font-weight);
       .device_name {
         flex: 1;
-        font-size: calc(var(--font-size) * 1.3);
         overflow: hidden;
         text-overflow: ellipsis;
       }
diff --git a/src/page-components/state-bar/BleState.tsx b/src/page-components/state-bar/BleState.tsx
index 47a8b6b..81592f9 100644
--- a/src/page-components/state-bar/BleState.tsx
+++ b/src/page-components/state-bar/BleState.tsx
@@ -2,6 +2,7 @@ import { useAtomValue } from 'jotai';
 import { FC, useMemo } from 'react';
 import { BleState } from '../../context/EstimContext';
 import IconBluetooth from '../../icons/IconBluetooth';
+import { smallIconProps } from '../../icons/shared-props';
 
 const BleStates: FC = () => {
   const ble = useAtomValue(BleState);
@@ -19,7 +20,7 @@ const BleStates: FC = () => {
 
   return (
     <IconBluetooth
-      height={16}
+      {...smallIconProps}
       ready={ble.ready}
       searching={ble.searching}
       connected={ble.connected?.length > 0}
diff --git a/src/page-components/state-bar/ChannelStates.module.css b/src/page-components/state-bar/ChannelStates.module.css
index 3e7d7d0..c2bf69e 100644
--- a/src/page-components/state-bar/ChannelStates.module.css
+++ b/src/page-components/state-bar/ChannelStates.module.css
@@ -5,6 +5,8 @@
     justify-content: flex-start;
     align-items: center;
     gap: calc(var(--spacing));
-    font-size: calc(var(--font-size) * 1.4);
+    font-size: var(--label-medium-font-size);
+    line-height: var(--label-medium-line-height);
+    font-weight: var(--label-medium-font-weight);
   }
 }
diff --git a/src/page-components/state-bar/DeviceStates.tsx b/src/page-components/state-bar/DeviceStates.tsx
index 9746de4..8af0ea0 100644
--- a/src/page-components/state-bar/DeviceStates.tsx
+++ b/src/page-components/state-bar/DeviceStates.tsx
@@ -3,14 +3,15 @@ import { FC } from 'react';
 import { DeviceState } from '../../context/EstimContext';
 import IconBattery from '../../icons/IconBattery';
 import IconRssi from '../../icons/IconRssi';
+import { smallIconProps } from '../../icons/shared-props';
 
 const DeviceStates: FC = () => {
   const deviceState = useAtomValue(DeviceState);
 
   return (
     <>
-      <IconRssi height={16} level={deviceState?.rssi} />
-      <IconBattery height={16} level={deviceState?.battery} />
+      <IconRssi {...smallIconProps} level={deviceState?.rssi} />
+      <IconBattery {...smallIconProps} level={deviceState?.battery} />
     </>
   );
 };
diff --git a/src/page-components/state-bar/StateBar.module.css b/src/page-components/state-bar/StateBar.module.css
index a61769a..90f03d4 100644
--- a/src/page-components/state-bar/StateBar.module.css
+++ b/src/page-components/state-bar/StateBar.module.css
@@ -8,6 +8,8 @@
     justify-content: flex-end;
     align-items: center;
     gap: calc(var(--spacing) * 4);
-    font-size: calc(var(--font-size) * 1.6);
+    font-size: var(--label-small-font-size);
+    line-height: var(--label-small-line-height);
+    font-weight: var(--label-small-font-weight);
   }
 }