refactor StatusBar font size.

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,
 };

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;
       }

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}

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);
   }
 }

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} />
     </>
   );
 };

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);
   }
 }