Refactor Discord icon usage by renaming the logo SVG, adding a separate Discord text SVG, and updating all references to support both logo and text variants

Author: robertpiosik

packages/ui/src/assets/icons/discord.svg …ges/ui/src/assets/icons/discord-logo.svgpackages/ui/src/assets/icons/discord.svg renamed to packages/ui/src/assets/icons/discord-logo.svg packages/ui/src/assets/icons/discord.svg renamed to packages/ui/src/assets/icons/discord-logo.svg

@@ -10,7 +10,8 @@ import Copilot from '../../../../assets/icons/copilot.svg'
 import CurlyBraces from '../../../../assets/icons/curly-braces.svg'
 import GithubCopilot from '../../../../assets/icons/github-copilot.svg'
 import DeepSeek from '../../../../assets/icons/deepseek.svg'
-import Discord from '../../../../assets/icons/discord.svg'
+import DiscordLogo from '../../../../assets/icons/discord-logo.svg'
+import DiscordText from '../../../../assets/icons/discord-text.svg'
 import Doubao from '../../../../assets/icons/doubao.svg'
 import Gemini from '../../../../assets/icons/gemini.svg'
 import Grok from '../../../../assets/icons/grok.svg'
@@ -42,7 +43,8 @@ export namespace Icon {
     | 'COPILOT'
     | 'CURLY_BRACES'
     | 'DEEPSEEK'
-    | 'DISCORD'
+    | 'DISCORD_LOGO'
+    | 'DISCORD_TEXT'
     | 'DOUBAO'
     | 'GEMINI'
     | 'GITHUB_COPILOT'
@@ -104,8 +106,11 @@ export const Icon: React.FC<Icon.Props> = ({ variant }) => {
     case 'DEEPSEEK':
       icon = <DeepSeek />
       break
-    case 'DISCORD':
-      icon = <Discord />
+    case 'DISCORD_LOGO':
+      icon = <DiscordLogo />
+      break
+    case 'DISCORD_TEXT':
+      icon = <DiscordText />
       break
     case 'DOUBAO':
       icon = <Doubao />

packages/ui/src/assets/icons/discord-text.svg

@@ -78,15 +78,23 @@ export const Home: React.FC<Props> = (props) => {
                 text_icon="CODE_WEB_CHAT_TEXT"
                 label="Visit website"
               />
+              <HomeLinkButton
+                url="https://buymeacoffee.com/robertpiosik"
+                background_color="#ffdd00"
+                fill_color="black"
+                text_icon="BUY_ME_A_COFFEE_TEXT"
+                logo_icon="BUY_ME_A_COFFEE_LOGO"
+                label="Support author"
+              />
+              <HomeLinkButton
+                url="https://discord.gg/KJySXsrSX5"
+                background_color="#5765f2"
+                fill_color="white"
+                logo_icon="DISCORD_LOGO"
+                text_icon="DISCORD_TEXT"
+                label="Get involved"
+              />
               <div className={styles['inner__buttons__donations']}>
-                <HomeLinkButton
-                  url="https://buymeacoffee.com/robertpiosik"
-                  background_color="#ffdd00"
-                  fill_color="black"
-                  text_icon="BUY_ME_A_COFFEE_TEXT"
-                  logo_icon="BUY_ME_A_COFFEE_LOGO"
-                  label="Support author"
-                />
                 <Donations
                   donations={donations}
                   is_fetching={is_fetching}

packages/ui/src/components/editor/common/Icon/Icon.tsx

@@ -27,6 +27,14 @@
       height: 16px;
     }
 
+    &--cwc {
+      background-color: black;
+
+      > svg {
+        fill: white;
+      }
+    }
+
     &--buy-me-a-coffee {
       background-color: #f7d600;
 
@@ -62,32 +70,4 @@
       opacity: var(--disabled-opacity);
     }
   }
-
-  &__heart {
-    position: absolute;
-    z-index: 11;
-    bottom: 32px;
-    animation-name: float-up;
-    animation-timing-function: ease-out;
-    animation-fill-mode: forwards;
-    pointer-events: none;
-    opacity: 0;
-  }
-}
-
-@keyframes float-up {
-  from {
-    transform: translateY(0);
-    opacity: 0;
-  }
-  10% {
-    opacity: 1;
-  }
-  40% {
-    opacity: 1;
-  }
-  to {
-    transform: translateY(-40px);
-    opacity: 0;
-  }
 }

packages/vscode/src/views/panel/frontend/Home/Home.tsx

@@ -16,8 +16,6 @@ export const Footer: React.FC = () => {
     commit_button_enabling_trigger_count
   } = useContext(LayoutContext)
 
-  const [is_buy_me_coffee_hovered, set_is_buy_me_coffee_hovered] =
-    useState(false)
   const [is_commit_disabled_temporarily, set_is_commit_disabled_temporarily] =
     useState(false)
   const [is_apply_disabled_temporarily, set_is_apply_disabled_temporarily] =
@@ -52,15 +50,23 @@ export const Footer: React.FC = () => {
     <>
       <div className={styles.footer}>
         <div>
+          <a
+            className={cn(
+              styles['footer__icon-button'],
+              styles['footer__icon-button--cwc']
+            )}
+            href="https://codeweb.chat"
+            title="https://codeweb.chat"
+          >
+            <Icon variant="CODE_WEB_CHAT_LOGO" />
+          </a>
           <a
             className={cn(
               styles['footer__icon-button'],
               styles['footer__icon-button--buy-me-a-coffee']
             )}
             href="https://buymeacoffee.com/robertpiosik"
-            title="Support author"
-            onMouseEnter={() => set_is_buy_me_coffee_hovered(true)}
-            onMouseLeave={() => set_is_buy_me_coffee_hovered(false)}
+            title="https://buymeacoffee.com/robertpiosik"
           >
             <Icon variant="BUY_ME_A_COFFEE_LOGO" />
           </a>
@@ -70,9 +76,9 @@ export const Footer: React.FC = () => {
               styles['footer__icon-button--discord']
             )}
             href="https://discord.gg/KJySXsrSX5"
-            title="Join our Discord server!"
+            title="https://discord.gg/KJySXsrSX5"
           >
-            <Icon variant="DISCORD" />
+            <Icon variant="DISCORD_LOGO" />
           </a>
         </div>
 
@@ -113,24 +119,6 @@ export const Footer: React.FC = () => {
           </button>
         </div>
       </div>
-
-      {is_buy_me_coffee_hovered &&
-        Array.from({ length: 5 }).map((_, i) => (
-          <span
-            key={i}
-            className={styles.footer__heart}
-            style={
-              {
-                left: `${18 + (Math.random() - 0.5) * 20}px`,
-                animationDelay: `${i == 0 ? 0 : (i + Math.random()) / 3}s`,
-                animationDuration: `${2 - Math.random()}s`,
-                fontSize: `${10 + Math.random() * 8}px`
-              } as React.CSSProperties
-            }
-          >
-            ❤️
-          </span>
-        ))}
     </>
   )
 }