From 6486f922df84af1c3b6f00702a4b34880467efec Mon Sep 17 00:00:00 2001
From: Jamie Caprani <jamiecaprani@gmail.com>
Date: Mon, 24 Jul 2023 12:27:07 +0100
Subject: [PATCH 1/6] chore: remove use of override-background-color prop in
 button

---
 src/quo2/components/buttons/button/view.cljs  | 23 ++++++------
 src/quo2/components/code/snippet.cljs         | 10 +++---
 src/quo2/components/navigation/page_nav.cljs  | 28 +++++++--------
 src/status_im2/common/home/view.cljs          | 15 ++++----
 src/status_im2/common/scroll_page/view.cljs   | 35 ++++++++++---------
 .../contexts/add_new_contact/style.cljs       | 10 ------
 .../contexts/add_new_contact/views.cljs       | 31 +++++++++-------
 .../contexts/communities/overview/view.cljs   | 15 ++++----
 8 files changed, 81 insertions(+), 86 deletions(-)

diff --git a/src/quo2/components/buttons/button/view.cljs b/src/quo2/components/buttons/button/view.cljs
index 6c5937b0016..ab6bc4743e1 100644
--- a/src/quo2/components/buttons/button/view.cljs
+++ b/src/quo2/components/buttons/button/view.cljs
@@ -32,7 +32,7 @@
   (let [pressed? (reagent/atom false)]
     (fn
       [{:keys [on-press on-long-press disabled type background size before after above
-               width customization-color theme override-background-color
+               width customization-color theme
                accessibility-label icon style inner-style]
         :or   {type                :primary
                size                40
@@ -71,17 +71,16 @@
                    container-style)}
           [rn/view
            {:style (merge
-                    (style/style-container {:size size
-                                            :disabled disabled
-                                            :border-radius border-radius
-                                            :background-color
-                                            (or override-background-color background-color)
-                                            :border-color border-color
-                                            :icon-only? icon-only?
-                                            :icon-above icon-above
-                                            :width width
-                                            :icon-left icon-left
-                                            :icon-right icon-right})
+                    (style/style-container {:size             size
+                                            :disabled         disabled
+                                            :border-radius    border-radius
+                                            :background-color background-color
+                                            :border-color     border-color
+                                            :icon-only?       icon-only?
+                                            :icon-above       icon-above
+                                            :width            width
+                                            :icon-left        icon-left
+                                            :icon-right       icon-right})
                     inner-style)}
            (when customization-color
              [customization-colors/overlay
diff --git a/src/quo2/components/code/snippet.cljs b/src/quo2/components/code/snippet.cljs
index 4fe37d6fabd..733a1ad5c74 100644
--- a/src/quo2/components/code/snippet.cljs
+++ b/src/quo2/components/code/snippet.cljs
@@ -87,11 +87,11 @@
         :line-number-width line-number-width}]]
      [rn/view {:style style/copy-button}
       [button/button
-       {:icon                      true
-        :type                      :grey
-        :size                      24
-        :on-press                  on-copy-press
-        :override-background-color (style/button-background-color)}
+       {:icon       true
+        :type       :grey
+        :background :blur
+        :size       24
+        :on-press   on-copy-press}
        :main-icons/copy]]]))
 
 (defn snippet
diff --git a/src/quo2/components/navigation/page_nav.cljs b/src/quo2/components/navigation/page_nav.cljs
index bd96ef519d4..91fcc227cb9 100644
--- a/src/quo2/components/navigation/page_nav.cljs
+++ b/src/quo2/components/navigation/page_nav.cljs
@@ -31,17 +31,17 @@
            {:no-color true})))
 
 (defn left-section-view
-  [{:keys [on-press icon accessibility-label type icon-background-color]
+  [{:keys [on-press icon accessibility-label type icon-background]
     :or   {type :grey}}
    put-middle-section-on-left?]
   [rn/view {:style (when put-middle-section-on-left? {:margin-right 5})}
    [button/button
-    {:on-press                  on-press
-     :icon                      true
-     :type                      type
-     :size                      32
-     :accessibility-label       accessibility-label
-     :override-background-color icon-background-color}
+    {:on-press            on-press
+     :icon                true
+     :type                type
+     :size                32
+     :accessibility-label accessibility-label
+     :background          icon-background}
     icon]])
 
 (defn- mid-section-comp
@@ -152,7 +152,7 @@
                   :justify-content :flex-end)}
    (let [last-icon-index (-> right-section-buttons count dec)]
      (map-indexed (fn [index
-                       {:keys [icon on-press type style icon-background-color
+                       {:keys [icon on-press type style icon-background
                                accessibility-label label]
                         :or   {type :grey}}]
                     ^{:key index}
@@ -163,12 +163,12 @@
                        accessibility-label (assoc :accessibility-label accessibility-label
                                                   :accessible          true))
                      [button/button
-                      {:on-press                  on-press
-                       :icon                      (not label)
-                       :type                      type
-                       :before                    (when label icon)
-                       :size                      32
-                       :override-background-color icon-background-color}
+                      {:on-press   on-press
+                       :icon       (not label)
+                       :type       type
+                       :before     (when label icon)
+                       :size       32
+                       :background icon-background}
                       (if label label icon)]])
                   right-section-buttons))])
 
diff --git a/src/status_im2/common/home/view.cljs b/src/status_im2/common/home/view.cljs
index ac39b658713..17b71e3586a 100644
--- a/src/status_im2/common/home/view.cljs
+++ b/src/status_im2/common/home/view.cljs
@@ -25,14 +25,13 @@
   [type]
   (let [default? (= type :default)
         dark?    (colors/dark?)]
-    {:icon                      true
-     :size                      32
-     :style                     {:margin-left 12}
-     :type                      (if default?
-                                  (if dark? :grey :dark-grey)
-                                  type)
-     :override-background-color (when (and dark? default?)
-                                  colors/neutral-90)}))
+    {:icon  true
+     :size  32
+     :style {:margin-left 12}
+     :type  (if default?
+              (if dark? :grey :dark-grey)
+              type)
+    }))
 
 (defn- unread-indicator
   []
diff --git a/src/status_im2/common/scroll_page/view.cljs b/src/status_im2/common/scroll_page/view.cljs
index 92bbfad6f63..a66176a2c47 100644
--- a/src/status_im2/common/scroll_page/view.cljs
+++ b/src/status_im2/common/scroll_page/view.cljs
@@ -1,7 +1,6 @@
 (ns status-im2.common.scroll-page.view
   (:require [oops.core :as oops]
             [quo2.core :as quo]
-            [quo2.foundations.colors :as colors]
             [react-native.core :as rn]
             [react-native.platform :as platform]
             [reagent.core :as reagent]
@@ -9,10 +8,6 @@
             [utils.re-frame :as rf]
             [react-native.reanimated :as reanimated]))
 
-(defn icon-color
-  []
-  (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40))
-
 (def negative-scroll-position-0 (if platform/ios? -44 0))
 (def scroll-position-0 (if platform/ios? 44 0))
 
@@ -71,18 +66,24 @@
          top-nav]
         [rn/view {:style {:margin-top 44}}
          [quo/page-nav
-          (merge {:horizontal-description? true
-                  :one-icon-align-left?    true
-                  :align-mid?              false
-                  :page-nav-color          :transparent
-                  :mid-section             {:type            :text-with-description
-                                            :main-text       nil
-                                            :description-img nil}
-                  :right-section-buttons   page-nav}
-                 (when navigate-back?
-                   {:left-section {:icon                  :i/close
-                                   :icon-background-color (icon-color)
-                                   :on-press              #(rf/dispatch [:navigate-back])}}))]])
+          (merge
+           {:horizontal-description? true
+            :one-icon-align-left?    true
+            :align-mid?              false
+            :page-nav-color          :transparent
+            :mid-section             {:type            :text-with-description
+                                      :main-text       nil
+                                      :description-img nil}
+            :right-section-buttons   (if (= 1 reanimated/get-shared-value opacity-animation)
+                                       (assoc page-nav :icon-background :blur)
+                                       page-nav)}
+           (when navigate-back?
+             {:left-section {:icon            :i/close
+                             :type            :grey
+                             :icon-background (if (= 1 reanimated/get-shared-value opacity-animation)
+                                                :blur
+                                                :photo)
+                             :on-press        #(rf/dispatch [:navigate-back])}}))]])
       (when title-colum
         title-colum)
       sticky-header]]))
diff --git a/src/status_im2/contexts/add_new_contact/style.cljs b/src/status_im2/contexts/add_new_contact/style.cljs
index d18d6fc54bf..f2d021c8179 100644
--- a/src/status_im2/contexts/add_new_contact/style.cljs
+++ b/src/status_im2/contexts/add_new_contact/style.cljs
@@ -110,16 +110,6 @@
    :size  24
    :style {:margin-top 6}})
 
-(defn button-close
-  []
-  {:type                      :grey
-   :icon                      true
-   :accessibility-label       :new-contact-close-button
-   :size                      32
-   :override-background-color (colors/theme-colors
-                               colors/neutral-10
-                               colors/neutral-90)})
-
 (def button-qr
   {:type :outline
    :icon true
diff --git a/src/status_im2/contexts/add_new_contact/views.cljs b/src/status_im2/contexts/add_new_contact/views.cljs
index cd74973d8fb..e6cf48e3d7d 100644
--- a/src/status_im2/contexts/add_new_contact/views.cljs
+++ b/src/status_im2/contexts/add_new_contact/views.cljs
@@ -59,13 +59,16 @@
           [rn/view (style/container-outer)
            [rn/view style/container-inner
             [quo/button
-             (merge (style/button-close)
-                    {:on-press
-                     (fn []
-                       (reset! clipboard nil)
-                       (reset! default-value nil)
-                       (rf/dispatch [:contacts/clear-new-identity])
-                       (rf/dispatch [:navigate-back]))}) :i/close]
+             {:type :grey
+              :icon true
+              :accessibility-label :new-contact-close-button
+              :size 32
+              :on-press
+              (fn []
+                (reset! clipboard nil)
+                (reset! default-value nil)
+                (rf/dispatch [:contacts/clear-new-identity])
+                (rf/dispatch [:navigate-back]))} :i/close]
             [quo/text (style/text-title)
              (i18n/label :t/add-a-contact)]
             [quo/text (style/text-subtitle)
@@ -87,12 +90,14 @@
                        :return-key-type :done})]
               (when show-paste-button?
                 [quo/button
-                 (merge style/button-paste
-                        {:on-press
-                         (fn []
-                           (reset! default-value @clipboard)
-                           (rf/dispatch
-                            [:contacts/set-new-identity @clipboard nil]))})
+                 {:type :outline
+                  :size 24
+                  :style {:margin-top 6}
+                  :on-press
+                  (fn []
+                    (reset! default-value @clipboard)
+                    (rf/dispatch
+                     [:contacts/set-new-identity @clipboard nil]))}
                  (i18n/label :t/paste)])]
              [quo/button
               (merge style/button-qr
diff --git a/src/status_im2/contexts/communities/overview/view.cljs b/src/status_im2/contexts/communities/overview/view.cljs
index cfc738be20f..fa5cf9b2ff0 100644
--- a/src/status_im2/contexts/communities/overview/view.cljs
+++ b/src/status_im2/contexts/communities/overview/view.cljs
@@ -302,13 +302,14 @@
 
 (defn page-nav-right-section-buttons
   [id]
-  [{:icon                  :i/options
-    :icon-background-color (scroll-page/icon-color)
-    :accessibility-label   :community-options-for-community
-    :on-press              #(rf/dispatch
-                             [:show-bottom-sheet
-                              {:content (fn []
-                                          [options/community-options-bottom-sheet id])}])}])
+  [{:icon                :i/options
+    :type                :grey
+    :icon-background     :photo
+    :accessibility-label :community-options-for-community
+    :on-press            #(rf/dispatch
+                           [:show-bottom-sheet
+                            {:content (fn []
+                                        [options/community-options-bottom-sheet id])}])}])
 
 (defn pick-first-category-by-height
   [scroll-height first-channel-height categories-heights]

From 9044a90e3bd4474627a63f165e01278230dcbcaa Mon Sep 17 00:00:00 2001
From: Jamie Caprani <jamiecaprani@gmail.com>
Date: Mon, 24 Jul 2023 17:00:56 +0100
Subject: [PATCH 2/6] chore: update uses of quo2 button to align with figma

---
 .../components/buttons/button/properties.cljs | 124 ++++++++----------
 src/quo2/components/buttons/button/style.cljs |  59 +++++----
 src/quo2/components/buttons/button/view.cljs  |  64 ++++-----
 .../buttons/predictive_keyboard/view.cljs     |   8 +-
 src/quo2/components/code/snippet.cljs         |   2 +-
 .../drawers/documentation_drawers/view.cljs   |   5 +-
 .../empty_state/empty_state/view.cljs         |   9 +-
 src/quo2/components/header.cljs               |  12 +-
 .../components/info/information_box/view.cljs |   2 +-
 .../components/inputs/profile_input/view.cljs |   6 +-
 .../components/links/link_preview/view.cljs   |   2 +-
 src/quo2/components/navigation/page_nav.cljs  |   6 +-
 .../notifications/activity_log/view.cljs      |   4 +-
 .../components/profile/profile_card/view.cljs |   4 +-
 .../record_audio/buttons/record_button.cljs   |  10 +-
 .../components/settings/accounts/view.cljs    |  10 +-
 .../settings/settings_list/view.cljs          |  12 +-
 .../components/share/share_qr_code/view.cljs  |   6 +-
 .../common/confirmation_drawer/view.cljs      |  16 +--
 src/status_im2/common/home/view.cljs          |  33 +++--
 .../common/password_authentication/view.cljs  |   4 +-
 src/status_im2/common/plus_button/view.cljs   |   2 +-
 .../contexts/add_new_contact/style.cljs       |  39 ++----
 .../contexts/add_new_contact/views.cljs       |  36 +++--
 .../contexts/chat/composer/actions/style.cljs |   2 -
 .../contexts/chat/composer/actions/view.cljs  |  42 +++---
 .../contexts/chat/composer/edit/view.cljs     |   8 +-
 .../contexts/chat/composer/reply/view.cljs    |   3 +-
 .../contexts/chat/group_details/view.cljs     |  17 +--
 .../contact_requests/bottom_drawer.cljs       |   6 +-
 .../contexts/chat/new_chat/view.cljs          |  18 ++-
 .../contexts/chat/photo_selector/view.cljs    |   2 +-
 .../communities/actions/leave/view.cljs       |  14 +-
 .../actions/request_to_join/view.cljs         |   6 +-
 .../contexts/communities/overview/view.cljs   |   8 +-
 .../drawers/nickname_drawer/view.cljs         |  14 +-
 .../onboarding/create_password/view.cljs      |   2 +-
 .../onboarding/create_profile/view.cljs       |   4 +-
 .../onboarding/enable_biometrics/view.cljs    |   4 +-
 .../onboarding/enable_notifications/view.cljs |   2 +-
 .../onboarding/enter_seed_phrase/view.cljs    |   8 +-
 .../contexts/onboarding/identifiers/view.cljs |   2 +-
 .../onboarding/syncing/progress/view.cljs     |   2 +-
 .../onboarding/syncing/results/view.cljs      |   4 +-
 .../contexts/profile/profiles/view.cljs       |  14 +-
 .../contexts/quo_preview/buttons/button.cljs  |  57 ++++----
 .../quo_preview/drawers/action_drawers.cljs   |   8 +-
 .../drawers/documentation_drawers.cljs        |  18 +--
 src/status_im2/contexts/quo_preview/main.cljs |   5 +-
 .../quo_preview/selectors/disclaimer.cljs     |   2 +-
 .../components/jump_to_screen/view.cljs       |   2 +-
 .../components/switcher_cards/view.cljs       |  10 +-
 src/status_im2/contexts/shell/share/view.cljs |  16 ++-
 .../contexts/syncing/scan_sync_code/view.cljs |  16 ++-
 .../contexts/syncing/setup_syncing/view.cljs  |  25 ++--
 .../syncing/syncing_devices_list/view.cljs    |   2 +-
 .../syncing/syncing_instructions/view.cljs    |  23 ++--
 57 files changed, 411 insertions(+), 430 deletions(-)

diff --git a/src/quo2/components/buttons/button/properties.cljs b/src/quo2/components/buttons/button/properties.cljs
index bf6bd75d2e7..a397dbe0862 100644
--- a/src/quo2/components/buttons/button/properties.cljs
+++ b/src/quo2/components/buttons/button/properties.cljs
@@ -3,101 +3,87 @@
 
 (defn custom-color-type
   [customization-color icon-only?]
-  {:icon-color           colors/white
-   :icon-secondary-color colors/white-opa-70
-   :label-color          colors/white
-   :background-color     (colors/custom-color customization-color 50)
-   :border-radius        (when icon-only? 24)})
+  {:icon-color       colors/white-opa-70
+   :label-color      colors/white
+   :background-color (colors/custom-color customization-color 50)
+   :border-radius    (when icon-only? 24)})
 
 (defn grey-photo
   [theme pressed?]
-  {:icon-color            (colors/theme-colors colors/neutral-100 colors/white theme)
-   :icon-secondary-color  (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-70 theme)
-   :label-color           (colors/theme-colors colors/neutral-100 colors/white theme)
-   :icon-background-color (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
-   :blur-overlay-color    (if pressed?
-                            (colors/theme-colors colors/white-opa-50
-                                                 colors/neutral-80-opa-50
-                                                 theme)
-                            (colors/theme-colors colors/white-opa-40
-                                                 colors/neutral-80-opa-40
-                                                 theme))
-   :blur-type             (if (= theme :light) :light :dark)})
+  {:icon-color         (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-70 theme)
+   :label-color        (colors/theme-colors colors/neutral-100 colors/white theme)
+   :blur-overlay-color (if pressed?
+                         (colors/theme-colors colors/white-opa-50
+                                              colors/neutral-80-opa-50
+                                              theme)
+                         (colors/theme-colors colors/white-opa-40
+                                              colors/neutral-80-opa-40
+                                              theme))
+   :blur-type          (if (= theme :light) :light :dark)})
 
 (defn grey-blur
   [theme pressed?]
-  {:icon-color           (colors/theme-colors colors/neutral-100 colors/white theme)
-   :icon-secondary-color (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-70 theme)
-   :label-color          (colors/theme-colors colors/neutral-100 colors/white theme)
-   :background-color     (if pressed?
-                           (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
-                           (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme))})
+  {:icon-color       (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-70 theme)
+   :label-color      (colors/theme-colors colors/neutral-100 colors/white theme)
+   :background-color (if pressed?
+                       (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
+                       (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme))})
 
 (defn outline-blur
   [theme pressed?]
-  {:icon-color           (colors/theme-colors colors/neutral-100 colors/white theme)
-   :icon-secondary-color (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
-   :label-color          (colors/theme-colors colors/neutral-100 colors/white theme)
-   :border-color         (if pressed?
-                           (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 theme)
-                           (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme))})
+  {:icon-color   (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
+   :label-color  (colors/theme-colors colors/neutral-100 colors/white theme)
+   :border-color (if pressed?
+                   (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 theme)
+                   (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme))})
 
 (defn grey
   [theme pressed?]
-  {:icon-color           (colors/theme-colors colors/neutral-100 colors/white theme)
-   :icon-secondary-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
-   :label-color          (colors/theme-colors colors/neutral-100 colors/white theme)
-   :background-color     (if pressed?
-                           (colors/theme-colors colors/neutral-20 colors/neutral-60 theme)
-                           (colors/theme-colors colors/neutral-10 colors/neutral-80 theme))})
+  {:icon-color       (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
+   :label-color      (colors/theme-colors colors/neutral-100 colors/white theme)
+   :background-color (if pressed?
+                       (colors/theme-colors colors/neutral-20 colors/neutral-60 theme)
+                       (colors/theme-colors colors/neutral-10 colors/neutral-80 theme))})
 
 (defn dark-grey
   [theme pressed?]
-  {:icon-color           (colors/theme-colors colors/neutral-100 colors/white theme)
-   :icon-secondary-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
-   :label-color          (colors/theme-colors colors/neutral-100 colors/white theme)
-   :background-color     (if pressed?
-                           (colors/theme-colors colors/neutral-30 colors/neutral-60 theme)
-                           (colors/theme-colors colors/neutral-20 colors/neutral-90 theme))})
+  {:icon-color       (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
+   :label-color      (colors/theme-colors colors/neutral-100 colors/white theme)
+   :background-color (if pressed?
+                       (colors/theme-colors colors/neutral-30 colors/neutral-60 theme)
+                       (colors/theme-colors colors/neutral-20 colors/neutral-90 theme))})
 
 (defn outline
   [theme pressed?]
-  {:icon-color           (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
-   :icon-secondary-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
-   :label-color          (colors/theme-colors colors/neutral-100 colors/white theme)
-   :border-color         (if pressed?
-                           (colors/theme-colors colors/neutral-40 colors/neutral-60 theme)
-                           (colors/theme-colors colors/neutral-30 colors/neutral-70 theme))})
+  {:icon-color   (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
+   :label-color  (colors/theme-colors colors/neutral-100 colors/white theme)
+   :border-color (if pressed?
+                   (colors/theme-colors colors/neutral-40 colors/neutral-60 theme)
+                   (colors/theme-colors colors/neutral-30 colors/neutral-70 theme))})
 
 (defn ghost
   [theme pressed?]
-  {:icon-color           (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
-   :icon-secondary-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
-   :label-color          (colors/theme-colors colors/neutral-100 colors/white theme)
-   :background-color     (when pressed?
-                           (colors/theme-colors colors/neutral-10 colors/neutral-80 theme))})
+  {:icon-color       (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
+   :label-color      (colors/theme-colors colors/neutral-100 colors/white theme)
+   :background-color (when pressed?
+                       (colors/theme-colors colors/neutral-10 colors/neutral-80 theme))})
 
 (defn black
   [pressed?]
-  {:icon-color       colors/white
-   :label-color      colors/white
+  {:label-color      colors/white
    :background-color (if pressed? colors/neutral-80 colors/neutral-95)})
 
 (defn get-values
   [{:keys [customization-color theme type background pressed? icon-only?]}]
   (cond
-    (= type :primary)                              (custom-color-type customization-color icon-only?)
-    (= type :positive)                             (custom-color-type customization-color icon-only?)
-    (= type :danger)                               (custom-color-type customization-color icon-only?)
-    ;; TODO Remove type blurred - https://github.com/status-im/status-mobile/issues/16535
-    (and (= :photo background) (= type :grey))     (grey-photo theme pressed?)
-    ;; TODO Remove type blur-bg - https://github.com/status-im/status-mobile/issues/16535
-    (or (= type :blur-bg)
-        (and (= :blur background) (= type :grey))) (grey-blur theme pressed?)
-    (and (= :blur background) (= type :outline))   (outline-blur theme pressed?)
-    (= type :grey)                                 (grey theme pressed?)
-    (= type :dark-grey)                            (dark-grey theme pressed?)
-    (= type :outline)                              (outline theme pressed?)
-    (= type :ghost)                                (ghost theme pressed?)
-    ;; TODO: remove type shell - https://github.com/status-im/status-mobile/issues/16535
-    (or (= type :shell) (= type :black))           (black pressed?)))
+    (= type :primary)                            (custom-color-type customization-color icon-only?)
+    (= type :positive)                           (custom-color-type customization-color icon-only?)
+    (= type :danger)                             (custom-color-type customization-color icon-only?)
+    (and (= :photo background) (= type :grey))   (grey-photo theme pressed?)
+    (and (= :blur background) (= type :grey))    (grey-blur theme pressed?)
+    (and (= :blur background) (= type :outline)) (outline-blur theme pressed?)
+    (= type :grey)                               (grey theme pressed?)
+    (= type :dark-grey)                          (dark-grey theme pressed?)
+    (= type :outline)                            (outline theme pressed?)
+    (= type :ghost)                              (ghost theme pressed?)
+    (= type :black)                              (black pressed?)))
diff --git a/src/quo2/components/buttons/button/style.cljs b/src/quo2/components/buttons/button/style.cljs
index a81d209d4bf..5b5a6308c1f 100644
--- a/src/quo2/components/buttons/button/style.cljs
+++ b/src/quo2/components/buttons/button/style.cljs
@@ -8,7 +8,7 @@
    :bottom   0})
 
 (defn icon-style
-  [{:keys [icon-container-size icon-background-color icon-container-rounded?
+  [{:keys [icon-container-size icon-container-rounded?
            icon-size margin-left margin-right]}]
   (cond-> (merge {:margin-left     margin-left
                   :margin-right    margin-right
@@ -16,31 +16,27 @@
                   :justify-content :center})
     icon-container-size
     (assoc :width icon-container-size :height icon-container-size)
-    icon-background-color
-    (assoc :background-color icon-background-color)
     icon-container-rounded?
     (assoc :border-radius (/ (or icon-container-size icon-size) 2))))
 
 (defn icon-left-icon-style
-  [{:keys [override-margins size icon-container-size icon-background-color icon-container-rounded?
+  [{:keys [override-margins size icon-container-size icon-container-rounded?
            icon-size]}]
   (icon-style
    {:margin-left             (or (get override-margins :left)
                                  (if (= size 40) 12 8))
     :margin-right            (or (get override-margins :right) 4)
     :icon-container-size     icon-container-size
-    :icon-background-color   icon-background-color
     :icon-container-rounded? icon-container-rounded?
     :icon-size               icon-size}))
 
 (defn icon-right-icon-style
-  [{:keys [override-margins size icon-container-size icon-background-color icon-container-rounded?
+  [{:keys [override-margins size icon-container-size icon-container-rounded?
            icon-size]}]
   (icon-style {:margin-left             (or (get override-margins :left) 4)
                :margin-right            (or (get override-margins :right)
                                             (if (= size 40) 12 8))
                :icon-container-size     icon-container-size
-               :icon-background-color   icon-background-color
                :icon-container-rounded? icon-container-rounded?
                :icon-size               icon-size}))
 
@@ -53,54 +49,67 @@
                       56 12
                       40 12
                       32 10
-                      8))})
+                      24 8
+                      12))})
 
 (defn style-container
-  [{:keys [size disabled border-radius background-color border-color icon-only? icon-above width
+  [{:keys [size disabled? border-radius background-color border-color icon-only? icon-top
            icon-left icon-right]}]
   (merge {:height             size
           :align-items        :center
           :justify-content    :center
-          :flex-direction     (if icon-above :column :row)
+          :flex-direction     (if icon-top :column :row)
           :padding-horizontal (when-not (or icon-only? icon-left icon-right)
                                 (case size
-                                  56 16
+                                  56 (if border-color 10 11)
                                   40 16
                                   32 12
-                                  8))
+                                  24 7
+                                  16))
           :padding-left       (when-not (or icon-only? icon-left)
                                 (case size
-                                  56 16
+                                  56 nil
                                   40 16
                                   32 12
-                                  8))
+                                  24 8
+                                  16))
           :padding-right      (when-not (or icon-only? icon-right)
                                 (case size
-                                  56 16
+                                  56 nil
                                   40 16
                                   32 12
-                                  8))
+                                  24 8
+                                  16))
           :padding-top        (when-not (or icon-only? icon-left icon-right)
                                 (case size
                                   56 0
-                                  40 9
-                                  32 5
-                                  3))
+                                  40 (if border-color 8 9)
+                                  32 (if border-color 4 5)
+                                  24 (if border-color 0 1)
+                                  (if border-color 8 9)))
           :padding-bottom     (when-not (or icon-only? icon-left icon-right)
                                 (case size
                                   56 0
                                   40 9
                                   32 5
-                                  4))
+                                  24 4
+                                  9))
           :overflow           :hidden
-          :background-color   background-color}
-         (shape-style-container size border-radius)
-         (when width
-           {:width width})
+          :background-color   background-color
+          :border-radius      (if border-radius
+                                border-radius
+                                (case size
+                                  56 12
+                                  40 12
+                                  32 10
+                                  24 8
+                                  12))
+          :border-color       border-color
+          :border-width       (when border-color 1)}
          (when icon-only?
            {:width size})
          (when border-color
            {:border-color border-color
             :border-width 1})
-         (when disabled
+         (when disabled?
            {:opacity 0.3})))
diff --git a/src/quo2/components/buttons/button/view.cljs b/src/quo2/components/buttons/button/view.cljs
index ab6bc4743e1..37b5f8f1d74 100644
--- a/src/quo2/components/buttons/button/view.cljs
+++ b/src/quo2/components/buttons/button/view.cljs
@@ -15,25 +15,24 @@
    opts
    {on-press callback
     on-long-press callback
-    disabled boolean
-    :type   :primary/:positive:grey/:dark-grey/:outline/:ghost/
-            :danger/:black  (TODO remove :photo-bg/:blur-bg/:blur-bg-outline/:shell/:community)
+    disabled? boolean
+    :type   :primary/:positive/:grey/:dark-grey/:outline/:ghost/
+            :danger/:black
     background :photo/:blur or nil
     :size   40 [default] /32/24/56
-    :icon   true/false
-    :above  :icon-keyword
-    :before :icon-keyword
-    :after  :icon-keyword}
+    :icon-only?   true/false
+    :icon-top  :icon-keyword
+    :icon-left :icon-keyword
+    :icon-right  :icon-keyword}
     :customization-color keyword or hexstring 
     :theme :light/:dark
    only icon
-   [button {:icon true} :i/close-circle]"
+   [button {:icon-only? true} :i/close-circle]"
   [_ _]
   (let [pressed? (reagent/atom false)]
     (fn
-      [{:keys [on-press on-long-press disabled type background size before after above
-               width customization-color theme
-               accessibility-label icon style inner-style]
+      [{:keys [on-press on-long-press disabled? type background size icon-left icon-right icon-top
+               customization-color theme accessibility-label icon-only? container-style inner-style]
         :or   {type                :primary
                size                40
                customization-color (cond (= type :primary)  :blue
@@ -41,24 +40,17 @@
                                          (= type :danger)   :danger
                                          :else              nil)}}
        children]
-      (let [icon-only? icon ;; TODO Update external api to icon-only? -
-                            ;; https://github.com/status-im/status-mobile/issues/16535
-            container-style style ;; TODO Update external api to container-style and remove prop width
-            icon-left before ;; TODO Update external api to icon-left
-            icon-right after ;; TODO Update external api to icon-right
-            icon-above above ;; TODO Update external api to icon-above
-            {:keys [icon-color icon-secondary-color background-color label-color border-color blur-type
-                    blur-overlay-color icon-background-color border-radius]}
+      (let [{:keys [icon-color background-color label-color border-color blur-type
+                    blur-overlay-color border-radius]}
             (button-properties/get-values {:customization-color customization-color
                                            :background          background
                                            :type                type
                                            :theme               theme
                                            :pressed?            @pressed?
                                            :icon-only?          icon-only?})
-            icon-size (when (= 24 size) 12)
-            icon-secondary-color (or icon-secondary-color icon-color)]
+            icon-size (when (= 24 size) 12)]
         [rn/touchable-without-feedback
-         {:disabled            disabled
+         {:disabled            disabled?
           :accessibility-label accessibility-label
           :on-press-in         #(reset! pressed? true)
           :on-press-out        #(reset! pressed? nil)
@@ -67,18 +59,16 @@
          [rn/view
           {:style (merge
                    (style/shape-style-container size border-radius)
-                   {:width width}
                    container-style)}
           [rn/view
            {:style (merge
                     (style/style-container {:size             size
-                                            :disabled         disabled
+                                            :disabled?        disabled?
                                             :border-radius    border-radius
                                             :background-color background-color
                                             :border-color     border-color
                                             :icon-only?       icon-only?
-                                            :icon-above       icon-above
-                                            :width            width
+                                            :icon-top         icon-top
                                             :icon-left        icon-left
                                             :icon-right       icon-right})
                     inner-style)}
@@ -93,26 +83,25 @@
                :blur-type     blur-type
                :overlay-color blur-overlay-color
                :style         style/blur-view}])
-           (when icon-above
+           (when icon-top
              [rn/view
-              [quo2.icons/icon icon-above
+              [quo2.icons/icon icon-top
                {:container-style {:margin-bottom 2}
-                :color           icon-secondary-color
+                :color           icon-color
                 :size            icon-size}]])
            (when icon-left
              [rn/view
               {:style (style/icon-left-icon-style
-                       {:size                  size
-                        :icon-background-color icon-background-color
-                        :icon-size             icon-size})}
+                       {:size      size
+                        :icon-size icon-size})}
               [quo2.icons/icon icon-left
-               {:color icon-secondary-color
+               {:color icon-color
                 :size  icon-size}]])
            [rn/view
             (cond
               icon-only?
               [quo2.icons/icon children
-               {:color icon-color
+               {:color label-color
                 :size  icon-size}]
 
               (string? children)
@@ -128,11 +117,10 @@
            (when icon-right
              [rn/view
               {:style (style/icon-right-icon-style
-                       {:size                  size
-                        :icon-background-color icon-background-color
-                        :icon-size             icon-size})}
+                       {:size      size
+                        :icon-size icon-size})}
               [quo2.icons/icon icon-right
-               {:color icon-secondary-color
+               {:color icon-color
                 :size  icon-size}]])]]]))))
 
 (def button (theme/with-theme button-internal))
diff --git a/src/quo2/components/buttons/predictive_keyboard/view.cljs b/src/quo2/components/buttons/predictive_keyboard/view.cljs
index 270abeba128..16a5ef66daa 100644
--- a/src/quo2/components/buttons/predictive_keyboard/view.cljs
+++ b/src/quo2/components/buttons/predictive_keyboard/view.cljs
@@ -15,10 +15,10 @@
 (defn- word-component
   [word _ _ {:keys [on-press]}]
   [button/button
-   {:type     :blur-bg
-    :size     32
-    :on-press #(on-press word)}
-
+   {:type       :grey
+    :background :blur
+    :size       32
+    :on-press   #(on-press word)}
    word])
 
 (defn- separator
diff --git a/src/quo2/components/code/snippet.cljs b/src/quo2/components/code/snippet.cljs
index 733a1ad5c74..4ebdbbf9e0e 100644
--- a/src/quo2/components/code/snippet.cljs
+++ b/src/quo2/components/code/snippet.cljs
@@ -87,7 +87,7 @@
         :line-number-width line-number-width}]]
      [rn/view {:style style/copy-button}
       [button/button
-       {:icon       true
+       {:icon-only? true
         :type       :grey
         :background :blur
         :size       24
diff --git a/src/quo2/components/drawers/documentation_drawers/view.cljs b/src/quo2/components/drawers/documentation_drawers/view.cljs
index 04bad06da80..4d34fdbf8a1 100644
--- a/src/quo2/components/drawers/documentation_drawers/view.cljs
+++ b/src/quo2/components/drawers/documentation_drawers/view.cljs
@@ -33,10 +33,11 @@
     (when show-button?
       [button/button
        {:size                24
-        :type                (if shell? :blur-bg-outline :outline)
+        :type                :outline
+        :background (when shell? :blur)
         :on-press            on-press-button
         :accessibility-label :documentation-drawer-button
-        :after               button-icon}
+        :icon-right               button-icon}
        button-label])]])
 
 (def view (quo.theme/with-theme view-internal))
diff --git a/src/quo2/components/empty_state/empty_state/view.cljs b/src/quo2/components/empty_state/empty_state/view.cljs
index 4955b243bce..5e32b1d6e73 100644
--- a/src/quo2/components/empty_state/empty_state/view.cljs
+++ b/src/quo2/components/empty_state/empty_state/view.cljs
@@ -41,10 +41,11 @@
       (when-let [{lower-button-text     :text
                   lower-button-on-press :on-press} lower-button]
         [button/button
-         {:style    {:margin-top 12}
-          :size     32
-          :type     :blur-bg
-          :on-press lower-button-on-press}
+         {:container-style {:margin-top 12}
+          :size            32
+          :type            :grey
+          :background      :blur
+          :on-press        lower-button-on-press}
          lower-button-text])])])
 
 (def empty-state (theme/with-theme empty-state-internal))
diff --git a/src/quo2/components/header.cljs b/src/quo2/components/header.cljs
index f0276c660d3..795704eb097 100644
--- a/src/quo2/components/header.cljs
+++ b/src/quo2/components/header.cljs
@@ -83,14 +83,10 @@
 (defn header-action
   [{:keys [icon label on-press disabled accessibility-label]}]
   [button/button
-   (merge {:on-press on-press
-           :disabled disabled}
-          (cond
-            icon  {:type  :icon
-                   :theme :icon}
-            label {:type :secondary})
-          (when accessibility-label
-            {:accessibility-label accessibility-label}))
+   {:on-press            on-press
+    :disabled?           disabled
+    :icon-only?          (boolean icon)
+    :accessibility-label accessibility-label}
    (cond
      icon  icon
      label label)])
diff --git a/src/quo2/components/info/information_box/view.cljs b/src/quo2/components/info/information_box/view.cljs
index b7272a0ee37..a355d94f1ef 100644
--- a/src/quo2/components/info/information_box/view.cljs
+++ b/src/quo2/components/info/information_box/view.cljs
@@ -37,7 +37,7 @@
        :accessibility-label :information-box-action-button
        :size                24
        :on-press            on-button-press
-       :style               style/content-button}
+       :container-style     style/content-button}
       button-label])])
 
 (defn view
diff --git a/src/quo2/components/inputs/profile_input/view.cljs b/src/quo2/components/inputs/profile_input/view.cljs
index c8bbfdbca36..3afe5390beb 100644
--- a/src/quo2/components/inputs/profile_input/view.cljs
+++ b/src/quo2/components/inputs/profile_input/view.cljs
@@ -38,11 +38,9 @@
       :type                :grey
       :background          :blur
       :on-press            on-press
-      :icon-size           20
-      :width               24
       :size                24
-      :icon                :i/camera
-      :style               style/button
+      :icon-only?          true
+      :container-style     style/button
       :inner-style         style/button-inner} :i/camera]]
    [rn/view {:style style/input-container}
     [title-input/title-input
diff --git a/src/quo2/components/links/link_preview/view.cljs b/src/quo2/components/links/link_preview/view.cljs
index e99528ce2b1..d100bab36a7 100644
--- a/src/quo2/components/links/link_preview/view.cljs
+++ b/src/quo2/components/links/link_preview/view.cljs
@@ -7,7 +7,7 @@
 (defn- button-disabled
   [disabled-text on-enable]
   [button/button
-   {:before              :i/reveal
+   {:icon-left           :i/reveal
     :size                32
     :type                :grey
     :on-press            on-enable
diff --git a/src/quo2/components/navigation/page_nav.cljs b/src/quo2/components/navigation/page_nav.cljs
index 91fcc227cb9..9a144fc62aa 100644
--- a/src/quo2/components/navigation/page_nav.cljs
+++ b/src/quo2/components/navigation/page_nav.cljs
@@ -37,7 +37,7 @@
   [rn/view {:style (when put-middle-section-on-left? {:margin-right 5})}
    [button/button
     {:on-press            on-press
-     :icon                true
+     :icon-only?          true
      :type                type
      :size                32
      :accessibility-label accessibility-label
@@ -164,9 +164,9 @@
                                                   :accessible          true))
                      [button/button
                       {:on-press   on-press
-                       :icon       (not label)
+                       :icon-only? (not label)
                        :type       type
-                       :before     (when label icon)
+                       :icon-left  (when label icon)
                        :size       32
                        :background icon-background}
                       (if label label icon)]])
diff --git a/src/quo2/components/notifications/activity_log/view.cljs b/src/quo2/components/notifications/activity_log/view.cljs
index 158ff6d6a7e..b26f6946677 100644
--- a/src/quo2/components/notifications/activity_log/view.cljs
+++ b/src/quo2/components/notifications/activity_log/view.cljs
@@ -129,8 +129,8 @@
      (-> button
          (assoc :size size)
          (assoc :type subtype)
-         (assoc :disabled (and replying? disable-when (disable-when @reply-input)))
-         (update :style merge common-style {:margin-right 8}))
+         (assoc :disabled? (and replying? disable-when (disable-when @reply-input)))
+         (update :container-style merge common-style {:margin-right 8}))
      label]))
 
 (defmethod footer-item-view :status
diff --git a/src/quo2/components/profile/profile_card/view.cljs b/src/quo2/components/profile/profile_card/view.cljs
index 602eb4117e2..b947cc63bb2 100644
--- a/src/quo2/components/profile/profile_card/view.cljs
+++ b/src/quo2/components/profile/profile_card/view.cljs
@@ -75,8 +75,8 @@
             {:size                32
              :type                :grey
              :background          :blur
-             :icon                true
-             :style               style/option-button
+             :icon-only?          true
+             :container-style     style/option-button
              :on-press            on-options-press
              :accessibility-label :profile-card-options}
             :i/options])]]
diff --git a/src/quo2/components/record_audio/record_audio/buttons/record_button.cljs b/src/quo2/components/record_audio/record_audio/buttons/record_button.cljs
index 18ee78e29eb..382880a73f0 100644
--- a/src/quo2/components/record_audio/record_audio/buttons/record_button.cljs
+++ b/src/quo2/components/record_audio/record_audio/buttons/record_button.cljs
@@ -1,7 +1,5 @@
 (ns quo2.components.record-audio.record-audio.buttons.record-button
-  (:require [quo2.components.icon :as icons]
-            [quo2.components.record-audio.record-audio.style :as style]
-            [quo2.foundations.colors :as colors]
+  (:require [quo2.components.record-audio.record-audio.style :as style]
             [react-native.core :as rn :refer [use-effect]]
             [react-native.reanimated :as reanimated]
             [quo2.components.buttons.button.view :as button]
@@ -21,6 +19,6 @@
      [button/button
       {:type                :outline
        :size                32
-       :width               32
-       :accessibility-label :mic-button}
-      [icons/icon :i/audio {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}]]]))
+       :accessibility-label :mic-button
+       :icon-only?          true}
+      :i/audio]]))
diff --git a/src/quo2/components/settings/accounts/view.cljs b/src/quo2/components/settings/accounts/view.cljs
index 4d24f38b808..8d505083f59 100644
--- a/src/quo2/components/settings/accounts/view.cljs
+++ b/src/quo2/components/settings/accounts/view.cljs
@@ -20,11 +20,11 @@
   [{:keys [on-press]}]
   [rn/view {:style style/menu-button-container}
    [button/button
-    {:style    (style/menu-button-color)
-     :type     :gray
-     :icon     true
-     :size     24
-     :on-press on-press}
+    {:container-style (style/menu-button-color)
+     :type            :grey
+     :icon-only?      true
+     :size            24
+     :on-press        on-press}
     :i/more]])
 
 (defn account
diff --git a/src/quo2/components/settings/settings_list/view.cljs b/src/quo2/components/settings/settings_list/view.cljs
index e01ea461608..a60fbda5ac5 100644
--- a/src/quo2/components/settings/settings_list/view.cljs
+++ b/src/quo2/components/settings/settings_list/view.cljs
@@ -58,13 +58,11 @@
 
 (defn right-button
   [{:keys [title
-           on-press]}
-   override-theme]
+           on-press]}]
   [button/button
-   {:type           :outline
-    :override-theme override-theme
-    :on-press       on-press
-    :size           24}
+   {:type     :outline
+    :on-press on-press
+    :size     24}
    title])
 
 (defn communities-icons
@@ -132,6 +130,6 @@
        [toggle-button toggle-props])
      (when badge? [badge-icon override-theme])
      (when button-props
-       [right-button button-props override-theme])
+       [right-button button-props])
      (when communities-props (communities-icons communities-props override-theme))
      (when chevron? chevron-icon)]]])
diff --git a/src/quo2/components/share/share_qr_code/view.cljs b/src/quo2/components/share/share_qr_code/view.cljs
index d4afeaafbc4..73b9ca1df6f 100644
--- a/src/quo2/components/share/share_qr_code/view.cljs
+++ b/src/quo2/components/share/share_qr_code/view.cljs
@@ -40,10 +40,10 @@
        qr-url]]]
     [rn/view {:style style/share-button-container}
      [button/button
-      {:icon                true
-       :type                :blur-bg
+      {:icon-only?          true
+       :type                :grey
+       :background          :blur
        :size                32
        :accessibility-label :share-profile
-       :override-theme      :dark
        :on-press            share-on-press}
       :i/share]]]])
diff --git a/src/status_im2/common/confirmation_drawer/view.cljs b/src/status_im2/common/confirmation_drawer/view.cljs
index 203c80330e9..b6a01db9c30 100644
--- a/src/status_im2/common/confirmation_drawer/view.cljs
+++ b/src/status_im2/common/confirmation_drawer/view.cljs
@@ -63,14 +63,14 @@
          [extra-action-view extra-action extra-text extra-action-selected?]
          [rn/view {:style style/buttons-container}
           [quo/button
-           {:type     :grey
-            :style    {:flex 0.48} ;;WUT? 0.48 , whats that ?
-            :on-press #(rf/dispatch [:hide-bottom-sheet])}
+           {:type            :grey
+            :container-style {:flex 0.48} ;;WUT? 0.48 , whats that ?
+            :on-press        #(rf/dispatch [:hide-bottom-sheet])}
            (or close-button-text (i18n/label :t/close))]
           [quo/button
-           {:type     :danger
-            :style    {:flex 0.48}
-            :on-press #(do
-                         (when @extra-action-selected? (extra-action))
-                         (on-press))}
+           {:type            :danger
+            :container-style {:flex 0.48}
+            :on-press        #(do
+                                (when @extra-action-selected? (extra-action))
+                                (on-press))}
            button-text]]]))))
diff --git a/src/status_im2/common/home/view.cljs b/src/status_im2/common/home/view.cljs
index 17b71e3586a..a88667a2f12 100644
--- a/src/status_im2/common/home/view.cljs
+++ b/src/status_im2/common/home/view.cljs
@@ -22,16 +22,16 @@
      :customization-color customization-color}]])
 
 (defn- get-button-common-props
-  [type]
+  [type background]
   (let [default? (= type :default)
         dark?    (colors/dark?)]
-    {:icon  true
-     :size  32
-     :style {:margin-left 12}
-     :type  (if default?
-              (if dark? :grey :dark-grey)
-              type)
-    }))
+    {:icon-only?      true
+     :size            32
+     :container-style {:margin-left 12}
+     :type            (if default?
+                        (if dark? :grey :dark-grey)
+                        type)
+     :background      background}))
 
 (defn- unread-indicator
   []
@@ -45,7 +45,7 @@
       [quo/counter
        {:accessibility-label :activity-center-unread-count
         :type                unread-type
-        :style               (style/unread-indicator unread-count
+        :container-style     (style/unread-indicator unread-count
                                                      constants/activity-center-max-unread-count)}
        unread-count])))
 
@@ -72,23 +72,21 @@
      [quo/text {:accessibility-label :peers-count-text} (str "PEERS COUNT: " peers-count)]]))
 
 (defn- right-section
-  [{:keys [button-type search?]}]
-  (let [button-common-props (get-button-common-props button-type)
+  [{:keys [button-type search? button-background]}]
+  (let [button-common-props (get-button-common-props button-type button-background)
         network-type        (rf/sub [:network/type])]
     [rn/view {:style style/right-section}
      (when (= network-type "cellular")
        [quo/button
         (merge button-common-props
-               {:icon                false
-                :accessibility-label :on-cellular-network
+               {:accessibility-label :on-cellular-network
                 :on-press            #(rf/dispatch [:show-bottom-sheet
                                                     {:content connectivity-sheet}])})
         "🦄"])
      (when (= network-type "none")
        [quo/button
         (merge button-common-props
-               {:icon                false
-                :accessibility-label :no-network-connection
+               {:accessibility-label :no-network-connection
                 :on-press            #(rf/dispatch [:show-bottom-sheet
                                                     {:content connectivity-sheet}])})
         "💀"])
@@ -116,10 +114,11 @@
   "[top-nav props]
   props
   {:type    quo/button types
+   :background quo/button background
    :style   override-style
    :search? When non-nil, show search button}
   "
-  [{:keys [type style search?]
+  [{:keys [type style search? background]
     :or   {type :default}}]
   (let [account             (rf/sub [:profile/multiaccount])
         customization-color (rf/sub [:profile/customization-color])
@@ -128,4 +127,4 @@
                              :profile-picture     (multiaccounts/displayed-photo account)}]
     [rn/view {:style (merge style/top-nav-container style)}
      [left-section {:avatar avatar}]
-     [right-section {:button-type type :search? search?}]]))
+     [right-section {:button-type type :button-background background :search? search?}]]))
diff --git a/src/status_im2/common/password_authentication/view.cljs b/src/status_im2/common/password_authentication/view.cljs
index a9922ac962b..36735cb9927 100644
--- a/src/status_im2/common/password_authentication/view.cljs
+++ b/src/status_im2/common/password_authentication/view.cljs
@@ -36,6 +36,6 @@
              :style {:margin-top 8}}
             (i18n/label :t/oops-wrong-password)])
          [quo/button
-          {:style    {:margin-bottom 12 :margin-top 40}
-           :on-press #((:on-press button) (ethereum/sha3 @entered-password))}
+          {:container-style {:margin-bottom 12 :margin-top 40}
+           :on-press        #((:on-press button) (ethereum/sha3 @entered-password))}
           (:label button)]]))))
diff --git a/src/status_im2/common/plus_button/view.cljs b/src/status_im2/common/plus_button/view.cljs
index 8702f5b5e31..8c44a6496c8 100644
--- a/src/status_im2/common/plus_button/view.cljs
+++ b/src/status_im2/common/plus_button/view.cljs
@@ -6,7 +6,7 @@
   [quo/button
    {:type                :primary
     :size                32
-    :icon                true
+    :icon-only?          true
     :accessibility-label (or accessibility-label :plus-button)
     :on-press            on-press
     :customization-color customization-color}
diff --git a/src/status_im2/contexts/add_new_contact/style.cljs b/src/status_im2/contexts/add_new_contact/style.cljs
index f2d021c8179..cff99517054 100644
--- a/src/status_im2/contexts/add_new_contact/style.cljs
+++ b/src/status_im2/contexts/add_new_contact/style.cljs
@@ -6,12 +6,14 @@
 
 (defn container-outer
   []
-  {:style {:flex             1
-           :background-color (colors/theme-colors colors/white colors/neutral-95)
-           :justify-content  :space-between
-           :align-items      :center
-           :padding          16
-           :border-radius    20}})
+  {:style {:flex               1
+           :background-color   (colors/theme-colors colors/white colors/neutral-95)
+           :justify-content    :space-between
+           :align-items        :center
+           :padding-vertical   16
+           :padding-horizontal 20
+
+           :border-radius      20}})
 
 (def container-inner
   {:style {:flex-direction :column
@@ -105,16 +107,6 @@
                           colors/black
                           colors/white)})})
 
-(def button-paste
-  {:type  :outline
-   :size  24
-   :style {:margin-top 6}})
-
-(def button-qr
-  {:type :outline
-   :icon true
-   :size 40})
-
 (def found-user
   {:padding-top    16
    :flex-direction :column
@@ -156,14 +148,7 @@
            colors/neutral-50
            colors/neutral-40)})
 
-(defn button-view-profile
-  [state customization-color]
-  {:type                :primary
-   :customization-color customization-color
-   :size                40
-   :width               335
-   :style               {:margin-top    24
-                         :margin-bottom (+ (safe-area/get-bottom) 12)}
-   :accessibility-label :new-contact-button
-   :before              :i/profile
-   :disabled            (not= state :valid)})
+(def button-view-profile
+  {:margin-top    24
+   :width         "100%"
+   :margin-bottom (+ (safe-area/get-bottom) 12)})
diff --git a/src/status_im2/contexts/add_new_contact/views.cljs b/src/status_im2/contexts/add_new_contact/views.cljs
index e6cf48e3d7d..a0d84d54e11 100644
--- a/src/status_im2/contexts/add_new_contact/views.cljs
+++ b/src/status_im2/contexts/add_new_contact/views.cljs
@@ -60,7 +60,7 @@
            [rn/view style/container-inner
             [quo/button
              {:type :grey
-              :icon true
+              :icon-only? true
               :accessibility-label :new-contact-close-button
               :size 32
               :on-press
@@ -92,7 +92,7 @@
                 [quo/button
                  {:type :outline
                   :size 24
-                  :style {:margin-top 6}
+                  :container-style {:margin-top 6}
                   :on-press
                   (fn []
                     (reset! default-value @clipboard)
@@ -100,10 +100,12 @@
                      [:contacts/set-new-identity @clipboard nil]))}
                  (i18n/label :t/paste)])]
              [quo/button
-              (merge style/button-qr
-                     {:on-press #(rf/dispatch
-                                  [::qr-scanner/scan-code
-                                   {:handler :contacts/qr-code-scanned}])})
+              {:type       :outline
+               :icon-only? true
+               :size       40
+               :on-press   #(rf/dispatch
+                             [::qr-scanner/scan-code
+                              {:handler :contacts/qr-code-scanned}])}
               :i/scan]]
             (when invalid?
               [rn/view style/container-invalid
@@ -113,12 +115,18 @@
             (when (= state :valid)
               [found-contact public-key])]
            [quo/button
-            (merge (style/button-view-profile state customization-color)
-                   {:on-press
-                    (fn []
-                      (reset! clipboard nil)
-                      (reset! default-value nil)
-                      (rf/dispatch [:contacts/clear-new-identity])
-                      (rf/dispatch [:navigate-back])
-                      (rf/dispatch [:chat.ui/show-profile public-key ens]))})
+            {:type :primary
+             :customization-color customization-color
+             :size 40
+             :container-style style/button-view-profile
+             :accessibility-label :new-contact-button
+             :icon-left :i/profile
+             :disabled? (not= state :valid)
+             :on-press
+             (fn []
+               (reset! clipboard nil)
+               (reset! default-value nil)
+               (rf/dispatch [:contacts/clear-new-identity])
+               (rf/dispatch [:navigate-back])
+               (rf/dispatch [:chat.ui/show-profile public-key ens]))}
             (i18n/label :t/view-profile)]]]]))))
diff --git a/src/status_im2/contexts/chat/composer/actions/style.cljs b/src/status_im2/contexts/chat/composer/actions/style.cljs
index 41f32efed1f..f3a1e25d74e 100644
--- a/src/status_im2/contexts/chat/composer/actions/style.cljs
+++ b/src/status_im2/contexts/chat/composer/actions/style.cljs
@@ -1,6 +1,5 @@
 (ns status-im2.contexts.chat.composer.actions.style
   (:require
-    [quo2.foundations.colors :as colors]
     [react-native.reanimated :as reanimated]
     [status-im2.contexts.chat.composer.constants :as constants]))
 
@@ -18,7 +17,6 @@
    {:position         :absolute
     :right            0
     :z-index          z-index
-    :background-color (colors/theme-colors colors/white colors/neutral-95)
     :padding-vertical 3
     :padding-left     2}))
 
diff --git a/src/status_im2/contexts/chat/composer/actions/view.cljs b/src/status_im2/contexts/chat/composer/actions/view.cljs
index c1062437d2e..911174affb3 100644
--- a/src/status_im2/contexts/chat/composer/actions/view.cljs
+++ b/src/status_im2/contexts/chat/composer/actions/view.cljs
@@ -58,7 +58,7 @@
   [reanimated/view
    {:style (style/send-button btn-opacity @z-index)}
    [quo/button
-    {:icon                true
+    {:icon-only?          true
      :size                32
      :accessibility-label :send-message-button
      :on-press            #(send-message props state animations window-height edit)}
@@ -73,10 +73,10 @@
 (defn disabled-audio-button
   []
   [quo/button
-   {:on-press #(js/alert "to be implemented")
-    :icon     true
-    :type     :outline
-    :size     32}
+   {:on-press   #(js/alert "to be implemented")
+    :icon-only? true
+    :type       :outline
+    :size       32}
    :i/audio])
 
 (defn audio-button
@@ -170,11 +170,11 @@
   []
   (let [images-count (count (vals (rf/sub [:chats/sending-image])))]
     [quo/button
-     {:on-press #(go-to-camera images-count)
-      :icon     true
-      :type     :outline
-      :size     32
-      :style    {:margin-right 12}}
+     {:on-press        #(go-to-camera images-count)
+      :icon-only?      true
+      :type            :outline
+      :size            32
+      :container-style {:margin-right 12}}
      :i/camera]))
 
 (defn open-photo-selector
@@ -199,29 +199,29 @@
   [quo/button
    {:on-press            #(open-photo-selector props animations insets)
     :accessibility-label :open-images-button
-    :icon                true
+    :icon-only?          true
     :type                :outline
     :size                32
-    :style               {:margin-right 12}}
+    :container-style     {:margin-right 12}}
    :i/image])
 
 (defn reaction-button
   []
   [quo/button
-   {:on-press #(js/alert "to be implemented")
-    :icon     true
-    :type     :outline
-    :size     32
-    :style    {:margin-right 12}}
+   {:on-press        #(js/alert "to be implemented")
+    :icon-only?      true
+    :type            :outline
+    :size            32
+    :container-style {:margin-right 12}}
    :i/reaction])
 
 (defn format-button
   []
   [quo/button
-   {:on-press #(js/alert "to be implemented")
-    :icon     true
-    :type     :outline
-    :size     32}
+   {:on-press   #(js/alert "to be implemented")
+    :icon-only? true
+    :type       :outline
+    :size       32}
    :i/format])
 
 (defn view
diff --git a/src/status_im2/contexts/chat/composer/edit/view.cljs b/src/status_im2/contexts/chat/composer/edit/view.cljs
index 86b34048e4b..765eeeb7ca8 100644
--- a/src/status_im2/contexts/chat/composer/edit/view.cljs
+++ b/src/status_im2/contexts/chat/composer/edit/view.cljs
@@ -27,16 +27,14 @@
        :size   :paragraph-2}
       (i18n/label :t/editing-message)]]]
    [quo/button
-    {:width               24
-     :size                24
+    {:size                24
+     :icon-only?          true
      :accessibility-label :edit-cancel-button
      :on-press            (fn []
                             (utils/cancel-edit-message state)
                             (rf/dispatch [:chat.ui/cancel-message-edit]))
      :type                :outline}
-    [quo/icon :i/close
-     {:size  16
-      :color (colors/theme-colors colors/neutral-100 colors/neutral-40)}]]])
+    :i/close]])
 
 (defn- f-view
   [state]
diff --git a/src/status_im2/contexts/chat/composer/reply/view.cljs b/src/status_im2/contexts/chat/composer/reply/view.cljs
index ed7de59e90a..a84cf2de08c 100644
--- a/src/status_im2/contexts/chat/composer/reply/view.cljs
+++ b/src/status_im2/contexts/chat/composer/reply/view.cljs
@@ -129,8 +129,7 @@
         ])]
      (when (and in-chat-input? (not recording-audio?))
        [quo/button
-        {:width               24
-         :size                24
+        {:size                24
          :accessibility-label :reply-cancel-button
          :on-press            #(rf/dispatch [:chat.ui/cancel-message-reply])
          :type                :outline}
diff --git a/src/status_im2/contexts/chat/group_details/view.cljs b/src/status_im2/contexts/chat/group_details/view.cljs
index 6f3294cc37e..762634558b8 100644
--- a/src/status_im2/contexts/chat/group_details/view.cljs
+++ b/src/status_im2/contexts/chat/group_details/view.cljs
@@ -16,11 +16,11 @@
   [quo/button
    {:type                :grey
     :size                32
-    :width               32
-    :style               {:margin-left 20}
+    :icon-only?          true
+    :container-style     {:margin-left 20}
     :accessibility-label :back-button
     :on-press            #(rf/dispatch [:navigate-back])}
-   [quo/icon :i/arrow-left {:color (colors/theme-colors colors/neutral-100 colors/white)}]])
+   :i/arrow-left])
 
 (defn options-button
   []
@@ -28,12 +28,12 @@
     [quo/button
      {:type                :grey
       :size                32
-      :width               32
-      :style               {:margin-right 20}
+      :icon-only?          true
+      :container-style     {:margin-right 20}
       :accessibility-label :options-button
       :on-press            #(rf/dispatch [:show-bottom-sheet
                                           {:content (fn [] [actions/group-details-actions group])}])}
-     [quo/icon :i/options {:color (colors/theme-colors colors/neutral-100 colors/white)}]]))
+     :i/options]))
 
 (defn top-buttons
   []
@@ -120,7 +120,8 @@
        :render-fn                      add-member-contact-item-render}]
      [rn/view {:style (style/bottom-container 30)}
       [quo/button
-       {:style               {:flex 1}
+       {:container-style     {:flex 1}
+        :type                :primary
         :accessibility-label :save
         :on-press            (fn []
                                (rf/dispatch [:navigate-back])
@@ -129,7 +130,7 @@
                                                  [:group-chats.ui/remove-members-pressed]))
                                               500)
                                (rf/dispatch [:group-chats.ui/add-members-pressed]))
-        :disabled            (and (zero? (count selected-participants))
+        :disabled?           (and (zero? (count selected-participants))
                                   (zero? (count deselected-members)))}
        (i18n/label :t/save)]]]))
 
diff --git a/src/status_im2/contexts/chat/messages/contact_requests/bottom_drawer.cljs b/src/status_im2/contexts/chat/messages/contact_requests/bottom_drawer.cljs
index 155eba45c94..607f1dfce2f 100644
--- a/src/status_im2/contexts/chat/messages/contact_requests/bottom_drawer.cljs
+++ b/src/status_im2/contexts/chat/messages/contact_requests/bottom_drawer.cljs
@@ -11,9 +11,9 @@
   (let [names (rf/sub [:contacts/contact-two-names-by-identity contact-id])]
     [permission-context/view
      [quo/button
-      {:type     :ghost
-       :on-press #(rf/dispatch [:chat.ui/show-profile contact-id])
-       :before   :i/communities}
+      {:type      :ghost
+       :on-press  #(rf/dispatch [:chat.ui/show-profile contact-id])
+       :icon-left :i/communities}
       (cond
         group-chat
         (i18n/label :t/group-chat-not-member)
diff --git a/src/status_im2/contexts/chat/new_chat/view.cljs b/src/status_im2/contexts/chat/new_chat/view.cljs
index db356f62dfe..76d727ea477 100644
--- a/src/status_im2/contexts/chat/new_chat/view.cljs
+++ b/src/status_im2/contexts/chat/new_chat/view.cljs
@@ -28,11 +28,11 @@
      :size   :label}
     (i18n/label :t/dont-yell-at-me)]
    [quo/button
-    {:type     :primary
-     :size     32
-     :style    {:margin-top    20
-                :margin-bottom 12}
-     :on-press #(rf/dispatch [:invite.events/share-link])}
+    {:type            :primary
+     :size            32
+     :container-style {:margin-top    20
+                       :margin-bottom 12}
+     :on-press        #(rf/dispatch [:invite.events/share-link])}
     (i18n/label :t/invite-friends)]
    [quo/button
     {:type     :grey
@@ -68,7 +68,11 @@
                                                      (first selected-contacts)]))]
     [rn/view {:flex 1}
      [rn/view {:padding-horizontal 20}
-      [quo/button {:type :grey :size 32 :icon true :on-press close} :i/close]
+      [quo/button
+       {:type       :grey
+        :size       32
+        :icon-only? true
+        :on-press   close} :i/close]
       [rn/view {:style style/contact-selection-heading}
        [quo/text
         {:weight :semi-bold
@@ -99,7 +103,7 @@
        [quo/button
         {:type                :primary
          :accessibility-label :next-button
-         :style               style/chat-button
+         :container-style     style/chat-button
          :on-press            (fn []
                                 (if one-contact-selected?
                                   (rf/dispatch [:chat.ui/start-chat public-key])
diff --git a/src/status_im2/contexts/chat/photo_selector/view.cljs b/src/status_im2/contexts/chat/photo_selector/view.cljs
index 990219659c9..2bc8e3ffbc5 100644
--- a/src/status_im2/contexts/chat/photo_selector/view.cljs
+++ b/src/status_im2/contexts/chat/photo_selector/view.cljs
@@ -44,7 +44,7 @@
       :end    {:x 0 :y 0}
       :style  (style/gradient-container (safe-area/get-bottom))}
      [quo/button
-      {:style               {:align-self        :stretch
+      {:container-style     {:align-self        :stretch
                              :margin-horizontal 20
                              :margin-top        12}
        :on-press            #(on-press-confirm-selection selected-images close)
diff --git a/src/status_im2/contexts/communities/actions/leave/view.cljs b/src/status_im2/contexts/communities/actions/leave/view.cljs
index bb79abc160d..928fbb35b1d 100644
--- a/src/status_im2/contexts/communities/actions/leave/view.cljs
+++ b/src/status_im2/contexts/communities/actions/leave/view.cljs
@@ -25,13 +25,13 @@
     [rn/view
      {:style style/button-container}
      [quo/button
-      {:on-press #(rf/dispatch [:hide-bottom-sheet])
-       :type     :grey
-       :style    style/cancel-button}
+      {:on-press        #(rf/dispatch [:hide-bottom-sheet])
+       :type            :grey
+       :container-style style/cancel-button}
       (i18n/label :t/cancel)]
      [quo/button
-      {:on-press #(hide-sheet-and-dispatch [:communities/leave id])
-       :style    style/action-button}
+      {:on-press        #(hide-sheet-and-dispatch [:communities/leave id])
+       :container-style style/action-button}
       (i18n/label :t/leave-community)]]]])
 
 (defn cancel-request-sheet
@@ -51,10 +51,10 @@
       {:accessibility-label :cancel-button
        :on-press            #(rf/dispatch [:hide-bottom-sheet])
        :type                :grey
-       :style               style/cancel-button}
+       :container-style     style/cancel-button}
       (i18n/label :t/close)]
      [quo/button
       {:accessibility-label :confirm-button
        :on-press            #(hide-sheet-and-dispatch [:communities/cancel-request-to-join request-id])
-       :style               style/action-button}
+       :container-style     style/action-button}
       (i18n/label :t/confirm)]]]])
diff --git a/src/status_im2/contexts/communities/actions/request_to_join/view.cljs b/src/status_im2/contexts/communities/actions/request_to_join/view.cljs
index 08219c96729..5adcd06b129 100644
--- a/src/status_im2/contexts/communities/actions/request_to_join/view.cljs
+++ b/src/status_im2/contexts/communities/actions/request_to_join/view.cljs
@@ -60,7 +60,7 @@
              {:accessibility-label :cancel
               :on-press            #(rf/dispatch [:navigate-back])
               :type                :grey
-              :style               style/cancel-button}
+              :container-style     style/cancel-button}
              (i18n/label :t/cancel)]
             [quo/button
              {:accessibility-label :join-community-button
@@ -75,8 +75,8 @@
                                                  requested-to-join-at))
                                            (rf/dispatch [:communities/request-to-join id])
                                            (rf/dispatch [:navigate-back]))))
-              :disabled            (not @agreed-to-rules?)
-              :style               {:flex 1}}
+              :disabled?           (not @agreed-to-rules?)
+              :container-style     {:flex 1}}
              (request-to-join-text open?)]]
            [rn/view {:style style/final-disclaimer-container}
             [quo/text
diff --git a/src/status_im2/contexts/communities/overview/view.cljs b/src/status_im2/contexts/communities/overview/view.cljs
index fa5cf9b2ff0..2f5e5639ab6 100644
--- a/src/status_im2/contexts/communities/overview/view.cljs
+++ b/src/status_im2/contexts/communities/overview/view.cljs
@@ -165,9 +165,9 @@
         {:on-press            #(join-gated-community id)
          :accessibility-label :join-community-button
          :customization-color color
-         :style               {:margin-horizontal 12 :margin-top 12 :margin-bottom 12}
-         :disabled            (not can-request-access?)
-         :before              (if can-request-access? :i/unlocked :i/locked)}
+         :container-style     {:margin-horizontal 12 :margin-top 12 :margin-bottom 12}
+         :disabled?           (not can-request-access?)
+         :icon-left           (if can-request-access? :i/unlocked :i/locked)}
         (i18n/label :t/join-open-community)]])))
 
 (defn join-community
@@ -186,7 +186,7 @@
           {:on-press            #(rf/dispatch [:open-modal :community-requests-to-join community])
            :accessibility-label :show-request-to-join-screen-button
            :customization-color color
-           :before              :i/communities}
+           :icon-left           :i/communities}
           (request-to-join-text is-open?)]))
 
      (when (and (not (or joined pending? token-permissions)) (not (or is-open? node-offline?)))
diff --git a/src/status_im2/contexts/contacts/drawers/nickname_drawer/view.cljs b/src/status_im2/contexts/contacts/drawers/nickname_drawer/view.cljs
index 7356b3e0f7b..74f2cb7ca84 100644
--- a/src/status_im2/contexts/contacts/drawers/nickname_drawer/view.cljs
+++ b/src/status_im2/contexts/contacts/drawers/nickname_drawer/view.cljs
@@ -70,14 +70,14 @@
          description]]
        [rn/view {:style style/buttons-container}
         [quo/button
-         {:type     :grey
-          :style    {:flex 0.48}
-          :on-press #(rf/dispatch [:hide-bottom-sheet])}
+         {:type            :grey
+          :container-style {:flex 0.48}
+          :on-press        #(rf/dispatch [:hide-bottom-sheet])}
          (or close-button-text (i18n/label :t/cancel))]
 
         [quo/button
-         {:type     :primary
-          :disabled (string/blank? @entered-nickname)
-          :style    {:flex 0.48}
-          :on-press #(add-nickname-and-show-toast primary-name @entered-nickname public-key)}
+         {:type            :primary
+          :disabled?       (string/blank? @entered-nickname)
+          :container-style {:flex 0.48}
+          :on-press        #(add-nickname-and-show-toast primary-name @entered-nickname public-key)}
          title]]])))
diff --git a/src/status_im2/contexts/onboarding/create_password/view.cljs b/src/status_im2/contexts/onboarding/create_password/view.cljs
index 29f010d1fab..8e75a23ccf5 100644
--- a/src/status_im2/contexts/onboarding/create_password/view.cljs
+++ b/src/status_im2/contexts/onboarding/create_password/view.cljs
@@ -175,7 +175,7 @@
 
           [rn/view {:style style/button-container}
            [quo/button
-            {:disabled            (not meet-requirements?)
+            {:disabled?           (not meet-requirements?)
              :customization-color user-color
              :on-press            #(rf/dispatch
                                     [:onboarding-2/password-set
diff --git a/src/status_im2/contexts/onboarding/create_profile/view.cljs b/src/status_im2/contexts/onboarding/create_profile/view.cljs
index 4a078812119..efba9e236d0 100644
--- a/src/status_im2/contexts/onboarding/create_profile/view.cljs
+++ b/src/status_im2/contexts/onboarding/create_profile/view.cljs
@@ -170,8 +170,8 @@
                                                 {:image-path   @profile-pic
                                                  :display-name @full-name
                                                  :color        @custom-color}]))
-           :style               style/continue-button
-           :disabled            (or (not valid-name?) (not (seq @full-name)))}
+           :container-style     style/continue-button
+           :disabled?           (or (not valid-name?) (not (seq @full-name)))}
           (i18n/label :t/continue)]]]])
     (finally
      (oops/ocall show-listener "remove")
diff --git a/src/status_im2/contexts/onboarding/enable_biometrics/view.cljs b/src/status_im2/contexts/onboarding/enable_biometrics/view.cljs
index 5cbeed11901..a241b721146 100644
--- a/src/status_im2/contexts/onboarding/enable_biometrics/view.cljs
+++ b/src/status_im2/contexts/onboarding/enable_biometrics/view.cljs
@@ -29,7 +29,7 @@
      [quo/button
       {:accessibility-label :enable-biometrics-button
        :on-press            #(rf/dispatch [:onboarding-2/enable-biometrics])
-       :before              :i/face-id
+       :icon-left           :i/face-id
        :customization-color profile-color}
       (i18n/label :t/biometric-enable-button {:bio-type-label bio-type-label})]
      [quo/button
@@ -37,7 +37,7 @@
        :background          :blur
        :type                :grey
        :on-press            #(rf/dispatch [:onboarding-2/create-account-and-login])
-       :style               {:margin-top 12}}
+       :container-style     {:margin-top 12}}
       (i18n/label :t/maybe-later)]]))
 
 (defn enable-biometrics-parallax
diff --git a/src/status_im2/contexts/onboarding/enable_notifications/view.cljs b/src/status_im2/contexts/onboarding/enable_notifications/view.cljs
index 08adff01ad5..4089e368e1e 100644
--- a/src/status_im2/contexts/onboarding/enable_notifications/view.cljs
+++ b/src/status_im2/contexts/onboarding/enable_notifications/view.cljs
@@ -43,7 +43,7 @@
        :accessibility-label :enable-notifications-later-button
        :type                :grey
        :background          :blur
-       :style               {:margin-top 12}}
+       :container-style     {:margin-top 12}}
       (i18n/label :t/maybe-later)]]))
 
 (defn enable-notifications
diff --git a/src/status_im2/contexts/onboarding/enter_seed_phrase/view.cljs b/src/status_im2/contexts/onboarding/enter_seed_phrase/view.cljs
index 850a91c49ea..8df2d1a6cd8 100644
--- a/src/status_im2/contexts/onboarding/enter_seed_phrase/view.cljs
+++ b/src/status_im2/contexts/onboarding/enter_seed_phrase/view.cljs
@@ -73,10 +73,10 @@
         :on-change-text           on-change-seed-phrase}
        seed-phrase]]
      [quo/button
-      {:style    (style/continue-button keyboard-shown?)
-       :type     :primary
-       :disabled button-disabled?
-       :on-press on-submit}
+      {:container-style (style/continue-button keyboard-shown?)
+       :type            :primary
+       :disabled?       button-disabled?
+       :on-press        on-submit}
       (i18n/label :t/continue)]]))
 
 (defn keyboard-suggestions
diff --git a/src/status_im2/contexts/onboarding/identifiers/view.cljs b/src/status_im2/contexts/onboarding/identifiers/view.cljs
index 6f8cdac3fd6..73123aba304 100644
--- a/src/status_im2/contexts/onboarding/identifiers/view.cljs
+++ b/src/status_im2/contexts/onboarding/identifiers/view.cljs
@@ -59,7 +59,7 @@
          :background          :blur
          :on-press            #(rf/dispatch [:navigate-to-within-stack
                                              [:enable-notifications :new-to-status]])
-         :style               style/button}
+         :container-style     style/button}
         (i18n/label :t/skip)]]]]))
 
 (defn view [props] [:f> f-view props])
diff --git a/src/status_im2/contexts/onboarding/syncing/progress/view.cljs b/src/status_im2/contexts/onboarding/syncing/progress/view.cljs
index 66cdf364134..ef04b541522 100644
--- a/src/status_im2/contexts/onboarding/syncing/progress/view.cljs
+++ b/src/status_im2/contexts/onboarding/syncing/progress/view.cljs
@@ -37,7 +37,7 @@
                                          (if in-onboarding? :sign-in-intro :sign-in)]))
     :accessibility-label :try-again-later-button
     :customization-color profile-color
-    :style               style/try-again-button}
+    :container-style     style/try-again-button}
    (i18n/label :t/try-again)])
 
 (defn view
diff --git a/src/status_im2/contexts/onboarding/syncing/results/view.cljs b/src/status_im2/contexts/onboarding/syncing/results/view.cljs
index 1d4c7b215dc..a78b68b6601 100644
--- a/src/status_im2/contexts/onboarding/syncing/results/view.cljs
+++ b/src/status_im2/contexts/onboarding/syncing/results/view.cljs
@@ -54,8 +54,8 @@
                                (on-press))
                              (rf/dispatch [:open-modal :enable-notifications]))
       :accessibility-label :continue-button
-      :customization0color profile-color
-      :style               style/continue-button}
+      :customization-color profile-color
+      :container-style     style/continue-button}
      (i18n/label :t/continue)]))
 
 (defn- f-view
diff --git a/src/status_im2/contexts/profile/profiles/view.cljs b/src/status_im2/contexts/profile/profiles/view.cljs
index 9b9aa56c5f4..e37f6a20f33 100644
--- a/src/status_im2/contexts/profile/profiles/view.cljs
+++ b/src/status_im2/contexts/profile/profiles/view.cljs
@@ -145,7 +145,7 @@
        {:type                :primary
         :customization-color :blue
         :size                32
-        :icon                true
+        :icon-only?          true
         :on-press            show-new-account-options
         :accessibility-label :show-new-account-options}
        :main-icons/add]]
@@ -232,11 +232,11 @@
       {:size                32
        :type                :grey
        :background          :blur
-       :icon                true
+       :icon-only?          true
        :on-press            set-show-profiles
-       :disabled            processing
+       :disabled?           processing
        :accessibility-label :show-profiles
-       :style               style/multi-profile-button}
+       :container-style     style/multi-profile-button}
       :i/multi-profile]
      [rn/scroll-view
       {:keyboard-should-persist-taps :always
@@ -286,10 +286,10 @@
        :type                :primary
        :customization-color (or customization-color :primary)
        :accessibility-label :login-button
-       :before              :i/unlocked
-       :disabled            (or (not sign-in-enabled?) processing)
+       :icon-left           :i/unlocked
+       :disabled?           (or (not sign-in-enabled?) processing)
        :on-press            login-multiaccount
-       :style               {:margin-bottom (+ (safe-area/get-bottom) 12)}}
+       :container-style     {:margin-bottom (+ (safe-area/get-bottom) 12)}}
       (i18n/label :t/log-in)]]))
 
 (defn view
diff --git a/src/status_im2/contexts/quo_preview/buttons/button.cljs b/src/status_im2/contexts/quo_preview/buttons/button.cljs
index ec0661d757b..0ee6b7a15e3 100644
--- a/src/status_im2/contexts/quo_preview/buttons/button.cljs
+++ b/src/status_im2/contexts/quo_preview/buttons/button.cljs
@@ -3,7 +3,8 @@
             [quo2.foundations.colors :as colors]
             [react-native.core :as rn]
             [reagent.core :as reagent]
-            [status-im2.contexts.quo-preview.preview :as preview]))
+            [status-im2.contexts.quo-preview.preview :as preview]
+            [status-im2.common.resources :as resources]))
 
 (def descriptor
   [{:label   "Type:"
@@ -43,20 +44,20 @@
                :value "Blur"}
               {:key   :photo
                :value "Photo"}]}
-   {:label "Icon:"
-    :key   :icon
+   {:label "Icon Only?:"
+    :key   :icon-only?
     :type  :boolean}
-   {:label "Above icon:"
-    :key   :above
+   {:label "show icon-top "
+    :key   :icon-top
     :type  :boolean}
-   {:label "After icon:"
-    :key   :after
+   {:label "show icon-right"
+    :key   :icon-right
     :type  :boolean}
-   {:label "Before icon:"
-    :key   :before
+   {:label "show icon-left"
+    :key   :icon-left
     :type  :boolean}
-   {:label "Disabled:"
-    :key   :disabled
+   {:label "Disabled?:"
+    :key   :disabled?
     :type  :boolean}
    {:label "Label"
     :key   :label
@@ -74,10 +75,10 @@
   (let [state               (reagent/atom {:label "Press Me"
                                            :size  40})
         label               (reagent/cursor state [:label])
-        before              (reagent/cursor state [:before])
-        after               (reagent/cursor state [:after])
-        above               (reagent/cursor state [:above])
-        icon                (reagent/cursor state [:icon])
+        icon-left           (reagent/cursor state [:icon-left])
+        icon-right          (reagent/cursor state [:icon-right])
+        icon-top            (reagent/cursor state [:icon-top])
+        icon-only?          (reagent/cursor state [:icon-only?])
         type                (reagent/cursor state [:type])
         customization-color (reagent/cursor state [:customization-color])]
     (fn []
@@ -89,23 +90,31 @@
          {:padding-vertical 60
           :flex-direction   :row
           :justify-content  :center}
+         (when (= :photo (:background @state))
+           [rn/image
+            {:source (resources/get-mock-image :community-cover)
+             :style  {:position :absolute
+                      :top      0
+                      :left     0
+                      :right    0
+                      :bottom   0}}])
          [quo/button
           (merge (dissoc @state
                   :customization-color
                   :theme
-                  :before
-                  :after)
+                  :icon-left
+                  :icon-right)
                  {:background (:background @state)
                   :on-press   #(println "Hello world!")}
                  (when (and (= type :primary) customization-color)
                    (:customization-color customization-color))
-                 (when @above
-                   {:above :i/placeholder})
-                 (when @before
-                   {:before :i/placeholder})
-                 (when @after
-                   {:after :i/placeholder}))
-          (if @icon :i/placeholder @label)]]]])))
+                 (when @icon-top
+                   {:icon-top :i/placeholder})
+                 (when @icon-left
+                   {:icon-left :i/placeholder})
+                 (when @icon-right
+                   {:icon-right :i/placeholder}))
+          (if @icon-only? :i/placeholder @label)]]]])))
 
 (defn preview-button
   []
diff --git a/src/status_im2/contexts/quo_preview/drawers/action_drawers.cljs b/src/status_im2/contexts/quo_preview/drawers/action_drawers.cljs
index 19767aac6a3..ab3f0bfcb42 100644
--- a/src/status_im2/contexts/quo_preview/drawers/action_drawers.cljs
+++ b/src/status_im2/contexts/quo_preview/drawers/action_drawers.cljs
@@ -67,10 +67,10 @@
        [rn/view {:padding-bottom 400}
         [preview/customizer state descriptor]
         [quo/button
-         {:style    {:margin-horizontal 40}
-          :on-press #(rf/dispatch [:show-bottom-sheet
-                                   {:content (fn [] [render-action-sheet state])
-                                    :theme   (:theme @state)}])}
+         {:container-style {:margin-horizontal 40}
+          :on-press        #(rf/dispatch [:show-bottom-sheet
+                                          {:content (fn [] [render-action-sheet state])
+                                           :theme   (:theme @state)}])}
          "See in bottom sheet"]
         [rn/view {:padding-vertical 60}
          [render-action-sheet state]]]])))
diff --git a/src/status_im2/contexts/quo_preview/drawers/documentation_drawers.cljs b/src/status_im2/contexts/quo_preview/drawers/documentation_drawers.cljs
index b03691f27bf..00a81ae2d14 100644
--- a/src/status_im2/contexts/quo_preview/drawers/documentation_drawers.cljs
+++ b/src/status_im2/contexts/quo_preview/drawers/documentation_drawers.cljs
@@ -106,15 +106,15 @@
         [preview/customizer state descriptor]
         [rn/view {:padding-vertical 60}
          [quo/button
-          {:style    {:margin-horizontal 40
-                      :margin-bottom     20}
-           :on-press #(rf/dispatch [:show-bottom-sheet
-                                    {:content     (constantly [render-documenation-drawer @title
-                                                               @show-button?
-                                                               @button-label expanded? @shell?])
-                                     :expandable? @show-button?
-                                     :shell?      @shell?
-                                     :expanded?   @expanded?}])}
+          {:container-style {:margin-horizontal 40
+                             :margin-bottom     20}
+           :on-press        #(rf/dispatch [:show-bottom-sheet
+                                           {:content     (constantly [render-documenation-drawer @title
+                                                                      @show-button?
+                                                                      @button-label expanded? @shell?])
+                                            :expandable? @show-button?
+                                            :shell?      @shell?
+                                            :expanded?   @expanded?}])}
           "Open drawer"]
          [render-documenation-drawer @title @show-button? @button-label expanded?]]]])))
 
diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs
index 2f72d20b3b2..8c6ce99bab4 100644
--- a/src/status_im2/contexts/quo_preview/main.cljs
+++ b/src/status_im2/contexts/quo_preview/main.cljs
@@ -444,9 +444,8 @@
               (for [{:keys [name]} (val category)]
                 ^{:key name}
                 [quo/button
-                 {:test-ID  (str "quo2-" name)
-                  :style    {:margin-vertical 8}
-                  :on-press #(re-frame/dispatch [:navigate-to name])}
+                 {:container-style {:margin-vertical 8}
+                  :on-press        #(re-frame/dispatch [:navigate-to name])}
                  (clojure.core/name name)])])
            (sort screens-categories))]]))
 
diff --git a/src/status_im2/contexts/quo_preview/selectors/disclaimer.cljs b/src/status_im2/contexts/quo_preview/selectors/disclaimer.cljs
index a380646df69..da28ae6ac2b 100644
--- a/src/status_im2/contexts/quo_preview/selectors/disclaimer.cljs
+++ b/src/status_im2/contexts/quo_preview/selectors/disclaimer.cljs
@@ -48,7 +48,7 @@
              :checked?  checked?
              :on-change #(swap! state update :checked? not)}
             text]]
-          [quo/button {:disabled (not checked?)}
+          [quo/button {:disabled? (not checked?)}
            "submit"]]]))))
 
 (defn preview-disclaimer
diff --git a/src/status_im2/contexts/shell/jump_to/components/jump_to_screen/view.cljs b/src/status_im2/contexts/shell/jump_to/components/jump_to_screen/view.cljs
index 4516b4945f9..93efb13a071 100644
--- a/src/status_im2/contexts/shell/jump_to/components/jump_to_screen/view.cljs
+++ b/src/status_im2/contexts/shell/jump_to/components/jump_to_screen/view.cljs
@@ -110,6 +110,6 @@
       [jump-to-list switcher-cards shell-margin]
       [top-nav-blur-overlay top]
       [common.home/top-nav
-       {:type  :shell
+       {:type  :black
         :style {:margin-top top
                 :z-index    2}}]]]))
diff --git a/src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs b/src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs
index ab9bd69c108..383283fde6e 100644
--- a/src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs
+++ b/src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs
@@ -260,11 +260,11 @@
             [rn/view {:style style/avatar-container}
              [avatar avatar-params type customization-color]])
           [quo/button
-           {:size     24
-            :type     :grey
-            :icon     true
-            :on-press #(rf/dispatch [:shell/close-switcher-card id])
-            :style    style/close-button}
+           {:size            24
+            :type            :grey
+            :icon-only?      true
+            :on-press        #(rf/dispatch [:shell/close-switcher-card id])
+            :container-style style/close-button}
            :i/close]]]))))
 
 ;; browser Card
diff --git a/src/status_im2/contexts/shell/share/view.cljs b/src/status_im2/contexts/shell/share/view.cljs
index 97437aa8e4f..2db53950f27 100644
--- a/src/status_im2/contexts/shell/share/view.cljs
+++ b/src/status_im2/contexts/shell/share/view.cljs
@@ -17,11 +17,11 @@
   []
   [:<>
    [quo/button
-    {:icon                true
+    {:icon-only?          true
      :type                :blur-bg
      :size                32
      :accessibility-label :close-shell-share-tab
-     :style               style/header-button
+     :container-style     style/header-button
      :on-press            #(rf/dispatch [:navigate-back])}
     :i/close]
    [quo/text
@@ -79,8 +79,9 @@
           abbreviated-url]]]
        [rn/view {:style style/share-button-container}
         [quo/button
-         {:icon                true
-          :type                :blur-bg
+         {:icon-only?          true
+          :type                :grey
+          :background          :blur
           :size                32
           :accessibility-label :link-to-profile
           :on-press            #(list-selection/open-share {:message profile-url})}
@@ -107,11 +108,12 @@
          [rn/text {:style style/emoji-hash-content} emoji-hash-string]]]]
       [rn/view {:style style/emoji-share-button-container}
        [quo/button
-        {:icon                true
-         :type                :blur-bg
+        {:icon-only?          true
+         :type                :grey
+         :background          :blur
          :size                32
          :accessibility-label :link-to-profile
-         :style               {:margin-right 12}
+         :container-style     {:margin-right 12}
          :on-press            #(rf/dispatch [:share/copy-text-and-show-toast
                                              {:text-to-copy      emoji-hash-string
                                               :post-copy-message (i18n/label :t/emoji-hash-copied)}])
diff --git a/src/status_im2/contexts/syncing/scan_sync_code/view.cljs b/src/status_im2/contexts/syncing/scan_sync_code/view.cljs
index 35eb73b41a4..1d3581ffb68 100644
--- a/src/status_im2/contexts/syncing/scan_sync_code/view.cljs
+++ b/src/status_im2/contexts/syncing/scan_sync_code/view.cljs
@@ -50,8 +50,9 @@
                  :transform [{:translate-y controls-translate-y}]}
                 {})}
        [quo/button
-        {:icon                true
-         :type                :blur-bg
+        {:icon-only?          true
+         :type                :grey
+         :background          :blur
          :size                32
          :accessibility-label :close-sign-in-by-syncing
          :on-press            (fn []
@@ -65,8 +66,9 @@
                  :transform [{:translate-y controls-translate-y}]}
                 {})}
        [quo/button
-        {:before              :i/info
-         :type                :blur-bg
+        {:icon-left           :i/info
+         :type                :grey
+         :background          :blur
          :size                32
          :accessibility-label :find-sync-code
          :on-press            #(rf/dispatch [:open-modal :find-sync-code])}
@@ -144,7 +146,7 @@
        :style  style/enable-camera-access-sub-text}
       (i18n/label description-label-key)]
      [quo/button
-      {:before              button-icon
+      {:icon-left           button-icon
        :type                :primary
        :size                32
        :accessibility-label accessibility-label
@@ -391,12 +393,12 @@
           (when show-bottom-view? [bottom-view insets bottom-view-translate-y])
           (when (and (or (not animated?) @render-camera?) show-camera?)
             [quo/button
-             {:icon                true
+             {:icon-only?          true
               :type                :grey
               :background          :blur
               :size                style/flash-button-size
               :accessibility-label :camera-flash
-              :style               (style/camera-flash-button @qr-view-finder)
+              :contanier-style     (style/camera-flash-button @qr-view-finder)
               :on-press            #(swap! torch? not)}
              flashlight-icon])]]))))
 
diff --git a/src/status_im2/contexts/syncing/setup_syncing/view.cljs b/src/status_im2/contexts/syncing/setup_syncing/view.cljs
index 28aa9ee2738..ac82262711a 100644
--- a/src/status_im2/contexts/syncing/setup_syncing/view.cljs
+++ b/src/status_im2/contexts/syncing/setup_syncing/view.cljs
@@ -95,8 +95,9 @@
               :type                :primary
               :customization-color profile-color
               :size                40
-              :style               style/generate-button
-              :before              :i/reveal} (i18n/label :t/reveal-sync-code)])
+              :container-style     style/generate-button
+              :icon-left           :i/reveal}
+             (i18n/label :t/reveal-sync-code)])
           (when (sync-utils/valid-connection-string? @code)
             [rn/view
              {:style style/valid-cs-container}
@@ -118,16 +119,16 @@
                :default-shown? true
                :editable       false}]
              [quo/button
-              {:on-press (fn []
-                           (clipboard/set-string @code)
-                           (rf/dispatch [:toasts/upsert
-                                         {:icon       :i/correct
-                                          :icon-color colors/success-50
-                                          :text       (i18n/label
-                                                       :t/sharing-copied-to-clipboard)}]))
-               :type     :grey
-               :style    {:margin-top 12}
-               :before   :i/copy}
+              {:on-press        (fn []
+                                  (clipboard/set-string @code)
+                                  (rf/dispatch [:toasts/upsert
+                                                {:icon       :correct
+                                                 :icon-color colors/success-50
+                                                 :text       (i18n/label
+                                                              :t/sharing-copied-to-clipboard)}]))
+               :type            :grey
+               :container-style {:margin-top 12}
+               :icon-left       :i/copy}
               (i18n/label :t/copy-qr)]])]]
         [rn/view {:style style/sync-code}
          [quo/divider-label
diff --git a/src/status_im2/contexts/syncing/syncing_devices_list/view.cljs b/src/status_im2/contexts/syncing/syncing_devices_list/view.cljs
index af61dacbc10..63767a1b94d 100644
--- a/src/status_im2/contexts/syncing/syncing_devices_list/view.cljs
+++ b/src/status_im2/contexts/syncing/syncing_devices_list/view.cljs
@@ -41,7 +41,7 @@
         {:size                32
          :type                :primary
          :customization-color profile-color
-         :icon                true
+         :icon-only?          true
          :on-press            #(rf/dispatch [:navigate-to :settings-setup-syncing])}
         :i/add]]
       [device/view (merge user-device {:this-device? true})]
diff --git a/src/status_im2/contexts/syncing/syncing_instructions/view.cljs b/src/status_im2/contexts/syncing/syncing_instructions/view.cljs
index 3bc7d85b04f..40b38936d78 100644
--- a/src/status_im2/contexts/syncing/syncing_instructions/view.cljs
+++ b/src/status_im2/contexts/syncing/syncing_instructions/view.cljs
@@ -13,30 +13,31 @@
   (case type
     :text
     [quo/text
-     {:size   :paragraph-2
-      :weight :regular
-      :style  style/list-text} (i18n/label value)]
+     {:size            :paragraph-2
+      :weight          :regular
+      :container-style style/list-text} (i18n/label value)]
 
     :button-primary
     [quo/button
      {:type                :primary
       :customization-color :blue
       :size                24
-      :style               style/button-primary} (i18n/label value)]
+      :container-style     style/button-primary}
+     (i18n/label value)]
 
     :button-grey
     [quo/button
-     {:type  :grey
-      :size  24
-      :style style/button-grey}
+     {:type            :grey
+      :size            24
+      :container-style style/button-grey}
      (i18n/label value)]
 
     :button-grey-placeholder
     [quo/button
-     {:type   :grey
-      :size   24
-      :before :i/placeholder
-      :style  style/button-grey-placeholder}
+     {:type            :grey
+      :size            24
+      :before          :i/placeholder
+      :container-style style/button-grey-placeholder}
      (i18n/label value)]
 
     :context-tag

From c19550ad5c7697ef71921500b60eb71176d490a9 Mon Sep 17 00:00:00 2001
From: Jamie Caprani <jamiecaprani@gmail.com>
Date: Tue, 25 Jul 2023 12:00:14 +0100
Subject: [PATCH 3/6] chore: fix button preview screen

---
 .../contexts/quo_preview/buttons/button.cljs  | 23 +++++++++----------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/status_im2/contexts/quo_preview/buttons/button.cljs b/src/status_im2/contexts/quo_preview/buttons/button.cljs
index 0ee6b7a15e3..e4b42cb29be 100644
--- a/src/status_im2/contexts/quo_preview/buttons/button.cljs
+++ b/src/status_im2/contexts/quo_preview/buttons/button.cljs
@@ -72,15 +72,15 @@
 
 (defn cool-preview
   []
-  (let [state               (reagent/atom {:label "Press Me"
-                                           :size  40})
-        label               (reagent/cursor state [:label])
-        icon-left           (reagent/cursor state [:icon-left])
-        icon-right          (reagent/cursor state [:icon-right])
-        icon-top            (reagent/cursor state [:icon-top])
-        icon-only?          (reagent/cursor state [:icon-only?])
-        type                (reagent/cursor state [:type])
-        customization-color (reagent/cursor state [:customization-color])]
+  (let [state      (reagent/atom {:label               "Press Me"
+                                  :size                40
+                                  :type                :primary
+                                  :customization-color :blue})
+        label      (reagent/cursor state [:label])
+        icon-left  (reagent/cursor state [:icon-left])
+        icon-right (reagent/cursor state [:icon-right])
+        icon-top   (reagent/cursor state [:icon-top])
+        icon-only? (reagent/cursor state [:icon-only?])]
     (fn []
       [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
        [rn/view {:padding-bottom 150}
@@ -100,14 +100,13 @@
                       :bottom   0}}])
          [quo/button
           (merge (dissoc @state
-                  :customization-color
                   :theme
+                  :customization-color
                   :icon-left
                   :icon-right)
                  {:background (:background @state)
                   :on-press   #(println "Hello world!")}
-                 (when (and (= type :primary) customization-color)
-                   (:customization-color customization-color))
+                 (when (= :primary (:type @state)) {:customization-color (:customization-color @state)})
                  (when @icon-top
                    {:icon-top :i/placeholder})
                  (when @icon-left

From 7f97ed761f09a8b712eb5a543939265a281e125a Mon Sep 17 00:00:00 2001
From: Jamie Caprani <jamiecaprani@gmail.com>
Date: Fri, 28 Jul 2023 11:08:22 +0100
Subject: [PATCH 4/6] chore: rebase

---
 .../contexts/onboarding/common/navigation_bar/view.cljs   | 4 ++--
 .../contexts/shell/activity_center/header/view.cljs       | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/status_im2/contexts/onboarding/common/navigation_bar/view.cljs b/src/status_im2/contexts/onboarding/common/navigation_bar/view.cljs
index 01deb4e50d8..51896e3e851 100644
--- a/src/status_im2/contexts/onboarding/common/navigation_bar/view.cljs
+++ b/src/status_im2/contexts/onboarding/common/navigation_bar/view.cljs
@@ -12,9 +12,9 @@
      [quo/page-nav
       {:align-mid?            true
        :mid-section           {:type :text-only :main-text ""}
-       :left-section          {:type                :blur-bg
+       :left-section          {:type                :grey
+                               :icon-background :blur
                                :icon                :i/arrow-left
-                               :icon-override-theme :dark
                                :on-press            (fn []
                                                       (when-not disable-back-button?
                                                         (rf/dispatch back-event)))}
diff --git a/src/status_im2/contexts/shell/activity_center/header/view.cljs b/src/status_im2/contexts/shell/activity_center/header/view.cljs
index 521b84cea90..af2af9a37be 100644
--- a/src/status_im2/contexts/shell/activity_center/header/view.cljs
+++ b/src/status_im2/contexts/shell/activity_center/header/view.cljs
@@ -23,15 +23,15 @@
   [rn/view
    [rn/view {:style style/header-container}
     [quo/button
-     {:icon                true
-      :type                :blur-bg
+     {:icon-only?                true
+      :type                :grey
       :size                32
       :accessibility-label :close-activity-center
       :on-press            #(rf/dispatch [:navigate-back])}
      :i/close]
     [quo/button
-     {:icon                true
-      :type                :blur-bg
+     {:icon-only?                true
+      :type                :grey
       :size                32
       :accessibility-label :activity-center-open-more
       :on-press            #(rf/dispatch [:show-bottom-sheet

From c3bf8f2678aa262947bf679d8daeb95bc35a8ce9 Mon Sep 17 00:00:00 2001
From: Jamie Caprani <jamiecaprani@gmail.com>
Date: Fri, 28 Jul 2023 13:44:36 +0100
Subject: [PATCH 5/6] chore:rebase

---
 .../drawers/documentation_drawers/view.cljs           |  4 ++--
 .../onboarding/common/navigation_bar/view.cljs        | 10 +++++-----
 .../contexts/onboarding/create_password/view.cljs     |  8 ++++----
 .../contexts/onboarding/new_to_status/view.cljs       | 11 ++++++-----
 .../contexts/onboarding/syncing/results/view.cljs     |  2 +-
 .../contexts/quo_preview/navigation/top_nav.cljs      |  4 ++--
 .../contexts/shell/activity_center/header/view.cljs   |  4 ++--
 src/status_im2/contexts/shell/share/view.cljs         |  3 ++-
 .../contexts/syncing/scan_sync_code/view.cljs         |  2 +-
 .../contexts/syncing/setup_syncing/view.cljs          |  2 +-
 .../contexts/syncing/syncing_devices_list/view.cljs   | 10 +++++-----
 11 files changed, 31 insertions(+), 29 deletions(-)

diff --git a/src/quo2/components/drawers/documentation_drawers/view.cljs b/src/quo2/components/drawers/documentation_drawers/view.cljs
index 4d34fdbf8a1..ffae4101601 100644
--- a/src/quo2/components/drawers/documentation_drawers/view.cljs
+++ b/src/quo2/components/drawers/documentation_drawers/view.cljs
@@ -34,10 +34,10 @@
       [button/button
        {:size                24
         :type                :outline
-        :background (when shell? :blur)
+        :background          (when shell? :blur)
         :on-press            on-press-button
         :accessibility-label :documentation-drawer-button
-        :icon-right               button-icon}
+        :icon-right          button-icon}
        button-label])]])
 
 (def view (quo.theme/with-theme view-internal))
diff --git a/src/status_im2/contexts/onboarding/common/navigation_bar/view.cljs b/src/status_im2/contexts/onboarding/common/navigation_bar/view.cljs
index 51896e3e851..e0c758cd90c 100644
--- a/src/status_im2/contexts/onboarding/common/navigation_bar/view.cljs
+++ b/src/status_im2/contexts/onboarding/common/navigation_bar/view.cljs
@@ -12,10 +12,10 @@
      [quo/page-nav
       {:align-mid?            true
        :mid-section           {:type :text-only :main-text ""}
-       :left-section          {:type                :grey
+       :left-section          {:type            :grey
                                :icon-background :blur
-                               :icon                :i/arrow-left
-                               :on-press            (fn []
-                                                      (when-not disable-back-button?
-                                                        (rf/dispatch back-event)))}
+                               :icon            :i/arrow-left
+                               :on-press        (fn []
+                                                  (when-not disable-back-button?
+                                                    (rf/dispatch back-event)))}
        :right-section-buttons right-section-buttons}]]))
diff --git a/src/status_im2/contexts/onboarding/create_password/view.cljs b/src/status_im2/contexts/onboarding/create_password/view.cljs
index 8e75a23ccf5..756b5322f9e 100644
--- a/src/status_im2/contexts/onboarding/create_password/view.cljs
+++ b/src/status_im2/contexts/onboarding/create_password/view.cljs
@@ -217,10 +217,10 @@
         [navigation-bar/navigation-bar
          {:stack-id              :new-to-status
           :top                   top
-          :right-section-buttons [{:type                :blur-bg
-                                   :icon                :i/info
-                                   :icon-override-theme :dark
-                                   :on-press            on-press-info}]}]
+          :right-section-buttons [{:type            :grey
+                                   :icon-background :blur
+                                   :icon            :i/info
+                                   :on-press        on-press-info}]}]
         [password-form]
         [rn/view {:style {:height (if-not @keyboard-shown? bottom 0)}}]]]]]
     (finally
diff --git a/src/status_im2/contexts/onboarding/new_to_status/view.cljs b/src/status_im2/contexts/onboarding/new_to_status/view.cljs
index f3d40be2d0a..84af75b3636 100644
--- a/src/status_im2/contexts/onboarding/new_to_status/view.cljs
+++ b/src/status_im2/contexts/onboarding/new_to_status/view.cljs
@@ -105,12 +105,13 @@
    [quo/page-nav
     {:align-mid?            true
      :mid-section           {:type :text-only :main-text ""}
-     :left-section          {:type                :blur-bg
-                             :icon                :i/arrow-left
-                             :icon-override-theme :dark
-                             :on-press            navigate-back}
-     :right-section-buttons [{:type                :blur-bg
+     :left-section          {:type            :grey
+                             :icon-background :blur
+                             :icon            :i/arrow-left
+                             :on-press        navigate-back}
+     :right-section-buttons [{:type                :grey
                               :icon                :i/info
+                              :icon-background     :blur
                               :icon-override-theme :dark
                               :on-press            #(rf/dispatch
                                                      [:show-bottom-sheet
diff --git a/src/status_im2/contexts/onboarding/syncing/results/view.cljs b/src/status_im2/contexts/onboarding/syncing/results/view.cljs
index a78b68b6601..30cbb0d3ffc 100644
--- a/src/status_im2/contexts/onboarding/syncing/results/view.cljs
+++ b/src/status_im2/contexts/onboarding/syncing/results/view.cljs
@@ -47,7 +47,7 @@
 
 (defn continue-button
   [on-press]
-  (let [profile-color (:color (rf/sub [:onboarding-2/profile]))]
+  (let [profile-color (rf/sub [:profile/customization-color])]
     [quo/button
      {:on-press            (fn []
                              (when on-press
diff --git a/src/status_im2/contexts/quo_preview/navigation/top_nav.cljs b/src/status_im2/contexts/quo_preview/navigation/top_nav.cljs
index d5ae23ac30c..8a70cd03be3 100644
--- a/src/status_im2/contexts/quo_preview/navigation/top_nav.cljs
+++ b/src/status_im2/contexts/quo_preview/navigation/top_nav.cljs
@@ -13,8 +13,8 @@
                :value "Default"}
               {:key   :blur-bg
                :value "Blurred BG"}
-              {:key   :shell
-               :value "Shell"}]}
+              {:key   :black
+               :value "Black"}]}
    {:label "New Notifications?"
     :key   :new-notifications?
     :type  :boolean}
diff --git a/src/status_im2/contexts/shell/activity_center/header/view.cljs b/src/status_im2/contexts/shell/activity_center/header/view.cljs
index af2af9a37be..0efc0695e3c 100644
--- a/src/status_im2/contexts/shell/activity_center/header/view.cljs
+++ b/src/status_im2/contexts/shell/activity_center/header/view.cljs
@@ -23,14 +23,14 @@
   [rn/view
    [rn/view {:style style/header-container}
     [quo/button
-     {:icon-only?                true
+     {:icon-only?          true
       :type                :grey
       :size                32
       :accessibility-label :close-activity-center
       :on-press            #(rf/dispatch [:navigate-back])}
      :i/close]
     [quo/button
-     {:icon-only?                true
+     {:icon-only?          true
       :type                :grey
       :size                32
       :accessibility-label :activity-center-open-more
diff --git a/src/status_im2/contexts/shell/share/view.cljs b/src/status_im2/contexts/shell/share/view.cljs
index 2db53950f27..1e5beda3961 100644
--- a/src/status_im2/contexts/shell/share/view.cljs
+++ b/src/status_im2/contexts/shell/share/view.cljs
@@ -18,7 +18,8 @@
   [:<>
    [quo/button
     {:icon-only?          true
-     :type                :blur-bg
+     :type                :grey
+     :background          :blur
      :size                32
      :accessibility-label :close-shell-share-tab
      :container-style     style/header-button
diff --git a/src/status_im2/contexts/syncing/scan_sync_code/view.cljs b/src/status_im2/contexts/syncing/scan_sync_code/view.cljs
index 1d3581ffb68..b5431abed28 100644
--- a/src/status_im2/contexts/syncing/scan_sync_code/view.cljs
+++ b/src/status_im2/contexts/syncing/scan_sync_code/view.cljs
@@ -398,7 +398,7 @@
               :background          :blur
               :size                style/flash-button-size
               :accessibility-label :camera-flash
-              :contanier-style     (style/camera-flash-button @qr-view-finder)
+              :container-style     (style/camera-flash-button @qr-view-finder)
               :on-press            #(swap! torch? not)}
              flashlight-icon])]]))))
 
diff --git a/src/status_im2/contexts/syncing/setup_syncing/view.cljs b/src/status_im2/contexts/syncing/setup_syncing/view.cljs
index ac82262711a..459f4375408 100644
--- a/src/status_im2/contexts/syncing/setup_syncing/view.cljs
+++ b/src/status_im2/contexts/syncing/setup_syncing/view.cljs
@@ -38,7 +38,7 @@
 
 (defn view
   []
-  (let [profile-color (:color (rf/sub [:onboarding-2/profile]))
+  (let [profile-color (rf/sub [:profile/customization-color])
         valid-for-ms  (reagent/atom code-valid-for-ms)
         code          (reagent/atom nil)
         delay         (reagent/atom nil)
diff --git a/src/status_im2/contexts/syncing/syncing_devices_list/view.cljs b/src/status_im2/contexts/syncing/syncing_devices_list/view.cljs
index 63767a1b94d..263e1690958 100644
--- a/src/status_im2/contexts/syncing/syncing_devices_list/view.cljs
+++ b/src/status_im2/contexts/syncing/syncing_devices_list/view.cljs
@@ -13,10 +13,10 @@
    [quo/page-nav
     {:align-mid?   true
      :mid-section  {:type :text-only :main-text ""}
-     :left-section {:type     :blur-bg
-
-                    :icon     :i/arrow-left
-                    :on-press #(rf/dispatch [:navigate-back])}}]])
+     :left-section {:type            :photo
+                    :icon-background :blur
+                    :icon            :i/arrow-left
+                    :on-press        #(rf/dispatch [:navigate-back])}}]])
 
 (defn view
   []
@@ -24,7 +24,7 @@
         devices-with-button                       (map #(assoc % :show-button? true) devices)
         user-device                               (first devices-with-button)
         other-devices                             (rest devices-with-button)
-        profile-color                             (:color (rf/sub [:onboarding-2/profile]))
+        profile-color                             (rf/sub [:profile/customization-color])
         {:keys [paired-devices unpaired-devices]} (group-by
                                                    #(if (:enabled? %) :paired-devices :unpaired-devices)
                                                    other-devices)]

From d8d5c418f6170e05e9706f1ad3646a4c75d88d0e Mon Sep 17 00:00:00 2001
From: Jamie Caprani <jamiecaprani@gmail.com>
Date: Tue, 1 Aug 2023 14:28:10 +0100
Subject: [PATCH 6/6] fix: onboarding customization colors

---
 src/status_im2/common/home/view.cljs                 |  2 +-
 .../contexts/chat/composer/reply/view.cljs           | 10 ++++------
 .../onboarding/enable_notifications/view.cljs        |  2 +-
 src/status_im2/contexts/onboarding/welcome/view.cljs |  2 +-
 .../contexts/shell/activity_center/header/view.cljs  |  2 ++
 src/status_im2/subs/onboarding.cljs                  | 12 ++++++++++++
 src/status_im2/subs/root.cljs                        |  3 ++-
 7 files changed, 23 insertions(+), 10 deletions(-)
 create mode 100644 src/status_im2/subs/onboarding.cljs

diff --git a/src/status_im2/common/home/view.cljs b/src/status_im2/common/home/view.cljs
index a88667a2f12..118e6eedad1 100644
--- a/src/status_im2/common/home/view.cljs
+++ b/src/status_im2/common/home/view.cljs
@@ -45,7 +45,7 @@
       [quo/counter
        {:accessibility-label :activity-center-unread-count
         :type                unread-type
-        :container-style     (style/unread-indicator unread-count
+        :style               (style/unread-indicator unread-count
                                                      constants/activity-center-max-unread-count)}
        unread-count])))
 
diff --git a/src/status_im2/contexts/chat/composer/reply/view.cljs b/src/status_im2/contexts/chat/composer/reply/view.cljs
index a84cf2de08c..25aef914740 100644
--- a/src/status_im2/contexts/chat/composer/reply/view.cljs
+++ b/src/status_im2/contexts/chat/composer/reply/view.cljs
@@ -125,17 +125,15 @@
                                                  (i18n/label :t/photo))
                  constant/content-type-sticker (i18n/label :t/sticker)
                  constant/content-type-audio   (i18n/label :t/audio)
-                 ""))]
-        ])]
+                 ""))]])]
      (when (and in-chat-input? (not recording-audio?))
        [quo/button
-        {:size                24
+        {:icon-only?          true
+         :size                24
          :accessibility-label :reply-cancel-button
          :on-press            #(rf/dispatch [:chat.ui/cancel-message-reply])
          :type                :outline}
-        [quo/icon :i/close
-         {:size  16
-          :color (colors/theme-colors colors/neutral-100 colors/neutral-40)}]])
+        :i/close])
      (when (and in-chat-input? recording-audio?)
        [linear-gradient/linear-gradient
         {:colors [(colors/theme-colors colors/white-opa-0 colors/neutral-90-opa-0)
diff --git a/src/status_im2/contexts/onboarding/enable_notifications/view.cljs b/src/status_im2/contexts/onboarding/enable_notifications/view.cljs
index 4089e368e1e..819bb4c407e 100644
--- a/src/status_im2/contexts/onboarding/enable_notifications/view.cljs
+++ b/src/status_im2/contexts/onboarding/enable_notifications/view.cljs
@@ -22,7 +22,7 @@
 
 (defn enable-notification-buttons
   [{:keys [insets]}]
-  (let [profile-color (:color (rf/sub [:onboarding-2/profile]))]
+  (let [profile-color (rf/sub [:onboarding-2/customization-color])]
     [rn/view {:style (style/buttons insets)}
      [quo/button
       {:on-press            (fn []
diff --git a/src/status_im2/contexts/onboarding/welcome/view.cljs b/src/status_im2/contexts/onboarding/welcome/view.cljs
index e11fb30ce61..eb56fb5a2a8 100644
--- a/src/status_im2/contexts/onboarding/welcome/view.cljs
+++ b/src/status_im2/contexts/onboarding/welcome/view.cljs
@@ -45,7 +45,7 @@
 
 (defn view
   []
-  (let [profile-color         (:color (rf/sub [:onboarding-2/profile]))
+  (let [profile-color         (rf/sub [:onboarding-2/customization-color])
         {:keys [status-type]} (rf/sub [:multiaccount/current-user-visibility-status])
         insets                (safe-area/get-insets)]
     [rn/view {:style (style/page-container insets)}
diff --git a/src/status_im2/contexts/shell/activity_center/header/view.cljs b/src/status_im2/contexts/shell/activity_center/header/view.cljs
index 0efc0695e3c..af6c58b65a0 100644
--- a/src/status_im2/contexts/shell/activity_center/header/view.cljs
+++ b/src/status_im2/contexts/shell/activity_center/header/view.cljs
@@ -25,6 +25,7 @@
     [quo/button
      {:icon-only?          true
       :type                :grey
+      :background          :blur
       :size                32
       :accessibility-label :close-activity-center
       :on-press            #(rf/dispatch [:navigate-back])}
@@ -32,6 +33,7 @@
     [quo/button
      {:icon-only?          true
       :type                :grey
+      :background          :blur
       :size                32
       :accessibility-label :activity-center-open-more
       :on-press            #(rf/dispatch [:show-bottom-sheet
diff --git a/src/status_im2/subs/onboarding.cljs b/src/status_im2/subs/onboarding.cljs
new file mode 100644
index 00000000000..451f173543c
--- /dev/null
+++ b/src/status_im2/subs/onboarding.cljs
@@ -0,0 +1,12 @@
+(ns status-im2.subs.onboarding
+  (:require [re-frame.core :as re-frame]))
+
+(re-frame/reg-sub
+ :onboarding-2/customization-color
+ :<- [:onboarding-2/profile]
+ :<- [:profile/customization-color]
+ :<- [:onboarding-2/new-account?]
+ (fn [[{:keys [color]} customization-color new-account?]]
+   (if new-account?
+     color
+     customization-color)))
diff --git a/src/status_im2/subs/root.cljs b/src/status_im2/subs/root.cljs
index 9db5b8a268f..583db442022 100644
--- a/src/status_im2/subs/root.cljs
+++ b/src/status_im2/subs/root.cljs
@@ -13,9 +13,10 @@
     status-im2.subs.home
     status-im2.subs.keycard
     status-im2.subs.mailservers
-    status-im2.subs.profile
     status-im2.subs.networks
+    status-im2.subs.onboarding
     status-im2.subs.pairing
+    status-im2.subs.profile
     status-im2.subs.search
     status-im2.subs.shell
     status-im2.subs.stickers