From b6c1af5234a90f78ebe2019e5d24bf10c9455229 Mon Sep 17 00:00:00 2001 From: manu Date: Mon, 15 Jul 2024 15:32:54 +0200 Subject: [PATCH] Ensure size coherence across UI by using AntD custom icon component --- client/public/avatars/squirrel.svg | 13 +- client/src/app.tsx | 1 + .../HeaderComponents/AvatarDropdown.tsx | 16 +- .../HeaderComponents/DevicesHeaderWidget.tsx | 4 +- .../HeaderComponents/HealthWidget.tsx | 4 +- client/src/components/Icons/CustomIcons.tsx | 283 +++++++++++------- .../RegistryComponents/RegistryLogo.tsx | 25 +- .../components/ConfigurationModal.tsx | 2 - .../Drawer/AutomationActionInnerCard.tsx | 2 +- .../Drawer/AutomationTriggerInnerCard.tsx | 2 +- .../Playbooks/components/TreeComponent.tsx | 4 +- 11 files changed, 223 insertions(+), 133 deletions(-) diff --git a/client/public/avatars/squirrel.svg b/client/public/avatars/squirrel.svg index 049dd8fb..f372cd9d 100644 --- a/client/public/avatars/squirrel.svg +++ b/client/public/avatars/squirrel.svg @@ -1,4 +1,11 @@ - - + + + + + + + + + + diff --git a/client/src/app.tsx b/client/src/app.tsx index fc422bae..96e0f77f 100644 --- 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 index 11a3d681..8fc7eed7 100644 --- 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 {currentUser?.name}; + return ( + + {currentUser?.name} + + ); }; export const AvatarDropdown: React.FC = ({ diff --git a/client/src/components/HeaderComponents/DevicesHeaderWidget.tsx b/client/src/components/HeaderComponents/DevicesHeaderWidget.tsx index 2b17d3b4..69978012 100644 --- 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 index 6d0c511a..ba113f8f 100644 --- 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} /> } /> diff --git a/client/src/components/Icons/CustomIcons.tsx b/client/src/components/Icons/CustomIcons.tsx index f8f0c766..a3396d11 100644 --- a/client/src/components/Icons/CustomIcons.tsx +++ b/client/src/components/Icons/CustomIcons.tsx @@ -1,6 +1,10 @@ +import { GetProps } from 'antd'; import React from 'react'; +import Icon from '@ant-design/icons'; -export const StreamlineComputerConnection = (props: any) => ( +type CustomIconComponentProps = GetProps; + +const StreamlineComputerConnectionSvg = (props: any) => ( ( ); -export const LogosGitlab = (props: any) => ( +export const StreamlineComputerConnection = ( + props: Partial, +) => ; + +const LogosGitlabSvg = (props: any) => ( ( ); -export const EosIconsCronjob = (props: any) => ( +export const LogosGitlab = (props: Partial) => ( + +); + +const EosIconsCronjobSvg = (props: any) => ( ( ); -export const IonServer = (props: any) => ( +export const EosIconsCronjob = (props: Partial) => ( + +); + +const IonServerSvg = (props: any) => ( ( ); -export const LogoHotIo = (props: any) => ( - - - - - - - +export const IonServer = (props: Partial) => ( + ); -export const LogosQuay = (props: any) => ( +const LogosQuaySvg = (props: any) => ( ( ); -export const LogosAws = (props: any) => ( +export const LogosQuay = (props: Partial) => ( + +); + +const LogosAwsSvg = (props: any) => ( ( /> ); -export const VscodeIconsFileTypeDocker2 = (props: any) => ( + +export const LogosAws = (props: Partial) => ( + +); + +const VscodeIconsFileTypeDocker2Svg = (props: any) => ( ( ); -export const FluentMdl2RegistryEditor = (props: any) => ( +export const VscodeIconsFileTypeDocker2 = ( + props: Partial, +) => ; + +const FluentMdl2RegistryEditorSvg = (props: any) => ( ( ); -export const DeviconGooglecloud = (props: any) => ( +export const FluentMdl2RegistryEditor = ( + props: Partial, +) => ; + +const DeviconGooglecloudSvg = (props: any) => ( ( /> ); -export const OuiMlCreateAdvancedJob = (props: any) => ( + +export const DeviconGooglecloud = ( + props: Partial, +) => ; + +const OuiMlCreateAdvancedJobSvg = (props: any) => ( ( ); -export const UilDocker = (props: any) => ( +export const OuiMlCreateAdvancedJob = ( + props: Partial, +) => ; + +const UilDockerSvg = (props: any) => ( ( ); -export const WhhSsh = (props: any) => ( - - - +export const UilDocker = (props: Partial) => ( + ); -export const TablerPlugConnected = (props: any) => ( +const TablerPlugConnectedSvg = (props: any) => ( ( ); -export const StreamlineLockRotationSolid = (props: any) => ( +export const TablerPlugConnected = ( + props: Partial, +) => ; + +const StreamlineLockRotationSolidSvg = (props: any) => ( ( ); -export const EosIconsAdmin = (props: any) => ( +export const StreamlineLockRotationSolid = ( + props: Partial, +) => ; + +const EosIconsAdminSvg = (props: any) => ( ( ); -export const GrommetIconsHost = (props: any) => ( +export const EosIconsAdmin = (props: Partial) => ( + +); + +const GrommetIconsHostSvg = (props: any) => ( ( ); -export const ElNetwork = (props: any) => ( +export const GrommetIconsHost = (props: Partial) => ( + +); + +const ElNetworkSvg = (props: any) => ( ( ); -export const FluentMdl2Health = (props: any) => ( +export const ElNetwork = (props: Partial) => ( + +); + +const FluentMdl2HealthSvg = (props: any) => ( ( ); +export const FluentMdl2Health = (props: Partial) => ( + +); + export const PajamasLog = (props: any) => ( ( /> ); -export const MaterialSymbolsDashboard = (props: any) => ( + +const MaterialSymbolsDashboardSvg = (props: any) => ( ( ); -export const MynauiDangerTriangle = (props: any) => ( +export const MaterialSymbolsDashboard = ( + props: Partial, +) => ; + +const MynauiDangerTriangleSvg = (props: any) => ( ( ); -export const MynauiApi = (props: any) => ( +export const MynauiDangerTriangle = ( + props: Partial, +) => ; + +const MynauiApiSvg = (props: any) => ( ( ); -export const CarbonBatchJob = (props: any) => ( +export const MynauiApi = (props: Partial) => ( + +); + +const CarbonBatchJobSvg = (props: any) => ( ( ); -export const WhhCpu = (props: any) => ( +export const CarbonBatchJob = (props: Partial) => ( + +); + +const WhhCpuSvg = (props: any) => ( ( ); -export const WhhRam = (props: any) => ( +export const WhhCpu = (props: Partial) => ( + +); + +const WhhRamSvg = (props: any) => ( ( ); -export const EpConnection = (iconProps: any) => ( - - - - -); - -export const CilControl = (iconProps: any) => ( - - - +export const WhhRam = (props: Partial) => ( + ); -export const GrommetIconsInstall = (iconProps: any) => ( +const GrommetIconsInstallSvg = (iconProps: any) => ( ( ); +export const GrommetIconsInstall = ( + props: Partial, +) => ; + export const GameIconsAcorn = (props: any) => ( ( ); -export const DeviconAzure = (props: any) => ( +const DeviconAzureSvg = (props: any) => ( ( ); -export const ZmdiGithub = (props: any) => ( +export const DeviconAzure = (props: Partial) => ( + +); + +const ZmdiGithubSvg = (props: any) => ( ( ); -export const SimpleIconsForgejo = (props: any) => ( +export const ZmdiGithub = (props: Partial) => ( + +); + +const SimpleIconsForgejoSvg = (props: any) => ( ( ); -export const SimpleIconsGitea = (props: any) => ( +export const SimpleIconsForgejo = ( + props: Partial, +) => ; + +const SimpleIconsGiteaSvg = (props: any) => ( ( ); -export const VaadinCubes = (props: any) => ( +export const SimpleIconsGitea = (props: Partial) => ( + +); + +const VaadinCubesSvg = (props: any) => ( ( ); -export const SimpleIconsGit = (props: any) => ( +export const VaadinCubes = (props: Partial) => ( + +); + +const SimpleIconsGitSvg = (props: any) => ( ( ); -export const StreamlineLocalStorageFolderSolid = (props: any) => ( +export const SimpleIconsGit = (props: Partial) => ( + +); + +const StreamlineLocalStorageFolderSolidSvg = (props: any) => ( ( ); -export const GrommetIconsSystem = (props: any) => ( +export const StreamlineLocalStorageFolderSolid = ( + props: Partial, +) => ; + +const GrommetIconsSystemSvg = (props: any) => ( ( ); -export const TablerSquareNumber1Filled = (props: any) => ( +export const GrommetIconsSystem = ( + props: Partial, +) => ; + +const TablerSquareNumber1FilledSvg = (props: any) => ( ( ); -export const TablerSquareNumber2Filled = (props: any) => ( +export const TablerSquareNumber1Filled = ( + props: Partial, +) => ; + +const TablerSquareNumber2FilledSvg = (props: any) => ( ( ); -export const CarbonIbmEventAutomation = (props: any) => ( +export const TablerSquareNumber2Filled = ( + props: Partial, +) => ; + +const CarbonIbmEventAutomationSvg = (props: any) => ( ( ); -export const FluentMdl2FileTemplate = (props: any) => ( +export const CarbonIbmEventAutomation = ( + props: Partial, +) => ; + +const FluentMdl2FileTemplateSvg = (props: any) => ( ( /> ); + +export const FluentMdl2FileTemplate = ( + props: Partial, +) => ; diff --git a/client/src/components/RegistryComponents/RegistryLogo.tsx b/client/src/components/RegistryComponents/RegistryLogo.tsx index 2e0b5e1c..839e4fe9 100644 --- a/client/src/components/RegistryComponents/RegistryLogo.tsx +++ b/client/src/components/RegistryComponents/RegistryLogo.tsx @@ -2,7 +2,6 @@ import { DeviconAzure, DeviconGooglecloud, FluentMdl2RegistryEditor, - LogoHotIo, LogosAws, LogosGitlab, LogosQuay, @@ -21,29 +20,27 @@ type RegistryLogoProps = { const RegistryLogo: React.FC = (props) => { switch (props.provider) { case 'ghcr': - return ; + return ; case 'gcr': - return ; + return ; case 'acr': - return ; - case 'hotio': - return ; + return ; case 'hub': - return ; + return ; case 'ecr': - return ; + return ; case 'quay': - return ; + return ; case 'forgejo': - return ; + return ; case 'gitea': - return ; + return ; case 'lscr': - return ; + return ; case 'gitlab': - return ; + return ; default: - return ; + return ; } }; diff --git a/client/src/pages/Admin/Inventory/components/ConfigurationModal.tsx b/client/src/pages/Admin/Inventory/components/ConfigurationModal.tsx index 8dbeaffa..b1720cbb 100644 --- a/client/src/pages/Admin/Inventory/components/ConfigurationModal.tsx +++ b/client/src/pages/Admin/Inventory/components/ConfigurationModal.tsx @@ -1,5 +1,3 @@ -import { DockerConnectionForm } from '@/components/DeviceConfiguration/DockerConnectionForm'; -import { UilDocker, WhhSsh } from '@/components/Icons/CustomIcons'; import ConnectionTestTab from '@/pages/Admin/Inventory/components/ConnectionTestTab'; import DockerConfigurationForm from '@/pages/Admin/Inventory/components/DockerConfigurationForm'; import { Modal, Tabs, TabsProps } from 'antd'; diff --git a/client/src/pages/Automations/components/Drawer/AutomationActionInnerCard.tsx b/client/src/pages/Automations/components/Drawer/AutomationActionInnerCard.tsx index 549a7686..e6f9e28b 100644 --- a/client/src/pages/Automations/components/Drawer/AutomationActionInnerCard.tsx +++ b/client/src/pages/Automations/components/Drawer/AutomationActionInnerCard.tsx @@ -41,7 +41,7 @@ const AutomationActionInnerCard: React.FC = (props) => { title={'Execute'} icon={ } /> diff --git a/client/src/pages/Automations/components/Drawer/AutomationTriggerInnerCard.tsx b/client/src/pages/Automations/components/Drawer/AutomationTriggerInnerCard.tsx index 39e27891..adf24320 100644 --- a/client/src/pages/Automations/components/Drawer/AutomationTriggerInnerCard.tsx +++ b/client/src/pages/Automations/components/Drawer/AutomationTriggerInnerCard.tsx @@ -41,7 +41,7 @@ const AutomationTriggerInnerCard: React.FC = ( title={'Trigger'} icon={ } /> diff --git a/client/src/pages/Playbooks/components/TreeComponent.tsx b/client/src/pages/Playbooks/components/TreeComponent.tsx index b94d7bde..1eed2ce4 100644 --- a/client/src/pages/Playbooks/components/TreeComponent.tsx +++ b/client/src/pages/Playbooks/components/TreeComponent.tsx @@ -45,9 +45,9 @@ export function buildTree( nodeType: DT.CONSTANTS.DIRECTORY, icon: rootNode.type === Playbooks.PlaybooksRepositoryType.LOCAL ? ( - + ) : ( - + ), selectable: !!onlyDirectories, children: rootNode.children