Skip to content

Commit 8fd035c

Browse files
canisminor1990canisminor1990
committed
💄 style: Update style
1 parent 680554e commit 8fd035c

File tree

10 files changed

+236
-69
lines changed

10 files changed

+236
-69
lines changed

‎javascript/main.js

+76-45
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@
6868
},
6969
"dependencies": {
7070
"@bluelovers/auto1111-pnginfo": "^2.0.2",
71+
"@icons-pack/react-simple-icons": "^9.5.0",
7172
"@lobehub/ui": "^1.138.24",
7273
"@rollup/rollup-win32-x64-msvc": "^4.17.2",
7374
"ahooks": "^3.7.11",

‎src/components/Logo/index.tsx

+18-1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { Logo as LobeLogo } from '@lobehub/ui';
22
import isEqual from 'fast-deep-equal';
33
import { type CSSProperties, memo } from 'react';
44

5+
import { GITHUB_REPO_URL } from '@/const/url';
56
import { selectors, useAppStore } from '@/store';
67

78
import CustomLogo from './CustomLogo';
@@ -31,7 +32,23 @@ const Logo = memo<LogoProps>(({ size = 32, style }) => {
3132
);
3233
}
3334

34-
return <LobeLogo extra="SD" size={size} style={style} type="combine" />;
35+
return (
36+
<LobeLogo
37+
extra={
38+
<a
39+
href={GITHUB_REPO_URL}
40+
rel="noreferrer"
41+
style={{ color: 'inherit', fontWeight: 400 }}
42+
target="_blank"
43+
>
44+
SD
45+
</a>
46+
}
47+
size={size}
48+
style={style}
49+
type="combine"
50+
/>
51+
);
3552
});
3653

3754
export default Logo;

‎src/const/url.ts

+2
Original file line numberDiff line numberDiff line change
@@ -13,3 +13,5 @@ export const SITE_URL = location.origin;
1313
export const EMAIL_SUPPORT = '[email protected]';
1414
export const EMAIL_BUSINESS = '[email protected]';
1515
export const X = 'https://x.com/lobehub';
16+
export const MEDIDUM_URL = 'https://medium.com/@lobehub';
17+
export const STATUS_URL = 'https://status.lobehub.com';

‎src/features/Footer/Brand.tsx

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { Logo } from '@lobehub/ui';
2+
import { createStyles, useThemeMode } from 'antd-style';
3+
import { memo } from 'react';
4+
import { Flexbox } from 'react-layout-kit';
5+
import urlJoin from 'url-join';
6+
7+
import { OFFICIAL_SITE, STATUS_URL } from '@/const/url';
8+
9+
import Follow from './Follow';
10+
11+
export const COPYRIGHT = `© 2023-${new Date().getFullYear()} LobeHub, LLC`;
12+
13+
const useStyles = createStyles(({ css, token }) => {
14+
return {
15+
container: css`
16+
font-size: 14px;
17+
`,
18+
description: css`
19+
color: ${token.colorTextDescription};
20+
`,
21+
logo: css`
22+
display: flex;
23+
flex: none;
24+
align-items: center;
25+
color: inherit !important;
26+
`,
27+
status: css`
28+
color-scheme: none;
29+
background: transparent;
30+
border: none !important;
31+
`,
32+
};
33+
});
34+
35+
const Brand = memo(() => {
36+
const { styles } = useStyles();
37+
const { isDarkMode } = useThemeMode();
38+
39+
return (
40+
<Flexbox className={styles.container} gap={16}>
41+
<a className={styles.logo} href={OFFICIAL_SITE}>
42+
<Logo type={'combine'} />
43+
</a>
44+
<div>Empowering your AI dreams</div>
45+
<div className={styles.description}>{COPYRIGHT}</div>
46+
<Follow />
47+
<iframe
48+
className={styles.status}
49+
height="30"
50+
loading={'lazy'}
51+
scrolling="no"
52+
src={urlJoin(STATUS_URL, `badge?theme=${isDarkMode ? 'dark' : 'light'}`)}
53+
width="250"
54+
/>
55+
</Flexbox>
56+
);
57+
});
58+
59+
export default Brand;

‎src/features/Footer/Follow.tsx

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { SiDiscord, SiGithub, SiMedium, SiX } from '@icons-pack/react-simple-icons';
2+
import { ActionIcon } from '@lobehub/ui';
3+
import { createStyles } from 'antd-style';
4+
import { memo } from 'react';
5+
import { useTranslation } from 'react-i18next';
6+
import { Flexbox } from 'react-layout-kit';
7+
8+
import { DISCORD_URL, GITHUB_REPO_URL, MEDIDUM_URL, X } from '@/const/url';
9+
10+
const useStyles = createStyles(({ css, token }) => {
11+
return {
12+
icon: css`
13+
svg {
14+
fill: ${token.colorTextDescription};
15+
}
16+
17+
&:hover {
18+
svg {
19+
fill: ${token.colorText};
20+
}
21+
}
22+
`,
23+
};
24+
});
25+
26+
const Follow = memo(() => {
27+
const { styles } = useStyles();
28+
const { t } = useTranslation('common');
29+
return (
30+
<Flexbox gap={8} horizontal>
31+
<a href={GITHUB_REPO_URL} rel="noreferrer" target={'_blank'}>
32+
<ActionIcon
33+
className={styles.icon}
34+
icon={SiGithub as any}
35+
title={t('follow', { name: 'GitHub' })}
36+
/>
37+
</a>
38+
<a href={X} rel="noreferrer" target={'_blank'}>
39+
<ActionIcon className={styles.icon} icon={SiX as any} title={t('follow', { name: 'X' })} />
40+
</a>
41+
<a href={DISCORD_URL} rel="noreferrer" target={'_blank'}>
42+
<ActionIcon
43+
className={styles.icon}
44+
icon={SiDiscord as any}
45+
title={t('follow', { name: 'Discord' })}
46+
/>
47+
</a>
48+
<a href={MEDIDUM_URL} rel="noreferrer" target={'_blank'}>
49+
<ActionIcon
50+
className={styles.icon}
51+
icon={SiMedium as any}
52+
title={t('follow', { name: 'Medium' })}
53+
/>
54+
</a>
55+
</Flexbox>
56+
);
57+
});
58+
59+
export default Follow;

‎src/features/Footer/data.tsx

+12-15
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,18 @@ export const Resources = [
3737
];
3838

3939
export const Community = [
40+
{
41+
icon: <Icon icon={Github} size="small" />,
42+
openExternal: true,
43+
title: 'GitHub',
44+
url: GITHUB_REPO_URL,
45+
},
46+
{
47+
icon: <Icon icon={FileClock} size="small" />,
48+
openExternal: true,
49+
title: 'Changelog',
50+
url: `${GITHUB_REPO_URL}/blob/main/CHANGELOG.md`,
51+
},
4052
{
4153
icon: <Icon icon={Heart} size="small" />,
4254
openExternal: true,
@@ -57,21 +69,6 @@ export const Community = [
5769
},
5870
];
5971

60-
export const Help = [
61-
{
62-
icon: <Icon icon={Github} size="small" />,
63-
openExternal: true,
64-
title: 'GitHub',
65-
url: GITHUB_REPO_URL,
66-
},
67-
{
68-
icon: <Icon icon={FileClock} size="small" />,
69-
openExternal: true,
70-
title: 'Changelog',
71-
url: `${GITHUB_REPO_URL}/blob/main/CHANGELOG.md`,
72-
},
73-
];
74-
7572
export const MoreProducts = [
7673
{
7774
description: 'Stable Diffusion Extension',

‎src/features/Footer/index.tsx

+6-5
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ import { useInject } from '@/hooks/useInject';
77
import { selectors, useAppStore } from '@/store';
88
import { type DivProps } from '@/types';
99

10-
import { Community, Help, MoreProducts, Resources } from './data';
10+
import Brand from './Brand';
11+
import { Community, MoreProducts, Resources } from './data';
1112
import { useStyles } from './style';
1213

1314
const Footer = memo<DivProps>(({ className, ...props }) => {
@@ -37,6 +38,9 @@ const Footer = memo<DivProps>(({ className, ...props }) => {
3738
setting.layoutHideFooter ?
3839
[] :
3940
[
41+
{
42+
title: <Brand />,
43+
},
4044
{
4145
items: Resources,
4246
title: t('footer.resources'),
@@ -45,16 +49,13 @@ const Footer = memo<DivProps>(({ className, ...props }) => {
4549
items: Community,
4650
title: t('footer.community'),
4751
},
48-
{
49-
items: Help,
50-
title: t('footer.help'),
51-
},
5252
{
5353
items: MoreProducts,
5454
title: t('footer.moreProducts'),
5555
},
5656
]
5757
}
58+
contentMaxWidth={1280}
5859
/>
5960
</div>
6061
);

‎src/features/Header/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { useTheme } from 'antd-style';
33
import { memo } from 'react';
44

55
import { Logo } from '@/components';
6-
import { GITHUB_REPO_URL } from '@/const/url';
6+
import { OFFICIAL_SITE } from '@/const/url';
77
import { useAppStore } from '@/store';
88
import { type DivProps } from '@/types';
99

@@ -23,7 +23,7 @@ const Header = memo<DivProps>(({ children }) => {
2323
actionsStyle={{ flex: 0 }}
2424
logo={
2525
<a
26-
href={`${GITHUB_REPO_URL}/releases`}
26+
href={OFFICIAL_SITE}
2727
rel="noreferrer"
2828
style={{ alignItems: 'center', color: theme.colorText, display: 'flex' }}
2929
target="_blank"

‎src/features/Setting/Sidebar/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const Sidebar = memo<SidebarProps>(({ tab, setTab }) => {
2525
return (
2626
<SidebarLayout
2727
desc={
28-
<Flexbox align={'center'} gap={4} horizontal>
28+
<Flexbox align={'center'} gap={8} horizontal wrap={'wrap'}>
2929
{t('modal.themeSetting.desc')}
3030
<VersionTag />
3131
</Flexbox>

0 commit comments

Comments
 (0)