Test

.carve_ignore

@@ -136,6 +136,11 @@ quo.animated/re-timing
 quo.design-system.colors/white
 quo.design-system.colors/black
 status-im.transport.core-test/messages
+status-im.ethereum.core/sidechain?
+status-im.ethereum.core/network-with-upstream-rpc?
+status-im.ethereum.core/current-address
+status-im.ethereum.core/network->network-name
+status-im.ethereum.core/estimate-gas
 quo.core/animated-header
 quo.core/safe-area-provider
 quo.core/safe-area-consumer

.github/PULL_REQUEST_TEMPLATE.md

@@ -63,10 +63,4 @@ Documentation change PR (review please): https://github.com/status-im/status.im/
 
 <!-- (PRs will only be accepted if squashed into single commit.) -->
 
-### Before and after screenshots comparison
-
-| Figma (if available) | iOS (if available)    | Android (if available)
-| --- | --- | --- |
-| Please embed Image/Video here of the before and after.  | Please embed Image/Video here of the before and after.  | Please embed Image/Video here of the before and after. |
-
 status: ready <!-- Can be ready or wip -->

Makefile

@@ -311,7 +311,6 @@ endef
 lint: export TARGET := clojure
 lint: ##@test Run code style checks
 	@sh scripts/lint-re-frame-in-quo-components.sh && \
-	sh scripts/lint-old-quo-usage.sh \
 	clj-kondo --config .clj-kondo/config.edn --cache false --fail-level error --lint src && \
 	ALL_CLOJURE_FILES=$(call find_all_clojure_files) && \
 	zprint '{:search-config? true}' -sfc $$ALL_CLOJURE_FILES && \
@@ -361,7 +360,6 @@ component-test-watch: export TARGET := clojure
 component-test-watch: export COMPONENT_TEST := true
 component-test-watch: export BABEL_ENV := test
 component-test-watch: ##@ Watch tests and re-run no changes to cljs files
-	rm -rf ./component-spec
 	yarn install
 	nodemon --exec 'yarn shadow-cljs compile component-test && jest --config=test/jest/jest.config.js' -e cljs
 
@@ -369,7 +367,6 @@ component-test: export TARGET := clojure
 component-test: export COMPONENT_TEST := true
 component-test: export BABEL_ENV := test
 component-test: ##@test Run component tests once in NodeJS
-	rm -rf ./component-spec
 	yarn install
 	yarn shadow-cljs compile component-test && \
 	jest --config=test/jest/jest.config.js

ci/Jenkinsfile.android

@@ -1,5 +1,5 @@
 #!/usr/bin/env groovy
-library 'status-jenkins-lib@v1.7.15'
+library 'status-jenkins-lib@v1.7.14'
 
 /* Options section can't access functions in objects. */
 def isPRBuild = utils.isPRBuild()

ci/Jenkinsfile.combined

@@ -1,5 +1,5 @@
 #!/usr/bin/env groovy
-library 'status-jenkins-lib@v1.7.15'
+library 'status-jenkins-lib@v1.7.14'
 
 pipeline {
   agent { label 'linux' }

ci/Jenkinsfile.e2e-nightly

@@ -1,5 +1,5 @@
 #!/usr/bin/env groovy
-library 'status-jenkins-lib@v1.7.15'
+library 'status-jenkins-lib@v1.7.14'
 
 pipeline {
   agent { label 'linux' }

ci/Jenkinsfile.ios

@@ -1,5 +1,5 @@
 #!/usr/bin/env groovy
-library 'status-jenkins-lib@v1.7.15'
+library 'status-jenkins-lib@set_ios_status_go_targets'
 
 /* Options section can't access functions in objects. */
 def isPRBuild = utils.isPRBuild()

ci/Jenkinsfile.tests

@@ -1,5 +1,5 @@
 #!/usr/bin/env groovy
-library 'status-jenkins-lib@v1.7.15'
+library 'status-jenkins-lib@v1.7.14'
 
 /* Options section can't access functions in objects. */
 def isPRBuild = utils.isPRBuild()

ci/tests/Jenkinsfile.e2e-nightly

@@ -1,5 +1,5 @@
 #!/usr/bin/env groovy
-library 'status-jenkins-lib@v1.7.15'
+library 'status-jenkins-lib@v1.7.14'
 
 pipeline {
 

ci/tests/Jenkinsfile.e2e-prs

@@ -1,5 +1,5 @@
 #!/usr/bin/env groovy
-library 'status-jenkins-lib@v1.7.15'
+library 'status-jenkins-lib@v1.7.14'
 
 pipeline {
 

ci/tests/Jenkinsfile.e2e-upgrade

@@ -1,5 +1,5 @@
 #!/usr/bin/env groovy
-library 'status-jenkins-lib@v1.7.15'
+library 'status-jenkins-lib@v1.7.14'
 
 pipeline {
 

ci/tools/Jenkinsfile.fastlane-clean

@@ -1,5 +1,5 @@
 #!/usr/bin/env groovy
-library 'status-jenkins-lib@v1.7.15'
+library 'status-jenkins-lib@v1.7.14'
 
 pipeline {
   agent { label 'macos' }

ci/tools/Jenkinsfile.nix-cache

@@ -1,5 +1,5 @@
 #!/usr/bin/env groovy
-library 'status-jenkins-lib@v1.7.15'
+library 'status-jenkins-lib@v1.7.14'
 
 pipeline {
   agent { label params.AGENT_LABEL }

ci/tools/Jenkinsfile.playstore-meta

@@ -1,5 +1,5 @@
 #!/usr/bin/env groovy
-library 'status-jenkins-lib@v1.7.15'
+library 'status-jenkins-lib@v1.7.14'
 
 pipeline {
   agent { label 'linux' }

ci/tools/Jenkinsfile.xcode-clean

@@ -1,5 +1,5 @@
 #!/usr/bin/env groovy
-library 'status-jenkins-lib@v1.7.15'
+library 'status-jenkins-lib@v1.7.14'
 
 pipeline {
   agent {

doc/README.md

@@ -35,11 +35,6 @@
 [Component tests (jest) overview](component-tests-overview.md)
 
 
-## Project details
-
-[status-go introduction (recorded meeting)](https://drive.google.com/file/d/1B7TljmTZ8fHkqJH8ChU1Cp4FGDFM03gq/view)
-
-[re-frame usage (recorded meeting)](https://drive.google.com/file/d/1qv_E0CEGzQpu_zGXD0gCTU5EvhC2k8Jy/view)
 
 ## Misc
 

ios/Podfile.lock

@@ -707,7 +707,7 @@ SPEC CHECKSUMS:
   FBLazyVector: a8af91c2b5a0029d12ff6b32e428863d63c48991
   FBReactNativeSpec: 1b2309b096448a1dc9d0c43999216f8fda809ae8
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
-  glog: 166d178815c300e8126de9a7900101814eb16253
+  glog: d93527a855523adb8c113837db4be68fb00e230d
   HMSegmentedControl: 34c1f54d822d8308e7b24f5d901ec674dfa31352
   Keycard: ac6df4d91525c3c82635ac24d4ddd9a80aca5fc8
   libwebp: f62cb61d0a484ba548448a4bd52aabf150ff6eef

scripts/lint-old-quo-usage.sh

@@ -1,13 +0,0 @@
-#!/usr/bin/env sh
-
-set -euo pipefail
-
-QUO_USAGES=$(grep -r -E '\[quo\.[^ ]* :(?:as|refer)|\[quo\.[^ ]*\]' --include '*.cljs' --include '*.clj' './src/status_im2' --exclude='./src/status_im2/common/theme/core.cljs' || true)
-
-echo -e "\nChecking 'status_im2' namespace for 'quo' namespace usage."
-
-if [ -n "$QUO_USAGES" ]; then
-    echo -e "\033[0;31mERROR: Usage of the old 'quo' namespace detected in 'status_im2' code. Please update to 'quo2'. \n"
-    echo -e "$QUO_USAGES \033[0m"
-    exit 1
-fi

src/native_module/core.cljs

@@ -470,8 +470,7 @@
 (defn sha3
   [s]
   (log/debug "[native-module] sha3")
-  (when s
-    (.sha3 ^js (status) (str s))))
+  (.sha3 ^js (status) s))
 
 (defn utf8-to-hex
   [s]
@@ -492,9 +491,8 @@
 (defn address?
   [address]
   (log/debug "[native-module] address?")
-  (when address
-    (let [result (.isAddress ^js (status) address)]
-      (types/json->clj result))))
+  (let [result (.isAddress ^js (status) address)]
+    (types/json->clj result)))
 
 (defn to-checksum-address
   [address]

src/quo2/README.md

@@ -69,35 +69,6 @@ In the image above we can see the properties are `Type`, `State`, `Size`,
   ...)
 ```
 
-### Handling Sizes
-In the designs, sizes are referred to as integers. To avoid having the codebase littered with magic numbers we instead have a keyword convention to use in components to map these keywords with their sizes.
-
-The convention is `:size-<number>`, e.g size `20` is `:size-20`
-
-```clojure
-;; bad
-(defn button
-  [{:keys [size]}]
-  [rn/view
-   {:style {:height (case size
-                      20 20
-                      40 40
-                      0)}}]
-  ...)
-```
-
-```clojure
-;; good
-(defn button
-  [{:keys [size]}]
-  [rn/view
-   {:style {:height (case size
-                      :size-20 20
-                      :size-40 40
-                      0)}}]
-  ...)
-```
-
 ## Clojure var conventions
 
 - Due to the fact that every `view` namespace should export only one component

src/quo2/components/avatars/account_avatar/style.cljs

@@ -6,20 +6,16 @@
 (def default-padding 16)
 (def default-emoji-size 36)
 
-(def ^:private container-size
-  {:size-64 64})
-
 (defn get-border-radius
   [size]
   (case size
-    80       16
-    :size-64 16
-    48       12
-    32       10
-    28       8
-    24       8
-    20       6
-    16       4
+    80 16
+    48 12
+    32 10
+    28 8
+    24 8
+    20 6
+    16 4
     default-border-radius))
 
 (defn get-padding
@@ -37,32 +33,29 @@
 (defn get-emoji-size
   [size]
   (case size
-    80       36
-    :size-64 30
-    48       24
-    32       15
-    28       12
-    24       11
-    20       11
-    16       11
+    80 36
+    48 24
+    32 15
+    28 12
+    24 11
+    20 11
+    16 11
     default-emoji-size))
 
 (defn get-border-width
   [size]
-  (if (= size 16)
-    0.8 ;; 0.8 px is for only size 16
-    1)) ;; Rest of the size will have 1 px
-
+  (case size
+    16 0.8 ;; 0.8 px is for only size 16
+    ;; Rest of the size will have 1 px
+    1))
 
 (defn root-container
   [{:keys [type size theme customization-color]
     :or   {size                default-size
            customization-color :blue}}]
-  (let [watch-only? (= type :watch-only)
-        width       (cond-> size
-                      (keyword? size) (container-size size))]
-    (cond-> {:width            width
-             :height           width
+  (let [watch-only? (= type :watch-only)]
+    (cond-> {:width            size
+             :height           size
              :background-color (colors/custom-color-by-theme customization-color 50 60 nil nil theme)
              :border-radius    (get-border-radius size)
              :border-color     (if (= theme :light) colors/neutral-80-opa-5 colors/white-opa-5)

src/quo2/components/avatars/channel_avatar/component_spec.cljs

@@ -11,7 +11,7 @@
 
   (h/test "with emoji, no lock set, large size"
     (let [emoji "🍓"]
-      (h/render [component/view {:emoji emoji :size :size-32}])
+      (h/render [component/view {:emoji emoji :size :size/l}])
       (h/is-null (h/query-by-label-text :initials))
       (h/is-truthy (h/query-by-text emoji))
       (h/is-null (h/query-by-label-text :lock))))
@@ -31,5 +31,5 @@
   (h/test "no emoji, large size"
     (h/render [component/view
                {:full-name "Status Mobile"
-                :size      :size-32}])
+                :size      :size/l}])
     (h/is-truthy (h/query-by-text "SM"))))

src/quo2/components/avatars/channel_avatar/style.cljs

@@ -5,27 +5,17 @@
 
 (defn outer-container
   [{:keys [size color]}]
-  (let [container-size (case size
-                         :size-64 64
-                         :size-32 32
-                         24)]
-    {:width            container-size
-     :height           container-size
-     :border-radius    container-size
+  (let [size (if (= size :size/l) 32 24)]
+    {:width            size
+     :height           size
+     :border-radius    size
      :justify-content  :center
      :align-items      :center
      :background-color (colors/theme-alpha color 0.1 0.1)}))
 
-(defn emoji-size
-  [size]
-  {:font-size (case size
-                :size-64 24
-                :size-32 15
-                11)})
-
 (defn lock-container
   [size]
-  (let [distance (if (= size :size-32) 20 12)]
+  (let [distance (if (= size :size/l) 20 12)]
     {:position         :absolute
      :left             distance
      :top              distance

src/quo2/components/avatars/channel_avatar/view.cljs

@@ -5,19 +5,17 @@
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
             [react-native.core :as rn]
-            [utils.string]))
+            utils.string))
 
 (defn- initials
   [full-name size color]
-  (let [amount-initials (if (#{:size-32 :size-64} size) 2 1)
+  (let [amount-initials (if (= size :size/l) 2 1)
         channel-name    (string/replace full-name "#" "")]
     [text/text
-     (cond-> {:accessibility-label :initials
-              :style               {:color color}
-              :size                :paragraph-2
-              :weight              :semi-bold}
-       (= size :size-64) (assoc :size   :heading-1
-                                :weight :medium))
+     {:accessibility-label :initials
+      :size                :paragraph-2
+      :weight              :semi-bold
+      :style               {:color color}}
      (utils.string/get-initials channel-name amount-initials)]))
 
 (defn- lock
@@ -56,8 +54,8 @@
     :style               (style/outer-container {:size size :color customization-color})}
    (if (string/blank? emoji)
      [initials full-name size customization-color]
-     [rn/text
-      {:style               (style/emoji-size size)
-       :accessibility-label :emoji}
+     [text/text
+      {:accessibility-label :emoji
+       :size                (if (= size :size/l) :paragraph-1 :label)}
       (string/trim emoji)])
    [lock locked? size]])

src/quo2/components/avatars/group_avatar/view.cljs

@@ -7,31 +7,30 @@
             [quo2.components.avatars.group-avatar.style :as style]))
 
 (def sizes
-  {:size-20 {:icon      12
-             :container 20}
-   :size-28 {:icon      16
-             :container 28}
-   :size-32 {:icon      16
-             :container 32}
-   :size-48 {:icon      20
-             :container 48}
-   :size-80 {:icon      32
-             :container 80}})
+  {:size/s-20 {:icon      12
+               :container 20}
+   :size/s-28 {:icon      16
+               :container 28}
+   :size/s-32 {:icon      16
+               :container 32}
+   :size/s-48 {:icon      20
+               :container 48}
+   :size/s-80 {:icon      32
+               :container 80}})
 
 (defn- view-internal
   [_]
   (fn [{:keys [size theme customization-color picture icon-name]
-        :or   {size                :size-20
+        :or   {size                :size/s-20
                customization-color :blue
                picture             nil
                icon-name           :i/group}}]
     (let [container-size (get-in sizes [size :container])
           icon-size      (get-in sizes [size :icon])]
       [rn/view
-       {:accessibility-label :group-avatar
-        :style               (style/container {:container-size      container-size
-                                               :customization-color customization-color
-                                               :theme               theme})}
+       {:style (style/container {:container-size      container-size
+                                 :customization-color customization-color
+                                 :theme               theme})}
        (if picture
          [fast-image/fast-image
           {:source picture

src/quo2/components/avatars/icon_avatar.cljs

@@ -5,19 +5,19 @@
             [react-native.core :as rn]))
 
 (def ^:private sizes
-  {:size-48 {:component 48
-             :icon      20}
-   :size-32 {:component 32
-             :icon      20}
-   :size-24 {:component 24
-             :icon      16}
-   :size-20 {:component 20
-             :icon      12}})
+  {:size/s-48 {:component 48
+               :icon      20}
+   :size/s-32 {:component 32
+               :icon      20}
+   :size/s-24 {:component 24
+               :icon      16}
+   :size/s-20 {:component 20
+               :icon      12}})
 
 (defn icon-avatar-internal
   [{:keys [size icon color opacity border? theme]
     :or   {opacity 20
-           size    :size-32}}]
+           size    :size/s-32}}]
   (let [{component-size :component icon-size :icon} (get sizes size)
         circle-color                                (colors/custom-color color 50 opacity)
         icon-color                                  (colors/custom-color-by-theme color 50 60)]

src/quo2/components/avatars/user_avatar/style.cljs

@@ -2,54 +2,48 @@
   (:require [quo2.foundations.colors :as colors]))
 
 (def sizes
-  {:big     {:dimensions                      80
-             :status-indicator                12
-             :status-indicator-border         4
-             :status-indicator-center-to-edge 12
-             :font-size                       :heading-1
-             :ring-width                      4}
-   :size-64 {:dimensions                      64
-             :status-indicator                8
-             :status-indicator-border         2
-             :status-indicator-center-to-edge 6
-             :font-size                       :heading-1
-             :ring-width                      2}
-   :medium  {:dimensions                      48
-             :status-indicator                8
-             :status-indicator-border         2
-             :status-indicator-center-to-edge 6
-             :font-size                       :heading-2
-             :ring-width                      2}
-   :small   {:dimensions                      32
-             :status-indicator                8
-             :status-indicator-border         2
-             :status-indicator-center-to-edge 4
-             :font-size                       :paragraph-2
-             :ring-width                      2}
-   28       {:dimensions                      28
-             :status-indicator                0
-             :status-indicator-border         0
-             :status-indicator-center-to-edge 0
-             :font-size                       :paragraph-2
-             :ring-width                      0}
-   :xs      {:dimensions                      24
-             :status-indicator                0
-             :status-indicator-border         0
-             :status-indicator-center-to-edge 0
-             :font-size                       :paragraph-2
-             :ring-width                      2}
-   :xxs     {:dimensions                      20
-             :status-indicator                0
-             :status-indicator-border         0
-             :status-indicator-center-to-edge 0
-             :font-size                       :label
-             :ring-width                      2}
-   :xxxs    {:dimensions                      16
-             :status-indicator                0
-             :status-indicator-border         0
-             :status-indicator-center-to-edge 0
-             :font-size                       :label
-             :ring-width                      2}})
+  {:big    {:dimensions                      80
+            :status-indicator                12
+            :status-indicator-border         4
+            :status-indicator-center-to-edge 12
+            :font-size                       :heading-1
+            :ring-width                      4}
+   :medium {:dimensions                      48
+            :status-indicator                8
+            :status-indicator-border         2
+            :status-indicator-center-to-edge 6
+            :font-size                       :heading-2
+            :ring-width                      2}
+   :small  {:dimensions                      32
+            :status-indicator                8
+            :status-indicator-border         2
+            :status-indicator-center-to-edge 4
+            :font-size                       :paragraph-2
+            :ring-width                      2}
+   28      {:dimensions                      28
+            :status-indicator                0
+            :status-indicator-border         0
+            :status-indicator-center-to-edge 0
+            :font-size                       :paragraph-2
+            :ring-width                      0}
+   :xs     {:dimensions                      24
+            :status-indicator                0
+            :status-indicator-border         0
+            :status-indicator-center-to-edge 0
+            :font-size                       :paragraph-2
+            :ring-width                      2}
+   :xxs    {:dimensions                      20
+            :status-indicator                0
+            :status-indicator-border         0
+            :status-indicator-center-to-edge 0
+            :font-size                       :label
+            :ring-width                      2}
+   :xxxs   {:dimensions                      16
+            :status-indicator                0
+            :status-indicator-border         0
+            :status-indicator-center-to-edge 0
+            :font-size                       :label
+            :ring-width                      2}})
 
 (defn initials-avatar
   [size customization-color theme]

src/quo2/components/avatars/user_avatar/view.cljs

@@ -39,7 +39,7 @@
    :background-color intials avatar background color
    :color            intials avatar text color
    :size             intials avatar radius
-   :ring?            render ident ring around avatar? NOTE: this option may not work if override-ring? is not nil}
+   :ring?            render ident ring around avatar?}
 
   supported color formats:
   #RRGGBB

src/quo2/components/avatars/wallet_user_avatar.cljs

@@ -8,21 +8,18 @@
   {:small   20
    :medium  32
    :large   48
-   :size-64 64
    :x-large 80})
 
 (def font-sizes
   {:small   :label
    :medium  :paragraph-2
    :large   :paragraph-1
-   :size-64 :heading-1
    :x-large :heading-1})
 
 (def font-weights
   {:small   :medium
    :medium  :semi-bold
    :large   :semi-bold
-   :size-64 :medium
    :x-large :medium})
 
 (defn wallet-user-avatar

src/quo2/components/buttons/button/properties.cljs

@@ -1,8 +1,6 @@
 (ns quo2.components.buttons.button.properties
   (:require [quo2.foundations.colors :as colors]))
 
-(def backgrounds #{:photo :blur})
-
 (defn custom-color-type
   [customization-color icon-only?]
   {:icon-color       colors/white-opa-70

src/quo2/components/buttons/button/view.cljs

@@ -29,11 +29,10 @@
    only icon
    [button {:icon-only? true} :i/close-circle]"
   [_ _]
-  (let [pressed-state? (reagent/atom false)]
+  (let [pressed? (reagent/atom false)]
     (fn
       [{: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
-               pressed? on-press-in on-press-out]
+               customization-color theme accessibility-label icon-only? container-style inner-style]
         :or   {type                :primary
                size                40
                customization-color (cond (= type :primary)  :blue
@@ -47,18 +46,14 @@
                                            :background          background
                                            :type                type
                                            :theme               theme
-                                           :pressed?            (if pressed? pressed? @pressed-state?)
+                                           :pressed?            @pressed?
                                            :icon-only?          icon-only?})
             icon-size (when (= 24 size) 12)]
         [rn/touchable-without-feedback
          {:disabled            disabled?
           :accessibility-label accessibility-label
-          :on-press-in         (fn []
-                                 (reset! pressed-state? true)
-                                 (when on-press-in (on-press-in)))
-          :on-press-out        (fn []
-                                 (reset! pressed-state? nil)
-                                 (when on-press-out (on-press-out)))
+          :on-press-in         #(reset! pressed? true)
+          :on-press-out        #(reset! pressed? nil)
           :on-press            on-press
           :on-long-press       on-long-press}
          [rn/view
@@ -81,7 +76,7 @@
              [customization-colors/overlay
               {:customization-color customization-color
                :theme               theme
-               :pressed?            (if pressed? pressed? @pressed-state?)}])
+               :pressed?            @pressed?}])
            (when (= background :photo)
              [blur/view
               {:blur-radius   20

src/quo2/components/buttons/slide_button/animations.cljs

@@ -70,7 +70,7 @@
   [sliding-complete?]
   (reset! sliding-complete? true))
 
-(defn reset-track-position
+(defn- reset-track-position
   [x-pos]
   (animate-spring x-pos 0))
 

src/quo2/components/buttons/slide_button/component_spec.cljs

@@ -1,6 +1,7 @@
 (ns quo2.components.buttons.slide-button.component-spec
   (:require [quo2.components.buttons.slide-button.view :as slide-button]
             [quo2.components.buttons.slide-button.constants :as constants]
+            [quo2.components.buttons.slide-button.utils :as utils]
             ["@testing-library/react-native" :as rtl]
             ["react-native-gesture-handler/jest-utils" :as gestures-jest]
             [reagent.core :as r]
@@ -81,11 +82,17 @@
       (h/has-style track-mock {:opacity constants/disable-opacity})))
 
   (h/test "render the small button"
-    (h/render [slide-button/view (assoc default-props :size :size/s-40)])
+    (h/render [slide-button/view (assoc default-props :size :small)])
     (let [mock         (h/get-by-test-id :slide-button-track)
           small-height (:track-height constants/small-dimensions)]
       (h/has-style mock {:height small-height})))
 
+  (h/test "render with the correct customization-color"
+    (h/render [slide-button/view (assoc default-props :customization-color :purple)])
+    (let [track-mock   (h/get-by-test-id :slide-button-track)
+          purple-color (utils/slider-color :track :purple)]
+      (h/has-style track-mock {:backgroundColor purple-color})))
+
   (h/test
     "calls on-complete when dragged"
     (let [props          (merge default-props {:on-complete (h/mock-fn)})

src/quo2/components/buttons/slide_button/style.cljs

@@ -13,10 +13,10 @@
    :right    0})
 
 (defn thumb-container
-  [{:keys [interpolate-track thumb-size customization-color theme]}]
+  [interpolate-track thumb-size customization-color]
   (reanimated/apply-animations-to-style
    {:transform [{:translate-x (interpolate-track :track-clamp)}]}
-   {:background-color (utils/slider-color :main customization-color theme)
+   {:background-color (utils/slider-color :main customization-color)
     :border-radius    12
     :height           thumb-size
     :width            thumb-size
@@ -46,7 +46,7 @@
     :justify-content :space-around}))
 
 (defn track
-  [{:keys [disabled? customization-color height theme]}]
+  [disabled? customization-color height]
   {:align-items      :flex-start
    :justify-content  :center
    :border-radius    14
@@ -54,7 +54,7 @@
    :align-self       :stretch
    :padding          constants/track-padding
    :opacity          (if disabled? 0.3 1)
-   :background-color (utils/slider-color :track customization-color theme)})
+   :background-color (utils/slider-color :track customization-color)})
 
 (defn track-cover
   [interpolate-track]
@@ -74,7 +74,7 @@
    :width           track-width})
 
 (defn track-text
-  [customization-color theme]
+  [customization-color]
   (-> typography/paragraph-1
       (merge typography/font-medium)
-      (assoc :color (utils/slider-color :main customization-color theme))))
+      (assoc :color (utils/slider-color :main customization-color))))

src/quo2/components/buttons/slide_button/utils.cljs

@@ -6,15 +6,9 @@
 (defn slider-color
   "- `color-key`               `:main`/`:track`
    - `customization-color` Customization color"
-  [color-key customization-color theme]
-  (let [colors-by-key {:main  (colors/theme-colors
-                               (colors/custom-color customization-color 50)
-                               (colors/custom-color customization-color 60)
-                               theme)
-                       :track (colors/theme-colors
-                               (colors/custom-color customization-color 50 10)
-                               (colors/custom-color customization-color 60 10)
-                               theme)}]
+  [color-key customization-color]
+  (let [colors-by-key {:main  (colors/custom-color-by-theme customization-color 50 60)
+                       :track (colors/custom-color-by-theme customization-color 50 60 10 10)}]
     (color-key colors-by-key)))
 
 (defn clamp-value
@@ -34,8 +28,8 @@
 (defn get-dimensions
   [track-width size dimension-key]
   (let [default-dimensions (case size
-                             :size/s-40 constants/small-dimensions
-                             :size/s-48 constants/large-dimensions
+                             :small constants/small-dimensions
+                             :large constants/large-dimensions
                              constants/large-dimensions)]
     (-> default-dimensions
         (merge {:usable-track (calc-usable-track

src/quo2/components/buttons/slide_button/view.cljs

@@ -10,8 +10,7 @@
     [reagent.core :as reagent]
     [oops.core :as oops]
     [react-native.reanimated :as reanimated]
-    [quo2.components.buttons.slide-button.constants :as constants]
-    [quo2.theme :as quo.theme]))
+    [quo2.components.buttons.slide-button.constants :as constants]))
 
 (defn- f-slider
   [{:keys [disabled?]}]
@@ -21,15 +20,14 @@
         on-track-layout    (fn [evt]
                              (let [width (oops/oget evt "nativeEvent.layout.width")]
                                (reset! track-width width)))]
-    (fn [{:keys [on-reset
-                 on-complete
+
+    (fn [{:keys [on-complete
                  track-text
                  track-icon
                  disabled?
                  customization-color
                  size
-                 container-style
-                 theme]}]
+                 container-style]}]
       (let [x-pos             (reanimated/use-shared-value 0)
             dimensions        (partial utils/get-dimensions
                                        (or @track-width constants/default-width)
@@ -38,19 +36,12 @@
                                        x-pos
                                        (dimensions :usable-track)
                                        (dimensions :thumb))]
+
         (rn/use-effect (fn []
                          (when @sliding-complete?
                            (on-complete)))
                        [@sliding-complete?])
 
-        (rn/use-effect (fn []
-                         (when on-reset
-                           (reset! sliding-complete? false)
-                           (reset! gestures-disabled? false)
-                           (animations/reset-track-position x-pos)
-                           (on-reset)))
-                       [on-reset])
-
         [gesture/gesture-detector
          {:gesture (animations/drag-gesture x-pos
                                             gestures-disabled?
@@ -59,25 +50,21 @@
                                             sliding-complete?)}
          [reanimated/view
           {:test-ID   :slide-button-track
-           :style     (merge (style/track {:disabled?           disabled?
-                                           :customization-color customization-color
-                                           :height              (dimensions :track-height)
-                                           :theme               theme})
+           :style     (merge (style/track disabled? customization-color (dimensions :track-height))
                              container-style)
            :on-layout (when-not (some? @track-width)
                         on-track-layout)}
           [reanimated/view {:style (style/track-cover interpolate-track)}
            [rn/view {:style (style/track-cover-text-container @track-width)}
             [icon/icon track-icon
-             {:color (utils/slider-color :main customization-color theme)
+             {:color (utils/slider-color :main customization-color)
               :size  20}]
             [rn/view {:width 4}]
-            [rn/text {:style (style/track-text customization-color theme)} track-text]]]
+            [rn/text {:style (style/track-text customization-color)} track-text]]]
           [reanimated/view
-           {:style (style/thumb-container {:interpolate-track   interpolate-track
-                                           :thumb-size          (dimensions :thumb)
-                                           :customization-color customization-color
-                                           :theme               theme})}
+           {:style (style/thumb-container interpolate-track
+                                          (dimensions :thumb)
+                                          customization-color)}
            [reanimated/view {:style (style/arrow-icon-container interpolate-track)}
             [icon/icon :arrow-right
              {:color colors/white
@@ -89,19 +76,16 @@
              {:color colors/white
               :size  20}]]]]]))))
 
-(defn- view-internal
+(defn view
   "Options
   - `on-complete`         Callback called when the sliding is complete
   - `disabled?`           Boolean that disables the button
                           (_and gestures_)
-  - `size`                :size/s-40`/`:size/s-48`
+  - `size`                `:small`/`:large`
   - `track-text`          Text that is shown on the track
   - `track-icon`          Key of the icon shown on the track
                           (e.g. `:face-id`)
   - `customization-color` Customization color
-  - `on-reset`            A callback which can be used to reset the component and run required functionality
   "
   [props]
   [:f> f-slider props])
-
-(def view (quo.theme/with-theme view-internal))

src/quo2/components/code/code/style.cljs

@@ -0,0 +1,87 @@
+(ns quo2.components.code.code.style
+  (:require [quo2.foundations.colors :as colors]))
+
+;; Example themes:
+;; https://github.com/react-syntax-highlighter/react-syntax-highlighter/tree/master/src/styles/hljs
+(defn theme
+  [theme-key]
+  (case theme-key
+    :hljs-comment (colors/theme-colors colors/neutral-40 colors/neutral-60)
+    :hljs-title   (colors/custom-color-by-theme :sky 50 60)
+    :hljs-keyword (colors/custom-color-by-theme :green 50 60)
+    :hljs-string  (colors/custom-color-by-theme :turquoise 50 60)
+    :hljs-literal (colors/custom-color-by-theme :turquoise 50 60)
+    :hljs-number  (colors/custom-color-by-theme :turquoise 50 60)
+    :line-number  colors/neutral-40
+    nil))
+
+(defn text-style
+  [class-names]
+  (let [text-color (->> class-names
+                        (map keyword)
+                        (some (fn [class-name]
+                                (when-let [text-color (theme class-name)]
+                                  text-color))))]
+    (cond-> {:flex-shrink 1
+             :line-height 18}
+      text-color (assoc :color text-color))))
+
+(defn border-color
+  []
+  (colors/theme-colors colors/neutral-20 colors/neutral-80))
+
+(defn container
+  []
+  {:overflow         :hidden
+   :padding          8
+   :background-color (colors/theme-colors colors/white colors/neutral-80-opa-40)
+   :border-color     (border-color)
+   :border-width     1
+   :border-radius    16})
+
+(def gradient-container
+  {:position :absolute
+   :bottom   0
+   :left     0
+   :right    0
+   :z-index  1})
+
+(def gradient {:height 48})
+
+(defn line-number-container
+  [line-number-width]
+  {:position         :absolute
+   :bottom           0
+   :top              0
+   :left             0
+   :width            (+ line-number-width 8 7)
+   :background-color (colors/theme-colors colors/neutral-5 colors/neutral-80)})
+
+(defn divider
+  [line-number-width]
+  {:position         :absolute
+   :bottom           0
+   :top              0
+   :left             (+ line-number-width 7 7)
+   :width            1
+   :z-index          2
+   :background-color (border-color)})
+
+(def line {:flex-direction :row})
+
+(defn line-number
+  [width]
+  {:margin-right 20 ; 8+12 margin
+   :width        width})
+
+(def copy-button
+  {:position :absolute
+   :bottom   8
+   :right    8
+   :z-index  1})
+
+(defn gradient-color [] (colors/theme-colors colors/white colors/neutral-80))
+
+(defn button-background-color
+  []
+  (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5))

src/quo2/components/code/common/style.cljs

@@ -1,107 +0,0 @@
-(ns quo2.components.code.common.style
-  (:require [quo2.foundations.colors :as colors]))
-
-;; Example themes:
-;; https://github.com/react-syntax-highlighter/react-syntax-highlighter/tree/master/src/styles/hljs
-(defn highlight-theme
-  [theme-key]
-  (case theme-key
-    :hljs-comment      (colors/theme-colors colors/neutral-40 colors/neutral-60)
-    :hljs-title        (colors/custom-color-by-theme :sky 50 60)
-    :hljs-keyword      (colors/custom-color-by-theme :green 50 60)
-    :hljs-string       (colors/custom-color-by-theme :turquoise 50 60)
-    :hljs-literal      (colors/custom-color-by-theme :turquoise 50 60)
-    :hljs-number       (colors/custom-color-by-theme :turquoise 50 60)
-    :hljs-symbol       (colors/custom-color-by-theme :orange 50 50)
-    :hljs-builtin-name (colors/custom-color-by-theme :pink 50 50)
-    :line-number       colors/neutral-40
-    nil))
-
-(defn text-style
-  [class-names preview?]
-  (let [text-color (->> class-names
-                        (map keyword)
-                        (some (fn [class-name]
-                                (when-let [text-color (highlight-theme class-name)]
-                                  text-color))))]
-    (cond-> {:flex-shrink 1
-             :line-height 18}
-      preview?   (assoc :color colors/white)
-      text-color (assoc :color text-color))))
-
-(defn border-color
-  []
-  (colors/theme-colors colors/neutral-20 colors/neutral-80))
-
-(defn container
-  [preview? theme]
-  (if preview?
-    {:overflow         :hidden
-     :width            108
-     :background-color (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
-     :border-radius    8}
-    {:overflow         :hidden
-     :padding          8
-     :background-color (colors/theme-colors colors/white colors/neutral-80-opa-40 theme)
-     :border-color     (border-color)
-     :border-width     1
-     :border-radius    16}))
-
-(def gradient-container
-  {:position :absolute
-   :bottom   0
-   :left     0
-   :right    0
-   :z-index  1})
-
-(def gradient {:height 48})
-
-(defn line-number-container
-  [line-number-width preview? theme]
-  (cond-> {:position         :absolute
-           :bottom           0
-           :top              0
-           :left             0
-           :width            (+ line-number-width 8 7)
-           :background-color (colors/theme-colors colors/neutral-5 colors/neutral-80 theme)}
-    preview? (assoc :width            20
-                    :background-color (colors/theme-colors colors/neutral-10 colors/neutral-70 theme))))
-
-(defn divider
-  [line-number-width]
-  {:position         :absolute
-   :bottom           0
-   :top              0
-   :left             (+ line-number-width 7 7)
-   :width            1
-   :z-index          2
-   :background-color (border-color)})
-
-(def line {:flex-direction :row})
-
-(defn line-number
-  [width preview?]
-  (if preview?
-    {:width            width
-     :padding-vertical 3
-     :padding-left     8
-     :padding-right    4}
-    {:margin-right 20 ; 8+12 margin
-     :width        width}))
-
-(def line-content
-  {:flex               1
-   :padding-horizontal 8
-   :padding-vertical   3})
-
-(def copy-button
-  {:position :absolute
-   :bottom   8
-   :right    8
-   :z-index  1})
-
-(defn gradient-color [] (colors/theme-colors colors/white colors/neutral-80))
-
-(defn button-background-color
-  []
-  (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5))

src/quo2/components/code/snippet.cljs

@@ -1,8 +1,8 @@
-(ns quo2.components.code.common.view
+(ns quo2.components.code.snippet
   (:require [cljs-bean.core :as bean]
             [clojure.string :as string]
             [quo2.components.buttons.button.view :as button]
-            [quo2.components.code.common.style :as style]
+            [quo2.components.code.code.style :as style]
             [quo2.components.markdown.text :as text]
             [react-native.core :as rn]
             [react-native.linear-gradient :as linear-gradient]
@@ -10,41 +10,39 @@
             [reagent.core :as reagent]))
 
 (defn- render-nodes
-  [nodes preview?]
+  [nodes]
   (map (fn [{:keys [children value last-line?] :as node}]
          (if children
            (into [text/text
                   (cond-> {:weight :code
                            :size   :paragraph-2
-                           :style  (style/text-style (get-in node [:properties :className]) preview?)}
+                           :style  (style/text-style (get-in node [:properties :className]))}
                     last-line? (assoc :number-of-lines 1))]
-                 (render-nodes children preview?))
+                 (render-nodes children))
            ;; Remove newlines as we already render each line separately.
            (string/trim-newline value)))
        nodes))
 
 (defn- line
-  [{:keys [line-number line-number-width preview?]} children]
+  [{:keys [line-number line-number-width]} children]
   [rn/view {:style style/line}
-   [rn/view {:style (style/line-number line-number-width preview?)}
+   [rn/view {:style (style/line-number line-number-width)}
     [text/text
-     {:style  (style/text-style ["line-number"] preview?)
+     {:style  (style/text-style ["line-number"])
       :weight :code
       :size   :paragraph-2}
      line-number]]
-   (cond->> children
-     preview? (conj [rn/view {:style style/line-content}]))])
+   children])
 
 (defn- code-block
-  [{:keys [rows line-number-width preview?]}]
+  [{:keys [rows line-number-width]}]
   [rn/view
-   (->> preview?
-        (render-nodes rows)
+   (->> rows
+        (render-nodes)
         (map-indexed (fn [idx row-content]
                        [line
                         {:line-number       (inc idx)
-                         :line-number-width line-number-width
-                         :preview?          preview?}
+                         :line-number-width line-number-width}
                         row-content]))
         (into [:<>]))])
 
@@ -68,44 +66,36 @@
       (* 9 max-line-digits font-scale))))
 
 (defn- f-native-renderer
-  [{:keys [rows max-lines on-copy-press preview? theme]
+  [{:keys [rows max-lines on-copy-press]
     :or   {max-lines ##Inf}}]
   (let [font-scale          (:font-scale (rn/get-window))
         total-rows          (count rows)
-        number-rows-to-show (if preview?
-                              0
-                              (min (count rows) max-lines))
-        line-number-width   (if preview? 20 (calc-line-number-width font-scale number-rows-to-show))
+        number-rows-to-show (min (count rows) max-lines)
+        line-number-width   (calc-line-number-width font-scale number-rows-to-show)
         truncated?          (< number-rows-to-show total-rows)
         rows-to-show-coll   (if truncated?
                               (as-> rows $
                                 (update $ number-rows-to-show assoc :last-line? true)
                                 (take (inc number-rows-to-show) $))
                               rows)]
-    [rn/view {:style (style/container preview? theme)}
-     [rn/view {:style (style/line-number-container line-number-width preview? theme)}]
-     (if preview?
-       [code-block
-        {:rows              rows-to-show-coll
-         :line-number-width line-number-width
-         :preview?          preview?}]
-       [:<>
-        [rn/view {:style (style/divider line-number-width)}]
-        [mask-view {:apply-mask? truncated?}
-         [code-block
-          {:rows              rows-to-show-coll
-           :line-number-width line-number-width}]]
-        [rn/view {:style style/copy-button}
-         [button/button
-          {:icon-only? true
-           :type       :grey
-           :background :blur
-           :size       24
-           :on-press   on-copy-press}
-          :main-icons/copy]]])]))
+    [rn/view {:style (style/container)}
+     [rn/view {:style (style/line-number-container line-number-width)}]
+     [rn/view {:style (style/divider line-number-width)}]
+     [mask-view {:apply-mask? truncated?}
+      [code-block
+       {:rows              rows-to-show-coll
+        :line-number-width line-number-width}]]
+     [rn/view {:style style/copy-button}
+      [button/button
+       {:icon-only? true
+        :type       :grey
+        :background :blur
+        :size       24
+        :on-press   on-copy-press}
+       :main-icons/copy]]]))
 
-(defn view
-  [{:keys [language max-lines on-copy-press preview? theme]} children]
+(defn snippet
+  [{:keys [language max-lines on-copy-press]} children]
   [highlighter/highlighter
    {:language          language
     :renderer          (fn [^js/Object props]
@@ -113,11 +103,8 @@
                           [:f> f-native-renderer
                            {:rows          (-> props .-rows bean/->clj)
                             :on-copy-press #(when on-copy-press (on-copy-press children))
-                            :max-lines     max-lines
-                            :preview?      preview?
-                            :theme         theme}]))
+                            :max-lines     max-lines}]))
     :show-line-numbers false
     :style             {}
     :custom-style      {:background-color nil}}
    children])
-

src/quo2/components/code/snippet/view.cljs

@@ -1,15 +0,0 @@
-(ns quo2.components.code.snippet.view
-  (:require [quo2.theme :as theme]
-            [quo2.components.code.common.view :as code-common]))
-
-(defn- view-internal
-  [_]
-  (fn [{:keys [language max-lines on-copy-press]} children]
-    [code-common/view
-     {:language      language
-      :max-lines     max-lines
-      :on-copy-press on-copy-press
-      :preview?      false}
-     children]))
-
-(def view (theme/with-theme view-internal))

src/quo2/components/code/snippet_preview/view.cljs

@@ -1,11 +0,0 @@
-(ns quo2.components.code.snippet-preview.view
-  (:require [quo2.components.code.common.view :as code-common]))
-
-(defn view
-  [{:keys [language]} children]
-  [code-common/view
-   {:preview?  true
-    :language  language
-    :max-lines 0
-    :theme     :dark}
-   children])

src/quo2/components/colors/color/style.cljs

@@ -1,54 +0,0 @@
-(ns quo2.components.colors.color.style
-  (:require [quo2.foundations.colors :as colors]))
-
-(def color-button-common
-  {:width             48
-   :height            48
-   :border-width      4
-   :border-radius     24
-   :margin-horizontal 4
-   :transform         [{:rotate "45deg"}]
-   :border-color      :transparent})
-
-(defn color-button
-  [color selected?]
-  (merge color-button-common
-         (when selected?
-           {:border-top-color    (colors/alpha color 0.4)
-            :border-end-color    (colors/alpha color 0.4)
-            :border-bottom-color (colors/alpha color 0.2)
-            :border-start-color  (colors/alpha color 0.2)})))
-
-(defn color-circle
-  [color border?]
-  {:width            40
-   :height           40
-   :transform        [{:rotate "-45deg"}]
-   :background-color color
-   :justify-content  :center
-   :align-items      :center
-   :border-color     color
-   :border-width     (if border? 2 0)
-   :overflow         :hidden
-   :border-radius    20})
-
-(defn feng-shui
-  [theme]
-  {:width            40
-   :height           40
-   :transform        [{:rotate "45deg"}]
-   :overflow         :hidden
-   :border-color     (colors/theme-colors colors/neutral-100 colors/white theme)
-   :border-width     2
-   :background-color (colors/theme-colors colors/neutral-100 colors/white theme)
-   :border-radius    20})
-
-(defn left-half
-  [theme]
-  {:flex             1
-   :background-color (colors/theme-colors colors/white colors/neutral-100 theme)})
-
-(defn right-half
-  [theme]
-  {:flex             1
-   :background-color (colors/theme-colors colors/neutral-100 colors/white theme)})

src/quo2/components/colors/color/view.cljs

@@ -1,50 +0,0 @@
-(ns quo2.components.colors.color.view
-  (:require
-    [quo2.components.icon :as icon]
-    [quo2.foundations.colors :as colors]
-    [quo2.theme :as quo.theme]
-    [react-native.core :as rn]
-    [quo2.components.colors.color.style :as style]))
-
-(defn- feng-shui
-  [{:keys [color theme]}]
-  [rn/view
-   {:accessibility-label color
-    :style               (style/feng-shui theme)}
-   [rn/view {:style (style/left-half theme)}]
-   [rn/view {:style (style/right-half theme)}]])
-
-(defn- view-internal
-  [{:keys [color
-           selected?
-           on-press
-           blur?
-           theme]
-    :as   props}]
-  (let [border?   (and (not blur?) (not selected?))
-        hex-color (if (= :feng-shui color)
-                    (colors/theme-colors colors/neutral-100 colors/white theme)
-                    (colors/theme-colors (colors/custom-color color 50)
-                                         (colors/custom-color color 60)
-                                         theme))]
-
-    [rn/pressable
-     {:style               (style/color-button hex-color selected?)
-      :accessibility-label :color-picker-item
-      :on-press            #(on-press color)}
-     (if (and (= :feng-shui color) (not selected?))
-       [feng-shui
-        (assoc props
-               :hex-color hex-color
-               :border?   border?)]
-       [rn/view
-        {:accessibility-label color
-         :style               (style/color-circle hex-color border?)}
-        (when selected?
-          [icon/icon :i/check
-           {:size  20
-            :color (if (= :feng-shui color)
-                     (colors/theme-colors colors/white colors/neutral-100 theme)
-                     colors/white)}])])]))
-
-(def view (quo.theme/with-theme view-internal))

src/quo2/components/colors/color_picker/component_spec.cljs

@@ -3,6 +3,8 @@
             [reagent.core :as reagent]
             [test-helpers.component :as h]))
 
+(def color-list [:blue :yellow :turquoise :copper :sky :camel :orange :army :pink :purple :magenta])
+
 (h/describe "color-picker"
   (h/test "color picker rendered"
     (h/render [color-picker/view])
@@ -24,6 +26,6 @@
     (h/render [color-picker/view])
     (js/Promise.all (map (fn [color]
                            (h/is-truthy (h/get-all-by-label-text color)))
-                         color-picker/color-list))))
+                         color-list))))
 
 

src/quo2/components/colors/color_picker/style.cljs

@@ -0,0 +1,50 @@
+(ns quo2.components.colors.color-picker.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(def color-picker-container
+  {:flex-direction  :row
+   :flex-wrap       :wrap
+   :justify-content :space-between})
+
+(def flex-break
+  {:flex-basis "100%"
+   :height     10})
+
+(def color-button-common
+  {:width         48
+   :height        48
+   :border-width  4
+   :border-radius 24
+   :transform     [{:rotate "45deg"}]
+   :border-color  :transparent})
+
+(defn color-button
+  [color selected?]
+  (merge color-button-common
+         (when selected?
+           {:border-top-color    (colors/alpha color 0.4)
+            :border-end-color    (colors/alpha color 0.4)
+            :border-bottom-color (colors/alpha color 0.2)
+            :border-start-color  (colors/alpha color 0.2)})))
+
+(defn color-circle
+  [color border?]
+  {:width            40
+   :height           40
+   :transform        [{:rotate "-45deg"}]
+   :background-color color
+   :justify-content  :center
+   :align-items      :center
+   :border-color     color
+   :border-width     (if border? 2 0)
+   :overflow         :hidden
+   :border-radius    20})
+
+(defn secondary-overlay
+  [secondary-color border?]
+  {:width            (if border? 18 20)
+   :height           40
+   :position         :absolute
+   :right            0
+   :background-color secondary-color})
+

src/quo2/components/colors/color_picker/view.cljs

@@ -1,34 +1,77 @@
 (ns quo2.components.colors.color-picker.view
   (:require [react-native.core :as rn]
+            [quo2.foundations.colors :as colors]
+            [quo2.components.icon :as icon]
             [reagent.core :as reagent]
-            [quo2.components.colors.color.view :as color]))
+            [quo2.components.colors.color-picker.style :as style]))
 
+;; TODO: using :no-color this to keep alignment of colors correct while b & w is being developed.
+;; https://github.com/status-im/status-mobile/issues/15442
 (def color-list
-  [:blue :yellow :purple :turquoise :magenta :sky :orange :army :flamingo :camel :copper])
+  [:blue :yellow :turquoise :copper :sky :camel :orange :army :pink :purple :magenta :no-color])
+
+(defn picker-colors
+  [blur?]
+  (map (fn [color]
+         {:name  color
+          :color (colors/custom-color-by-theme color (if blur? 60 50) 60)})
+       color-list))
 
 (defn- on-change-handler
   [selected color-name on-change]
   (reset! selected color-name)
   (when on-change (on-change color-name)))
 
+(defn empty-color-item
+  []
+  [rn/view {:style style/color-button-common}])
+
+(defn- color-item
+  [{:keys [name
+           color
+           secondary-color
+           selected?
+           on-press
+           blur?]}]
+  (let [border? (and (not blur?) (and secondary-color (not selected?)))]
+    (if (= :no-color name)
+      [empty-color-item]
+      [rn/touchable-opacity
+       {:style               (style/color-button color selected?)
+        :accessibility-label :color-picker-item
+        :on-press            #(on-press name)}
+       [rn/view
+        {:accessibile         true
+         :accessibility-label name
+         :style               (style/color-circle color border?)}
+        (when (and secondary-color (not selected?))
+          [rn/view
+           {:style (style/secondary-overlay secondary-color border?)}])
+        (when selected?
+          [icon/icon :i/check
+           {:size  20
+            :color (or secondary-color
+                       colors/white)}])]])))
+
 (defn view
   "Options
-   - `default-selected` Default selected color name.
+   - `default-selected?` Default selected color name.
+   - `selected` Selected color name.
    - `on-change` Callback called when a color is selected `(fn [color-name])`.
    - `blur?` Boolean to enable blur background support.}"
-  [{:keys [default-selected]}]
-  (let [selected (reagent/atom default-selected)]
-    (fn [{:keys [blur? on-change feng-shui?]}]
-      [rn/scroll-view
-       {:horizontal                        true
-        :shows-horizontal-scroll-indicator false}
-       (doall (map (fn [color]
-                     [color/view
-                      {:selected? (= color @selected)
-                       :on-press  #(on-change-handler selected % on-change)
-                       :blur?     blur?
-                       :key       color
-                       :color     color}])
-                   ;; TODO: using :feng-shui? temporarily while b & w is being developed.
-                   ;; https://github.com/status-im/status-mobile/discussions/16676
-                   (if feng-shui? (conj color-list :feng-shui) color-list)))])))
+  [{:keys [default-selected?]}]
+  (let [internal-selected (reagent/atom default-selected?)]
+    (fn [{:keys [blur? on-change selected]}]
+      (when (and (not (nil? selected)) (not= @internal-selected selected))
+        (reset! internal-selected selected))
+      [rn/view {:style style/color-picker-container}
+       (doall (map-indexed (fn [index color]
+                             [:<> {:key (color :name)}
+                              [color-item
+                               (merge color
+                                      {:selected? (= (color :name) @internal-selected)
+                                       :on-press  #(on-change-handler internal-selected % on-change)
+                                       :blur?     blur?})]
+                              (when (= index 5) [rn/view {:style style/flex-break}])])
+                           (picker-colors blur?)))])))
+

src/quo2/components/counter/counter/style.cljs

@@ -4,9 +4,7 @@
 (defn get-color
   [type customization-color theme]
   (case type
-    :default   (colors/theme-colors (colors/custom-color customization-color 50)
-                                    (colors/custom-color customization-color 60)
-                                    theme)
+    :default   (colors/custom-color customization-color 50)
     :secondary (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)
     :grey      (colors/theme-colors colors/neutral-10 colors/neutral-80 theme)
     :outline   (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)

src/quo2/components/dropdowns/dropdown.cljs

@@ -0,0 +1,20 @@
+(ns quo2.components.dropdowns.dropdown
+  (:require [quo2.components.dropdowns.old-button-view :as old-button]))
+
+(defn dropdown
+  [_ _]
+  (fn [{:keys [on-change selected] :as opts} children]
+    ;TODO: Dropdown needs to be implemented/refactored to be its own component -
+    ;https://github.com/status-im/status-mobile/issues/16456
+    [old-button/button
+     (merge
+      opts
+      {:after                   (if selected :i/chevron-top :i/chevron-down)
+       :icon-size               12
+       :icon-container-size     14
+       :icon-container-rounded? true
+       :override-after-margins  {:left  7
+                                 :right 9}
+       :pressed                 selected
+       :on-press                #(when on-change (on-change selected))})
+     children]))

src/quo2/components/dropdowns/dropdown/component_spec.cljs

@@ -1,35 +0,0 @@
-(ns quo2.components.dropdowns.dropdown.component-spec
-  (:require [quo2.components.dropdowns.dropdown.view :as dropdown]
-            [test-helpers.component :as h]))
-
-(h/describe "Dropdown"
-  (h/test "default render"
-    (let [label "Recent"]
-      (h/render [dropdown/view {} label])
-      (h/is-truthy (h/get-by-label-text :dropdown))
-      (h/is-null (h/query-by-label-text :left-icon))
-      (h/is-truthy (h/get-by-text label))
-      (h/is-truthy (h/get-by-label-text :right-icon))))
-
-  (h/test "render with icon"
-    (let [label "Recent"]
-      (h/render [dropdown/view {:icon? true} label])
-      (h/is-truthy (h/get-by-label-text :dropdown))
-      (h/is-truthy (h/get-by-label-text :left-icon))
-      (h/is-truthy (h/get-by-text label))
-      (h/is-truthy (h/get-by-label-text :right-icon))))
-
-  (h/test "render only emoji"
-    (let [label "🍑"]
-      (h/render [dropdown/view {:emoji? true} label])
-      (h/is-truthy (h/get-by-label-text :dropdown))
-      (h/is-null (h/query-by-label-text :left-icon))
-      (h/is-truthy (h/get-by-text label))
-      (h/is-null (h/query-by-label-text :right-icon))))
-
-  (h/test "on-press"
-    (let [event (h/mock-fn)
-          label "Recent"]
-      (h/render [dropdown/view {:on-press event} label])
-      (h/fire-event :press (h/get-by-text label))
-      (h/was-called event))))

src/quo2/components/dropdowns/dropdown/properties.cljs

@@ -1,120 +0,0 @@
-(ns quo2.components.dropdowns.dropdown.properties
-  (:require [quo2.foundations.colors :as colors]))
-
-(def backgrounds #{:photo :blur})
-
-(def sizes
-  {:size-40 {:size             40
-             :icon-size        20
-             :emoji-size       20
-             :emoji-padding    10
-             :padding-vertical 9
-             :padding-left     {:default 16 :icon 12}
-             :padding-right    12
-             :border-radius    12
-             :text-size        :paragraph-1}
-   :size-32 {:size             32
-             :icon-size        20
-             :emoji-size       20
-             :emoji-padding    6
-             :padding-vertical 5
-             :padding-left     {:default 12 :icon 8}
-             :padding-right    8
-             :border-radius    10
-             :text-size        :paragraph-1}
-   :size-24 {:size             24
-             :icon-size        12
-             :emoji-size       12
-             :emoji-padding    6
-             :padding-vertical 3
-             :padding-left     {:default 8 :icon 8}
-             :padding-right    8
-             :border-radius    8
-             :text-size        :paragraph-2}})
-
-(defn- custom-color-type
-  [customization-color]
-  {:left-icon-color    colors/white-opa-70
-   :right-icon-color   colors/white-opa-20
-   :right-icon-color-2 colors/white
-   :label-color        colors/white
-   :background-color   (colors/custom-color customization-color 50)})
-
-(def sizes-to-exclude-blur-in-photo-bg #{:size-40})
-
-(defn- grey-photo
-  [theme active? size]
-  {:left-icon-color    (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
-   :right-icon-color   (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
-   :right-icon-color-2 (colors/theme-colors colors/neutral-100 colors/white theme)
-   :label-color        (colors/theme-colors colors/neutral-100 colors/white theme)
-   :blur-overlay-color (when (and (= theme :dark) (nil? (sizes-to-exclude-blur-in-photo-bg size)))
-                         (if active? colors/neutral-80-opa-50 colors/neutral-80-opa-40))
-   :blur-type          (if (= theme :light) :light :dark)
-   :background-color   (cond
-                         (= theme :light)
-                         (if active? colors/white-opa-50 colors/white-opa-40)
-
-                         (and (= theme :dark) (sizes-to-exclude-blur-in-photo-bg size))
-                         (if active? colors/neutral-80-opa-50 colors/neutral-80-opa-40))})
-
-(defn- grey-blur
-  [theme active?]
-  {:left-icon-color    (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-70 theme)
-   :right-icon-color   (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
-   :right-icon-color-2 (colors/theme-colors colors/neutral-100 colors/white theme)
-   :label-color        (colors/theme-colors colors/neutral-100 colors/white theme)
-   :background-color   (if active?
-                         (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 active?]
-  {:left-icon-color    (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
-   :right-icon-color   (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
-   :right-icon-color-2 (colors/theme-colors colors/neutral-100 colors/white theme)
-   :label-color        (colors/theme-colors colors/neutral-100 colors/white theme)
-   :border-color       (if active?
-                         (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- outline
-  [theme active?]
-  {:left-icon-color    (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
-   :right-icon-color   (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
-   :right-icon-color-2 (colors/theme-colors colors/neutral-100 colors/white theme)
-   :label-color        (colors/theme-colors colors/neutral-100 colors/white theme)
-   :border-color       (if active?
-                         (colors/theme-colors colors/neutral-40 colors/neutral-60 theme)
-                         (colors/theme-colors colors/neutral-30 colors/neutral-70 theme))})
-
-(defn- grey
-  [theme active?]
-  {:left-icon-color    (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
-   :right-icon-color   (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
-   :right-icon-color-2 (colors/theme-colors colors/neutral-100 colors/white theme)
-   :label-color        (colors/theme-colors colors/neutral-100 colors/white theme)
-   :background-color   (if active?
-                         (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
-                         (colors/theme-colors colors/neutral-5 colors/neutral-90 theme))})
-
-(defn- ghost
-  [theme active?]
-  {:left-icon-color    (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
-   :right-icon-color   (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
-   :right-icon-color-2 (colors/theme-colors colors/neutral-100 colors/white theme)
-   :label-color        (colors/theme-colors colors/neutral-100 colors/white theme)
-   :background-color   (when active?
-                         (colors/theme-colors colors/neutral-10 colors/neutral-80 theme))})
-
-(defn get-colors
-  [{:keys [customization-color theme type state background size]}]
-  (let [active? (= state :active)]
-    (cond
-      (and (= background :photo) (= type :grey))   (grey-photo theme active? size)
-      (and (= background :blur) (= type :grey))    (grey-blur theme active?)
-      (and (= background :blur) (= type :outline)) (outline-blur theme active?)
-      (= type :outline)                            (outline theme active?)
-      (= type :grey)                               (grey theme active?)
-      (= type :ghost)                              (ghost theme active?)
-      (= type :customization)                      (custom-color-type customization-color))))

src/quo2/components/dropdowns/dropdown/style.cljs

@@ -1,53 +0,0 @@
-(ns quo2.components.dropdowns.dropdown.style)
-
-(def gap 4)
-
-(def blur-view
-  {:position :absolute
-   :top      0
-   :left     0
-   :right    0
-   :bottom   0})
-
-(def left-icon
-  {:margin-right gap})
-
-(defn right-icon
-  [label-color]
-  {:color        label-color
-   :margin-right gap})
-
-(defn- add-styles-for-emoji
-  [style size emoji-padding]
-  (-> style
-      (dissoc :padding-vertical :padding-left :padding-right)
-      (assoc :width   size
-             :padding emoji-padding)))
-
-(defn root-container
-  [{:keys [size border-radius padding-vertical padding-right padding-left emoji-padding]}
-   {:keys [background-color border-color]}
-   {:keys [icon? emoji? state]}]
-  (cond-> {:height           size
-           :align-items      :center
-           :justify-content  :center
-           :flex-direction   :row
-           :padding-vertical padding-vertical
-           :padding-left     (:default padding-left)
-           :padding-right    padding-right
-           :overflow         :hidden
-           :background-color background-color
-           :border-radius    border-radius}
-
-    icon?
-    (assoc :padding-left (:icon padding-left))
-
-    emoji?
-    (add-styles-for-emoji size emoji-padding)
-
-    border-color
-    (assoc :border-color border-color
-           :border-width 1)
-
-    (= state :disabled)
-    (assoc :opacity 0.3)))

src/quo2/components/dropdowns/dropdown/view.cljs

@@ -1,87 +0,0 @@
-(ns quo2.components.dropdowns.dropdown.view
-  (:require [quo2.components.dropdowns.dropdown.properties :as properties]
-            [quo2.components.dropdowns.dropdown.style :as style]
-            [quo2.components.icon :as icon]
-            [quo2.components.markdown.text :as text]
-            [quo2.foundations.customization-colors :as customization-colors]
-            [quo2.theme :as theme]
-            [react-native.blur :as blur]
-            [react-native.core :as rn]))
-
-(defn- view-internal
-  [{:keys [type size state background customization-color theme on-press icon-name icon? emoji?
-           accessibility-label]
-    :or   {type      :grey
-           size      :size-40
-           state     :default
-           icon?     false
-           emoji?    false
-           icon-name :i/placeholder}
-    :as   props}
-   text]
-  (let [{:keys [icon-size text-size emoji-size border-radius]
-         :as   size-properties} (properties/sizes size)
-        {:keys [left-icon-color right-icon-color right-icon-color-2 label-color blur-type
-                blur-overlay-color]
-         :as   colors}          (properties/get-colors props)
-        right-icon              (if (= state :active) :i/pullup :i/dropdown)
-        customization-type?     (= type :customization)
-        show-blur-background?   (and (= background :photo)
-                                     (= type :grey)
-                                     (nil? (properties/sizes-to-exclude-blur-in-photo-bg size)))]
-    [rn/pressable
-     {:accessibility-label (or accessibility-label :dropdown)
-      :disabled            (= state :disabled)
-      :on-press            on-press
-      :style               (style/root-container size-properties colors props)}
-     (when show-blur-background?
-       [blur/view
-        {:blur-radius   20
-         :blur-type     blur-type
-         :overlay-color blur-overlay-color
-         :style         style/blur-view}])
-     (when customization-type?
-       [customization-colors/overlay
-        {:customization-color customization-color
-         :theme               theme
-         :pressed?            (= state :active)
-         :border-radius       border-radius}])
-     (if emoji?
-       [rn/text
-        {:adjusts-font-size-to-fit true
-         :style                    {:font-size emoji-size}}
-        text]
-       [:<>
-        (when icon?
-          [icon/icon
-           icon-name
-           {:accessibility-label :left-icon
-            :color               left-icon-color
-            :size                icon-size
-            :container-style     style/left-icon}])
-        [text/text
-         {:size            text-size
-          :weight          :medium
-          :number-of-lines 1
-          :style           (style/right-icon label-color)}
-         text]
-        [icon/icon
-         right-icon
-         {:size                icon-size
-          :accessibility-label :right-icon
-          :color               right-icon-color
-          :color-2             right-icon-color-2}]])]))
-
-(def view
-  "Props:
-    - type:       :outline |:grey (default) | :ghost | :customization
-    - size:       :size-40 (default) | :size-32 | :size-24
-    - state:      :default (default) | :active | :disabled
-    - emoji?:     boolean
-    - icon?:      boolean
-    - background: :blur | :photo (optional)
-    - icon-name:  keyword
-    - on-press:   function
-   
-    Child: string - used as label or emoji (for emoji only)"
-  (theme/with-theme view-internal))

src/quo2/components/dropdowns/network_dropdown/style.cljs

@@ -4,10 +4,10 @@
 (defn container-border-color
   [{:keys [state blur? theme pressed?]}]
   (let [default-color (if blur?
-                        (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)
+                        colors/neutral-80-opa-5
                         (colors/theme-colors colors/neutral-30 colors/neutral-70 theme))
         active-color  (if blur?
-                        (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
+                        colors/neutral-80-opa-10
                         (colors/theme-colors colors/neutral-40 colors/neutral-60 theme))]
     (condp = state
       :disabled default-color

src/quo2/components/dropdowns/network_dropdown/view.cljs

@@ -20,7 +20,7 @@
        [preview-list/view
         {:type      :network
          :list-size (count networks)
-         :size      :size-20}
+         :size      :size/s-20}
         networks]])))
 
 (def view (quo.theme/with-theme internal-view))

src/quo2/components/dropdowns/old_button_style.cljs

@@ -0,0 +1,264 @@
+(ns quo2.components.dropdowns.old-button-style
+  (:require [quo2.foundations.colors :as colors]))
+
+(def blur-view
+  {:position :absolute
+   :top      0
+   :left     0
+   :right    0
+   :bottom   0})
+
+(defn before-icon-style
+  [{:keys [override-margins size icon-container-size icon-background-color icon-container-rounded?
+           icon-size]}]
+  (merge
+   {:margin-left     (or (get override-margins :left)
+                         (if (= size 40) 12 8))
+    :margin-right    (or (get override-margins :right) 4)
+    :align-items     :center
+    :justify-content :center}
+   (when icon-container-size
+     {:width  icon-container-size
+      :height icon-container-size})
+   (when icon-background-color
+     {:background-color icon-background-color})
+   (when icon-container-rounded?
+     {:border-radius (/ (or icon-container-size icon-size) 2)})))
+
+(defn after-icon-style
+  [{:keys [override-margins size icon-container-size icon-background-color icon-container-rounded?
+           icon-size]}]
+  (merge
+   {:margin-left     (or (get override-margins :left) 4)
+    :margin-right    (or (get override-margins :right)
+                         (if (= size 40) 12 8))
+    :align-items     :center
+    :justify-content :center}
+   (when icon-container-size
+     {:width  icon-container-size
+      :height icon-container-size})
+   (when icon-background-color
+     {:background-color icon-background-color})
+   (when icon-container-rounded?
+     {:border-radius (/ (or icon-container-size icon-size) 2)})))
+
+(defn themes
+  [customization-color]
+  {:light
+   {:primary         {:icon-color           colors/white
+                      :icon-secondary-color colors/white-opa-70
+                      :label-color          colors/white
+                      :background-color     {:default  (colors/custom-color customization-color 50)
+                                             :pressed  (colors/custom-color customization-color 60)
+                                             :disabled (colors/custom-color customization-color 50)}}
+    :secondary       {:icon-color       colors/primary-50
+                      :label-color      colors/primary-50
+                      :background-color {:default  colors/primary-50-opa-20
+                                         :pressed  colors/primary-50-opa-40
+                                         :disabled colors/primary-50-opa-20}}
+    :grey            {:icon-color           colors/neutral-100
+                      :icon-secondary-color colors/neutral-50
+                      :label-color          colors/neutral-100
+                      :background-color     {:default  colors/neutral-10
+                                             :pressed  colors/neutral-20
+                                             :disabled colors/neutral-10}}
+    :dark-grey       {:icon-color           colors/neutral-100
+                      :icon-secondary-color colors/neutral-50
+                      :label-color          colors/neutral-100
+                      :background-color     {:default  colors/neutral-20
+                                             :pressed  colors/neutral-30
+                                             :disabled colors/neutral-20}}
+    :outline         {:icon-color           colors/neutral-50
+                      :icon-secondary-color colors/neutral-50
+                      :label-color          colors/neutral-100
+                      :border-color         {:default  colors/neutral-30
+                                             :pressed  colors/neutral-40
+                                             :disabled colors/neutral-30}}
+    :ghost           {:icon-color           colors/neutral-50
+                      :icon-secondary-color colors/neutral-50
+                      :label-color          colors/neutral-100
+                      :background-color     {:pressed colors/neutral-10}}
+    :danger          {:icon-color           colors/white
+                      :icon-secondary-color colors/white-opa-70
+                      :label-color          colors/white
+                      :background-color     {:default  colors/danger-50
+                                             :pressed  colors/danger-60
+                                             :disabled colors/danger-50}}
+    :positive        {:icon-color           colors/white
+                      :icon-secondary-color colors/white-opa-70
+                      :label-color          colors/white
+                      :background-color     {:default  colors/success-50
+                                             :pressed  colors/success-60
+                                             :disabled colors/success-50-opa-30}}
+    :photo-bg        {:icon-color           colors/neutral-100
+                      :icon-secondary-color colors/neutral-80-opa-40
+                      :label-color          colors/neutral-100
+                      :background-color     {:default  colors/white-opa-40
+                                             :pressed  colors/white-opa-50
+                                             :disabled colors/white-opa-40}}
+    :blur-bg         {:icon-color           colors/neutral-100
+                      :icon-secondary-color colors/neutral-80-opa-40
+                      :label-color          colors/neutral-100
+                      :background-color     {:default  colors/neutral-80-opa-5
+                                             :pressed  colors/neutral-80-opa-10
+                                             :disabled colors/neutral-80-opa-5}}
+    :blurred         {:icon-color            colors/neutral-100
+                      :icon-secondary-color  colors/neutral-100
+                      :icon-background-color {:default colors/neutral-20
+                                              :blurred colors/neutral-80-opa-10}
+                      :label-color           colors/neutral-100
+                      :background-color      {:default  colors/neutral-10
+                                              :pressed  colors/neutral-10
+                                              :disabled colors/neutral-10-opa-10-blur}
+                      :blur-overlay-color    colors/neutral-10-opa-40-blur
+                      :blur-type             :light}
+    :blur-bg-outline {:icon-color           colors/neutral-100
+                      :icon-secondary-color colors/neutral-80-opa-40
+                      :label-color          colors/neutral-100
+                      :border-color         {:default  colors/neutral-80-opa-10
+                                             :pressed  colors/neutral-80-opa-20
+                                             :disabled colors/neutral-80-opa-10}}
+    :shell           {:icon-color       colors/white
+                      :label-color      colors/white
+                      :background-color {:default  colors/neutral-95
+                                         :pressed  colors/neutral-95
+                                         :disabled colors/neutral-95}}}
+   :dark
+   {:primary         {:icon-color           colors/white
+                      :icon-secondary-color colors/white-opa-70
+                      :label-color          colors/white
+                      :background-color     {:default  (colors/custom-color customization-color 60)
+                                             :pressed  (colors/custom-color customization-color 50)
+                                             :disabled (colors/custom-color customization-color 60)}}
+    :secondary       {:icon-color       colors/primary-50
+                      :label-color      colors/primary-50
+                      :background-color {:default  colors/primary-50-opa-20
+                                         :pressed  colors/primary-50-opa-30
+                                         :disabled colors/primary-50-opa-20}}
+    :grey            {:icon-color           colors/white
+                      :icon-secondary-color colors/neutral-40
+                      :label-color          colors/white
+                      :background-color     {:default  colors/neutral-90
+                                             :pressed  colors/neutral-60
+                                             :disabled colors/neutral-90}}
+    :dark-grey       {:icon-color           colors/white
+                      :icon-secondary-color colors/neutral-40
+                      :label-color          colors/white
+                      :background-color     {:default  colors/neutral-70
+                                             :pressed  colors/neutral-60
+                                             :disabled colors/neutral-70}}
+    :outline         {:icon-color           colors/neutral-40
+                      :icon-secondary-color colors/neutral-40
+                      :label-color          colors/white
+                      :border-color         {:default  colors/neutral-70
+                                             :pressed  colors/neutral-60
+                                             :disabled colors/neutral-70}}
+    :ghost           {:icon-color           colors/neutral-40
+                      :icon-secondary-color colors/neutral-40
+                      :label-color          colors/white
+                      :background-color     {:pressed colors/neutral-80}}
+    :danger          {:icon-color           colors/white
+                      :icon-secondary-color colors/white-opa-70
+                      :label-color          colors/white
+                      :background-color     {:default  colors/danger-60
+                                             :pressed  colors/danger-50
+                                             :disabled colors/danger-60}}
+    :positive        {:icon-color           colors/white
+                      :icon-secondary-color colors/white-opa-70
+                      :label-color          colors/white
+                      :background-color     {:default  colors/success-60
+                                             :pressed  colors/success-50
+                                             :disabled colors/success-60-opa-30}}
+    :photo-bg        {:icon-color           colors/white
+                      :icon-secondary-color colors/neutral-30
+                      :label-color          colors/white
+                      :background-color     {:default  colors/neutral-80-opa-40
+                                             :pressed  colors/neutral-80-opa-50
+                                             :disabled colors/neutral-80-opa-40}}
+    :blur-bg         {:icon-color           colors/white
+                      :icon-secondary-color colors/white-opa-70
+                      :label-color          colors/white
+                      :background-color     {:default  colors/white-opa-5
+                                             :pressed  colors/white-opa-10
+                                             :disabled colors/white-opa-5}}
+    :blurred         {:icon-color            colors/white
+                      :icon-secondary-color  colors/white
+                      :icon-background-color {:default colors/neutral-80
+                                              :blurred colors/white-opa-10}
+                      :label-color           colors/white
+                      :background-color      {:default  colors/neutral-90
+                                              :pressed  colors/neutral-90
+                                              :disabled colors/neutral-90-opa-10-blur}
+                      :blur-overlay-color    colors/neutral-80-opa-40
+                      :blur-type             :dark}
+    :blur-bg-outline {:icon-color           colors/white
+                      :icon-secondary-color colors/white-opa-40
+                      :label-color          colors/white
+                      :border-color         {:default  colors/white-opa-10
+                                             :pressed  colors/white-opa-20
+                                             :disabled colors/white-opa-5}}
+    :shell           {:icon-color       colors/white
+                      :label-color      colors/white
+                      :background-color {:default colors/neutral-95}}}})
+
+(defn shape-style-container
+  [type icon size]
+  {:height        size
+   :border-radius (if (and icon (#{:primary :secondary :danger} type))
+                    24
+                    (case size
+                      56 12
+                      40 12
+                      32 10
+                      24 8))})
+
+(defn style-container
+  [{:keys [type size disabled background-color border-color icon above width before after blur-active?]}]
+  (merge {:height             size
+          :align-items        :center
+          :justify-content    :center
+          :flex-direction     (if above :column :row)
+          :padding-horizontal (when-not (or icon before after)
+                                (case size
+                                  56 16
+                                  40 16
+                                  32 12
+                                  24 8))
+          :padding-left       (when-not (or icon before)
+                                (case size
+                                  56 16
+                                  40 16
+                                  32 12
+                                  24 8))
+          :padding-right      (when-not (or icon after)
+                                (case size
+                                  56 16
+                                  40 16
+                                  32 12
+                                  24 8))
+          :padding-top        (when-not (or icon before after)
+                                (case size
+                                  56 0
+                                  40 9
+                                  32 5
+                                  24 3))
+          :padding-bottom     (when-not (or icon before after)
+                                (case size
+                                  56 0
+                                  40 9
+                                  32 5
+                                  24 4))
+          :overflow           :hidden}
+         (when (or (and (= type :blurred) (not blur-active?))
+                   (not= type :blurred))
+           {:background-color background-color})
+         (shape-style-container type icon size)
+         (when width
+           {:width width})
+         (when icon
+           {:width size})
+         (when border-color
+           {:border-color border-color
+            :border-width 1})
+         (when disabled
+           {:opacity 0.3})))

src/quo2/components/dropdowns/old_button_view.cljs

@@ -0,0 +1,138 @@
+(ns quo2.components.dropdowns.old-button-view
+  (:require [quo2.components.icon :as quo2.icons]
+            [quo2.components.markdown.text :as text]
+            [quo2.theme :as theme]
+            [react-native.core :as rn]
+            [react-native.blur :as blur]
+            [reagent.core :as reagent]
+            [quo2.components.dropdowns.old-button-style :as style]))
+
+(defn- button-internal
+  "with label
+   [button opts \"label\"]
+   opts
+   {:type   :primary/:secondary/:grey/:dark-grey/:outline/:ghost/
+            :danger/:photo-bg/:blur-bg/:blur-bg-outline/:shell/:community
+    :size   40 [default] /32/24
+    :icon   true/false
+    :community-color '#FFFFFF'
+    :community-text-color '#000000'
+    :before :icon-keyword
+    :after  :icon-keyword}
+
+   only icon
+   [button {:icon true} :i/close-circle]"
+  [_ _]
+  (let [pressed-in (reagent/atom false)]
+    (fn
+      [{:keys [on-press disabled type size before after above icon-secondary-no-color
+               width customization-color theme override-background-color pressed
+               on-long-press accessibility-label icon icon-no-color style inner-style test-ID
+               blur-active? override-before-margins override-after-margins icon-size icon-container-size
+               icon-container-rounded?]
+        :or   {type                :primary
+               size                40
+               customization-color :primary
+               blur-active?        true}}
+       children]
+      (let [{:keys [icon-color icon-secondary-color background-color label-color border-color blur-type
+                    blur-overlay-color icon-background-color]}
+            (get-in (style/themes customization-color)
+                    [theme type])
+            state (cond disabled                 :disabled
+                        (or @pressed-in pressed) :pressed
+                        :else                    :default)
+            blur-state (if blur-active? :blurred :default)
+            icon-size (or icon-size (when (= 24 size) 12))
+            icon-secondary-color (or icon-secondary-color icon-color)]
+        [rn/touchable-without-feedback
+         (merge {:test-ID             test-ID
+                 :disabled            disabled
+                 :accessibility-label accessibility-label
+                 :on-press-in         #(reset! pressed-in true)
+                 :on-press-out        #(reset! pressed-in nil)}
+                (when on-press
+                  {:on-press on-press})
+                (when on-long-press
+                  {:on-long-press on-long-press}))
+         [rn/view
+          {:style (merge
+                   (style/shape-style-container type icon size)
+                   {:width width}
+                   style)}
+          [rn/view
+           {:style (merge
+                    (style/style-container {:type type
+                                            :size size
+                                            :disabled disabled
+                                            :background-color
+                                            (or override-background-color (get background-color state))
+                                            :border-color
+                                            (get border-color state)
+                                            :icon icon
+                                            :above above
+                                            :width width
+                                            :before before
+                                            :after after
+                                            :blur-active? blur-active?})
+                    (when (= state :pressed) {:opacity 0.9})
+                    inner-style)}
+           (when (and (= type :blurred)
+                      blur-active?)
+             [blur/view
+              {:blur-radius   20
+               :blur-type     blur-type
+               :overlay-color blur-overlay-color
+               :style         style/blur-view}])
+           (when above
+             [rn/view
+              [quo2.icons/icon above
+               {:container-style {:margin-bottom 2}
+                :color           icon-secondary-color
+                :size            icon-size}]])
+           (when before
+             [rn/view
+              {:style (style/before-icon-style
+                       {:override-margins        override-before-margins
+                        :size                    size
+                        :icon-container-size     icon-container-size
+                        :icon-background-color   (get icon-background-color blur-state)
+                        :icon-container-rounded? icon-container-rounded?
+                        :icon-size               icon-size})}
+              [quo2.icons/icon before
+               {:color icon-secondary-color
+                :size  icon-size}]])
+           [rn/view
+            (cond
+              (or icon icon-no-color)
+              [quo2.icons/icon children
+               {:color    icon-color
+                :no-color icon-no-color
+                :size     icon-size}]
+
+              (string? children)
+              [text/text
+               {:size            (when (#{56 24} size) :paragraph-2)
+                :weight          :medium
+                :number-of-lines 1
+                :style           {:color label-color}}
+
+               children]
+
+              (vector? children)
+              children)]
+           (when after
+             [rn/view
+              {:style (style/after-icon-style
+                       {:override-margins        override-after-margins
+                        :size                    size
+                        :icon-container-size     icon-container-size
+                        :icon-background-color   (get icon-background-color blur-state)
+                        :icon-container-rounded? icon-container-rounded?
+                        :icon-size               icon-size})}
+              [quo2.icons/icon after
+               {:no-color icon-secondary-no-color
+                :color    icon-secondary-color
+                :size     icon-size}]])]]]))))
+
+(def button (theme/with-theme button-internal))

src/quo2/components/icons/svg.cljs

@@ -21,92 +21,21 @@
         children))
 
 (defn- clear-20
-  [{:keys [color color-2]
-    :or   {color   colors/neutral-100
-           color-2 colors/white}
-    :as   props}]
-  [container props
-   [svg/path
-    {:d
-     "M3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10Z"
-     :fill color}]
-   [svg/path
-    {:d
-     "M9.15142 9.99998L7.07566 12.0757L7.9242 12.9243L9.99994 10.8485L12.0757 12.9242L12.9242 12.0757L10.8485 9.99998L12.9242 7.92421L12.0757 7.07568L9.99994 9.15145L7.92421 7.07572L7.07568 7.92425L9.15142 9.99998Z"
-     :fill color-2}]])
-
-(defn- dropdown-20
-  [{:keys [color color-2]
-    :or   {color   colors/neutral-100
-           color-2 colors/white}
-    :as   props}]
-  [container props
-   [svg/path
-    {:d
-     "M3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10Z"
-     :fill color}]
-   [svg/path
-    {:d
-     "M7 8.5L10 11.5L13 8.5"
-     :stroke color-2
-     :stroke-width 1.2}]])
-
-(defn- pullup-20
-  [{:keys [color color-2]
-    :or   {color   colors/neutral-100
-           color-2 colors/white}
-    :as   props}]
-  [container props
-   [svg/path
-    {:d
-     "M3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10Z"
-     :fill color}]
-   [svg/path
-    {:d
-     "M7 11.5L10 8.5L13 11.5"
-     :stroke color-2
-     :stroke-width 1.2}]])
-
-(defn- dropdown-12
-  [{:keys [color color-2]
-    :or   {color   colors/neutral-100
-           color-2 colors/white}
-    :as   props}]
-  [container props
-   [svg/circle
-    {:cx   6
-     :cy   6
-     :r    6
-     :fill color}]
-   [svg/path
-    {:d
-     "M3.5 5L6 7.5L8.5 5"
-     :stroke color-2
-     :stroke-width 1.1}]])
-
-(defn- pullup-12
-  [{:keys [color color-2]
-    :or   {color   colors/neutral-100
-           color-2 colors/white}
-    :as   props}]
-  [container props
-   [svg/circle
-    {:cx   6
-     :cy   6
-     :r    6
-     :fill color}]
-   [svg/path
-    {:d
-     "M3.5 7L6 4.5L8.5 7"
-     :stroke color-2
-     :stroke-width 1.1}]])
+  [{:keys [color color-2] :as props}]
+  (let [color   (or color colors/neutral-100)
+        color-2 (or color-2 colors/white)]
+    [container props
+     [svg/path
+      {:d
+       "M3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10Z"
+       :fill color}]
+     [svg/path
+      {:d
+       "M9.15142 9.99998L7.07566 12.0757L7.9242 12.9243L9.99994 10.8485L12.0757 12.9242L12.9242 12.0757L10.8485 9.99998L12.9242 7.92421L12.0757 7.07568L9.99994 9.15145L7.92421 7.07572L7.07568 7.92425L9.15142 9.99998Z"
+       :fill color-2}]]))
 
 (def ^:private icons
-  {:i/clear-20    clear-20
-   :i/dropdown-20 dropdown-20
-   :i/pullup-20   pullup-20
-   :i/dropdown-12 dropdown-12
-   :i/pullup-12   pullup-12})
+  {:i/clear-20 clear-20})
 
 (defn- append-to-keyword
   [k & xs]

src/quo2/components/list_items/account/component_spec.cljs

@@ -1,86 +0,0 @@
-(ns quo2.components.list-items.account.component-spec
-  (:require [test-helpers.component :as h]
-            [quo2.components.list-items.account.view :as account]
-            [quo2.foundations.colors :as colors]))
-
-(h/describe "List items: account"
-  (h/test "default render'"
-    (h/render [account/view])
-    (h/is-truthy (h/query-by-label-text :container)))
-
-  (h/test "on-press-in changes state to :pressed"
-    (h/render [account/view])
-    (h/fire-event :on-press-in (h/get-by-label-text :container))
-    (h/wait-for #(h/has-style (h/query-by-label-text :container)
-                              {:backgroundColor (colors/custom-color :blue 50 5)})))
-
-  (h/test "on-press-in changes state to :pressed with blur? enabled"
-    (h/render [account/view {:blur? true}])
-    (h/fire-event :on-press-in (h/get-by-label-text :container))
-    (h/wait-for #(h/has-style (h/query-by-label-text :container)
-                              {:backgroundColor colors/white-opa-5})))
-
-  (h/test "on-press-out changes state to :active"
-    (h/render [account/view])
-    (h/fire-event :on-press-in (h/get-by-label-text :container))
-    (h/fire-event :on-press-out (h/get-by-label-text :container))
-    (h/wait-for #(h/has-style (h/query-by-label-text :container)
-                              {:backgroundColor (colors/custom-color :blue 50 10)})))
-
-  (h/test "on-press-out changes state to :active with blur? enabled"
-    (h/render [account/view {:blur? true}])
-    (h/fire-event :on-press-in (h/get-by-label-text :container))
-    (h/fire-event :on-press-out (h/get-by-label-text :container))
-    (h/wait-for #(h/has-style (h/query-by-label-text :container)
-                              {:backgroundColor colors/white-opa-10})))
-
-  (h/test "on-press-out changes state to :selected"
-    (h/render [account/view {:selectable? true}])
-    (h/fire-event :on-press-in (h/get-by-label-text :container))
-    (h/fire-event :on-press-out (h/get-by-label-text :container))
-    (h/wait-for #(h/is-truthy (h/query-by-label-text :check-icon))))
-
-  (h/test "on-press-out calls on-press"
-    (let [on-press (h/mock-fn)]
-      (h/render [account/view {:on-press on-press}])
-      (h/fire-event :on-press-in (h/get-by-label-text :container))
-      (h/fire-event :on-press-out (h/get-by-label-text :container))
-      (h/was-called on-press)))
-
-  (h/test "renders token props if type :tag"
-    (h/render [account/view {:type :tag}])
-    (h/is-truthy (h/query-by-label-text :tag-container)))
-
-  (h/test "renders keycard icon if title-icon? is true"
-    (h/render [account/view {:title-icon? true}])
-    (h/is-truthy (h/query-by-label-text :keycard-icon)))
-
-  (h/test "doesn't render keycard icon if title-icon? is false"
-    (h/render [account/view])
-    (h/is-falsy (h/query-by-label-text :keycard-icon)))
-
-  (h/test "renders balance container but not arrow icon if type :balance-neutral"
-    (h/render [account/view {:type :balance-neutral}])
-    (h/is-truthy (h/query-by-label-text :balance-container))
-    (h/is-falsy (h/query-by-label-text :arrow-icon)))
-
-  (h/test "renders balance container and negative arrow icon if type :balance-negative"
-    (h/render [account/view {:type :balance-negative}])
-    (h/is-truthy (h/query-by-label-text :balance-container))
-    (h/is-truthy (h/query-by-label-text :icon-negative))
-    (h/is-falsy (h/query-by-label-text :icon-positive)))
-
-  (h/test "renders balance container and positive arrow icon if type :balance-positive"
-    (h/render [account/view {:type :balance-positive}])
-    (h/is-truthy (h/query-by-label-text :balance-container))
-    (h/is-falsy (h/query-by-label-text :icon-negative))
-    (h/is-truthy (h/query-by-label-text :icon-positive)))
-
-  (h/test "renders options button if type :action"
-    (let [on-options-press (h/mock-fn)]
-      (h/render [account/view
-                 {:type             :action
-                  :on-options-press on-options-press}])
-      (h/is-truthy (h/query-by-label-text :options-button))
-      (h/fire-event :on-press (h/get-by-label-text :options-button))
-      (h/was-called on-options-press))))

src/quo2/components/list_items/account/style.cljs

@@ -1,110 +0,0 @@
-(ns quo2.components.list-items.account.style
-  (:require [quo2.foundations.colors :as colors]))
-
-(defn- background-color
-  [{:keys [state blur? customization-color]}]
-  (cond (or (= state :pressed) (= state :selected))
-        (if blur? colors/white-opa-5 (colors/custom-color customization-color 50 5))
-        (= state :active)
-        (if blur? colors/white-opa-10 (colors/custom-color customization-color 50 10))
-        (and (= state :pressed) blur?) colors/white-opa-10
-        :else :transparent))
-
-(defn container
-  [props]
-  {:height             56
-   :border-radius      12
-   :background-color   (background-color props)
-   :flex-direction     :row
-   :align-items        :center
-   :padding-horizontal 12
-   :padding-vertical   6
-   :justify-content    :space-between})
-
-(def left-container
-  {:flex-direction :row
-   :align-items    :center})
-
-(defn metric-text
-  [type theme]
-  {:color (case type
-            :balance-positive (colors/theme-colors colors/success-50 colors/success-60 theme)
-            :balance-negative (colors/theme-colors colors/danger-50 colors/danger-60 theme)
-            (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))})
-
-(defn dot-divider
-  [type theme]
-  {:width             2
-   :height            2
-   :border-radius     2
-   :margin-horizontal 4
-   :background-color  (case type
-                        :balance-positive (colors/theme-colors colors/success-50-opa-40
-                                                               colors/success-60-opa-40
-                                                               theme)
-                        :balance-negative (colors/theme-colors colors/danger-50-opa-40
-                                                               colors/danger-50-opa-40
-                                                               theme)
-                        (colors/theme-colors colors/neutral-80-opa-40 colors/neutral-50-opa-40 theme))})
-
-(defn arrow-icon
-  [type theme]
-  {:size  16
-   :color (if (= type :balance-positive)
-            (colors/theme-colors colors/success-50 colors/success-60 theme)
-            (colors/theme-colors colors/danger-50 colors/danger-60 theme))})
-
-(def arrow-icon-container
-  {:margin-left 4})
-
-(def account-container
-  {:margin-left 8})
-
-(def account-title-container
-  {:flex-direction :row
-   :height         22
-   :align-items    :center})
-
-(defn account-address
-  [blur? theme]
-  {:height 18
-   :color  (if blur?
-             colors/white-opa-40
-             (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))})
-
-(def keycard-icon-container
-  {:margin-left 4})
-
-(def token-tag-container
-  {:height      40
-   :padding-top 4})
-
-(defn token-tag-text-container
-  [blur? theme]
-  {:flex-direction     :row
-   :align-items        :center
-   :height             16
-   :padding-horizontal 3
-   :border-width       1
-   :border-radius      6
-   :border-color       (if blur?
-                         colors/white-opa-10
-                         (colors/theme-colors colors/neutral-20
-                                              colors/neutral-80
-                                              theme))})
-
-(defn token-tag-text
-  [blur? theme]
-  {:margin-top -1
-   :color      (if blur?
-                 colors/white-opa-70
-                 (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))})
-
-(def balance-container
-  {:align-items     :flex-end
-   :justify-content :space-between})
-
-(def metrics-container
-  {:flex-direction :row
-   :align-items    :center
-   :margin-top     2})

src/quo2/components/list_items/account/view.cljs

@@ -1,155 +0,0 @@
-(ns quo2.components.list-items.account.view
-  (:require [quo2.components.avatars.account-avatar.view :as account-avatar]
-            [quo2.components.markdown.text :as text]
-            [quo2.foundations.colors :as colors]
-            [quo2.theme :as quo.theme]
-            [react-native.core :as rn]
-            [quo2.components.list-items.account.style :as style]
-            [reagent.core :as reagent]
-            [quo2.components.icon :as icon]))
-
-(defn- account-view
-  [{:keys [account-props title-icon? blur? theme]
-    :or   {title-icon? false}}]
-  [rn/view {:style style/left-container}
-   [account-avatar/view (assoc account-props :size 32)]
-   [rn/view {:style style/account-container}
-    [rn/view
-     {:style style/account-title-container}
-     [text/text
-      {:weight :semi-bold
-       :size   :paragraph-1}
-      (:name account-props)]
-     (when title-icon?
-       [rn/view
-        {:style               style/keycard-icon-container
-         :accessibility-label :keycard-icon}
-        [icon/icon :i/keycard
-         {:size  20
-          :color (if blur?
-                   colors/white-opa-40
-                   (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}]])]
-    [text/text {:size :paragraph-2}
-     [text/text
-      {:size   :paragraph-2
-       :weight :monospace
-       :style  (style/account-address blur? theme)}
-      (:address account-props)]]]])
-
-(defn- balance-view
-  [{:keys [balance-props type theme]}]
-  [rn/view
-   {:style               style/balance-container
-    :accessibility-label :balance-container}
-   [text/text
-    {:weight :medium
-     :size   :paragraph-2}
-    (:fiat-value balance-props)]
-   [rn/view
-    {:style style/metrics-container}
-    [text/text
-     {:size  :paragraph-2
-      :style (style/metric-text type theme)}
-     (str (:percentage-change balance-props) "%")]
-    [rn/view {:style (style/dot-divider type theme)}]
-    [text/text
-     {:size  :paragraph-2
-      :style (style/metric-text type theme)}
-     (:fiat-change balance-props)]
-    (when (not= type :balance-neutral)
-      [rn/view
-       {:style               style/arrow-icon-container
-        :accessibility-label :arrow-icon}
-       [icon/icon (if (= type :balance-positive) :i/positive :i/negative)
-        (assoc (style/arrow-icon type theme)
-               :accessibility-label
-               (if (= type :balance-positive) :icon-positive :icon-negative))]])]])
-
-(defn- token-tag
-  [{:keys [token-props blur? theme]}]
-  ;; TODO: Use Tiny tag component when available (issue #17341)
-  [rn/view
-   {:style               (style/token-tag-text-container blur? theme)
-    :accessibility-label :tag-container}
-   [text/text
-    {:size   :label
-     :weight :medium
-     :style  (style/token-tag-text blur? theme)}
-    (str (:value token-props) " " (:symbol token-props))]])
-
-(defn- options-button
-  [{:keys [on-options-press blur? theme]}]
-  [rn/pressable
-   {:accessibility-label :options-button
-    :on-press            #(when on-options-press
-                            (on-options-press))}
-   [icon/icon :i/options
-    {:color (if blur?
-              colors/white-opa-70
-              (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}]])
-
-(defn- check-icon
-  [{:keys [blur? customization-color theme]}]
-  [rn/view {:accessibility-label :check-icon}
-   [icon/icon :i/check
-    {:color (if blur?
-              colors/white
-              (colors/theme-colors (colors/custom-color customization-color 50)
-                                   (colors/custom-color customization-color 60)
-                                   theme))}]])
-
-(defn- f-internal-view
-  []
-  (let [state               (reagent/atom :default)
-        active-or-selected? (atom false)
-        timer               (atom nil)
-        on-press-in         (fn []
-                              (when-not (= @state :selected)
-                                (reset! timer (js/setTimeout #(reset! state :pressed) 100))))]
-    (fn [{:keys [type selectable? blur? customization-color on-press]
-          :or   {customization-color :blue
-                 type                :default
-                 blur?               false}
-          :as   props}]
-      (let [on-press-out (fn []
-                           (let [new-state (if @active-or-selected?
-                                             :default
-                                             (if (and (= type :default) selectable?)
-                                               :selected
-                                               :active))]
-                             (when @timer (js/clearTimeout @timer))
-                             (reset! timer nil)
-                             (reset! active-or-selected? (or (= new-state :active)
-                                                             (= new-state :selected)))
-                             (reset! state new-state)
-                             (when on-press
-                               (on-press))))]
-        (rn/use-effect
-         #(cond (and selectable? (= type :default) (= @state :active))         (reset! state :selected)
-                (and (not selectable?) (= type :default) (= @state :selected)) (reset! state :active))
-         [selectable?])
-        [rn/pressable
-         {:style               (style/container
-                                {:state @state :blur? blur? :customization-color customization-color})
-          :on-press-in         on-press-in
-          :on-press-out        on-press-out
-          :accessibility-label :container}
-         [account-view props]
-         [rn/view {:style (when (= type :tag) style/token-tag-container)}
-          (when (or (= type :balance-neutral)
-                    (= type :balance-negative)
-                    (= type :balance-positive))
-            [balance-view props])
-          (when (= type :tag)
-            [token-tag props])
-          (when (= type :action)
-            [options-button props])
-          (when (and (= type :default)
-                     (= @state :selected))
-            [check-icon props])]]))))
-
-(defn- internal-view
-  [props]
-  [:f> f-internal-view props])
-
-(def view (quo.theme/with-theme internal-view))

src/quo2/components/list_items/channel/view.cljs

@@ -38,7 +38,7 @@
         :on-press-in         #(reset! pressed? true)
         :on-press-out        #(reset! pressed? false)}
        [channel-avatar/view
-        {:size                :size-32
+        {:size                :size/l
          :locked?             locked?
          :full-name           name
          :customization-color customization-color

src/quo2/components/list_items/preview_list/properties.cljs

@@ -7,43 +7,43 @@
   (if (types-for-squared-border type) :squared :rounded))
 
 (def sizes
-  {:size-32 {:size             32
-             :user-avatar-size :small
-             :border-radius    {:rounded 16 :squared 10}
-             :hole-radius      {:rounded 18 :squared 12}
-             :margin-left      -8
-             :hole-size        36
-             :hole-x           22
-             :hole-y           -2}
-   :size-24 {:size             24
-             :user-avatar-size :xs
-             :border-radius    {:rounded 12 :squared 8}
-             :hole-radius      {:rounded 13 :squared 9}
-             :margin-left      -4
-             :hole-size        26
-             :hole-x           19
-             :hole-y           -1}
-   :size-20 {:size             20
-             :user-avatar-size :xxs
-             :border-radius    {:rounded 10 :squared 8}
-             :hole-radius      {:rounded 11 :squared 9}
-             :margin-left      -4
-             :hole-size        22
-             :hole-x           15
-             :hole-y           -1}
-   :size-16 {:size             16
-             :user-avatar-size :xxxs
-             :border-radius    {:rounded 8 :squared 8}
-             :hole-radius      {:rounded 9 :squared 9}
-             :margin-left      -4
-             :hole-size        18
-             :hole-x           11
-             :hole-y           -1}
-   :size-14 {:size             14
-             :user-avatar-size :xxxs
-             :border-radius    {:rounded 7 :squared 7}
-             :hole-radius      {:rounded 8 :squared 8}
-             :margin-left      -2
-             :hole-size        16
-             :hole-x           11
-             :hole-y           -1}})
+  {:size/s-32 {:size             32
+               :user-avatar-size :small
+               :border-radius    {:rounded 16 :squared 10}
+               :hole-radius      {:rounded 18 :squared 12}
+               :margin-left      -8
+               :hole-size        36
+               :hole-x           22
+               :hole-y           -2}
+   :size/s-24 {:size             24
+               :user-avatar-size :xs
+               :border-radius    {:rounded 12 :squared 8}
+               :hole-radius      {:rounded 13 :squared 9}
+               :margin-left      -4
+               :hole-size        26
+               :hole-x           19
+               :hole-y           -1}
+   :size/s-20 {:size             20
+               :user-avatar-size :xxs
+               :border-radius    {:rounded 10 :squared 8}
+               :hole-radius      {:rounded 11 :squared 9}
+               :margin-left      -4
+               :hole-size        22
+               :hole-x           15
+               :hole-y           -1}
+   :size/s-16 {:size             16
+               :user-avatar-size :xxxs
+               :border-radius    {:rounded 8 :squared 8}
+               :hole-radius      {:rounded 9 :squared 9}
+               :margin-left      -4
+               :hole-size        18
+               :hole-x           11
+               :hole-y           -1}
+   :size/s-14 {:size             14
+               :user-avatar-size :xxxs
+               :border-radius    {:rounded 7 :squared 7}
+               :hole-radius      {:rounded 8 :squared 8}
+               :margin-left      -2
+               :hole-size        16
+               :hole-x           11
+               :hole-y           -1}})

src/quo2/components/list_items/preview_list/view.cljs

@@ -1,13 +1,67 @@
 (ns quo2.components.list-items.preview-list.view
   (:require [quo2.components.avatars.account-avatar.view :as account-avatar]
             [quo2.components.avatars.user-avatar.view :as user-avatar]
-            [quo2.components.list-items.preview-list.properties :as properties]
-            [quo2.components.tags.number-tag.view :as number-tag]
+            [quo2.components.icon :as quo2.icons]
+            [quo2.components.markdown.text :as quo2.text]
+            [quo2.foundations.colors :as colors]
             [quo2.theme :as quo.theme]
+            [quo2.components.list-items.preview-list.properties :as properties]
             [react-native.core :as rn]
             [react-native.fast-image :as fast-image]
             [react-native.hole-view :as hole-view]))
 
+;; This overflow item needs to be cleaned up once the "number tag" component is implemented
+;; https://github.com/status-im/status-mobile/issues/17045
+(defn get-overflow-color
+  [blur? blur-light-color blur-dark-color light-color dark-color theme]
+  (if blur?
+    (colors/theme-colors blur-light-color blur-dark-color theme)
+    (colors/theme-colors light-color dark-color theme)))
+
+(def more-icon-for-sizes #{16 14})
+
+(defn overflow-label
+  [{:keys [label size blur? border-radius margin-left theme more-than-99-label]}]
+  [rn/view
+   {:style {:width            size
+            :height           size
+            :margin-left      margin-left
+            :border-radius    border-radius
+            :justify-content  :center
+            :align-items      :center
+            :background-color (get-overflow-color
+                               blur?
+                               colors/neutral-80-opa-5
+                               colors/white-opa-5
+                               colors/neutral-20
+                               colors/neutral-90
+                               theme)}}
+   (if (more-icon-for-sizes size)
+     [quo2.icons/icon :i/more
+      {:size  12
+       :color (get-overflow-color
+               blur?
+               colors/neutral-80-opa-70
+               colors/white-opa-70
+               colors/neutral-50
+               colors/neutral-40
+               theme)}]
+     [quo2.text/text
+      {:size   (if (= size 32) :paragraph-2 :label)
+       :weight :medium
+       :style  {:color       (get-overflow-color
+                              blur?
+                              colors/neutral-80-opa-70
+                              colors/white-opa-70
+                              colors/neutral-50
+                              colors/neutral-40
+                              theme)
+                :margin-left -2}}
+      ;; If overflow label is below 100, show label as +label (ex. +30), else just show 99+
+      (if (< label 100)
+        (str "+" label)
+        more-than-99-label)])])
+
 (defn- preview-item
   [{:keys [item type size-key]}]
   (let [size             (get-in properties/sizes [size-key :size])
@@ -16,22 +70,22 @@
                                  [size-key :border-radius (properties/border-type type)])]
     (case type
       :user                        [user-avatar/user-avatar
-                                    (assoc item
-                                           :ring?             false
-                                           :status-indicator? false
-                                           :size              user-avatar-size)]
+                                    (merge {:ring?             false
+                                            :status-indicator? false
+                                            :size              user-avatar-size}
+                                           item)]
 
       :accounts                    [account-avatar/view
-                                    (assoc item :size size)]
+                                    (merge item {:size size})]
 
       (:communities :collectibles) [fast-image/fast-image
-                                    {:source (or (:source item) item)
+                                    {:source (:source item)
                                      :style  {:width         size
                                               :height        size
                                               :border-radius border-radius}}]
 
       (:tokens :network :dapps)    [fast-image/fast-image
-                                    {:source (or (:source item) item)
+                                    {:source (:source item)
                                      :style  {:width         size
                                               :height        size
                                               :border-radius border-radius}}]
@@ -64,16 +118,16 @@
   "[preview-list opts items]
    opts
    {:type          :user/:communities/:accounts/:tokens/:collectibles/:dapps/:network
-    :size          :size-32 | :size-24 | :size-20 | :size-16 | :size-14
+    :size          :size/s-32 | :size/s-24 | :size/s-20 | :size/s-16 | :size/s-14
     :number        number of items in the list (optional)
     :blur?         overflow-label blur?}
    items           preview list items (only 4 items is required for preview)
   "
-  [{:keys [type size number blur?]} items]
-  (let [size-key    (if (contains? properties/sizes size) size :size-24)
-        number      (or number (count items))
-        border-type (properties/border-type type)
-        margin-left (get-in properties/sizes [size-key :margin-left])]
+  [{:keys [type size number blur? theme more-than-99-label]} items]
+  (let [size-key      (if (contains? properties/sizes size) size :size/s-24)
+        number        (or number (count items))
+        margin-left   (get-in properties/sizes [size-key :margin-left])
+        border-radius (get-in properties/sizes [size-key :border-radius (properties/border-type type)])]
     [rn/view {:style {:flex-direction :row}}
      (for [index (range (if (> number 4) 3 number))]
        ^{:key (str index number)}
@@ -84,11 +138,13 @@
          :item     (get (vec items) index)
          :number   number}])
      (when (> number 4)
-       [number-tag/view
-        {:type            border-type
-         :number          (str (- number 3))
-         :size            size-key
-         :blur?           blur?
-         :container-style {:margin-left margin-left}}])]))
+       [overflow-label
+        {:label              (- number 3)
+         :size               (get-in properties/sizes [size-key :size])
+         :blur?              blur?
+         :border-radius      border-radius
+         :margin-left        margin-left
+         :theme              theme
+         :more-than-99-label more-than-99-label}])]))
 
 (def view (quo.theme/with-theme view-internal))

src/quo2/components/list_items/saved_address/component_spec.cljs

@@ -1,51 +0,0 @@
-(ns quo2.components.list-items.saved-address.component-spec
-  (:require [test-helpers.component :as h]
-            [quo2.components.list-items.saved-address.view :as saved-address]
-            [quo2.foundations.colors :as colors]))
-
-(h/describe "List items: saved address"
-  (h/test "default render"
-    (h/render [saved-address/view])
-    (h/is-truthy (h/query-by-label-text :container)))
-
-  (h/test "on-press-in changes state to :pressed"
-    (h/render [saved-address/view])
-    (h/fire-event :on-press-in (h/get-by-label-text :container))
-    (h/wait-for #(h/has-style (h/query-by-label-text :container)
-                              {:backgroundColor (colors/custom-color :blue 50 5)})))
-
-  (h/test "on-press-in changes state to :pressed with blur? enabled"
-    (h/render [saved-address/view {:blur? true}])
-    (h/fire-event :on-press-in (h/get-by-label-text :container))
-    (h/wait-for #(h/has-style (h/query-by-label-text :container)
-                              {:backgroundColor colors/white-opa-5})))
-
-  (h/test "on-press-out changes state to :active"
-    (h/render [saved-address/view])
-    (h/fire-event :on-press-in (h/get-by-label-text :container))
-    (h/fire-event :on-press-out (h/get-by-label-text :container))
-    (h/wait-for #(h/has-style (h/query-by-label-text :container)
-                              {:backgroundColor (colors/custom-color :blue 50 10)})))
-
-  (h/test "on-press-out changes state to :active with blur? enabled"
-    (h/render [saved-address/view {:blur? true}])
-    (h/fire-event :on-press-in (h/get-by-label-text :container))
-    (h/fire-event :on-press-out (h/get-by-label-text :container))
-    (h/wait-for #(h/has-style (h/query-by-label-text :container)
-                              {:backgroundColor colors/white-opa-10})))
-
-  (h/test "on-press-out calls on-press"
-    (let [on-press (h/mock-fn)]
-      (h/render [saved-address/view {:on-press on-press}])
-      (h/fire-event :on-press-in (h/get-by-label-text :container))
-      (h/fire-event :on-press-out (h/get-by-label-text :container))
-      (h/was-called on-press)))
-
-  (h/test "renders options button if type :action"
-    (let [on-options-press (h/mock-fn)]
-      (h/render [saved-address/view
-                 {:type             :action
-                  :on-options-press on-options-press}])
-      (h/is-truthy (h/query-by-label-text :options-button))
-      (h/fire-event :on-press (h/get-by-label-text :options-button))
-      (h/was-called on-options-press))))

src/quo2/components/list_items/saved_address/style.cljs

@@ -1,42 +0,0 @@
-(ns quo2.components.list-items.saved-address.style
-  (:require [quo2.foundations.colors :as colors]))
-
-(defn- background-color
-  [{:keys [state blur? customization-color]}]
-  (cond (and (or (= state :pressed) (= state :selected)) (not blur?))
-        (colors/custom-color customization-color 50 5)
-        (and (or (= state :pressed) (= state :selected)) blur?)
-        colors/white-opa-5
-        (and (= state :active) (not blur?))
-        (colors/custom-color customization-color 50 10)
-        (and (= state :active) blur?)
-        colors/white-opa-10
-        (and (= state :pressed) blur?) colors/white-opa-10
-        :else :transparent))
-
-(defn container
-  [props]
-  {:height             56
-   :border-radius      12
-   :background-color   (background-color props)
-   :flex-direction     :row
-   :align-items        :center
-   :padding-horizontal 12
-   :padding-vertical   6
-   :justify-content    :space-between})
-
-(def left-container
-  {:flex-direction :row
-   :align-items    :center})
-
-(def name-text
-  {:height 22})
-
-(def account-container
-  {:margin-left 8})
-
-(defn account-address
-  [blur? theme]
-  {:color (if blur?
-            colors/white-opa-40
-            (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))})

src/quo2/components/list_items/saved_address/view.cljs

@@ -1,79 +0,0 @@
-(ns quo2.components.list-items.saved-address.view
-  (:require [quo2.components.avatars.wallet-user-avatar :as wallet-user-avatar]
-            [quo2.components.markdown.text :as text]
-            [quo2.foundations.colors :as colors]
-            [quo2.theme :as quo.theme]
-            [react-native.core :as rn]
-            [quo2.components.list-items.saved-address.style :as style]
-            [reagent.core :as reagent]
-            [quo2.components.icon :as icon]
-            [clojure.string :as string]))
-
-(defn- left-container
-  [{:keys [blur? theme name address customization-color]}]
-  (let [names      (remove string/blank? (string/split name " "))
-        first-name (if (> (count names) 0) (first names) "")
-        last-name  (if (> (count names) 1) (last names) "")]
-    [rn/view {:style style/left-container}
-     [wallet-user-avatar/wallet-user-avatar
-      {:size   :medium
-       :f-name first-name
-       :l-name last-name
-       :color  customization-color}]
-     [rn/view {:style style/account-container}
-      [text/text
-       {:weight :semi-bold
-        :size   :paragraph-1
-        :style  style/name-text}
-       name]
-      [text/text {:size :paragraph-2}
-       [text/text
-        {:size   :paragraph-2
-         :weight :monospace
-         :style  (style/account-address blur? theme)}
-        address]]]]))
-
-(defn- internal-view
-  []
-  (let [state       (reagent/atom :default)
-        active?     (atom false)
-        timer       (atom nil)
-        on-press-in (fn []
-                      (when-not (= @state :selected)
-                        (reset! timer (js/setTimeout #(reset! state :pressed) 100))))]
-    (fn [{:keys [blur? user-props customization-color
-                 on-press
-                 on-options-press
-                 theme]
-          :or   {customization-color :blue
-                 blur?               false}}]
-      (let [on-press-out (fn []
-                           (let [new-state (if @active? :default :active)]
-                             (when @timer (js/clearTimeout @timer))
-                             (reset! timer nil)
-                             (reset! active? (= new-state :active))
-                             (reset! state new-state)
-                             (when on-press
-                               (on-press))))]
-        [rn/pressable
-         {:style               (style/container
-                                {:state @state :blur? blur? :customization-color customization-color})
-          :on-press-in         on-press-in
-          :on-press-out        on-press-out
-          :accessibility-label :container}
-         [left-container
-          {:blur?               blur?
-           :theme               theme
-           :name                (:name user-props)
-           :address             (:address user-props)
-           :customization-color (:customization-color user-props)}]
-         [rn/pressable
-          {:accessibility-label :options-button
-           :on-press            #(when on-options-press
-                                   (on-options-press))}
-          [icon/icon :i/options
-           {:color (if blur?
-                     colors/white-opa-70
-                     (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}]]]))))
-
-(def view (quo.theme/with-theme internal-view))

src/quo2/components/list_items/token_value/view.cljs

@@ -12,9 +12,9 @@
     [reagent.core :as reagent]))
 
 (defn- internal-view
-  []
+  [{:keys [theme customization-color status token metrics? values on-press]}]
   (let [state (reagent/atom :default)]
-    (fn [{:keys [theme customization-color status token metrics? values on-press]}]
+    (fn []
       (let [bg-opacity                                                      (case @state
                                                                               :active  10
                                                                               :pressed 5
@@ -42,7 +42,7 @@
            [text/text
             {:size  :paragraph-2
              :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
-            (str crypto-value " " (if token (string/upper-case (clj->js token)) ""))]]]
+            (str crypto-value " " (string/upper-case (clj->js token)))]]]
          [rn/view
           {:style {:align-items     :flex-end
                    :justify-content :space-between}}

src/quo2/components/messages/system_message.cljs

@@ -21,7 +21,7 @@
   [rn/view
    {:margin-right 8}
    [icon-avatar/icon-avatar
-    {:size    :size-32
+    {:size    :size/s-32
      :icon    icon
      :color   color
      :opacity opacity}]])

src/quo2/components/navigation/bottom_nav_tab/view.cljs

@@ -86,6 +86,6 @@
            counter-label]
           [rn/view {:style (styles/notification-dot customization-color)}]))]]))
 
-(defn view
+(defn bottom-nav-tab
   [opts]
   [:f> f-bottom-nav-tab opts])

src/quo2/components/navigation/page_nav/style.cljs

@@ -19,6 +19,12 @@
    :align-items       :center
    :justify-content   (if centered? :center :flex-start)})
 
+(def account-switcher-placeholder
+  {:width            32
+   :height           32
+   :border-radius    10
+   :background-color (colors/custom-color :purple 50)})
+
 (def right-actions-container
   {:flex-direction :row})
 

src/quo2/components/navigation/page_nav/view.cljs

@@ -1,9 +1,7 @@
 (ns quo2.components.navigation.page-nav.view
   (:require [quo2.components.avatars.group-avatar.view :as group-avatar]
             [quo2.components.buttons.button.view :as button]
-            [quo2.components.buttons.button.properties :as button-properties]
-            [quo2.components.dropdowns.dropdown.view :as dropdown]
-            [quo2.components.dropdowns.dropdown.properties :as dropdown-properties]
+            [quo2.components.dropdowns.dropdown :as dropdown]
             [quo2.components.icon :as icons]
             [quo2.components.markdown.text :as text]
             [quo2.components.navigation.page-nav.style :as style]
@@ -30,7 +28,6 @@
              :icon-only?          true
              :size                32
              :on-press            on-press
-             :background          (when (button-properties/backgrounds background) background)
              :accessibility-label accessibility-label}
             icon-name])]
         children))
@@ -48,28 +45,20 @@
                        :icon-only? icon-name
                        :size       32
                        :accessible true
-                       :background (when (button-properties/backgrounds background) background))
+                       :background (when (#{:photo :blur} background) background))
                 (or label icon-name)]))
         (interpose [right-section-spacing])))
 
-(defn- account-switcher-content
-  [{:keys [customization-color on-press emoji state]}]
-  [dropdown/view
-   {:type                :customization
-    :customization-color customization-color
-    :state               (or state :default)
-    :size                :size-32
-    :on-press            on-press
-    :emoji?              true}
-   emoji])
-
 (defn- right-content
-  [{:keys [background content max-actions min-size? support-account-switcher? account-switcher]
+  [{:keys [background content max-actions min-size? support-account-switcher?]
     :or   {support-account-switcher? true}}]
   [rn/view (when min-size? {:style style/right-content-min-size})
    (cond
+     ;; TODO: use account-switcher when available (issue #16456)
      (and support-account-switcher? (= content :account-switcher))
-     [account-switcher-content account-switcher]
+     [rn/pressable
+      {:style    style/account-switcher-placeholder
+       :on-press #(js/alert "Not implemented yet")}]
 
      (coll? content)
      (into [rn/view {:style style/right-actions-container}]
@@ -89,19 +78,17 @@
     title]])
 
 (defn- dropdown-center
-  [{:keys [theme background dropdown-on-press dropdown-selected? dropdown-text]}]
-  (let [dropdown-type  (cond
-                         (= background :photo)                      :grey
-                         (and (= theme :dark) (= background :blur)) :grey
-                         :else                                      :ghost)
-        dropdown-state (if dropdown-selected? :active :default)]
+  [{:keys [theme background dropdown-on-change dropdown-selected? dropdown-text]}]
+  (let [dropdown-type (cond
+                        (= background :photo)                      :grey
+                        (and (= theme :dark) (= background :blur)) :grey
+                        :else                                      :ghost)]
     [rn/view {:style (style/center-content-container true)}
-     [dropdown/view
-      {:type       dropdown-type
-       :state      dropdown-state
-       :size       :size-32
-       :background (when (dropdown-properties/backgrounds background) background)
-       :on-press   dropdown-on-press}
+     [dropdown/dropdown
+      {:type      dropdown-type
+       :size      32
+       :on-change dropdown-on-change
+       :selected  dropdown-selected?}
       dropdown-text]]))
 
 (defn- token-center
@@ -170,7 +157,7 @@
       shown-name]]))
 
 (defn- view-internal
-  [{:keys [type right-side background text-align account-switcher]
+  [{:keys [type right-side background text-align]
     :or   {type       :no-title
            text-align :center
            right-side :none
@@ -186,29 +173,28 @@
       [page-nav-base props
        [title-center (assoc props :centered? centered?)]
        [right-content
-        {:background       background
-         :content          right-side
-         :max-actions      (if centered? 1 3)
-         :min-size?        centered?
-         :account-switcher account-switcher}]])
+        {:background  background
+         :content     right-side
+         :max-actions (if centered? 1 3)
+         :min-size?   centered?}]])
 
     :dropdown
     [page-nav-base props
      [dropdown-center props]
-     [right-content
-      {:background                background
-       :content                   right-side
-       :max-actions               1
-       :support-account-switcher? false}]]
+     [rn/view {:style style/right-actions-container}
+      (let [{button-icon :icon-name :as button-props} (first right-side)]
+        [button/button
+         (assoc button-props
+                :type       (button-type background)
+                :icon-only? true
+                :size       32
+                :accessible true)
+         button-icon])]]
 
     :token
     [page-nav-base props
      [token-center props]
-     [right-content
-      {:background       background
-       :content          right-side
-       :max-actions      3
-       :account-switcher account-switcher}]]
+     [right-content {:background background :content right-side :max-actions 3}]]
 
     :channel
     [page-nav-base props
@@ -238,11 +224,10 @@
         :number-of-lines 1}
        "NETWORK DROPDOWN"]]
      [right-content
-      {:background       background
-       :content          right-side
-       :max-actions      1
-       :min-size?        true
-       :account-switcher account-switcher}]]
+      {:background  background
+       :content     right-side
+       :max-actions 1
+       :min-size?   true}]]
 
     (:community :network)
     [page-nav-base props
@@ -270,19 +255,12 @@
          :on-press            (fn callback [] nil)
          :accessibility-label \"an optional label\"}
 
-  - account-switcher (optional)
-      - props to render dropdown component (emoji only) e.g.:
-       {:customization-color :purple
-        :on-press            (fn [] nil)
-        :state               :default (inherit dropdown states)
-        :emoji               \"🍑\"}
-
   Depending on the `type` selected, different properties are accepted:
   `:title`
     - title
     - text-align: `:center` or `:left`
    `:dropdown`
-    - dropdown-on-press:  a callback
+    - dropdown-on-change: a callback
     - dropdown-selected?: a boolean
     - dropdown-text
   `:token`

src/quo2/components/notifications/activity_log/style.cljs

@@ -26,15 +26,11 @@
   {:color colors/white})
 
 (defn message-container
-  [attachment text-with-photos?]
+  [attachment]
   {:border-radius      12
    :margin-top         10
    :padding-horizontal 12
-   :padding-vertical   (if (and
-                            (not text-with-photos?)
-                            (#{:photo :gif} attachment))
-                         12
-                         8)
+   :padding-vertical   (if (#{:photo :gif} attachment) 12 8)
    :background-color   colors/white-opa-5})
 
 (def footer-container

src/quo2/components/notifications/activity_log/view.cljs

@@ -73,33 +73,24 @@
                  detail]]))
            context))))
 
-(defn- hiccup-props
-  [body]
-  (and (vector? body)
-       (map? (second body))
-       (second body)))
-
 (defn- activity-message
   [{:keys [title body title-number-of-lines body-number-of-lines attachment]}]
-  (let [{:keys [photos message-text]} (hiccup-props body)
-        text-with-photos?             (and (not (string/blank? message-text))
-                                           (seq photos))]
-    [rn/view {:style (style/message-container attachment text-with-photos?)}
-     (when title
-       [text/text
-        {:size                :paragraph-2
-         :accessibility-label :activity-message-title
-         :style               style/message-title
-         :number-of-lines     title-number-of-lines}
-        title])
-     (if (string? body)
-       [text/text
-        {:style               style/message-body
-         :accessibility-label :activity-message-body
-         :size                :paragraph-1
-         :number-of-lines     body-number-of-lines}
-        body]
-       body)]))
+  [rn/view {:style (style/message-container attachment)}
+   (when title
+     [text/text
+      {:size                :paragraph-2
+       :accessibility-label :activity-message-title
+       :style               style/message-title
+       :number-of-lines     title-number-of-lines}
+      title])
+   (if (string? body)
+     [text/text
+      {:style               style/message-body
+       :accessibility-label :activity-message-body
+       :size                :paragraph-1
+       :number-of-lines     body-number-of-lines}
+      body]
+     body)])
 
 (defn- activity-title
   [title replying?]

src/quo2/components/notifications/activity_logs_photos/style.cljs

@@ -1,7 +1,5 @@
 (ns quo2.components.notifications.activity-logs-photos.style)
 
-(def text {:margin-bottom 8})
-
 (def photos-container
   {:flex           1
    :height         40

src/quo2/components/notifications/activity_logs_photos/view.cljs

@@ -1,25 +1,14 @@
 (ns quo2.components.notifications.activity-logs-photos.view
   (:require [react-native.core :as rn]
-            [quo2.components.markdown.text :as text]
-            [quo2.components.notifications.activity-logs-photos.style :as style]
-            [clojure.string :as string]))
+            [quo2.components.notifications.activity-logs-photos.style :as style]))
 
 (defn view
-  [{:keys [photos message-text]}]
-  [:<>
-   (when (not (string/blank? message-text))
-     [text/text
-      {:size                :paragraph-1
-       :weight              :regular
-       :style               style/text
-       :number-of-lines     2
-       :accessibility-label :activity-log-title}
-      message-text])
-   [rn/view {:style style/photos-container}
-    (map-indexed
-     (fn [index photo]
-       ^{:key index}
-       [rn/image
-        {:source photo
-         :style  (style/photo index)}])
-     photos)]])
+  [{:keys [photos]}]
+  [rn/view {:style style/photos-container}
+   (map-indexed
+    (fn [index photo]
+      ^{:key index}
+      [rn/image
+       {:source photo
+        :style  (style/photo index)}])
+    photos)])

src/quo2/components/notifications/toast/view.cljs

@@ -68,7 +68,8 @@
 (def ^:private toast-container (quo.theme/with-theme toast-container-internal))
 
 (defn toast
-  [{:keys [icon icon-color title text action undo-duration undo-on-press container-style theme user]}]
+  [{:keys [icon icon-color title text action undo-duration undo-on-press container-style
+           theme user]}]
   (let [context-theme (or theme (quo.theme/get-theme))]
     [quo.theme/provider {:theme context-theme}
      [toast-container
@@ -77,6 +78,7 @@
                                (cond-> (style/icon context-theme)
                                  icon-color
                                  (assoc :color icon-color))]
+
                               user
                               [user-avatar/user-avatar user])
        :title           title

src/quo2/components/settings/data_item/view.cljs

@@ -88,7 +88,7 @@
      :preview [preview-list/view
                {:type   :communities
                 :number 3
-                :size   :size-24}
+                :size   :size/s-24}
                communities-list]
      :graph   [text/text "graph"]
      :none    nil

src/quo2/components/settings/section_label/view.cljs

@@ -1,43 +0,0 @@
-(ns quo2.components.settings.section-label.view
-  (:require
-    [quo2.theme :as quo.theme]
-    [quo2.components.markdown.text :as text]
-    [quo2.foundations.colors :as colors]))
-
-(defn- get-text-color
-  [theme blur?]
-  (if blur?
-    colors/white-opa-40
-    (colors/theme-colors colors/neutral-50
-                         colors/neutral-40
-                         theme)))
-
-(defn label-style
-  [color]
-  {:color         color
-   :margin-bottom 2})
-
-(defn- view-internal
-  "Props:
-   - section - the label of the section
-   - description (optional) - description of the section
-   - blur? (optional) - use blurred styling
-   - theme - light or dark"
-  [{:keys [section description blur? theme]}]
-  (let [color        (get-text-color theme (or blur? false))
-        description? (not (nil? description))]
-    [:<>
-     [text/text
-      {:number-of-lines 1
-       :size            (if description? :paragraph-1 :paragraph-2)
-       :weight          :medium
-       :style           (label-style color)}
-      section]
-     (when description?
-       [text/text
-        {:size   :paragraph-1
-         :weight :regular
-         :style  {:color color}}
-        description])]))
-
-(def view (quo.theme/with-theme view-internal))

src/quo2/components/settings/settings_item/style.cljs

@@ -1,17 +1,21 @@
 (ns quo2.components.settings.settings-item.style
   (:require [quo2.foundations.colors :as colors]))
 
-(defn container
-  [{:keys [container-style]}]
-  (merge {:padding         12
-          :flex-direction  :row
-          :justify-content :space-between}
-         container-style))
+(defn find-icon-height
+  [description tag image]
+  (let [icon-height (if (= image :icon-avatar) 32 20)
+        icon-height (if description 40 icon-height)]
+    (if tag 72 icon-height)))
 
-(defn left-sub-container
-  [{:keys [tag description]}]
-  {:flex-direction :row
-   :align-items    (if (or tag description) :flex-start :center)})
+(defn container
+  [{:keys [in-card? tag container-style]}]
+  (merge {:padding-horizontal 12
+          :padding-top        (if in-card? 12 13)
+          :padding-bottom     (if in-card? 12 13)
+          :flex-direction     :row
+          :justify-content    :space-between
+          :height             (if tag 96 48)}
+         container-style))
 
 (def sub-container
   {:flex-direction :row
@@ -20,12 +24,12 @@
 (def left-container
   {:margin-left     12
    :height          "100%"
-   :justify-content :flex-start})
+   :justify-content :center})
 
 (defn image-container
-  [image tag description]
-  {:height     (if (= image :icon-avatar) 32 20)
-   :margin-top (if (or tag description) 1 0)})
+  [description tag image]
+  {:height          (find-icon-height description tag image)
+   :justify-content :flex-start})
 
 (def status-container
   {:flex-direction :row
@@ -53,8 +57,3 @@
    :height           15
    :border-radius    12
    :background-color background-color})
-
-(def status-tag-container
-  {:margin-top    7
-   :margin-bottom 2
-   :margin-left   -1})

src/quo2/components/settings/settings_item/view.cljs

@@ -65,7 +65,7 @@
                 :label           (:label tag-props)
                 :no-icon?        true
                 :size            :small
-                :container-style style/status-tag-container}]
+                :container-style {:margin-top 8}}]
     :context  [context-tag/view
                (merge tag-props
                       {:type            :icon
@@ -83,8 +83,7 @@
                label-props]
      :color   [rn/view
                {:style (style/label-dot label-props)}]
-     :preview [preview-list/view {:type (:type label-props) :size :size-24}
-               (:data label-props)]
+     :preview [preview-list/view {:type (:type label-props)} (:data label-props)]
      nil)])
 
 (defn action-component
@@ -106,7 +105,7 @@
    {:style               (style/container props)
     :on-press            on-press
     :accessibility-label accessibility-label}
-   [rn/view {:style (style/left-sub-container props)}
+   [rn/view {:style style/sub-container}
     [image-component props]
     [rn/view {:style style/left-container}
      [text/text {:weight :medium} title]

src/quo2/components/switchers/base_card/component_spec.cljs

@@ -1,18 +0,0 @@
-(ns quo2.components.switchers.base-card.component-spec
-  (:require [test-helpers.component :as h]
-            [quo2.components.switchers.base-card.view :as base-card]
-            [quo2.foundations.colors :as colors]))
-
-(h/describe "Switcher: Base card"
-  (h/test "Default render"
-    (h/render [base-card/base-card {}])
-    (h/is-truthy (h/query-by-label-text :base-card)))
-  (h/test "Banner render"
-    (h/render [base-card/base-card {:banner {:source "banner"}}])
-    (h/is-truthy (h/query-by-label-text :base-card))
-    (h/is-truthy (h/query-by-label-text :banner)))
-  (h/test "Customization color"
-    (h/render [base-card/base-card {:customization-color :blue}])
-    (h/has-style
-     (h/query-by-label-text :base-card)
-     {:backgroundColor (colors/custom-color :blue 50 40)})))

src/quo2/components/switchers/base_card/style.cljs

@@ -1,23 +0,0 @@
-(ns quo2.components.switchers.base-card.style
-  (:require [quo2.foundations.colors :as colors]))
-
-(defn base-container
-  [customization-color]
-  {:width            160
-   :height           160
-   :border-radius    16
-   :background-color (colors/custom-color customization-color 50 40)})
-
-(def thumb-card
-  {:width            160
-   :height           120
-   :border-radius    16
-   :bottom           0
-   :position         :absolute
-   :background-color colors/neutral-95
-   :padding          12})
-
-(def close-button
-  {:position :absolute
-   :right    8
-   :top      8})

src/quo2/components/switchers/base_card/view.cljs

@@ -1,31 +0,0 @@
-(ns quo2.components.switchers.base-card.view
-  (:require [quo.react-native :as rn]
-            [quo2.components.buttons.button.view :as button]
-            [quo2.components.switchers.base-card.style :as style]))
-
-(defn base-card
-  []
-  (let [card-ref (atom nil)
-        set-ref  #(reset! card-ref %)]
-    (fn [{:keys [banner on-press on-close customization-color]} & children]
-      [rn/touchable-opacity
-       {:on-press       on-press
-        :ref            set-ref
-        :active-opacity 1}
-       [rn/view
-        {:accessibility-label :base-card
-         :style               (style/base-container customization-color)}
-        (when banner
-          [rn/image
-           {:accessibility-label :banner
-            :source              (:source banner)
-            :style               {:width 160}}])
-        [button/button
-         {:size            24
-          :type            :grey
-          :icon-only?      true
-          :on-press        on-close
-          :background      :photo
-          :container-style style/close-button}
-         :i/close]
-        (into [rn/view {:style style/thumb-card}] children)]])))

src/quo2/components/switchers/card_content/style.cljs

@@ -1,27 +0,0 @@
-(ns quo2.components.switchers.card-content.style
-  (:require [quo2.foundations.colors :as colors]))
-
-(defn content-container
-  [status]
-  {:flex-direction  :row
-   :justify-content :space-between
-   :align-items     (if (= status :mention) :center :flex-end)})
-
-(def notification-container
-  {:width           20
-   :height          20
-   :justify-content :center
-   :align-items     :center
-   :margin-left     8})
-
-(def message-text
-  {:color colors/white})
-
-(def sticker
-  {:width  24
-   :height 24})
-
-(def gif
-  {:width         24
-   :height        24
-   :border-radius 8})

src/quo2/components/switchers/card_content/view.cljs

@@ -1,98 +0,0 @@
-(ns quo2.components.switchers.card-content.view
-  (:require [react-native.core :as rn]
-            [react-native.fast-image :as fast-image]
-            [quo2.components.switchers.card-content.style :as style]
-            [quo2.components.common.notification-dot.view :as notification-dot]
-            [quo2.components.counter.counter.view :as counter]
-            [quo2.components.markdown.text :as text]
-            [quo2.components.list-items.preview-list.view :as preview-list]
-            [quo2.components.tags.context-tag.view :as tag]
-            [quo2.components.code.snippet-preview.view :as snippet-preview]
-            [utils.i18n :as i18n]))
-
-(defn content-view
-  [{:keys                           [type content customization-color]
-    {:keys [text duration photos community-avatar
-            community-name source]} :content}]
-  [rn/view {:style {:max-width 108}}
-   (case type
-     :message
-     [text/text
-      {:size            :paragraph-2
-       :weight          :regular
-       :number-of-lines 1
-       :ellipsize-mode  :tail
-       :style           style/message-text}
-      text]
-
-     :photo
-     [preview-list/view
-      {:type               :collectibles
-       :more-than-99-label (i18n/label :t/counter-99-plus)
-       :size               :size/s-24}
-      photos]
-
-     :sticker
-     [fast-image/fast-image
-      {:accessibility-label :sticker
-       :source              source
-       :style               style/sticker}]
-
-     :gif
-     [fast-image/fast-image
-      {:accessibility-label :gif
-       :source              source
-       :style               style/gif}]
-
-     :audio
-     [tag/view
-      {:type                :audio
-       :duration            duration
-       :customization-color customization-color}]
-
-     :community
-     [tag/view
-      {:type           :community
-       :community-name community-name
-       :community-logo community-avatar
-       :size           24}]
-
-     :link
-     [tag/view
-      {:type    :icon
-       :icon    (:icon content)
-       :context (:text content)
-       :size    24}]
-
-     :code
-     [snippet-preview/view
-      {:language (:language content)}
-      content]
-
-     nil)])
-
-(defn notification-indicator
-  [{:keys [status mention-count customization-color]}]
-  (when (not= status :read)
-    [rn/view {:style style/notification-container}
-     (case status
-       :unread
-       [notification-dot/view
-        {:customization-color customization-color}]
-
-       :mention
-       [counter/view
-        {:outline             false
-         :customization-color customization-color}
-        mention-count]
-
-       nil)]))
-
-(defn view
-  [type status customization-color content]
-  [rn/view {:style (style/content-container status)}
-   [content-view {:type type :content content :customization-color customization-color}]
-   [notification-indicator
-    {:status              status
-     :customization-color customization-color
-     :mention-count       (:mention-count content)}]])

src/quo2/components/switchers/card_main_info/style.cljs

@@ -1,5 +0,0 @@
-(ns quo2.components.switchers.card-main-info.style
-  (:require [quo2.foundations.colors :as colors]))
-
-(def subtitle
-  {:color colors/neutral-40})

src/quo2/components/switchers/card_main_info/view.cljs

@@ -1,21 +0,0 @@
-(ns quo2.components.switchers.card-main-info.view
-  (:require [quo2.components.markdown.text :as text]
-            [quo2.components.switchers.card-main-info.style :as style]
-            [quo.react-native :as rn]))
-
-(defn view
-  [{:keys [title subtitle]}]
-  [rn/view
-   [text/text
-    {:accessibility-label :title
-     :size                :paragraph-1
-     :weight              :semi-bold
-     :number-of-lines     1
-     :ellipsize-mode      :tail}
-    title]
-   [text/text
-    {:accessibility-label :subtitle
-     :size                :paragraph-2
-     :weight              :medium
-     :style               style/subtitle}
-    subtitle]])

src/quo2/components/switchers/group_messaging_card/component_spec.cljs

@@ -1,116 +0,0 @@
-(ns quo2.components.switchers.group-messaging-card.component-spec
-  (:require [test-helpers.component :as h]
-            [quo2.components.switchers.group-messaging-card.view :as group-messaging-card]
-            [quo2.components.switchers.utils :as utils]))
-
-(def photos-list
-  [{:source (js/require "../resources/images/mock2/photo1.png")}
-   {:source (js/require "../resources/images/mock2/photo2.png")}
-   {:source (js/require "../resources/images/mock2/photo3.png")}
-   {:source (js/require "../resources/images/mock2/photo1.png")}
-   {:source (js/require "../resources/images/mock2/photo2.png")}
-   {:source (js/require "../resources/images/mock2/photo3.png")}])
-(def sticker {:source (js/require "../resources/images/mock2/sticker.png")})
-(def gif {:source (js/require "../resources/images/mock2/gif.png")})
-(def coinbase-community (js/require "../resources/images/mock2/coinbase.png"))
-(def link-icon (js/require "../resources/images/mock2/status-logo.png"))
-
-(h/describe "Switcher: Group Messaging Card"
-  (h/test "Default render"
-    (h/render [group-messaging-card/view {}])
-    (h/is-truthy (h/query-by-label-text :base-card)))
-
-  (h/test "Avatar render"
-    (h/render [group-messaging-card/view {:avatar true}])
-    (h/is-truthy (h/query-by-label-text :group-avatar)))
-
-  (h/test "Status: Read, Type: Message, Avatar: true"
-    (h/render [group-messaging-card/view
-               {:avatar  true
-                :status  :read
-                :type    :message
-                :title   "Title"
-                :content {:text "Last message"}}])
-    (h/is-truthy (h/get-by-text "Title"))
-    (h/is-truthy (h/get-by-text (utils/subtitle :message nil)))
-    (h/is-truthy (h/get-by-text "Last message")))
-
-  (h/test "Status: Unread, Type: Message, Avatar: true"
-    (h/render [group-messaging-card/view
-               {:avatar true
-                :status :unread
-                :type   :message
-                :title  "Title"}])
-    (h/is-truthy (h/query-by-label-text :notification-dot)))
-
-  (h/test "Status: Mention, Type: Message, Avatar: true"
-    (h/render [group-messaging-card/view
-               {:avatar  true
-                :status  :mention
-                :type    :message
-                :title   "Title"
-                :content {:mention-count 5}}])
-    (h/is-truthy (h/get-by-test-id :counter-component)))
-
-  (h/test "Status: Read, Type: Photo, Avatar: true"
-    (h/render [group-messaging-card/view
-               {:avatar  true
-                :status  :read
-                :type    :photo
-                :title   "Title"
-                :content {:photos photos-list}}])
-    (h/is-truthy (h/get-by-text (utils/subtitle :photo {:photos photos-list}))))
-
-  (h/test "Status: Read, Type: Stciker, Avatar: true"
-    (h/render [group-messaging-card/view
-               {:avatar  true
-                :status  :read
-                :type    :sticker
-                :title   "Title"
-                :content sticker}])
-    (h/is-truthy (h/get-by-text (utils/subtitle :sticker nil)))
-    (h/is-truthy (h/get-by-label-text :sticker)))
-
-  (h/test "Status: Read, Type: Gif, Avatar: true"
-    (h/render [group-messaging-card/view
-               {:avatar  true
-                :status  :read
-                :type    :gif
-                :title   "Title"
-                :content gif}])
-    (h/is-truthy (h/get-by-text (utils/subtitle :gif nil)))
-    (h/is-truthy (h/get-by-label-text :gif)))
-
-  (h/test "Status: Read, Type: Audio, Avatar: true"
-    (h/render [group-messaging-card/view
-               {:avatar  true
-                :status  :read
-                :type    :audio
-                :title   "Title"
-                :content {:duration "00:32"}}])
-    (h/is-truthy (h/get-by-text (utils/subtitle :audio nil)))
-    (h/is-truthy (h/get-by-text "00:32")))
-
-  (h/test "Status: Read, Type: Community, Avatar: true"
-    (h/render [group-messaging-card/view
-               {:avatar  true
-                :status  :read
-                :type    :community
-                :title   "Title"
-                :content {:community-avatar coinbase-community
-                          :community-name   "Coinbase"}}])
-    (h/is-truthy (h/get-by-text (utils/subtitle :community nil)))
-    (h/is-truthy (h/get-by-label-text :group-avatar))
-    (h/is-truthy (h/get-by-text "Coinbase")))
-
-  (h/test "Status: Read, Type: Link, Avatar: true"
-    (h/render [group-messaging-card/view
-               {:avatar  true
-                :status  :read
-                :type    :link
-                :title   "Title"
-                :content {:icon :placeholder
-                          :text "Rolling St..."}}])
-    (h/is-truthy (h/get-by-text (utils/subtitle :link nil)))
-    (h/is-truthy (h/get-by-label-text :group-avatar))
-    (h/is-truthy (h/get-by-text "Rolling St..."))))

src/quo2/components/switchers/group_messaging_card/style.cljs

@@ -1,16 +0,0 @@
-(ns quo2.components.switchers.group-messaging-card.style
-  (:require [quo2.foundations.colors :as colors]))
-
-(def avatar-container
-  {:left          10
-   :top           -30
-   :border-radius 48
-   :border-width  2
-   :border-color  colors/neutral-95
-   :position      :absolute})
-
-(def content-container
-  {:flex            1
-   :flex-direction  :column
-   :justify-content :space-between
-   :margin-top      16})

src/quo2/components/switchers/group_messaging_card/view.cljs

@@ -1,32 +0,0 @@
-(ns quo2.components.switchers.group-messaging-card.view
-  (:require
-    [react-native.core :as rn]
-    [quo2.components.avatars.group-avatar.view :as group-avatar]
-    [quo2.components.switchers.base-card.view :as base-card]
-    [quo2.components.switchers.card-main-info.view :as card-main-info]
-    [quo2.components.switchers.card-content.view :as card-content]
-    [quo2.components.switchers.group-messaging-card.style :as style]
-    [quo2.components.switchers.utils :as utils]))
-
-(defn view
-  "Opts:
-    :type - keyword -> :message/:photo/:sticker/:gif/:audio/:community/:link/:code
-    :status - keyword -> :read/:unread/:mention
-    :profile-color -> keyword or hexstring -> :blue/:army/... or #ABCEDF
-    :customization-color -> keyword or hexstring -> :blue/:army/... or #ABCEDF"
-  [{:keys [avatar type status title profile-color customization-color on-close content]
-    :or   {profile-color :blue avatar nil}}]
-  [base-card/base-card
-   {:customization-color customization-color
-    :on-close            on-close}
-   [rn/view {:style style/avatar-container}
-    [group-avatar/view
-     {:customization-color customization-color
-      :picture             avatar
-      :icon-name           :i/members
-      :size                :size-48}]]
-   [rn/view {:style style/content-container}
-    [card-main-info/view
-     {:title    title
-      :subtitle (utils/subtitle type content)}]
-    [card-content/view type status profile-color content]]])

src/quo2/components/switchers/utils.cljs

@@ -1,35 +0,0 @@
-(ns quo2.components.switchers.utils
-  (:require [utils.i18n :as i18n]))
-
-(defn subtitle
-  [type {:keys [photos]}]
-  (case type
-    :message
-    (i18n/label :t/message)
-
-    :photo
-    (i18n/label
-     (if (= (count photos) 1)
-       :t/one-photo
-       :t/n-photos)
-     {:count (count photos)})
-
-    :sticker
-    (i18n/label :t/sticker)
-
-    :gif
-    (i18n/label :t/gif)
-
-    :audio
-    (i18n/label :t/audio-message)
-
-    :community
-    (i18n/label :t/link-to-community)
-
-    :link
-    (i18n/label :t/external-link)
-
-    :code
-    (i18n/label :t/code-snippet)
-
-    ""))

src/quo2/components/tags/context_tag/style.cljs

@@ -7,17 +7,13 @@
     (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
     (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)))
 
-(defn audio-tag-icon-container
-  [customization-color theme]
+(def audio-tag-icon-container
   {:width            20
    :height           20
    :border-radius    10
    :align-items      :center
    :justify-content  :center
-   :background-color (colors/theme-colors
-                      (colors/custom-color customization-color 50)
-                      (colors/custom-color customization-color 60)
-                      theme)})
+   :background-color colors/primary-50})
 
 (def audio-tag-icon-color colors/white)
 

src/quo2/components/tags/context_tag/view.cljs

@@ -91,31 +91,30 @@
      :default
      [tag-skeleton {:theme theme :size size :text full-name}
       [user-avatar/user-avatar
-       {:full-name           full-name
-        :profile-picture     profile-picture
-        :size                (if (= size 24) :xxs 28)
-        :status-indicator?   false
-        :ring?               false
-        :customization-color customization-color}]]
+       {:full-name         full-name
+        :profile-picture   profile-picture
+        :size              (if (= size 24) :xxs 28)
+        :status-indicator? false
+        :ring?             false}]]
 
      :multiuser
-     [preview-list/view {:type :user :size :size-20}
+     [preview-list/view {:type :user :size 20}
       users]
 
      :multinetwork
-     [preview-list/view {:type :network :size :size-20}
-      networks]
+     [preview-list/view {:type :network :size 20}
+      (map #(hash-map :profile-picture %) networks)]
 
      :audio
      [tag-skeleton {:theme theme :text (str duration)}
-      [rn/view {:style (style/audio-tag-icon-container customization-color theme)}
+      [rn/view {:style style/audio-tag-icon-container}
        [icons/icon :i/play {:color style/audio-tag-icon-color :size 12}]]]
 
      :group
      [tag-skeleton {:theme theme :size size :text group-name}
       [group-avatar/view
        {:icon-name           :i/members
-        :size                (if (= size 24) :size-20 :size-28)
+        :size                (if (= size 24) :size/s-20 :size/s-28)
         :customization-color (colors/custom-color customization-color 50)}]]
 
      (:channel :community)

src/quo2/components/tags/network_tags/component_spec.cljs

@@ -15,5 +15,5 @@
                 :networks [{:source "network-icon1.png"}
                            {:source "network-icon2.png"}
                            {:source "network-icon3.png"}]
-                :size     :size-32}])
+                :size     :size/s-32}])
     (h/is-truthy (h/get-by-text "Multiple Networks"))))

src/quo2/components/tags/network_tags/view.cljs

@@ -14,7 +14,7 @@
    [preview-list/view
     {:type   :network
      :number (count networks)
-     :size   :size-16} networks]
+     :size   :size/s-16} networks]
    [text/text
     {:weight :medium
      :size   :paragraph-2

src/quo2/components/tags/number_tag/component_spec.cljs

@@ -8,13 +8,13 @@
     (h/render [number-tag/view
                {:type   :rounded
                 :number "3"
-                :size   :size-32
+                :size   :size/s-32
                 :blur?  false}])
     (h/is-truthy (h/get-by-text "+3")))
   (h/test "+48 render"
     (h/render [number-tag/view
                {:type   :squared
                 :number "48"
-                :size   :size-24
+                :size   :size/s-24
                 :blur?  true}])
     (h/is-truthy (h/get-by-text "+48"))))

src/quo2/components/tags/number_tag/style.cljs

@@ -2,26 +2,26 @@
   (:require [quo2.foundations.colors :as colors]))
 
 (def sizes
-  {:size-32 {:size          32
-             :width-extra   40
-             :border-radius {:rounded 16 :squared 10}
-             :icon-size     20}
-   :size-24 {:size          24
-             :width-extra   32
-             :border-radius {:rounded 12 :squared 8}
-             :icon-size     16}
-   :size-20 {:size          20
-             :width-extra   24
-             :border-radius {:rounded 10 :squared 8}
-             :icon-size     12}
-   :size-16 {:size          16
-             :width-extra   20
-             :border-radius {:rounded 8 :squared 8}
-             :icon-size     12}
-   :size-14 {:size          14
-             :width-extra   16
-             :border-radius {:rounded 7 :squared 7}
-             :icon-size     12}})
+  {:size/s-32 {:size          32
+               :width-extra   40
+               :border-radius {:rounded 16 :squared 10}
+               :icon-size     20}
+   :size/s-24 {:size          24
+               :width-extra   32
+               :border-radius {:rounded 12 :squared 8}
+               :icon-size     16}
+   :size/s-20 {:size          20
+               :width-extra   24
+               :border-radius {:rounded 10 :squared 8}
+               :icon-size     12}
+   :size/s-16 {:size          16
+               :width-extra   20
+               :border-radius {:rounded 8 :squared 8}
+               :icon-size     12}
+   :size/s-14 {:size          14
+               :width-extra   16
+               :border-radius {:rounded 7 :squared 7}
+               :icon-size     12}})
 
 (defn get-color
   [blur? theme]
@@ -55,11 +55,10 @@
     (get-in sizes [size (if widen? :width-extra :size)])))
 
 (defn container
-  [{:keys [type number size blur? theme container-style]}]
-  {:style (assoc container-style
-                 :width            (get-width size number)
-                 :height           (get-in sizes [size :size])
-                 :border-radius    (get-shape-value size :border-radius type)
-                 :justify-content  :center
-                 :align-items      :center
-                 :background-color (get-bg-color blur? theme))})
+  [{:keys [type number size blur? theme]}]
+  {:style {:width            (get-width size number)
+           :height           (get-in sizes [size :size])
+           :border-radius    (get-shape-value size :border-radius type)
+           :justify-content  :center
+           :align-items      :center
+           :background-color (get-bg-color blur? theme)}})

src/quo2/components/tags/number_tag/view.cljs

@@ -1,9 +1,9 @@
 (ns quo2.components.tags.number-tag.view
   (:require [quo2.components.icon :as icons]
             [quo2.components.markdown.text :as text]
+            [react-native.core :as rn]
             [quo2.components.tags.number-tag.style :as style]
-            [quo2.theme :as quo.theme]
-            [react-native.core :as rn]))
+            [quo2.theme :as quo.theme]))
 
 (defn view-internal
   [{:keys [number size blur? theme] :as props}]
@@ -12,7 +12,7 @@
     [rn/view (style/container props)
      (if (and (> size-value 20) (< (count number) 3))
        [text/text
-        {:size   (if (= size :size-32)
+        {:size   (if (= size :size/s-32)
                    :paragraph-2
                    :label)
          :weight :medium