diff --git a/apps/web/src/components/affine/setting-modal/general-setting/about/config.tsx b/apps/web/src/components/affine/setting-modal/general-setting/about/config.tsx
index b1d9222105..f6cd7407dd 100644
--- a/apps/web/src/components/affine/setting-modal/general-setting/about/config.tsx
+++ b/apps/web/src/components/affine/setting-modal/general-setting/about/config.tsx
@@ -4,6 +4,7 @@ import {
RedditIcon,
TelegramIcon,
TwitterIcon,
+ YouTubeIcon,
} from './icons';
export const relatedLinks = [
@@ -12,24 +13,29 @@ export const relatedLinks = [
title: 'GitHub',
link: 'https://github.com/toeverything/AFFiNE',
},
- {
- icon: ,
- title: 'Reddit',
- link: 'https://www.reddit.com/r/Affine/',
- },
{
icon: ,
title: 'Twitter',
link: 'https://twitter.com/AffineOfficial',
},
+ {
+ icon: ,
+ title: 'Discord',
+ link: 'https://discord.gg/Arn7TqJBvG',
+ },
+ {
+ icon: ,
+ title: 'YouTube',
+ link: 'https://www.youtube.com/@affinepro',
+ },
{
icon: ,
title: 'Telegram',
link: 'https://t.me/affineworkos',
},
{
- icon: ,
- title: 'Discord',
- link: 'https://discord.gg/Arn7TqJBvG',
+ icon: ,
+ title: 'Reddit',
+ link: 'https://www.reddit.com/r/Affine/',
},
];
diff --git a/apps/web/src/components/affine/setting-modal/general-setting/about/icons.tsx b/apps/web/src/components/affine/setting-modal/general-setting/about/icons.tsx
index 563bb4abef..b370f843d7 100644
--- a/apps/web/src/components/affine/setting-modal/general-setting/about/icons.tsx
+++ b/apps/web/src/components/affine/setting-modal/general-setting/about/icons.tsx
@@ -36,13 +36,16 @@ export const DocIcon = () => {
export const TwitterIcon = () => {
return (
);
};
@@ -50,9 +53,9 @@ export const TwitterIcon = () => {
export const GithubIcon = () => {
return (
@@ -74,18 +77,21 @@ export const GithubIcon = () => {
export const DiscordIcon = () => {
return (
@@ -95,13 +101,33 @@ export const DiscordIcon = () => {
export const TelegramIcon = () => {
return (
);
};
@@ -109,14 +135,20 @@ export const TelegramIcon = () => {
export const RedditIcon = () => {
return (
);
};
@@ -138,3 +170,20 @@ export const LinkIcon = () => {
);
};
+export const YouTubeIcon = () => {
+ return (
+
+ );
+};
diff --git a/apps/web/src/components/affine/setting-modal/general-setting/about/style.css.ts b/apps/web/src/components/affine/setting-modal/general-setting/about/style.css.ts
index 9f9a44950e..fa1da6478b 100644
--- a/apps/web/src/components/affine/setting-modal/general-setting/about/style.css.ts
+++ b/apps/web/src/components/affine/setting-modal/general-setting/about/style.css.ts
@@ -24,22 +24,21 @@ globalStyle(`${link} .icon`, {
export const communityWrapper = style({
display: 'grid',
justifyContent: 'space-between',
- gridTemplateColumns: 'repeat(auto-fill, 84px)',
+ gridTemplateColumns: 'repeat(auto-fill, 70px)',
gridGap: '6px',
});
export const communityItem = style({
- width: '84px',
- height: '58px',
borderRadius: '8px',
border: '1px solid var(--affine-border-color)',
color: 'var(--affine-text-primary-color)',
cursor: 'pointer',
+ padding: '6px 8px',
});
globalStyle(`${communityItem} svg`, {
width: '24px',
height: '24px',
display: 'block',
- margin: '8px auto 4px',
+ margin: '0 auto 2px',
});
globalStyle(`${communityItem} p`, {
fontSize: 'var(--affine-font-xs)',