feat: Adjustment for community (#620)

src/components/icons/YouTubeIcon.tsx

@@ -0,0 +1,19 @@
+import createIcon from './createIcon'
+
+export default createIcon(({ size, color, secondaryColor = 'black' }) => (
+  <svg
+    width={size}
+    viewBox="0 0 32 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M31.3309 4.4435C30.9622 3.06583 29.8794 1.98318 28.5017 1.61439C26.0073 0.945313 15.9999 0.945312 15.9999 0.945312C15.9999 0.945312 5.99275 0.945313 3.49818 1.61439C2.12052 1.98318 1.03787 3.06583 0.669081 4.4435C2.00281e-07 6.93806 0 12.1458 0 12.1458C0 12.1458 2.00281e-07 17.3536 0.669081 19.8482C1.03787 21.2259 2.12052 22.3085 3.49818 22.6772C5.99275 23.3464 15.9999 23.3464 15.9999 23.3464C15.9999 23.3464 26.0073 23.3464 28.5017 22.6772C29.8794 22.3085 30.9622 21.2259 31.3309 19.8482C32 17.3536 32 12.1458 32 12.1458C32 12.1458 31.9973 6.93806 31.3309 4.4435Z"
+      fill={color}
+    />
+    <path
+      d="M12.7969 16.9466L21.1104 12.1472L12.7969 7.34766V16.9466Z"
+      fill={secondaryColor}
+    />
+  </svg>
+))

src/icons.ts

@@ -206,3 +206,4 @@ export { default as WavingHandIcon } from './components/icons/WavingHandIcon'
 export { default as WebhooksIcon } from './components/icons/WebhooksIcon'
 export { default as WindowsLogoIcon } from './components/icons/WindowsLogoIcon'
 export { default as WorkspaceIcon } from './components/icons/WorkspaceIcon'
+export { default as YouTubeIcon } from './components/icons/YouTubeIcon'

src/theme/colors-base.ts

@@ -21,6 +21,7 @@ export const grey = {
   200: '#C5C9D3',
   100: '#DFE2E7',
   50: '#EBEFF0',
+  25: '#F9FAFA',
 } as const satisfies Record<number, CSSProperties['color']>
 
 export const purple = {