Merge pull request #153 from acid-info/social-card-logo

Change the color of social card logo based on theme

packages/docusaurus-playground/docs/community.mdx

@@ -12,13 +12,15 @@ Welcome to the Waku community! Whether you are interested in building with Waku,
   <Grid xs={{ cols: 1, gap: '1rem' }} md={{ cols: 2 }}>
     <Grid.Item xs={1}>
       <SocialCard
-        logoSrcDark="/icons/x.svg"
+        logoSrc="/icons/x-black.svg"
+        logoSrcDark="/icons/x-white.svg"
         href="https://discord.gg/2NXGrsqmDq"
         description="Follow us on X"
       />
     </Grid.Item>
     <Grid.Item xs={1}>
       <SocialCard
+        logoSrc="/icons/discord-black.svg"
         logoSrcDark="/icons/discord-white.svg"
         href="https://discord.gg/2NXGrsqmDq"
         description="Join the community on Discord"
@@ -26,6 +28,7 @@ Welcome to the Waku community! Whether you are interested in building with Waku,
     </Grid.Item>
     <Grid.Item xs={1}>
       <SocialCard
+        logoSrc="/icons/telegram-black.svg"
         logoSrcDark="/icons/telegram-white.svg"
         href="https://discord.gg/2NXGrsqmDq"
         description="Jump in the conversation on Telegram"
@@ -40,7 +43,8 @@ Welcome to the Waku community! Whether you are interested in building with Waku,
     </Grid.Item>
     <Grid.Item xs={1}>
       <SocialCard
-        logoSrcDark="/icons/github.svg"
+        logoSrc="/icons/github-black.svg"
+        logoSrcDark="/icons/github-white.svg"
         href="https://discord.gg/2NXGrsqmDq"
         description="Contribute to Github"
       />

packages/docusaurus-playground/docusaurus.config.js

@@ -80,6 +80,10 @@ const config = {
   themeConfig:
     /** @type {import('@acid-info/logos-docusaurus-preset').ThemeConfig} */
     ({
+      colorMode: {
+        disableSwitch: false,
+        respectPrefersColorScheme: true,
+      },
       navbar: {
         items: [
           {

packages/logos-docusaurus-theme/COMPONENTS.MD

@@ -352,13 +352,15 @@ import {
     <Grid.Item xs={1}>
       <SocialCard
         href="https://twitter.com/twitter-handle"
-        logoSrcDark="/icons/x.svg"
+        logoSrc="/icons/x-black.svg"
+        logoSrcDark="/icons/x-white.svg"
         description="Follow us on X"
       />
     </Grid.Item>
     <Grid.Item xs={1}>
       <SocialCard
         href="https://discord.gg/discord-server"
+        logoSrc="/icons/discord-black.svg"
         logoSrcDark="/icons/discord-white.svg"
         description="Join the community on Discord"
       />

packages/logos-docusaurus-theme/README.md

@@ -555,7 +555,8 @@ import {
     <Grid.Item xs={1}>
       <SocialCard
         href="https://twitter.com/twitter-handle"
-        logoSrcDark="/icons/x.svg"
+        logoSrc="/icons/x-black.svg"
+        logoSrcDark="/icons/x-white.svg"
         description="Follow us on X"
       />
     </Grid.Item>

packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx

@@ -19,7 +19,7 @@ import ExternalLinkSvg from '../../static/icons/external-link.svg'
 import FolderSvg from '../../static/icons/folder.svg'
 import FullscreenExitSvg from '../../static/icons/fullscreen-exit.svg'
 import FullscreenSvg from '../../static/icons/fullscreen.svg'
-import GithubSvg from '../../static/icons/github.svg'
+import GithubWhiteSvg from '../../static/icons/github-white.svg'
 import GScholarSvg from '../../static/icons/gscholar.svg'
 import HistorySvg from '../../static/icons/history.svg'
 import LinkedinSvg from '../../static/icons/linkedin.svg'
@@ -29,7 +29,7 @@ import TelegramSvg from '../../static/icons/telegram.svg'
 import TwitterSvg from '../../static/icons/twitter.svg'
 import DiscordWhiteSvg from '../../static/icons/discord-white.svg'
 import TelegramWhiteSvg from '../../static/icons/telegram-white.svg'
-import XSvg from '../../static/icons/x.svg'
+import XWhiteSvg from '../../static/icons/x-white.svg'
 import Avatar from '../../static/icons/avatar.svg'
 import DownloadSvg from '../../static/icons/download.svg'
 
@@ -93,7 +93,7 @@ export const IconFolder = (props: TIconProps): JSX.Element => (
 
 export const IconGithub = (props: TIconProps): JSX.Element => (
   <Icon {...props}>
-    <GithubSvg />
+    <GithubWhiteSvg />
   </Icon>
 )
 
@@ -219,7 +219,7 @@ export const IconTelegramWhite = (props: TIconProps): JSX.Element => (
 
 export const IconX = (props: TIconProps): JSX.Element => (
   <Icon {...props}>
-    <XSvg />
+    <XWhiteSvg />
   </Icon>
 )
 

packages/logos-docusaurus-theme/src/client/static/icons/github-black.svg

@@ -0,0 +1,3 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 4.39999C17.8989 4.39999 15.8183 4.81385 13.8771 5.61792C11.9359 6.422 10.172 7.60055 8.68629 9.08629C5.68571 12.0869 4 16.1565 4 20.4C4 27.472 8.592 33.472 14.944 35.6C15.744 35.728 16 35.232 16 34.8V32.096C11.568 33.056 10.624 29.952 10.624 29.952C9.888 28.096 8.848 27.6 8.848 27.6C7.392 26.608 8.96 26.64 8.96 26.64C10.56 26.752 11.408 28.288 11.408 28.288C12.8 30.72 15.152 30 16.064 29.616C16.208 28.576 16.624 27.872 17.072 27.472C13.52 27.072 9.792 25.696 9.792 19.6C9.792 17.824 10.4 16.4 11.44 15.264C11.28 14.864 10.72 13.2 11.6 11.04C11.6 11.04 12.944 10.608 16 12.672C17.264 12.32 18.64 12.144 20 12.144C21.36 12.144 22.736 12.32 24 12.672C27.056 10.608 28.4 11.04 28.4 11.04C29.28 13.2 28.72 14.864 28.56 15.264C29.6 16.4 30.208 17.824 30.208 19.6C30.208 25.712 26.464 27.056 22.896 27.456C23.472 27.952 24 28.928 24 30.416V34.8C24 35.232 24.256 35.744 25.072 35.6C31.424 33.456 36 27.472 36 20.4C36 18.2988 35.5861 16.2183 34.7821 14.2771C33.978 12.3358 32.7994 10.572 31.3137 9.08629C29.828 7.60055 28.0641 6.422 26.1229 5.61792C24.1817 4.81385 22.1012 4.39999 20 4.39999Z" fill="black"/>
+</svg>

packages/logos-docusaurus-theme/src/client/static/icons/github-white.svg

@@ -0,0 +1,3 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 4.39999C17.8989 4.39999 15.8183 4.81385 13.8771 5.61792C11.9359 6.422 10.172 7.60055 8.68629 9.08629C5.68571 12.0869 4 16.1565 4 20.4C4 27.472 8.592 33.472 14.944 35.6C15.744 35.728 16 35.232 16 34.8V32.096C11.568 33.056 10.624 29.952 10.624 29.952C9.888 28.096 8.848 27.6 8.848 27.6C7.392 26.608 8.96 26.64 8.96 26.64C10.56 26.752 11.408 28.288 11.408 28.288C12.8 30.72 15.152 30 16.064 29.616C16.208 28.576 16.624 27.872 17.072 27.472C13.52 27.072 9.792 25.696 9.792 19.6C9.792 17.824 10.4 16.4 11.44 15.264C11.28 14.864 10.72 13.2 11.6 11.04C11.6 11.04 12.944 10.608 16 12.672C17.264 12.32 18.64 12.144 20 12.144C21.36 12.144 22.736 12.32 24 12.672C27.056 10.608 28.4 11.04 28.4 11.04C29.28 13.2 28.72 14.864 28.56 15.264C29.6 16.4 30.208 17.824 30.208 19.6C30.208 25.712 26.464 27.056 22.896 27.456C23.472 27.952 24 28.928 24 30.416V34.8C24 35.232 24.256 35.744 25.072 35.6C31.424 33.456 36 27.472 36 20.4C36 18.2988 35.5861 16.2183 34.7821 14.2771C33.978 12.3358 32.7994 10.572 31.3137 9.08629C29.828 7.60055 28.0641 6.422 26.1229 5.61792C24.1817 4.81385 22.1012 4.39999 20 4.39999Z" fill="white"/>
+</svg>

packages/logos-docusaurus-theme/src/client/static/icons/github.svg

@@ -1,3 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8.92518 0C3.99402 0 0 3.99402 0 8.92518C0 12.8746 2.55483 16.2104 6.10259 17.3929C6.54885 17.471 6.7162 17.2033 6.7162 16.969C6.7162 16.757 6.70504 16.0542 6.70504 15.3067C4.46259 15.7195 3.88245 14.76 3.70395 14.258C3.60354 14.0014 3.16844 13.2093 2.78912 12.9973C2.47674 12.8299 2.03048 12.4172 2.77796 12.406C3.48082 12.3948 3.98286 13.0531 4.15021 13.3208C4.95348 14.6708 6.23647 14.2914 6.74967 14.0572C6.82777 13.477 7.06205 13.0865 7.31865 12.8634C5.3328 12.6403 3.25769 11.8705 3.25769 8.45661C3.25769 7.486 3.60354 6.68273 4.17252 6.05797C4.08327 5.83484 3.77089 4.92001 4.26178 3.69279C4.26178 3.69279 5.00926 3.45851 6.7162 4.60763C7.43022 4.40681 8.18886 4.3064 8.9475 4.3064C9.70614 4.3064 10.4648 4.40681 11.1788 4.60763C12.8857 3.44735 13.6332 3.69279 13.6332 3.69279C14.1241 4.92001 13.8117 5.83484 13.7225 6.05797C14.2915 6.68273 14.6373 7.47484 14.6373 8.45661C14.6373 11.8816 12.551 12.6403 10.5652 12.8634C10.8887 13.1423 11.1676 13.6778 11.1676 14.5146C11.1676 15.7083 11.1565 16.6678 11.1565 16.969C11.1565 17.2033 11.3238 17.4822 11.7701 17.3929C13.5419 16.7948 15.0815 15.656 16.1722 14.137C17.2629 12.618 17.8498 10.7952 17.8504 8.92518C17.8504 3.99402 13.8563 0 8.92518 0Z" fill="black"/>
-</svg>

packages/logos-docusaurus-theme/src/client/static/icons/telegram-black.svg

@@ -0,0 +1,3 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.76858 17.7732C14.6269 13.9137 20.5339 11.3693 23.4894 10.14C31.9282 6.63006 33.6817 6.02035 34.8246 6.00021C35.0759 5.99579 35.638 6.05808 36.002 6.3535C36.3095 6.60295 36.394 6.93991 36.4345 7.17641C36.475 7.41291 36.5254 7.95167 36.4853 8.37264C36.028 13.1775 34.0493 24.8376 33.0427 30.2192C32.6167 32.4963 31.778 33.2598 30.966 33.3345C29.2014 33.4969 27.8614 32.1683 26.1523 31.048C23.4779 29.2949 21.967 28.2035 19.371 26.4928C16.3709 24.5158 18.3157 23.4292 20.0255 21.6533C20.4729 21.1886 28.2479 14.1167 28.3984 13.4752C28.4172 13.3949 28.4346 13.0958 28.257 12.9379C28.0793 12.78 27.8171 12.834 27.6278 12.877C27.3596 12.9378 23.0872 15.7618 14.8105 21.3487C13.5978 22.1815 12.4994 22.5872 11.5152 22.5659C10.4302 22.5425 8.34321 21.9525 6.79171 21.4482C4.88874 20.8296 3.37629 20.5025 3.50799 19.452C3.57659 18.9048 4.33012 18.3452 5.76858 17.7732Z" fill="black"/>
+</svg>

packages/logos-docusaurus-theme/src/client/static/icons/x-black.svg

@@ -0,0 +1,3 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.6209 19.1338L32.6291 7.5H30.2575L21.5673 17.6015L14.6265 7.5H6.62109L17.117 22.7752L6.62109 34.975H8.99286L18.1699 24.3075L25.4999 34.975H33.5053L22.6203 19.1338H22.6209ZM19.3724 22.9098L18.3089 21.3887L9.84745 9.28543H13.4903L20.3189 19.0532L21.3823 20.5742L30.2586 33.2708H26.6157L19.3724 22.9103V22.9098Z" fill="black"/>
+</svg>