From 29c3744c53d6001653a2809353fdcdd97301a382 Mon Sep 17 00:00:00 2001
From: JimmFly <yangjinfei001@gmail.com>
Date: Thu, 6 Jul 2023 15:24:36 +0800
Subject: [PATCH] chore: update communities link and icon (#3052)

(cherry picked from commit f468dff6aab32955293c413f09bf7d653adfc2f5)
---
 .../general-setting/about/config.tsx          |  22 ++--
 .../general-setting/about/icons.tsx           | 105 +++++++++++++-----
 .../general-setting/about/style.css.ts        |   7 +-
 3 files changed, 94 insertions(+), 40 deletions(-)

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: <RedditIcon />,
-    title: 'Reddit',
-    link: 'https://www.reddit.com/r/Affine/',
-  },
   {
     icon: <TwitterIcon />,
     title: 'Twitter',
     link: 'https://twitter.com/AffineOfficial',
   },
+  {
+    icon: <DiscordIcon />,
+    title: 'Discord',
+    link: 'https://discord.gg/Arn7TqJBvG',
+  },
+  {
+    icon: <YouTubeIcon />,
+    title: 'YouTube',
+    link: 'https://www.youtube.com/@affinepro',
+  },
   {
     icon: <TelegramIcon />,
     title: 'Telegram',
     link: 'https://t.me/affineworkos',
   },
   {
-    icon: <DiscordIcon />,
-    title: 'Discord',
-    link: 'https://discord.gg/Arn7TqJBvG',
+    icon: <RedditIcon />,
+    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 (
     <svg
-      width="22"
-      height="22"
-      viewBox="0 0 22 22"
-      fill="currentColor"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <path d="M21.6725 4.5259C20.9071 4.86507 20.0848 5.09423 19.2204 5.19782C20.1123 4.66413 20.7796 3.82416 21.0977 2.83465C20.2598 3.33239 19.3426 3.68274 18.3862 3.87048C17.7431 3.18378 16.8912 2.72861 15.9629 2.57567C15.0345 2.42272 14.0816 2.58054 13.2522 3.02463C12.4227 3.46872 11.7631 4.17423 11.3757 5.03163C10.9883 5.88902 10.8948 6.85034 11.1097 7.76632C9.41177 7.68106 7.75072 7.23974 6.23436 6.47098C4.71801 5.70222 3.38025 4.62321 2.30789 3.30398C1.94123 3.93648 1.73039 4.66982 1.73039 5.45082C1.72998 6.1539 1.90312 6.8462 2.23445 7.46632C2.56577 8.08644 3.04504 8.61518 3.62973 9.00565C2.95165 8.98407 2.28853 8.80085 1.69556 8.47123V8.52623C1.69549 9.51233 2.03659 10.4681 2.66098 11.2313C3.28536 11.9945 4.15458 12.5183 5.12114 12.7136C4.49211 12.8838 3.83262 12.9089 3.19248 12.7869C3.46518 13.6354 3.99639 14.3773 4.71173 14.9089C5.42707 15.4405 6.29073 15.7351 7.18181 15.7514C5.66916 16.9389 3.80104 17.583 1.87798 17.5801C1.53733 17.5802 1.19696 17.5603 0.858643 17.5206C2.81066 18.7756 5.08295 19.4417 7.40364 19.4391C15.2595 19.4391 19.5541 12.9326 19.5541 7.28965C19.5541 7.10632 19.5495 6.92115 19.5412 6.73782C20.3766 6.13371 21.0976 5.38564 21.6706 4.52865L21.6725 4.5259V4.5259Z" />
+      <path
+        d="M22 5.88235C21.2639 6.21176 20.4704 6.42824 19.6482 6.53176C20.4895 6.03294 21.1396 5.24235 21.4455 4.29176C20.652 4.76235 19.7725 5.09176 18.8451 5.28C18.0899 4.47059 17.0287 4 15.8241 4C13.5774 4 11.7419 5.80706 11.7419 8.03765C11.7419 8.35765 11.7801 8.66824 11.847 8.96C8.4436 8.79059 5.413 7.18118 3.39579 4.74353C3.04207 5.33647 2.8413 6.03294 2.8413 6.76706C2.8413 8.16941 3.55832 9.41176 4.6673 10.1176C3.98853 10.1176 3.35755 9.92941 2.80306 9.64706V9.67529C2.80306 11.6329 4.21797 13.2706 6.09178 13.6376C5.49018 13.7997 4.8586 13.8223 4.24665 13.7035C4.50632 14.5059 5.01485 15.2079 5.70078 15.711C6.38671 16.2141 7.21553 16.4929 8.07075 16.5082C6.62106 17.6381 4.82409 18.2488 2.97514 18.24C2.6501 18.24 2.32505 18.2212 2 18.1835C3.81644 19.3318 5.97706 20 8.29063 20C15.8241 20 19.9637 13.8447 19.9637 8.50824C19.9637 8.32941 19.9637 8.16 19.9541 7.98118C20.7572 7.41647 21.4455 6.70118 22 5.88235Z"
+        fill="#1D9BF0"
+      />
     </svg>
   );
 };
@@ -50,9 +53,9 @@ export const TwitterIcon = () => {
 export const GithubIcon = () => {
   return (
     <svg
-      width="22"
-      height="22"
-      viewBox="0 0 22 22"
+      width="25"
+      height="24"
+      viewBox="0 0 25 24"
       fill="currentColor"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -60,12 +63,12 @@ export const GithubIcon = () => {
         <path
           fillRule="evenodd"
           clipRule="evenodd"
-          d="M10.9999 0.000812531C4.92238 0.000812531 -0.00012207 4.92331 -0.00012207 11.0008C-0.00012207 15.8683 3.14863 19.9796 7.52113 21.4371C8.07113 21.5333 8.27738 21.2033 8.27738 20.9146C8.27738 20.6533 8.26363 19.7871 8.26363 18.8658C5.49988 19.3746 4.78488 18.1921 4.56488 17.5733C4.44113 17.2571 3.90488 16.2808 3.43738 16.0196C3.05238 15.8133 2.50238 15.3046 3.42363 15.2908C4.28988 15.2771 4.90863 16.0883 5.11488 16.4183C6.10488 18.0821 7.68613 17.6146 8.31863 17.3258C8.41488 16.6108 8.70363 16.1296 9.01988 15.8546C6.57238 15.5796 4.01488 14.6308 4.01488 10.4233C4.01488 9.22706 4.44113 8.23706 5.14238 7.46706C5.03238 7.19206 4.64738 6.06456 5.25238 4.55206C5.25238 4.55206 6.17363 4.26331 8.27738 5.67956C9.15738 5.43206 10.0924 5.30831 11.0274 5.30831C11.9624 5.30831 12.8974 5.43206 13.7774 5.67956C15.8811 4.24956 16.8024 4.55206 16.8024 4.55206C17.4074 6.06456 17.0224 7.19206 16.9124 7.46706C17.6136 8.23706 18.0399 9.21331 18.0399 10.4233C18.0399 14.6446 15.4686 15.5796 13.0211 15.8546C13.4199 16.1983 13.7636 16.8583 13.7636 17.8896C13.7636 19.3608 13.7499 20.5433 13.7499 20.9146C13.7499 21.2033 13.9561 21.5471 14.5061 21.4371C16.6898 20.6998 18.5873 19.2964 19.9316 17.4242C21.2758 15.5521 21.9992 13.3056 21.9999 11.0008C21.9999 4.92331 17.0774 0.000812531 10.9999 0.000812531Z"
+          d="M12.667 2C7.14199 2 2.66699 6.58819 2.66699 12.2529C2.66699 16.7899 5.52949 20.6219 9.50449 21.9804C10.0045 22.0701 10.192 21.7625 10.192 21.4934C10.192 21.2499 10.1795 20.4425 10.1795 19.5838C7.66699 20.058 7.01699 18.9558 6.81699 18.3791C6.70449 18.0843 6.21699 17.1743 5.79199 16.9308C5.44199 16.7386 4.94199 16.2644 5.77949 16.2516C6.56699 16.2388 7.12949 16.9949 7.31699 17.3025C8.21699 18.8533 9.65449 18.4175 10.2295 18.1484C10.317 17.4819 10.5795 17.0334 10.867 16.777C8.64199 16.5207 6.31699 15.6364 6.31699 11.7147C6.31699 10.5997 6.70449 9.67689 7.34199 8.95918C7.24199 8.70286 6.89199 7.65193 7.44199 6.24215C7.44199 6.24215 8.27949 5.97301 10.192 7.29308C10.992 7.06239 11.842 6.94704 12.692 6.94704C13.542 6.94704 14.392 7.06239 15.192 7.29308C17.1045 5.9602 17.942 6.24215 17.942 6.24215C18.492 7.65193 18.142 8.70286 18.042 8.95918C18.6795 9.67689 19.067 10.5868 19.067 11.7147C19.067 15.6492 16.7295 16.5207 14.5045 16.777C14.867 17.0975 15.1795 17.7126 15.1795 18.6738C15.1795 20.0452 15.167 21.1474 15.167 21.4934C15.167 21.7625 15.3545 22.0829 15.8545 21.9804C17.8396 21.2932 19.5646 19.9851 20.7867 18.2401C22.0088 16.4951 22.6664 14.4012 22.667 12.2529C22.667 6.58819 18.192 2 12.667 2Z"
         />
       </g>
       <defs>
         <clipPath id="clip0_3073_4801">
-          <rect width="22" height="22" fill="white" />
+          <rect width="25" height="24" fill="white" />
         </clipPath>
       </defs>
     </svg>
@@ -74,18 +77,21 @@ export const GithubIcon = () => {
 export const DiscordIcon = () => {
   return (
     <svg
-      width="22"
-      height="22"
-      viewBox="0 0 22 22"
-      fill="currentColor"
+      width="25"
+      height="24"
+      viewBox="0 0 25 24"
+      fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g clipPath="url(#clip0_3073_4817)">
-        <path d="M18.6239 4.11773C17.2214 3.48523 15.718 3.01773 14.146 2.7519C14.132 2.74921 14.1175 2.75094 14.1045 2.75685C14.0915 2.76276 14.0807 2.77256 14.0735 2.7849C13.881 3.12315 13.6665 3.56406 13.5162 3.9124C11.8489 3.66328 10.1538 3.66328 8.48645 3.9124C8.31901 3.52635 8.13019 3.14993 7.92087 2.7849C7.91377 2.77241 7.90304 2.76239 7.8901 2.75617C7.87716 2.74994 7.86263 2.74781 7.84845 2.75006C6.27729 3.0159 4.77395 3.4834 3.37054 4.11681C3.35846 4.12188 3.34823 4.13051 3.3412 4.14156C0.488536 8.33531 -0.293381 12.4255 0.0907023 16.4643C0.0917711 16.4742 0.0948415 16.4838 0.0997268 16.4924C0.104612 16.5011 0.11121 16.5087 0.119119 16.5147C1.78415 17.727 3.64126 18.6504 5.6127 19.2464C5.62645 19.2506 5.64114 19.2506 5.65488 19.2464C5.66862 19.2421 5.68075 19.2338 5.6897 19.2226C6.11393 18.6552 6.48986 18.0533 6.81354 17.4231C6.81803 17.4145 6.82062 17.4051 6.82113 17.3953C6.82164 17.3856 6.82006 17.3759 6.81649 17.3669C6.81293 17.3579 6.80747 17.3497 6.80047 17.343C6.79348 17.3362 6.78512 17.331 6.77595 17.3278C6.18379 17.1048 5.61003 16.8357 5.05995 16.523C5.05007 16.5173 5.04174 16.5093 5.03571 16.4997C5.02969 16.49 5.02615 16.479 5.02542 16.4677C5.0247 16.4563 5.0268 16.4449 5.03155 16.4346C5.03629 16.4243 5.04353 16.4153 5.05262 16.4084C5.16812 16.3231 5.28362 16.2342 5.39362 16.1453C5.40352 16.1373 5.41545 16.1322 5.42807 16.1306C5.4407 16.129 5.45352 16.1309 5.46512 16.1361C9.06487 17.7531 12.9635 17.7531 16.521 16.1361C16.5327 16.1306 16.5456 16.1284 16.5584 16.1299C16.5712 16.1313 16.5834 16.1364 16.5935 16.1444C16.7035 16.2342 16.818 16.3231 16.9345 16.4084C16.9436 16.4151 16.951 16.424 16.9559 16.4342C16.9608 16.4445 16.9631 16.4558 16.9625 16.4672C16.962 16.4785 16.9586 16.4896 16.9528 16.4993C16.9469 16.509 16.9387 16.5172 16.929 16.523C16.3808 16.8383 15.8106 17.1051 15.212 17.3269C15.2028 17.3302 15.1945 17.3355 15.1875 17.3423C15.1805 17.3492 15.175 17.3574 15.1715 17.3665C15.1679 17.3756 15.1663 17.3854 15.1668 17.3952C15.1674 17.4049 15.17 17.4145 15.1745 17.4231C15.5045 18.0529 15.8821 18.6524 16.2974 19.2216C16.306 19.2333 16.318 19.2421 16.3318 19.2467C16.3456 19.2512 16.3605 19.2515 16.3744 19.2473C18.3492 18.653 20.2093 17.7291 21.8762 16.5147C21.8843 16.509 21.8912 16.5017 21.8962 16.4931C21.9013 16.4846 21.9045 16.4751 21.9055 16.4652C22.3639 11.7957 21.1374 7.73856 18.6523 4.1434C18.6462 4.13171 18.6361 4.1226 18.6239 4.11773ZM7.35162 14.0049C6.26812 14.0049 5.37437 13.025 5.37437 11.8232C5.37437 10.6206 6.2507 9.64156 7.35162 9.64156C8.46079 9.64156 9.34629 10.6288 9.32887 11.8232C9.32887 13.0259 8.45254 14.0049 7.35162 14.0049V14.0049ZM14.662 14.0049C13.5776 14.0049 12.6848 13.025 12.6848 11.8232C12.6848 10.6206 13.5602 9.64156 14.662 9.64156C15.7712 9.64156 16.6567 10.6288 16.6393 11.8232C16.6393 13.0259 15.7721 14.0049 14.662 14.0049V14.0049Z" />
+      <g clipPath="url(#clip0_3073_4801)">
+        <path
+          d="M19.2565 5.64663C17.9898 5.05614 16.6183 4.62755 15.1897 4.37993C15.1772 4.37953 15.1647 4.38188 15.1532 4.38681C15.1417 4.39175 15.1314 4.39915 15.1231 4.4085C14.9516 4.72279 14.7516 5.13233 14.6183 5.44662C13.103 5.21804 11.562 5.21804 10.0467 5.44662C9.9134 5.1228 9.71339 4.72279 9.53243 4.4085C9.52291 4.38945 9.49434 4.37993 9.46576 4.37993C8.03715 4.62755 6.67521 5.05614 5.39899 5.64663C5.38946 5.64663 5.37994 5.65615 5.37041 5.66568C2.77987 9.54197 2.06556 13.3135 2.41795 17.0469C2.41795 17.066 2.42748 17.085 2.44652 17.0946C4.16086 18.3517 5.80852 19.1137 7.43714 19.6184C7.46571 19.628 7.49428 19.6184 7.50381 19.5994C7.88477 19.0756 8.22764 18.5232 8.52288 17.9422C8.54193 17.9041 8.52288 17.866 8.48479 17.8565C7.94191 17.647 7.42761 17.3993 6.92284 17.1136C6.88474 17.0946 6.88474 17.0374 6.91331 17.0088C7.01808 16.9327 7.12284 16.8469 7.22761 16.7707C7.24666 16.7517 7.27523 16.7517 7.29428 16.7612C10.5706 18.2565 14.104 18.2565 17.3422 16.7612C17.3612 16.7517 17.3898 16.7517 17.4088 16.7707C17.5136 16.8565 17.6184 16.9327 17.7231 17.0184C17.7612 17.0469 17.7612 17.1041 17.7136 17.1231C17.2184 17.4184 16.6945 17.6565 16.1517 17.866C16.1136 17.8755 16.104 17.9232 16.1136 17.9517C16.4183 18.5327 16.7612 19.0851 17.1326 19.6089C17.1612 19.6184 17.1898 19.628 17.2184 19.6184C18.8565 19.1137 20.5042 18.3517 22.2185 17.0946C22.2375 17.085 22.2471 17.066 22.2471 17.0469C22.6661 12.7325 21.5518 8.98958 19.2946 5.66568C19.2851 5.65615 19.2756 5.64663 19.2565 5.64663ZM9.01813 14.7707C8.03715 14.7707 7.21808 13.8659 7.21808 12.7516C7.21808 11.6373 8.01811 10.7325 9.01813 10.7325C10.0277 10.7325 10.8277 11.6468 10.8182 12.7516C10.8182 13.8659 10.0182 14.7707 9.01813 14.7707ZM15.6564 14.7707C14.6754 14.7707 13.8564 13.8659 13.8564 12.7516C13.8564 11.6373 14.6564 10.7325 15.6564 10.7325C16.666 10.7325 17.466 11.6468 17.4565 12.7516C17.4565 13.8659 16.666 14.7707 15.6564 14.7707Z"
+          fill="#5865F2"
+        />
       </g>
       <defs>
-        <clipPath id="clip0_3073_4817">
-          <rect width="22" height="22" fill="white" />
+        <clipPath id="clip0_3073_4801">
+          <rect width="25" height="24" fill="white" />
         </clipPath>
       </defs>
     </svg>
@@ -95,13 +101,33 @@ export const DiscordIcon = () => {
 export const TelegramIcon = () => {
   return (
     <svg
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="currentColor"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <path d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM14.64 6.8C14.49 8.38 13.84 12.22 13.51 13.99C13.37 14.74 13.09 14.99 12.83 15.02C12.25 15.07 11.81 14.64 11.25 14.27C10.37 13.69 9.87 13.33 9.02 12.77C8.03 12.12 8.67 11.76 9.24 11.18C9.39 11.03 11.95 8.7 12 8.49C12.0069 8.45819 12.006 8.42517 11.9973 8.3938C11.9886 8.36244 11.9724 8.33367 11.95 8.31C11.89 8.26 11.81 8.28 11.74 8.29C11.65 8.31 10.25 9.24 7.52 11.08C7.12 11.35 6.76 11.49 6.44 11.48C6.08 11.47 5.4 11.28 4.89 11.11C4.26 10.91 3.77 10.8 3.81 10.45C3.83 10.27 4.08 10.09 4.55 9.9C7.47 8.63 9.41 7.79 10.38 7.39C13.16 6.23 13.73 6.03 14.11 6.03C14.19 6.03 14.38 6.05 14.5 6.15C14.6 6.23 14.63 6.34 14.64 6.42C14.63 6.48 14.65 6.66 14.64 6.8Z" />
+      <path
+        d="M12 2C9.34844 2 6.80312 3.05422 4.92969 4.92891C3.05432 6.80434 2.00052 9.34778 2 12C2 14.6511 3.05469 17.1964 4.92969 19.0711C6.80312 20.9458 9.34844 22 12 22C14.6516 22 17.1969 20.9458 19.0703 19.0711C20.9453 17.1964 22 14.6511 22 12C22 9.34891 20.9453 6.80359 19.0703 4.92891C17.1969 3.05422 14.6516 2 12 2Z"
+        fill="url(#paint0_linear_8233_169329)"
+      />
+      <path
+        d="M6.5267 11.8943C9.44232 10.6243 11.3861 9.78694 12.3579 9.38241C15.1361 8.22726 15.7126 8.02663 16.0892 8.01983C16.172 8.01851 16.3564 8.03898 16.4767 8.13624C16.5767 8.21827 16.6048 8.32921 16.6189 8.4071C16.6314 8.48491 16.6486 8.66226 16.6345 8.80069C16.4845 10.3819 15.8329 14.2191 15.5017 15.9902C15.3626 16.7396 15.0861 16.9908 14.8189 17.0154C14.2376 17.0688 13.797 16.6316 13.2345 16.263C12.3548 15.686 11.8579 15.3269 11.0033 14.764C10.0158 14.1134 10.6564 13.7557 11.2189 13.1713C11.3658 13.0184 13.9251 10.691 13.9736 10.4799C13.9798 10.4535 13.9861 10.3551 13.9267 10.3032C13.8689 10.2512 13.7829 10.269 13.7204 10.283C13.6314 10.303 12.2267 11.2324 9.5017 13.071C9.10326 13.3451 8.74232 13.4787 8.41732 13.4716C8.06107 13.464 7.37357 13.2698 6.86264 13.1038C6.23764 12.9002 5.7392 12.7926 5.78295 12.4468C5.80482 12.2668 6.05326 12.0826 6.5267 11.8943Z"
+        fill="white"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_8233_169329"
+          x1="1002"
+          y1="2"
+          x2="1002"
+          y2="2002"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#2AABEE" />
+          <stop offset="1" stopColor="#229ED9" />
+        </linearGradient>
+      </defs>
     </svg>
   );
 };
@@ -109,14 +135,20 @@ export const TelegramIcon = () => {
 export const RedditIcon = () => {
   return (
     <svg
-      width="24"
+      width="25"
       height="24"
-      viewBox="0 0 24 24"
-      fill="currentColor"
+      viewBox="0 0 25 24"
+      fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <path d="M10.75 13.04C10.75 12.47 10.28 12 9.71 12C9.14 12 8.67 12.47 8.67 13.04C8.67 13.3158 8.77957 13.5804 8.97461 13.7754C9.16965 13.9704 9.43418 14.08 9.71 14.08C9.98583 14.08 10.2504 13.9704 10.4454 13.7754C10.6404 13.5804 10.75 13.3158 10.75 13.04ZM14.09 15.41C13.64 15.86 12.68 16.02 12 16.02C11.32 16.02 10.36 15.86 9.91 15.41C9.88567 15.384 9.85626 15.3632 9.82357 15.349C9.79089 15.3348 9.75563 15.3275 9.72 15.3275C9.68437 15.3275 9.64911 15.3348 9.61643 15.349C9.58374 15.3632 9.55432 15.384 9.53 15.41C9.50396 15.4343 9.4832 15.4637 9.469 15.4964C9.45481 15.5291 9.44748 15.5644 9.44748 15.6C9.44748 15.6356 9.45481 15.6709 9.469 15.7036C9.4832 15.7363 9.50396 15.7657 9.53 15.79C10.24 16.5 11.6 16.56 12 16.56C12.4 16.56 13.76 16.5 14.47 15.79C14.496 15.7657 14.5168 15.7363 14.531 15.7036C14.5452 15.6709 14.5525 15.6356 14.5525 15.6C14.5525 15.5644 14.5452 15.5291 14.531 15.4964C14.5168 15.4637 14.496 15.4343 14.47 15.41C14.37 15.31 14.2 15.31 14.09 15.41ZM14.29 12C13.72 12 13.25 12.47 13.25 13.04C13.25 13.61 13.72 14.08 14.29 14.08C14.86 14.08 15.33 13.61 15.33 13.04C15.33 12.47 14.87 12 14.29 12Z" />
-      <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM17.8 13.33C17.82 13.47 17.83 13.62 17.83 13.77C17.83 16.01 15.22 17.83 12 17.83C8.78 17.83 6.17 16.01 6.17 13.77C6.17 13.62 6.18 13.47 6.2 13.33C5.69 13.1 5.34 12.59 5.34 12C5.33852 11.7132 5.4218 11.4324 5.57939 11.1929C5.73698 10.9533 5.96185 10.7656 6.22576 10.6534C6.48966 10.5413 6.78083 10.5096 7.06269 10.5623C7.34456 10.6151 7.60454 10.75 7.81 10.95C8.82 10.22 10.22 9.76 11.77 9.71L12.51 6.22C12.52 6.15 12.56 6.09 12.62 6.06C12.68 6.02 12.75 6.01 12.82 6.02L15.24 6.54C15.3221 6.37358 15.4472 6.23215 15.6023 6.13038C15.7575 6.02861 15.9371 5.9702 16.1224 5.96122C16.3077 5.95224 16.4921 5.99301 16.6564 6.07931C16.8207 6.1656 16.9589 6.29428 17.0566 6.45199C17.1544 6.60969 17.2082 6.79069 17.2125 6.9762C17.2167 7.16171 17.1712 7.34498 17.0808 7.507C16.9903 7.66901 16.8582 7.80388 16.698 7.8976C16.5379 7.99132 16.3556 8.04049 16.17 8.04C15.61 8.04 15.16 7.6 15.13 7.05L12.96 6.59L12.3 9.71C13.83 9.76 15.2 10.23 16.2 10.95C16.3533 10.8036 16.5367 10.6925 16.7375 10.6244C16.9382 10.5563 17.1514 10.5329 17.3621 10.5558C17.5728 10.5787 17.776 10.6474 17.9574 10.757C18.1388 10.8667 18.2941 11.0146 18.4123 11.1905C18.5306 11.3664 18.609 11.5661 18.642 11.7754C18.6751 11.9848 18.662 12.1989 18.6037 12.4027C18.5454 12.6064 18.4432 12.795 18.3044 12.9552C18.1656 13.1154 17.9934 13.2433 17.8 13.33Z" />
+      <path
+        d="M12.334 22C17.8568 22 22.334 17.5228 22.334 12C22.334 6.47715 17.8568 2 12.334 2C6.81114 2 2.33398 6.47715 2.33398 12C2.33398 17.5228 6.81114 22 12.334 22Z"
+        fill="#FF4500"
+      />
+      <path
+        d="M18.9863 12.0954C18.9863 11.2848 18.3308 10.641 17.5319 10.641C17.1545 10.6404 16.7915 10.7857 16.5186 11.0463C15.5172 10.331 14.1461 9.86611 12.6202 9.8065L13.2877 6.68299L15.4574 7.14783C15.4814 7.69627 15.9343 8.13744 16.4948 8.13744C17.067 8.13744 17.5319 7.6726 17.5319 7.1001C17.5319 6.52791 17.067 6.06299 16.4948 6.06299C16.0895 6.06299 15.7316 6.30143 15.5648 6.64721L13.1448 6.13455C13.0732 6.12252 13.0016 6.13455 12.9539 6.17033C12.8943 6.20611 12.8586 6.26564 12.8468 6.33721L12.1074 9.8183C10.5577 9.86611 9.16273 10.331 8.14945 11.0583C7.87653 10.7976 7.51349 10.6524 7.13609 10.653C6.32539 10.653 5.68164 11.3085 5.68164 12.1074C5.68164 12.7035 6.03922 13.2041 6.54008 13.4308C6.51576 13.5766 6.50379 13.7241 6.5043 13.8719C6.5043 16.113 9.11524 17.9372 12.3341 17.9372C15.553 17.9372 18.1639 16.125 18.1639 13.8719C18.1638 13.7241 18.1519 13.5766 18.1281 13.4308C18.6288 13.2041 18.9863 12.6914 18.9863 12.0954ZM8.99586 13.1325C8.99586 12.5603 9.4607 12.0954 10.0332 12.0954C10.6054 12.0954 11.0703 12.5603 11.0703 13.1325C11.0703 13.7048 10.6055 14.1699 10.0332 14.1699C9.46078 14.1816 8.99586 13.7048 8.99586 13.1325ZM14.8019 15.8865C14.0866 16.6019 12.7274 16.6496 12.3341 16.6496C11.9288 16.6496 10.5697 16.5899 9.86609 15.8865C9.75898 15.7792 9.75898 15.6123 9.86609 15.505C9.97344 15.3979 10.1403 15.3979 10.2477 15.505C10.7008 15.9581 11.6545 16.113 12.3341 16.113C13.0137 16.113 13.9792 15.9581 14.4203 15.505C14.5277 15.3979 14.6945 15.3979 14.8019 15.505C14.8972 15.6123 14.8972 15.7792 14.8019 15.8865ZM14.611 14.1817C14.0387 14.1817 13.5739 13.7168 13.5739 13.1446C13.5739 12.5723 14.0387 12.1074 14.611 12.1074C15.1834 12.1074 15.6483 12.5723 15.6483 13.1446C15.6483 13.7047 15.1834 14.1817 14.611 14.1817Z"
+        fill="white"
+      />
     </svg>
   );
 };
@@ -138,3 +170,20 @@ export const LinkIcon = () => {
     </svg>
   );
 };
+export const YouTubeIcon = () => {
+  return (
+    <svg
+      width="25"
+      height="24"
+      viewBox="0 0 25 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M21.7477 7.19232C21.6387 6.76858 21.4261 6.38227 21.1311 6.07186C20.8361 5.76145 20.4689 5.53776 20.0662 5.42308C18.5917 5 12.6575 5 12.6575 5C12.6575 5 6.72304 5.01281 5.24858 5.43589C4.84583 5.55057 4.47865 5.77427 4.18363 6.0847C3.88861 6.39512 3.67602 6.78145 3.56705 7.2052C3.12106 9.96155 2.94806 14.1616 3.5793 16.8077C3.68828 17.2314 3.90087 17.6177 4.19589 17.9281C4.49092 18.2386 4.85808 18.4622 5.26083 18.5769C6.73528 19 12.6696 19 12.6696 19C12.6696 19 18.6039 19 20.0783 18.5769C20.481 18.4623 20.8482 18.2386 21.1432 17.9282C21.4383 17.6177 21.6509 17.2314 21.7599 16.8077C22.2303 14.0474 22.3752 9.85004 21.7477 7.1924V7.19232Z"
+        fill="#FF0000"
+      />
+      <path d="M10.667 15L15.667 12L10.667 9V15Z" fill="white" />
+    </svg>
+  );
+};
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)',