Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-01-06 20:40:08 -05:00
Code Issues Activity

fix(console): application icon size (#1237)

Browse source
This commit is contained in:
Xiao Yijun 2022-06-27 10:47:38 +08:00 committed by GitHub
parent 560408fc9a
commit 86aec6cdf3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 35 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
packages/console/src/components/ApplicationIcon/index.tsx
View file

@ -1,32 +1,20 @@
import { AppearanceMode, ApplicationType } from '@logto/schemas';
import React from 'react';
import NativeAppDark from '@/assets/images/native-app-dark.svg';
import NativeApp from '@/assets/images/native-app.svg';
import SinglePageAppDark from '@/assets/images/single-page-app-dark.svg';
import SinglePageApp from '@/assets/images/single-page-app.svg';
import TraditionalWebAppDark from '@/assets/images/traditional-web-app-dark.svg';
import TraditionalWebApp from '@/assets/images/traditional-web-app.svg';
import { darkModeApplicationIconMap, lightModeApplicationIconMap } from '@/consts';
import { useTheme } from '@/hooks/use-theme';
type Props = {
type: ApplicationType;
className?: string;
};
const ApplicationIcon = ({ type }: Props) => {
const ApplicationIcon = ({ type, className }: Props) => {
const theme = useTheme();
const isLightMode = theme === AppearanceMode.LightMode;
const Icon = isLightMode ? lightModeApplicationIconMap[type] : darkModeApplicationIconMap[type];
switch (type) {
case ApplicationType.Native:
return isLightMode ? <NativeApp /> : <NativeAppDark />;
case ApplicationType.SPA:
return isLightMode ? <SinglePageApp /> : <SinglePageAppDark />;
case ApplicationType.Traditional:
return isLightMode ? <TraditionalWebApp /> : <TraditionalWebAppDark />;
default:
return null;
}
return <Icon className={className} />;
};
export default ApplicationIcon;

23
packages/console/src/consts/applications.ts
View file

@ -1,7 +1,30 @@
import { ApplicationType } from '@logto/schemas';
import NativeAppDark from '@/assets/images/native-app-dark.svg';
import NativeApp from '@/assets/images/native-app.svg';
import SinglePageAppDark from '@/assets/images/single-page-app-dark.svg';
import SinglePageApp from '@/assets/images/single-page-app.svg';
import TraditionalWebAppDark from '@/assets/images/traditional-web-app-dark.svg';
import TraditionalWebApp from '@/assets/images/traditional-web-app.svg';
export const applicationTypeI18nKey = Object.freeze({
[ApplicationType.Native]: 'applications.type.native',
[ApplicationType.SPA]: 'applications.type.spa',
[ApplicationType.Traditional]: 'applications.type.traditional',
} as const);
type ApplicationIconMap = {
[key in ApplicationType]: SvgComponent;
};
export const lightModeApplicationIconMap: ApplicationIconMap = Object.freeze({
[ApplicationType.Native]: NativeApp,
[ApplicationType.SPA]: SinglePageApp,
[ApplicationType.Traditional]: TraditionalWebApp,
} as const);
export const darkModeApplicationIconMap: ApplicationIconMap = Object.freeze({
[ApplicationType.Native]: NativeAppDark,
[ApplicationType.SPA]: SinglePageAppDark,
[ApplicationType.Traditional]: TraditionalWebAppDark,
} as const);

6
packages/console/src/pages/ApplicationDetails/index.module.scss
View file

@ -34,6 +34,12 @@
margin-left: _.unit(6);
}
.icon {
margin-left: _.unit(2);
width: 60px;
height: 60px;
}
.operations {
display: flex;
align-items: center;

2
packages/console/src/pages/ApplicationDetails/index.tsx
View file

@ -115,7 +115,7 @@ const ApplicationDetails = () => {
{data && oidcConfig && (
<>
<Card className={styles.header}>
<ApplicationIcon type={data.type} />
<ApplicationIcon type={data.type} className={styles.icon} />
<div className={styles.metadata}>
<div className={styles.name}>{data.name}</div>
<div className={styles.details}>