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,7 +22,8 @@ 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(
+        variant => (
           <div key={variant} className="flex items-center gap-4">
             {(['40', '32', '24'] as const).map(size => (
               <DropdownButton
@@ -33,7 +34,8 @@ export default {
               />
             ))}
           </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',
+      ],
     },
   },
 })