Skip to content
Closed
Show file tree
Hide file tree
Changes from 1 commit
Commits
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
Prev Previous commit
Next Next commit
refactor: merge pride logos
  • Loading branch information
araujogui committed Jun 18, 2024
commit fd8dd85b8a60d879821b9ba9ec01d5bd1ab9ea9e
16 changes: 3 additions & 13 deletions components/Common/NodejsLogo/index.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import type { FC } from 'react';

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

import style from './index.module.css';
Expand All @@ -13,17 +12,8 @@ type NodejsLogoProps = {

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

Expand Down
111 changes: 0 additions & 111 deletions components/Icons/Logos/NodejsLightPride.tsx

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
import classNames from 'classnames';
import type { FC, SVGProps } from 'react';

const NodejsDarkPride: FC<SVGProps<SVGSVGElement>> = props => (
const NodejsPride: FC<SVGProps<SVGSVGElement>> = ({ className, ...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}
>
<g clipPath="url(#clip0_12_17)">
Expand Down Expand Up @@ -38,19 +40,16 @@ const NodejsDarkPride: FC<SVGProps<SVGSVGElement>> = props => (
fillRule="evenodd"
clipRule="evenodd"
d="M43.6671 41.9478C43.6671 41.1144 43.2071 40.3275 42.4709 39.9107L23.007 28.5671C22.6849 28.3819 22.3167 28.2893 21.9486 28.2432C21.9026 28.2432 21.7647 28.2432 21.7647 28.2432C21.3965 28.2432 21.0284 28.3819 20.7063 28.5671L1.19636 39.8643C0.46014 40.2811 0 41.0684 0 41.9478L0.046014 72.3209C0.046014 72.7377 0.276084 73.1542 0.644196 73.3394C1.0123 73.5711 1.47245 73.5711 1.79455 73.3394L13.3901 66.6722C14.1263 66.2556 14.5864 65.4685 14.5864 64.6351V50.4208C14.5864 49.5875 15.0465 48.8002 15.7828 48.3837L20.7063 45.5131C21.0744 45.2814 21.4885 45.1888 21.9026 45.1888C22.3167 45.1888 22.7309 45.2814 23.053 45.5131L27.9764 48.3837C28.7126 48.8002 29.1729 49.5875 29.1729 50.4208V64.6351C29.1729 65.4685 29.6331 66.2556 30.3692 66.6722L41.8728 73.3394C42.2408 73.5711 42.7009 73.5711 43.0691 73.3394C43.4373 73.1542 43.6671 72.7377 43.6671 72.3209V41.9478Z"
fill="#333333"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M137.444 0.138901C137.076 -0.0463003 136.616 -0.0463003 136.293 0.138901C135.925 0.370401 135.696 0.740804 135.696 1.15751V31.2526C135.696 31.5304 135.557 31.8081 135.281 31.9936C135.005 32.1324 134.729 32.1324 134.453 31.9936L129.576 29.1691C128.84 28.7526 127.965 28.7526 127.229 29.1691L107.719 40.5127C106.983 40.9295 106.523 41.7165 106.523 42.5498V65.1906C106.523 66.0243 106.983 66.8112 107.719 67.228L127.229 78.5716C127.965 78.9882 128.84 78.9882 129.576 78.5716L149.086 67.228C149.822 66.8112 150.282 66.0243 150.282 65.1906V8.75077C150.282 7.87104 149.822 7.08394 149.086 6.66724L137.444 0.138901ZM135.65 57.7365C135.65 57.9678 135.557 58.153 135.374 58.2457L128.701 62.1351C128.517 62.2277 128.287 62.2277 128.103 62.1351L121.431 58.2457C121.247 58.153 121.155 57.9216 121.155 57.7365V49.9581C121.155 49.7265 121.247 49.5413 121.431 49.4487L128.103 45.5595C128.287 45.4669 128.517 45.4669 128.701 45.5595L135.374 49.4487C135.557 49.5413 135.65 49.7729 135.65 49.9581V57.7365Z"
fill="#333333"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M202.367 49.7725C203.105 49.3557 203.518 48.5688 203.518 47.7352V42.2255C203.518 41.3922 203.059 40.605 202.367 40.1885L182.996 28.8912C182.26 28.4744 181.386 28.4744 180.649 28.8912L161.14 40.2346C160.403 40.6514 159.943 41.4385 159.943 42.2719V64.9128C159.943 65.7461 160.403 66.5333 161.14 66.9498L180.511 78.0619C181.248 78.4786 182.122 78.4786 182.812 78.0619L194.546 71.4875C194.914 71.3023 195.144 70.8855 195.144 70.4686C195.144 70.0521 194.914 69.6354 194.546 69.4501L174.944 58.1064C174.576 57.8751 174.346 57.5048 174.346 57.088V50.0041C174.346 49.5873 174.576 49.1705 174.944 48.9853L181.064 45.4666C181.432 45.2352 181.892 45.2352 182.26 45.4666L188.38 48.9853C188.748 49.217 188.977 49.5873 188.977 50.0041V55.56C188.977 55.9768 189.208 56.3933 189.577 56.5786C189.944 56.8102 190.404 56.8102 190.772 56.5786L202.367 49.7725Z"
fill="#333333"
/>
<path
fillRule="evenodd"
Expand Down Expand Up @@ -108,4 +107,4 @@ const NodejsDarkPride: FC<SVGProps<SVGSVGElement>> = props => (
</svg>
);

export default NodejsDarkPride;
export default NodejsPride;
10 changes: 2 additions & 8 deletions components/__design__/node-logos.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,7 @@ import type { Meta as MetaObj, StoryObj } from '@storybook/react';
import JsIconGreen from '@/components/Icons/Logos/JsIconGreen';
import JsIconWhite from '@/components/Icons/Logos/JsIconWhite';
import NodejsLogo from '@/components/Icons/Logos/Nodejs';
import NodejsDarkPride from '@/components/Icons/Logos/NodejsDarkPride';
import NodejsLightPride from '@/components/Icons/Logos/NodejsLightPride';
import NodejsPride from '@/components/Icons/Logos/NodejsPride';
import NodejsStackedBlack from '@/components/Icons/Logos/NodejsStackedBlack';
import NodejsStackedDark from '@/components/Icons/Logos/NodejsStackedDark';
import NodejsStackedLight from '@/components/Icons/Logos/NodejsStackedLight';
Expand All @@ -15,12 +14,7 @@ export const HorizontalLogos: StoryObj = {
};

export const PrideLogos: StoryObj = {
render: () => (
<div className="flex flex-row gap-4">
<NodejsDarkPride width={267} height={80} className="block dark:hidden" />
<NodejsLightPride className="hidden dark:block" width={267} height={80} />
</div>
),
render: () => <NodejsPride width={267} height={80} />,
};

export const StackedLogos: StoryObj = {
Expand Down