From 6c2cc30288f36e5b82d907fe952ed78ec1a7dd37 Mon Sep 17 00:00:00 2001
From: Brian Sztamfater <brian@status.im>
Date: Mon, 15 Apr 2024 16:42:07 +0200
Subject: [PATCH] fix: add external icon to OpenSea button in collectible page

---
 src/quo/components/buttons/button/view.cljs        | 12 ++++++------
 .../contexts/wallet/collectible/view.cljs          | 14 +++++++++-----
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/quo/components/buttons/button/view.cljs b/src/quo/components/buttons/button/view.cljs
index 2c0809296257..8f56d44d967b 100644
--- a/src/quo/components/buttons/button/view.cljs
+++ b/src/quo/components/buttons/button/view.cljs
@@ -28,9 +28,9 @@
     :theme :light/:dark
    only icon
    [button {:icon-only? true} :i/close-circle]"
-  [{:keys [on-press on-long-press disabled? type background size icon-left icon-right icon-top
-           customization-color accessibility-label icon-only? container-style inner-style
-           pressed? on-press-in on-press-out allow-multiple-presses?]
+  [{:keys [on-press on-long-press disabled? type background size icon-left icon-left-color icon-right
+           icon-right-color icon-top icon-top-color customization-color accessibility-label icon-only?
+           container-style inner-style pressed? on-press-in on-press-out allow-multiple-presses?]
     :or   {type                :primary
            size                40
            customization-color (if (= type :primary) :blue nil)}}
@@ -94,7 +94,7 @@
           [quo.icons/icon icon-top
            {:container-style {:margin-bottom 2
                               :opacity       (when disabled? 0.3)}
-            :color           icon-color
+            :color           (or icon-top-color icon-color)
             :size            icon-size}]])
        (when icon-left
          [rn/view
@@ -103,7 +103,7 @@
                     :icon-size icon-size
                     :disabled? disabled?})}
           [quo.icons/icon icon-left
-           {:color icon-color
+           {:color (or icon-left-color icon-color)
             :size  icon-size}]])
        [rn/view
         (cond
@@ -130,5 +130,5 @@
                     :icon-size icon-size
                     :disabled? disabled?})}
           [quo.icons/icon icon-right
-           {:color icon-color
+           {:color (or icon-right-color icon-color)
             :size  icon-size}]])]]]))
diff --git a/src/status_im/contexts/wallet/collectible/view.cljs b/src/status_im/contexts/wallet/collectible/view.cljs
index 594a718a887b..ee6077f1cc19 100644
--- a/src/status_im/contexts/wallet/collectible/view.cljs
+++ b/src/status_im/contexts/wallet/collectible/view.cljs
@@ -10,7 +10,8 @@
     [status-im.contexts.wallet.collectible.style :as style]
     [status-im.contexts.wallet.collectible.tabs.view :as tabs]
     [utils.i18n :as i18n]
-    [utils.re-frame :as rf]))
+    [utils.re-frame :as rf]
+    [quo.foundations.colors :as colors]))
 
 (defn header
   [collectible-name collection-name collection-image-url]
@@ -36,10 +37,13 @@
      :icon-left       :i/send}
     (i18n/label :t/send)]
    [quo/button
-    {:container-style style/opensea-button
-     :type            :outline
-     :size            40
-     :icon-left       :i/opensea}
+    {:container-style  style/opensea-button
+     :type             :outline
+     :size             40
+     :icon-left        :i/opensea
+     :icon-left-color  (colors/theme-colors colors/neutral-100 colors/neutral-40)
+     :icon-right       :i/external
+     :icon-right-color (colors/theme-colors colors/neutral-50 colors/neutral-40)}
     (i18n/label :t/opensea)]])
 
 (def tabs-data