diff --git a/components/Common/Button/index.module.css b/components/Common/Button/index.module.css index 7e25a9f15a650..1d86c3b27fc1f 100644 --- a/components/Common/Button/index.module.css +++ b/components/Common/Button/index.module.css @@ -9,6 +9,26 @@ @apply cursor-not-allowed; } + &.neutral { + @apply rounded + bg-neutral-900 + text-white + dark:text-neutral-200; + + &:hover { + @apply bg-neutral-800; + } + + &[aria-disabled='true'] { + @apply bg-neutral-900 + opacity-50; + } + + &:focus { + @apply bg-neutral-800; + } + } + &.primary { @apply rounded border diff --git a/components/Common/Button/index.stories.tsx b/components/Common/Button/index.stories.tsx index e7f22afbf88e3..aa4e4e8797c4d 100644 --- a/components/Common/Button/index.stories.tsx +++ b/components/Common/Button/index.stories.tsx @@ -5,6 +5,14 @@ import Button from '@/components/Common/Button'; type Story = StoryObj; type Meta = MetaObj; +export const Neutral: Story = { + args: { + kind: 'neutral', + children: 'Download Node (LTS)', + disabled: false, + }, +}; + export const Primary: Story = { args: { kind: 'primary', diff --git a/components/Common/Button/index.tsx b/components/Common/Button/index.tsx index 4233cd7f6d322..cb7f77eed0c89 100644 --- a/components/Common/Button/index.tsx +++ b/components/Common/Button/index.tsx @@ -6,7 +6,7 @@ import Link from '@/components/Link'; import styles from './index.module.css'; type ButtonProps = AnchorHTMLAttributes & { - kind?: 'primary' | 'secondary' | 'special'; + kind?: 'neutral' | 'primary' | 'secondary' | 'special'; // We have an extra `disabled` prop as we simulate a button disabled?: boolean; }; diff --git a/components/Common/CodeBox/index.module.css b/components/Common/CodeBox/index.module.css index 8be2140d89ea8..2651a58812167 100644 --- a/components/Common/CodeBox/index.module.css +++ b/components/Common/CodeBox/index.module.css @@ -67,11 +67,11 @@ & > .action { @apply flex - cursor-pointer items-center gap-2 px-3 - py-1.5; + py-1.5 + font-medium; } } } diff --git a/components/Common/CodeBox/index.tsx b/components/Common/CodeBox/index.tsx index 64b8e331ca777..5581969e228c2 100644 --- a/components/Common/CodeBox/index.tsx +++ b/components/Common/CodeBox/index.tsx @@ -99,7 +99,7 @@ const CodeBox: FC> = ({ {language} {showCopyButton && ( - diff --git a/layouts/New/layouts.module.css b/layouts/New/layouts.module.css index a080d1e70327e..4915e4d6b890e 100644 --- a/layouts/New/layouts.module.css +++ b/layouts/New/layouts.module.css @@ -112,36 +112,23 @@ &:nth-of-type(2) { @apply flex - max-w-md - flex-[1_1] - flex-col - items-center - gap-4 - md:max-w-2xl - lg:max-w-3xl; + max-w-md + flex-[1_1] + flex-col + items-center + gap-4 + md:max-w-2xl + lg:max-w-3xl; > div { @apply w-fit; - - div[data-state='active'] a { - @apply border-none - bg-neutral-900 - px-3 - py-1.5 - text-sm - font-medium; - - &:hover { - @apply bg-neutral-800; - } - } } > p { @apply text-center - text-sm - text-neutral-800 - dark:text-neutral-200; + text-sm + text-neutral-800 + dark:text-neutral-200; } } }