Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

FE: Add ProductHunt icon #204

Merged
merged 1 commit into from
Mar 13, 2024
Merged

FE: Add ProductHunt icon #204

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 14 additions & 5 deletions frontend/src/components/NavBar/NavBar.styled.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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`
Expand Down Expand Up @@ -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};
}
}

Expand All @@ -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};
}
}
`
Expand Down
11 changes: 9 additions & 2 deletions frontend/src/components/NavBar/NavBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions ...d/src/components/common/Icons/GitIcon.tsx → ...rc/components/common/Icons/GitHubIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -18,4 +18,4 @@ const GitIcon: React.FC<{ className?: string }> = ({ className }) => (
</svg>
);

export default styled(GitIcon)``;
export default styled(GitHubIcon)``;
21 changes: 21 additions & 0 deletions frontend/src/components/common/Icons/ProductHuntIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)``;
19 changes: 14 additions & 5 deletions frontend/src/theme/theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I kept these inline as they're custom to only these specific items and won't be used anywhere else so there's no point in creating a separate palette or something

},
},
textArea: {
Expand Down Expand Up @@ -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,
Expand Down
Loading