Ensure size coherence across UI by using AntD custom icon component

SquirrelCorporation · Jul 15, 2024 · b6c1af5 · b6c1af5
1 parent 0004382
commit b6c1af5
Show file tree

Hide file tree

Showing 11 changed files with 223 additions and 133 deletions.
diff --git a/client/public/avatars/squirrel.svg b/client/public/avatars/squirrel.svg
diff --git a/client/src/app.tsx b/client/src/app.tsx
@@ -11,6 +11,7 @@ import type { Settings as LayoutSettings } from '@ant-design/pro-components';
 import { SettingDrawer } from '@ant-design/pro-components';
 // @ts-ignore
 import { history, RunTimeLayoutConfig } from '@umijs/max';
+import { Avatar } from 'antd';
 import { API } from 'ssm-shared-lib';
 import defaultSettings from '../config/defaultSettings';
 import Logo from '../public/logo.svg';

diff --git a/client/src/components/HeaderComponents/AvatarDropdown.tsx b/client/src/components/HeaderComponents/AvatarDropdown.tsx
@@ -5,7 +5,7 @@ import {
 } from '@ant-design/icons';
 import { useEmotionCss } from '@ant-design/use-emotion-css';
 import { history, useModel } from '@umijs/max';
-import { Spin } from 'antd';
+import { Spin, Typography } from 'antd';
 import { stringify } from 'querystring';
 import type { MenuInfo } from 'rc-menu/lib/interface';
 import React, { useCallback } from 'react';
@@ -21,7 +21,19 @@ export type GlobalHeaderRightProps = {
 export const AvatarName = () => {
   const { initialState } = useModel('@@initialState');
   const { currentUser } = initialState || {};
-  return <span className="anticon">{currentUser?.name}</span>;
+  return (
+    <Typography.Title
+      level={5}
+      className="anticon"
+      style={{
+        color: 'rgba(255, 255, 255, 0.65)',
+        marginBottom: '0.9em',
+        fontSize: '14px',
+      }}
+    >
+      {currentUser?.name}
+    </Typography.Title>
+  );
 };
 
 export const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({

diff --git a/client/src/components/HeaderComponents/DevicesHeaderWidget.tsx b/client/src/components/HeaderComponents/DevicesHeaderWidget.tsx
@@ -111,10 +111,8 @@ export const DevicesHeaderWidget: React.FC = () => {
                 className={'svg-small-anim-rotate'}
                 style={{
                   color: 'rgba(255, 255, 255, 0.65)',
+                  fontSize: '20px',
                 }}
-                width={'20px'}
-                height={'20px'}
-                size={20}
               />
             }
           />

diff --git a/client/src/components/HeaderComponents/HealthWidget.tsx b/client/src/components/HeaderComponents/HealthWidget.tsx
@@ -56,10 +56,8 @@ export const HealthWidget: React.FC = () => {
                 className={'svg-small-anim-pulse'}
                 style={{
                   color: 'rgba(255, 255, 255, 0.65)',
+                  fontSize: '20px',
                 }}
-                width={'20px'}
-                height={'20px'}
-                size={20}
               />
             }
           />