xt/estim_control
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor StatusBar font size.

Browse Source
This commit is contained in:
Vixalie 2025-03-20 11:29:13 +08:00
parent 440caf4de0
commit c6f0b2a8fc
6 changed files with 15 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/icons/shared-props.ts
View File

@ -12,6 +12,6 @@ export const defaultIconProps: Partial<IconProps> = {
}; };
export const smallIconProps: Partial<IconProps> = { export const smallIconProps: Partial<IconProps> = {
height: 16, height: 14,
stroke: 0.5, stroke: 0.5,
}; };

4
src/page-components/device/DeviceList.module.css
View File

@ -31,9 +31,11 @@
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
gap: calc(var(--spacing) * 1); 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 { .device_name {
flex: 1; flex: 1;
font-size: calc(var(--font-size) * 1.3);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }

3
src/page-components/state-bar/BleState.tsx
View File

@ -2,6 +2,7 @@ import { useAtomValue } from 'jotai';
import { FC, useMemo } from 'react'; import { FC, useMemo } from 'react';
import { BleState } from '../../context/EstimContext'; import { BleState } from '../../context/EstimContext';
import IconBluetooth from '../../icons/IconBluetooth'; import IconBluetooth from '../../icons/IconBluetooth';
import { smallIconProps } from '../../icons/shared-props';
const BleStates: FC = () => { const BleStates: FC = () => {
const ble = useAtomValue(BleState); const ble = useAtomValue(BleState);
@ -19,7 +20,7 @@ const BleStates: FC = () => {
return ( return (
<IconBluetooth <IconBluetooth
height={16} {...smallIconProps}
ready={ble.ready} ready={ble.ready}
searching={ble.searching} searching={ble.searching}
connected={ble.connected?.length > 0} connected={ble.connected?.length > 0}

4
src/page-components/state-bar/ChannelStates.module.css
View File

@ -5,6 +5,8 @@
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
gap: calc(var(--spacing)); 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);
} }
} }

5
src/page-components/state-bar/DeviceStates.tsx
View File

@ -3,14 +3,15 @@ import { FC } from 'react';
import { DeviceState } from '../../context/EstimContext'; import { DeviceState } from '../../context/EstimContext';
import IconBattery from '../../icons/IconBattery'; import IconBattery from '../../icons/IconBattery';
import IconRssi from '../../icons/IconRssi'; import IconRssi from '../../icons/IconRssi';
import { smallIconProps } from '../../icons/shared-props';
const DeviceStates: FC = () => { const DeviceStates: FC = () => {
const deviceState = useAtomValue(DeviceState); const deviceState = useAtomValue(DeviceState);
return ( return (
<> <>
<IconRssi height={16} level={deviceState?.rssi} /> <IconRssi {...smallIconProps} level={deviceState?.rssi} />
<IconBattery height={16} level={deviceState?.battery} /> <IconBattery {...smallIconProps} level={deviceState?.battery} />
</> </>
); );
}; };

4
src/page-components/state-bar/StateBar.module.css
View File

@ -8,6 +8,8 @@
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
gap: calc(var(--spacing) * 4); 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);
} }
} }