From 273db4ed9a8d748c734622160f97e4cbd5a8c05d Mon Sep 17 00:00:00 2001
From: Jakub Kotula <520927+jkbktl@users.noreply.github.com>
Date: Tue, 1 Oct 2024 19:10:02 +0200
Subject: [PATCH] add dark grey dropdown button (#588)

* a dark grey dropdown button

* Create nasty-dots-eat.md
---
 .changeset/nasty-dots-eat.md                  |  5 ++++
 .../dropdown-button.stories.tsx               | 26 ++++++++++---------
 .../src/dropdown-button/dropdown-button.tsx   |  6 ++++-
 3 files changed, 24 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/nasty-dots-eat.md

diff --git a/.changeset/nasty-dots-eat.md b/.changeset/nasty-dots-eat.md
new file mode 100644
index 00000000..3b22b0e0
--- /dev/null
+++ b/.changeset/nasty-dots-eat.md
@@ -0,0 +1,5 @@
+---
+"@status-im/components": patch
+---
+
+add dark grey dropdown button
diff --git a/packages/components/src/dropdown-button/dropdown-button.stories.tsx b/packages/components/src/dropdown-button/dropdown-button.stories.tsx
index b08e6168..7134f29b 100644
--- a/packages/components/src/dropdown-button/dropdown-button.stories.tsx
+++ b/packages/components/src/dropdown-button/dropdown-button.stories.tsx
@@ -22,18 +22,20 @@ export default {
 
   render: args => (
     <div className="grid gap-4">
-      {(['primary', 'grey', 'outline', 'ghost'] as const).map(variant => (
-        <div key={variant} className="flex items-center gap-4">
-          {(['40', '32', '24'] as const).map(size => (
-            <DropdownButton
-              key={size}
-              {...args}
-              variant={variant}
-              size={size}
-            />
-          ))}
-        </div>
-      ))}
+      {(['primary', 'grey', 'darkGrey', 'outline', 'ghost'] as const).map(
+        variant => (
+          <div key={variant} className="flex items-center gap-4">
+            {(['40', '32', '24'] as const).map(size => (
+              <DropdownButton
+                key={size}
+                {...args}
+                variant={variant}
+                size={size}
+              />
+            ))}
+          </div>
+        ),
+      )}
     </div>
   ),
 } satisfies Meta<typeof DropdownButton>
diff --git a/packages/components/src/dropdown-button/dropdown-button.tsx b/packages/components/src/dropdown-button/dropdown-button.tsx
index 842bbe94..215efb7a 100644
--- a/packages/components/src/dropdown-button/dropdown-button.tsx
+++ b/packages/components/src/dropdown-button/dropdown-button.tsx
@@ -13,7 +13,7 @@ type ButtonProps = Extract<
 type Props = ButtonProps & {
   variant?: Extract<
     ButtonProps['variant'],
-    'primary' | 'grey' | 'outline' | 'ghost'
+    'primary' | 'grey' | 'outline' | 'ghost' | 'darkGrey'
   >
   iconAfter?: never
 }
@@ -53,6 +53,10 @@ const iconStyles = cva({
         'text-neutral-100 dark:text-white-100',
         '[&>path[fill="#E7EAEE"]]:dark:fill-neutral-80',
       ],
+      darkGrey: [
+        'text-neutral-100 dark:text-white-100',
+        '[&>path[fill="#E7EAEE"]]:dark:fill-neutral-80',
+      ],
     },
   },
 })