FE: Add ProductHunt icon (#204)

kafbat · Mar 13, 2024 · 0e709c0 · 0e709c0
1 parent 1ef2557
commit 0e709c0
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 14 deletions.
diff --git a/frontend/src/components/NavBar/NavBar.styled.ts b/frontend/src/components/NavBar/NavBar.styled.ts
@@ -1,7 +1,8 @@
 import styled, { css } from 'styled-components';
 import { Link } from 'react-router-dom';
 import DiscordIcon from 'components/common/Icons/DiscordIcon';
-import GitIcon from 'components/common/Icons/GitIcon';
+import GitHubIcon from 'components/common/Icons/GitHubIcon';
+import ProductHuntIcon from 'components/common/Icons/ProductHuntIcon';
 
 export const Navbar = styled.nav(
   ({ theme }) => css`
@@ -39,8 +40,12 @@ export const SocialLink = styled.a(
         fill: ${icons.discord.hover};
       }
 
-      ${GitIcon} {
-        fill: ${icons.git.hover};
+      ${GitHubIcon} {
+        fill: ${icons.github.hover};
+      }
+
+      ${ProductHuntIcon} {
+        fill: ${icons.producthunt.hover};
       }
     }
 
@@ -49,8 +54,12 @@ export const SocialLink = styled.a(
         fill: ${icons.discord.active};
       }
 
-      ${GitIcon} {
-        fill: ${icons.git.active};
+      ${GitHubIcon} {
+        fill: ${icons.github.active};
+      }
+
+      ${ProductHuntIcon} {
+        fill: ${icons.producthunt.active};
       }
     }
   `

diff --git a/frontend/src/components/NavBar/NavBar.tsx b/frontend/src/components/NavBar/NavBar.tsx
@@ -2,12 +2,13 @@ import React, { useContext } from 'react';
 import Select from 'components/common/Select/Select';
 import Logo from 'components/common/Logo/Logo';
 import Version from 'components/Version/Version';
-import GitIcon from 'components/common/Icons/GitIcon';
+import GitHubIcon from 'components/common/Icons/GitHubIcon';
 import DiscordIcon from 'components/common/Icons/DiscordIcon';
 import AutoIcon from 'components/common/Icons/AutoIcon';
 import SunIcon from 'components/common/Icons/SunIcon';
 import MoonIcon from 'components/common/Icons/MoonIcon';
 import { ThemeModeContext } from 'components/contexts/ThemeModeContext';
+import ProductHuntIcon from 'components/common/Icons/ProductHuntIcon';
 
 import UserInfo from './UserInfo/UserInfo';
 import * as S from './NavBar.styled';
@@ -85,14 +86,20 @@ const NavBar: React.FC<Props> = ({ onBurgerClick }) => {
           isThemeMode
         />
         <S.SocialLink href="https://github.com/kafbat/kafka-ui" target="_blank">
-          <GitIcon />
+          <GitHubIcon />
         </S.SocialLink>
         <S.SocialLink
           href="https://discord.com/invite/4DWzD7pGE5"
           target="_blank"
         >
           <DiscordIcon />
         </S.SocialLink>
+        <S.SocialLink
+          href="https://producthunt.com/products/ui-for-apache-kafka"
+          target="_blank"
+        >
+          <ProductHuntIcon />
+        </S.SocialLink>
         <UserInfo />
       </S.NavbarSocial>
     </S.Navbar>

diff --git a/...d/src/components/common/Icons/GitIcon.tsx → ...rc/components/common/Icons/GitHubIcon.tsx b/...d/src/components/common/Icons/GitIcon.tsx → ...rc/components/common/Icons/GitHubIcon.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-const GitIcon: React.FC<{ className?: string }> = ({ className }) => (
+const GitHubIcon: React.FC<{ className?: string }> = ({ className }) => (
   <svg
     width="20"
     height="20"
@@ -18,4 +18,4 @@ const GitIcon: React.FC<{ className?: string }> = ({ className }) => (
   </svg>
 );
 
-export default styled(GitIcon)``;
+export default styled(GitHubIcon)``;
diff --git a/frontend/src/components/common/Icons/ProductHuntIcon.tsx b/frontend/src/components/common/Icons/ProductHuntIcon.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const ProductHuntIcon: React.FC<{ className?: string }> = ({ className }) => (
+  <svg
+    width="24"
+    height="25"
+    className={className}
+    viewBox="0 0 24 25"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M10.1998 12.5H13.6C14.0774 12.5 14.5352 12.3104 14.8728 11.9728C15.2104 11.6352 15.4 11.1774 15.4 10.7C15.4 10.2226 15.2104 9.76477 14.8728 9.42721C14.5352 9.08964 14.0774 8.9 13.6 8.9H10.1998V12.5Z" />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12 23.2422C18.0753 23.2422 23 18.3175 23 12.2422C23 6.16689 18.0753 1.24219 12 1.24219C5.9247 1.24219 1 6.16689 1 12.2422C1 18.3175 5.9247 23.2422 12 23.2422ZM7.7998 6.5H13.6C14.7139 6.5 15.7822 6.9425 16.5699 7.73015C17.3575 8.5178 17.8 9.58609 17.8 10.7C17.8 11.8139 17.3575 12.8822 16.5699 13.6698C15.7822 14.4575 14.7139 14.9 13.6 14.9H10.1998V18.5H7.7998V6.5Z"
+    />
+  </svg>
+);
+
+export default styled(ProductHuntIcon)``;
diff --git a/frontend/src/theme/theme.ts b/frontend/src/theme/theme.ts
@@ -209,14 +209,19 @@ const baseTheme = {
     closeModalIcon: Colors.neutral[25],
     savedIcon: Colors.brand[50],
     dropdownArrowIcon: Colors.neutral[50],
-    git: {
+    github: {
       hover: Colors.neutral[90],
       active: Colors.neutral[70],
     },
     discord: {
       normal: Colors.neutral[20],
       hover: Colors.blue[45],
-      active: Colors.brand[15],
+      active: '#B8BEF9',
+    },
+    producthunt: {
+      normal: Colors.neutral[20],
+      hover: '#FF6154',
+      active: '#FFBDB8',
     },
   },
   textArea: {
@@ -1172,15 +1177,19 @@ export const darkTheme: ThemeType = {
     sunIcon: Colors.neutral[0],
     infoIcon: Colors.neutral[70],
     savedIcon: Colors.brand[30],
-    git: {
-      ...baseTheme.icons.git,
+    github: {
+      ...baseTheme.icons.github,
       hover: Colors.neutral[70],
-      active: Colors.neutral[90],
+      active: Colors.neutral[85],
     },
     discord: {
       ...baseTheme.icons.discord,
       normal: Colors.neutral[30],
     },
+    producthunt: {
+      ...baseTheme.icons.producthunt,
+      normal: Colors.neutral[5],
+    },
   },
   textArea: {
     ...baseTheme.textArea,