From 655bf993ad73a7aefbc19fc2bd7de4e0793f71f0 Mon Sep 17 00:00:00 2001
From: Jakub Kotula <520927+jkbktl@users.noreply.github.com>
Date: Thu, 14 Sep 2023 21:53:16 +0200
Subject: [PATCH 1/2] add icon color variant

---
 .../components/src/button/button.stories.tsx   | 18 ++++++++++++++++++
 packages/components/src/button/button.tsx      | 10 ++++++++--
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/button/button.stories.tsx b/packages/components/src/button/button.stories.tsx
index 28f299628..dd08fd807 100644
--- a/packages/components/src/button/button.stories.tsx
+++ b/packages/components/src/button/button.stories.tsx
@@ -1,3 +1,4 @@
+import { PopupIcon } from '@status-im/icons'
 import { action } from '@storybook/addon-actions'
 import { Stack } from 'tamagui'
 
@@ -82,6 +83,14 @@ export const PrimaryIconBefore: Story = {
   },
 }
 
+export const PrimaryIconBeforeDifferentColor: Story = {
+  name: 'Primary icon before/Different color',
+  args: {
+    children: 'Click me',
+    icon: <PopupIcon size={20} color="$yellow-50" />,
+  },
+}
+
 export const PrimaryIconAfter: Story = {
   name: 'Primary/Icon after',
   args: {
@@ -89,6 +98,15 @@ export const PrimaryIconAfter: Story = {
     iconAfter: icon,
   },
 }
+
+export const PrimaryIconAfterDifferentColor: Story = {
+  name: 'Primary/Icon after/Different color',
+  args: {
+    children: 'Click me',
+    iconAfter: <PopupIcon size={20} color="$yellow-50" />,
+  },
+}
+
 export const PrimaryIconOnly: Story = {
   name: 'Primary/Icon only',
   args: {
diff --git a/packages/components/src/button/button.tsx b/packages/components/src/button/button.tsx
index d9b2c9267..31a4e1c00 100644
--- a/packages/components/src/button/button.tsx
+++ b/packages/components/src/button/button.tsx
@@ -82,11 +82,17 @@ const Button = (props: Props, ref: Ref<View>) => {
       iconOnly={iconOnly}
       width={fullWidth ? '100%' : 'auto'}
     >
-      {icon ? cloneElement(icon, { color: textColor || '$neutral-40' }) : null}
+      {icon
+        ? cloneElement(icon, {
+            color: iconOnly ? textColor : icon.props.color ?? textColor,
+          })
+        : null}
       <Text weight="medium" color={textColor} size={textSize}>
         {children}
       </Text>
-      {iconAfter ? cloneElement(iconAfter, { color: textColor }) : null}
+      {iconAfter
+        ? cloneElement(iconAfter, { color: iconAfter.props.color ?? textColor })
+        : null}
     </Base>
   )
 }

From d8f198bfa9cca03d5a6aea32cfd8dbd1ce935105 Mon Sep 17 00:00:00 2001
From: Jakub Kotula <520927+jkbktl@users.noreply.github.com>
Date: Thu, 14 Sep 2023 22:03:15 +0200
Subject: [PATCH 2/2] Create dirty-books-argue.md

---
 .changeset/dirty-books-argue.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/dirty-books-argue.md

diff --git a/.changeset/dirty-books-argue.md b/.changeset/dirty-books-argue.md
new file mode 100644
index 000000000..65c889dd7
--- /dev/null
+++ b/.changeset/dirty-books-argue.md
@@ -0,0 +1,5 @@
+---
+"@status-im/components": patch
+---
+
+fix: keep icon color if defined as part of button