fix: icon size in system message add new :size/s-24 icon-avatar (#17108)

src/quo2/components/avatars/icon_avatar.cljs

@@ -5,18 +5,22 @@
             [react-native.core :as rn]))
 
 (def ^:private sizes
-  {:medium 32
-   :small  20})
+  {: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}}]
-  (let [component-size (size sizes)
+    :or   {opacity 20
+           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)
-        icon-size      (case size
-                         :medium 20
-                         :small  12)]
+        icon-color                                  (colors/custom-color-by-theme color 50 60)]
     [rn/view
      {:style {:width            component-size
               :height           component-size

src/quo2/components/messages/system_message.cljs

@@ -1,12 +1,12 @@
 (ns quo2.components.messages.system-message
-  (:require [quo2.components.avatars.icon-avatar :as icon-avatar]
+  (:require [clojure.string :as string]
+            [quo2.components.avatars.icon-avatar :as icon-avatar]
             [quo2.components.avatars.user-avatar.view :as user-avatar]
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
-            [utils.i18n :as i18n]
             [quo2.theme :as quo.theme]
-            [clojure.string :as string]))
+            [react-native.core :as rn]
+            [utils.i18n :as i18n]))
 
 (defn text-color
   [theme]
@@ -21,7 +21,7 @@
   [rn/view
    {:margin-right 8}
    [icon-avatar/icon-avatar
-    {:size    :medium
+    {:size    :size/s-32
      :icon    icon
      :color   color
      :opacity opacity}]])

src/quo2/components/wallet/keypair/view.cljs

@@ -1,18 +1,18 @@
 (ns quo2.components.wallet.keypair.view
   (:require
+    [clojure.string :as string]
     [quo2.components.avatars.icon-avatar :as icon-avatar]
     [quo2.components.avatars.user-avatar.view :as user-avatar]
     [quo2.components.icon :as icon]
     [quo2.components.list-items.account-list-card.view :as account-list-card]
     [quo2.components.markdown.text :as text]
+    [quo2.components.selectors.selectors.view :as selectors]
+    [quo2.components.wallet.keypair.style :as style]
     [quo2.foundations.colors :as colors]
     [quo2.theme :as quo.theme]
     [react-native.core :as rn]
-    [quo2.components.selectors.selectors.view :as selectors]
     [reagent.core :as reagent]
-    [utils.i18n :as i18n]
-    [quo2.components.wallet.keypair.style :as style]
-    [clojure.string :as string]))
+    [utils.i18n :as i18n]))
 
 (defn keypair-string
   [full-name]
@@ -33,7 +33,7 @@
       :size                :small
       :customization-color customization-color}]
     [icon-avatar/icon-avatar
-     {:size    :medium
+     {:size    :size/s-32
       :icon    :i/placeholder
       :border? true}]))
 

src/status_im2/contexts/quo_preview/avatars/icon_avatar.cljs

@@ -6,9 +6,10 @@
 (def descriptor
   [{:key     :size
     :type    :select
-    :options [{:key :small}
-              {:key :medium}
-              {:key :big}]}
+    :options [{:key :size/s-20}
+              {:key :size/s-24}
+              {:key :size/s-32}
+              {:key :size/s-48}]}
    {:key     :icon
     :type    :select
     :options [{:key   :i/placeholder20
@@ -19,7 +20,7 @@
 
 (defn view
   []
-  (let [state (reagent/atom {:size  :big
+  (let [state (reagent/atom {:size  :size/s-48
                              :icon  :i/placeholder20
                              :color :primary})]
     (fn []