From 50a1e10136d897d61219a5ee4440408189db4a45 Mon Sep 17 00:00:00 2001
From: yqrashawn <namy.19@gmail.com>
Date: Fri, 8 Sep 2023 19:23:32 +0800
Subject: [PATCH] fix: icon size in system message add new :size/s-24
 icon-avatar (#17108)

---
 src/quo2/components/avatars/icon_avatar.cljs  | 22 +++++++++++--------
 .../components/messages/system_message.cljs   | 10 ++++-----
 src/quo2/components/wallet/keypair/view.cljs  | 10 ++++-----
 .../quo_preview/avatars/icon_avatar.cljs      |  9 ++++----
 4 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/src/quo2/components/avatars/icon_avatar.cljs b/src/quo2/components/avatars/icon_avatar.cljs
index 95f0981a17..9f62a8975e 100644
--- a/src/quo2/components/avatars/icon_avatar.cljs
+++ b/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)
-        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)]
+    :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)]
     [rn/view
      {:style {:width            component-size
               :height           component-size
diff --git a/src/quo2/components/messages/system_message.cljs b/src/quo2/components/messages/system_message.cljs
index fcb6fc4e95..b965e15d24 100644
--- a/src/quo2/components/messages/system_message.cljs
+++ b/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}]])
diff --git a/src/quo2/components/wallet/keypair/view.cljs b/src/quo2/components/wallet/keypair/view.cljs
index abb09c1108..9f876175c8 100644
--- a/src/quo2/components/wallet/keypair/view.cljs
+++ b/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}]))
 
diff --git a/src/status_im2/contexts/quo_preview/avatars/icon_avatar.cljs b/src/status_im2/contexts/quo_preview/avatars/icon_avatar.cljs
index 13c64e6750..fbaa703148 100644
--- a/src/status_im2/contexts/quo_preview/avatars/icon_avatar.cljs
+++ b/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 []