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

Merge logos files #6845

Closed
wants to merge 3 commits into from
Closed

Merge logos files #6845

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
491757e
refactor: merge horizontal logos
araujogui Jun 17, 2024
fd8dd85
refactor: merge pride logos
araujogui Jun 18, 2024
7af05ad
refactor: merge default and pride logos
araujogui Jun 21, 2024
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
12 changes: 2 additions & 10 deletions components/Common/NodejsLogo/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,4 @@
.nodejsLogoDark {
.nodejsLogo {
@apply h-6
w-20
dark:hidden;
}

.nodejsLogoLight {
@apply hidden
h-6
w-20
dark:block;
w-20;
}
20 changes: 2 additions & 18 deletions components/Common/NodejsLogo/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
import type { FC } from 'react';

import NodejsDark from '@/components/Icons/Logos/NodejsDark';
import NodejsDarkPride from '@/components/Icons/Logos/NodejsDarkPride';
import NodejsLight from '@/components/Icons/Logos/NodejsLight';
import NodejsLightPride from '@/components/Icons/Logos/NodejsLightPride';
import Nodejs from '@/components/Icons/Logos/Nodejs';
import type { LogoVariant } from '@/types';

import style from './index.module.css';
Expand All @@ -13,20 +10,7 @@ type NodejsLogoProps = {
};

const NodejsLogo: FC<NodejsLogoProps> = ({ variant = 'default' }) => (
<>
{variant === 'pride' && (
<>
<NodejsDarkPride className={style.nodejsLogoDark} />
<NodejsLightPride className={style.nodejsLogoLight} />
</>
)}
{variant === 'default' && (
<>
<NodejsDark className={style.nodejsLogoDark} />
<NodejsLight className={style.nodejsLogoLight} />
</>
)}
</>
<Nodejs variant={variant} className={style.nodejsLogo} />
);

export default NodejsLogo;
183 changes: 124 additions & 59 deletions components/Icons/Logos/NodejsLight.tsx → components/Icons/Logos/Nodejs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,24 @@
import classNames from 'classnames';
import type { FC, SVGProps } from 'react';

const NodejsLight: FC<SVGProps<SVGSVGElement>> = props => (
import type { LogoVariant } from '@/types';

type HexagonGridProps = SVGProps<SVGSVGElement> & {
variant?: LogoVariant;
};

const Nodejs: FC<HexagonGridProps> = ({
className,
variant = 'default',
...props
}) => (
<svg
width="267"
height="80"
viewBox="0 0 267 80"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={classNames('fill-[#333333] dark:fill-white', className)}
{...props}
>
<mask
Expand Down Expand Up @@ -37,82 +49,135 @@ const NodejsLight: FC<SVGProps<SVGSVGElement>> = props => (
fillRule="evenodd"
clipRule="evenodd"
d="M43.6737 41.9539C43.6737 41.1204 43.2136 40.3334 42.4773 39.9165L23.0104 28.5712C22.6883 28.386 22.3201 28.2934 21.9519 28.2472C21.9059 28.2472 21.7679 28.2472 21.7679 28.2472C21.3997 28.2472 21.0315 28.386 20.7094 28.5712L1.19654 39.8701C0.460209 40.287 0 41.0743 0 41.9539L0.0460209 72.3315C0.0460209 72.7484 0.276126 73.165 0.644293 73.3502C1.01246 73.5819 1.47267 73.5819 1.79482 73.3502L13.3921 66.682C14.1284 66.2653 14.5886 65.4781 14.5886 64.6446V50.4282C14.5886 49.5947 15.0488 48.8074 15.7852 48.3908L20.7094 45.5197C21.0776 45.288 21.4917 45.1954 21.9059 45.1954C22.3201 45.1954 22.7343 45.288 23.0565 45.5197L27.9806 48.3908C28.7169 48.8074 29.1773 49.5947 29.1773 50.4282V64.6446C29.1773 65.4781 29.6375 66.2653 30.3738 66.682L41.8791 73.3502C42.2471 73.5819 42.7073 73.5819 43.0755 73.3502C43.4438 73.165 43.6737 72.7484 43.6737 72.3315V41.9539Z"
fill="white"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M137.465 0.138922C137.096 -0.0463072 136.636 -0.0463072 136.314 0.138922C135.946 0.370456 135.716 0.740915 135.716 1.15768V31.2573C135.716 31.5351 135.578 31.8129 135.301 31.9984C135.025 32.1372 134.749 32.1372 134.473 31.9984L129.595 29.1735C128.859 28.7569 127.984 28.7569 127.248 29.1735L107.735 40.5188C106.999 40.9357 106.539 41.7227 106.539 42.5562V65.2004C106.539 66.0342 106.999 66.8212 107.735 67.2381L127.248 78.5834C127.984 79 128.859 79 129.595 78.5834L149.108 67.2381C149.844 66.8212 150.304 66.0342 150.304 65.2004V8.75207C150.304 7.87222 149.844 7.085 149.108 6.66824L137.465 0.138922ZM135.67 57.7451C135.67 57.9765 135.578 58.1617 135.394 58.2544L128.72 62.1444C128.536 62.237 128.306 62.237 128.122 62.1444L121.449 58.2544C121.265 58.1617 121.173 57.9303 121.173 57.7451V49.9656C121.173 49.7339 121.265 49.5487 121.449 49.4561L128.122 45.5663C128.306 45.4737 128.536 45.4737 128.72 45.5663L135.394 49.4561C135.578 49.5487 135.67 49.7803 135.67 49.9656V57.7451Z"
fill="white"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M202.398 49.7801C203.135 49.3632 203.549 48.5762 203.549 47.7425V42.2319C203.549 41.3985 203.089 40.6112 202.398 40.1946L183.023 28.8957C182.287 28.4788 181.413 28.4788 180.676 28.8957L161.164 40.2407C160.427 40.6576 159.967 41.4449 159.967 42.2784V64.9226C159.967 65.7561 160.427 66.5434 161.164 66.96L180.538 78.0737C181.275 78.4905 182.149 78.4905 182.839 78.0737L194.575 71.4983C194.943 71.3131 195.173 70.8962 195.173 70.4793C195.173 70.0627 194.943 69.6459 194.575 69.4606L174.97 58.1153C174.602 57.8839 174.372 57.5135 174.372 57.0966V50.0117C174.372 49.5949 174.602 49.178 174.97 48.9928L181.091 45.4735C181.459 45.2421 181.919 45.2421 182.287 45.4735L188.408 48.9928C188.776 49.2245 189.006 49.5949 189.006 50.0117V55.5685C189.006 55.9853 189.236 56.4019 189.605 56.5872C189.973 56.8188 190.433 56.8188 190.801 56.5872L202.398 49.7801Z"
fill="white"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M181.551 48.7155C181.689 48.6228 181.874 48.6228 182.012 48.7155L185.739 50.8919C185.877 50.9845 185.969 51.1235 185.969 51.3087V55.6615C185.969 55.8468 185.877 55.9858 185.739 56.0784L182.012 58.2548C181.874 58.3474 181.689 58.3474 181.551 58.2548L177.824 56.0784C177.686 55.9858 177.594 55.8468 177.594 55.6615V51.3087C177.594 51.1235 177.686 50.9845 177.824 50.8919L181.551 48.7155Z"
fill="#5FA04E"
/>
<path
d="M76.3012 28.9882C75.5647 28.5716 74.6903 28.5716 73.954 28.9882L54.5792 40.241C53.8429 40.6578 53.4287 41.4449 53.4287 42.2786V64.83C53.4287 65.6637 53.8889 66.4507 54.5792 66.8676L73.954 78.1203C74.6903 78.5369 75.5647 78.5369 76.3012 78.1203L95.6758 66.8676C96.4123 66.4507 96.8263 65.6637 96.8263 64.83V42.2786C96.8263 41.4449 96.3662 40.6578 95.6758 40.241L76.3012 28.9882Z"
fill="url(#paint0_linear_1803_3458)"
/>
<path
d="M95.7221 40.241L76.2554 28.9882C76.0714 28.8956 75.8412 28.803 75.6572 28.7568L53.8433 66.3119C54.0273 66.5433 54.2575 66.7286 54.4874 66.8676L73.9544 78.1203C74.5067 78.4443 75.1508 78.5369 75.749 78.3517L96.2284 40.6578C96.0904 40.4726 95.9063 40.3336 95.7221 40.241Z"
fill="url(#paint1_linear_1803_3458)"
/>
<path
d="M95.7224 66.8669C96.2747 66.5427 96.6889 65.9871 96.8729 65.385L75.5651 28.7098C75.013 28.6172 74.4146 28.6633 73.9085 28.9876L54.5796 40.1939L75.427 78.4437C75.7031 78.3973 76.0255 78.3046 76.3016 78.1659L95.7224 66.8669Z"
fill="url(#paint2_linear_1803_3458)"
/>

{variant === 'pride' ? (
<>
<mask
id="mask1_12_17"
style={{ maskType: 'alpha' }}
maskUnits="userSpaceOnUse"
x="53"
y="28"
width="44"
height="51"
>
<path
d="M76.2211 28.9482C75.4847 28.5316 74.6105 28.5316 73.8743 28.9482L54.5024 40.1993C53.7662 40.616 53.3521 41.4029 53.3521 42.2366V64.7846C53.3521 65.6181 53.8122 66.405 54.5024 66.8219L73.8743 78.0729C74.6105 78.4894 75.4847 78.4894 76.2211 78.0729L95.5929 66.8219C96.3288 66.405 96.7431 65.6181 96.7431 64.7846V42.2366C96.7431 41.4029 96.2832 40.616 95.5929 40.1993L76.2211 28.9482Z"
fill="white"
/>
</mask>
<g mask="url(#mask1_12_17)">
<path
d="M103.17 53.5459H53.4209V61.8043H103.17V53.5459Z"
fill="#008026"
/>
<path
d="M103.17 61.8042H53.4209V70.1621H103.17V61.8042Z"
fill="#004DFF"
/>
<path
d="M103.17 37.0293H53.4209V45.2877H103.17V37.0293Z"
fill="#FF8C00"
/>
<path
d="M103.17 45.2876H53.4209V53.546H103.17V45.2876Z"
fill="#FFED00"
/>
<path
d="M103.17 28.6714H53.4209V37.0293H103.17V28.6714Z"
fill="#E40303"
/>
<path
d="M103.17 70.1626H53.4209V78.421H103.17V70.1626Z"
fill="#750787"
/>
</g>
</>
) : (
<>
<path
d="M76.3012 28.9882C75.5647 28.5716 74.6903 28.5716 73.954 28.9882L54.5792 40.241C53.8429 40.6578 53.4287 41.4449 53.4287 42.2786V64.83C53.4287 65.6637 53.8889 66.4507 54.5792 66.8676L73.954 78.1203C74.6903 78.5369 75.5647 78.5369 76.3012 78.1203L95.6758 66.8676C96.4123 66.4507 96.8263 65.6637 96.8263 64.83V42.2786C96.8263 41.4449 96.3662 40.6578 95.6758 40.241L76.3012 28.9882Z"
fill="url(#paint0_linear_1803_3458)"
/>
<path
d="M95.7221 40.241L76.2554 28.9882C76.0714 28.8956 75.8412 28.803 75.6572 28.7568L53.8433 66.3119C54.0273 66.5433 54.2575 66.7286 54.4874 66.8676L73.9544 78.1203C74.5067 78.4443 75.1508 78.5369 75.749 78.3517L96.2284 40.6578C96.0904 40.4726 95.9063 40.3336 95.7221 40.241Z"
fill="url(#paint1_linear_1803_3458)"
/>
<path
d="M95.7224 66.8669C96.2747 66.5427 96.6889 65.9871 96.8729 65.385L75.5651 28.7098C75.013 28.6172 74.4146 28.6633 73.9085 28.9876L54.5796 40.1939L75.427 78.4437C75.7031 78.3973 76.0255 78.3046 76.3016 78.1659L95.7224 66.8669Z"
fill="url(#paint2_linear_1803_3458)"
/>
</>
)}
</g>
<defs>
<linearGradient
id="paint0_linear_1803_3458"
x1="83.0183"
y1="37.3689"
x2="65.3246"
y2="73.2407"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#3F873F" />
<stop offset="0.3296" stopColor="#3F8B3D" />
<stop offset="0.6367" stopColor="#3E9638" />
<stop offset="0.9341" stopColor="#3DA92E" />
<stop offset="1" stopColor="#3DAE2B" />
</linearGradient>
<linearGradient
id="paint1_linear_1803_3458"
x1="72.1833"
y1="56.1876"
x2="121.552"
y2="19.937"
gradientUnits="userSpaceOnUse"
>
<stop offset="0.1376" stopColor="#3F873F" />
<stop offset="0.4016" stopColor="#52A044" />
<stop offset="0.7129" stopColor="#64B749" />
<stop offset="0.9081" stopColor="#6ABF4B" />
</linearGradient>
<linearGradient
id="paint2_linear_1803_3458"
x1="52.7188"
y1="53.5463"
x2="97.551"
y2="53.5463"
gradientUnits="userSpaceOnUse"
>
<stop offset="0.0919165" stopColor="#6ABF4B" />
<stop offset="0.2871" stopColor="#64B749" />
<stop offset="0.5984" stopColor="#52A044" />
<stop offset="0.8624" stopColor="#3F873F" />
</linearGradient>
</defs>
{variant === 'pride' ? (
<defs>
<clipPath id="clip0_12_17">
<rect width="267" height="79.988" fill="white" />
</clipPath>
</defs>
) : (
<defs>
<linearGradient
id="paint0_linear_1803_3458"
x1="83.0183"
y1="37.3689"
x2="65.3246"
y2="73.2407"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#3F873F" />
<stop offset="0.3296" stopColor="#3F8B3D" />
<stop offset="0.6367" stopColor="#3E9638" />
<stop offset="0.9341" stopColor="#3DA92E" />
<stop offset="1" stopColor="#3DAE2B" />
</linearGradient>
<linearGradient
id="paint1_linear_1803_3458"
x1="72.1833"
y1="56.1876"
x2="121.552"
y2="19.937"
gradientUnits="userSpaceOnUse"
>
<stop offset="0.1376" stopColor="#3F873F" />
<stop offset="0.4016" stopColor="#52A044" />
<stop offset="0.7129" stopColor="#64B749" />
<stop offset="0.9081" stopColor="#6ABF4B" />
</linearGradient>
<linearGradient
id="paint2_linear_1803_3458"
x1="52.7188"
y1="53.5463"
x2="97.551"
y2="53.5463"
gradientUnits="userSpaceOnUse"
>
<stop offset="0.0919165" stopColor="#6ABF4B" />
<stop offset="0.2871" stopColor="#64B749" />
<stop offset="0.5984" stopColor="#52A044" />
<stop offset="0.8624" stopColor="#3F873F" />
</linearGradient>
</defs>
)}
</svg>
);

export default NodejsLight;
export default Nodejs;
Loading
Loading