add dark grey dropdown button (#588)

* a dark grey dropdown button

* Create nasty-dots-eat.md

.changeset/nasty-dots-eat.md

@@ -0,0 +1,5 @@
+---
+"@status-im/components": patch
+---
+
+add dark grey dropdown button

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 => (
+      {(['primary', 'grey', 'darkGrey', 'outline', 'ghost'] as const).map(
-        <div key={variant} className="flex items-center gap-4">
+        variant => (
-          {(['40', '32', '24'] as const).map(size => (
+          <div key={variant} className="flex items-center gap-4">
-            <DropdownButton
+            {(['40', '32', '24'] as const).map(size => (
-              key={size}
+              <DropdownButton
-              {...args}
+                key={size}
-              variant={variant}
+                {...args}
-              size={size}
+                variant={variant}
-            />
+                size={size}
-          ))}
+              />
-        </div>
+            ))}
-      ))}
+          </div>
+        ),
+      )}
     </div>
   ),
 } satisfies Meta<typeof DropdownButton>

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',
+      ],
     },
   },
 })