fix: de-emphasize copy to clipboard button (#6246)

* fix: de-emphasize copy to clipboard button * feat: add neutral button * ran npx turbot format
nodejs · Jan 20, 2024 · 21ee6cf · 21ee6cf
1 parent 4bf5147
commit 21ee6cf
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 27 deletions.
diff --git 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
@@ -5,6 +5,14 @@ import Button from '@/components/Common/Button';
 type Story = StoryObj<typeof Button>;
 type Meta = MetaObj<typeof Button>;
 
+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
@@ -6,7 +6,7 @@ import Link from '@/components/Link';
 import styles from './index.module.css';
 
 type ButtonProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
-  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
@@ -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
@@ -99,7 +99,7 @@ const CodeBox: FC<PropsWithChildren<CodeBoxProps>> = ({
           <span className={styles.language}>{language}</span>
 
           {showCopyButton && (
-            <Button className={styles.action} onClick={onCopy}>
+            <Button kind="neutral" className={styles.action} onClick={onCopy}>
               <DocumentDuplicateIcon className={styles.icon} />
               {t('components.common.codebox.copy')}
             </Button>

diff --git 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;
       }
     }
   }