fix: applying new prop/name to newly added/changed components

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

@@ -13,21 +13,21 @@
 
   (h/test "with emoji"
     (let [emoji "💸"]
-      (h/render [account-avatar/view {:emoji emoji :size 80}])
+      (h/render [account-avatar/view {:emoji emoji :size :size-80}])
       (h/is-truthy (h/query-by-label-text :account-avatar))
       (h/is-truthy (h/query-by-label-text :account-emoji))
       (h/is-truthy (h/query-by-text emoji))))
 
   (h/test "size 80 with emoji, with type - default"
     (let [opts {:emoji               "🏝️"
-                :size                80
+                :size                :size-80
                 :type                :default
                 :customization-color :blue}]
       (h/render [account-avatar/view opts])
       (h/is-truthy (h/query-by-label-text :account-avatar))
       (h/has-style (h/get-by-label-text :account-avatar)
-                   {:height          (:size opts)
-                    :width           (:size opts)
+                   {:height          (style/get-container-size (:size opts))
+                    :width           (style/get-container-size (:size opts))
                     :borderRadius    (style/get-border-radius (:size opts))
                     :backgroundColor (colors/resolve-color (:customization-color opts) :dark)})
       (h/is-truthy (h/query-by-label-text :account-emoji))
@@ -37,18 +37,18 @@
 
   (h/test "size 48 with emoji, with type - watch only"
     (let [opts {:emoji               "💵"
-                :size                48
+                :size                :size-48
                 :type                :watch-only
                 :customization-color :purple}]
       (h/render [account-avatar/view opts])
       (h/is-truthy (h/query-by-label-text :account-avatar))
       (h/has-style
        (h/get-by-label-text :account-avatar)
-       {:height          (:size opts)
-        :width           (:size opts)
+       {:height          (style/get-container-size (:size opts))
+        :width           (style/get-container-size (:size opts))
         :borderRadius    (style/get-border-radius (:size opts))
         :borderWidth     1
-        :backgroundColor (colors/resolve-color (:customization-color opts) :light 10)})
+        :backgroundColor (colors/resolve-color (:customization-color opts) :light 5)})
       (h/is-truthy (h/query-by-label-text :account-emoji))
       (h/has-style (h/query-by-label-text :account-emoji)
                    {:fontSize (style/get-emoji-size (:size opts))})
@@ -56,14 +56,14 @@
 
   (h/test "size 28 with emoji, with type - default"
     (let [opts {:emoji               "🏝️"
-                :size                28
+                :size                :size-28
                 :type                :default
                 :customization-color :turquoise}]
       (h/render [account-avatar/view opts])
       (h/is-truthy (h/query-by-label-text :account-avatar))
       (h/has-style (h/get-by-label-text :account-avatar)
-                   {:height          (:size opts)
-                    :width           (:size opts)
+                   {:height          (style/get-container-size (:size opts))
+                    :width           (style/get-container-size (:size opts))
                     :borderRadius    (style/get-border-radius (:size opts))
                     :backgroundColor (colors/resolve-color (:customization-color opts) :dark)})
       (h/is-truthy (h/query-by-label-text :account-emoji))
@@ -71,17 +71,17 @@
                    {:fontSize (style/get-emoji-size (:size opts))})
       (h/is-truthy (h/query-by-text (:emoji opts)))))
 
-  (h/test "size 16 with emoji, with type - watch only"
+  (h/test "size 16 with emoji, with type - missing keypair"
     (let [opts {:emoji               "🎉"
-                :size                16
-                :type                :watch-only
+                :size                :size-16
+                :type                :missing-keypair
                 :customization-color :copper}]
       (h/render [account-avatar/view opts])
       (h/is-truthy (h/query-by-label-text :account-avatar))
       (h/has-style
        (h/get-by-label-text :account-avatar)
-       {:height          (:size opts)
-        :width           (:size opts)
+       {:height          (style/get-container-size (:size opts))
+        :width           (style/get-container-size (:size opts))
         :borderRadius    (style/get-border-radius (:size opts))
         :borderWidth     0.8
         :backgroundColor (colors/resolve-color (:customization-color opts) :light 10)})

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

@@ -2,68 +2,76 @@
   (:require
     [quo2.foundations.colors :as colors]))
 
-(def default-size 80)
+(def default-size :size-80)
 (def default-border-radius 16)
 (def default-padding 16)
 (def default-emoji-size 36)
 
-(def ^:private container-size
-  {:size-64 64})
+(defn get-container-size
+  [size]
+  (case size
+    :size-80 80
+    :size-64 64
+    :size-48 48
+    :size-32 32
+    :size-28 28
+    :size-24 24
+    :size-20 20
+    :size-16 16))
 
 (defn get-border-radius
   [size]
   (case size
-    80       16
+    :size-80 16
     :size-64 16
-    48       12
-    32       10
-    28       8
-    24       8
-    20       6
-    16       4
+    :size-48 12
+    :size-32 10
+    :size-28 8
+    :size-24 8
+    :size-20 6
+    :size-16 4
     default-border-radius))
 
 (defn get-padding
   [size]
   (case size
-    80 16
-    48 8
-    32 6
-    28 6
-    24 6
-    20 4
-    16 2
+    :size-80 16
+    :size-48 8
+    :size-32 6
+    :size-28 6
+    :size-24 6
+    :size-20 4
+    :size-16 2
     default-padding))
 
 (defn get-emoji-size
   [size]
   (case size
-    80       36
+    :size-80 36
     :size-64 30
-    48       24
-    32       15
-    28       12
-    24       11
-    20       11
-    16       11
+    :size-48 24
+    :size-32 15
+    :size-28 12
+    :size-24 11
+    :size-20 11
+    :size-16 11
     default-emoji-size))
 
 (defn get-border-width
   [size]
-  (if (= size 16)
+  (if (= size :size-16)
     0.8 ;; 0.8 px is for only size 16
     1)) ;; Rest of the size will have 1 px
 
-
 (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)
+        missing-keypair? (= type :missing-keypair)
+        dimension-size   (get-container-size size)]
+    (cond-> {:width            dimension-size
+             :height           dimension-size
              :background-color (colors/resolve-color customization-color theme)
              :border-radius    (get-border-radius size)
              :border-color     (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)
@@ -72,6 +80,12 @@
              :justify-content  :center}
 
       watch-only?
-      (assoc :border-width     (get-border-width size)
-             :background-color (colors/resolve-color customization-color theme 10)))))
+      (assoc :border-width
+             (get-border-width size)
+             :background-color
+             (colors/resolve-color customization-color theme 5))
 
+      missing-keypair?
+      (assoc
+       :border-width     (get-border-width size)
+       :background-color (colors/resolve-color customization-color theme (if (= theme :dark) 20 10))))))

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

@@ -8,11 +8,11 @@
 (defn- view-internal
   "Opts:
    
-    :type  - keyword -> :default/:watch-only
+    :type  - keyword -> :default/:watch-only/:missing-keypair
 
     :emoji - string -> 🍑 [default]
    
-    :size  - number -> 80 [default] /48/32/28/24/20/16
+    :size  - keyword -> :size-80 [default] :size-80/:size-64/:size-48/:size-32/...
    
     :customization-color - keyword or hexstring -> :blue/:army/... or #ABCEDF
    

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

@@ -8,22 +8,22 @@
     (h/render [component/view])
     (h/is-truthy (h/query-by-label-text :initials))
     (h/is-null (h/query-by-label-text :emoji))
-    (h/is-null (h/query-by-label-text :lock)))
+    (h/is-null (h/query-by-role :channel-avatar-badge)))
 
-  (h/test "with emoji, no lock set, large size"
+  (h/test "with emoji, no badge, large size"
     (let [emoji "🍓"]
       (h/render [component/view {:emoji emoji :size :size-32}])
       (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))))
+      (h/is-null (h/query-by-role :channel-avatar-badge))))
 
-  (h/test "locked"
-    (h/render [component/view {:locked? true}])
-    (h/is-truthy (h/query-by-label-text :lock)))
+  (h/test "with locked badge"
+    (h/render [component/view {:badge :locked}])
+    (h/is-truthy (h/query-by-role :channel-avatar-badge-locked)))
 
-  (h/test "unlocked"
-    (h/render [component/view {:locked? false}])
-    (h/is-truthy (h/query-by-label-text :lock)))
+  (h/test "with unlocked badge"
+    (h/render [component/view {:badge :unlocked}])
+    (h/is-truthy (h/query-by-label-text :channel-avatar-badge-unlocked)))
 
   (h/test "no emoji, smaller size"
     (h/render [component/view {:full-name "Status Mobile"}])

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

@@ -24,7 +24,7 @@
                 :size-32 15
                 11)})
 
-(defn lock-container
+(defn badge-container
   [size theme]
   (let [distance (if (= size :size-32) 20 12)]
     {:position         :absolute
@@ -34,6 +34,6 @@
      :border-radius    (* 2 lock-icon-size)
      :padding          2}))
 
-(def lock-icon
+(def badge-icon
   {:width  lock-icon-size
    :height lock-icon-size})

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

@@ -22,23 +22,24 @@
                                 :weight :medium))
      (utils.string/get-initials channel-name amount-initials)]))
 
-(defn- lock
-  [locked? size theme]
-  ;; When `locked?` is nil, we must not display the unlocked icon.
-  (when (boolean? locked?)
-    [rn/view
-     {:accessibility-label :lock
-      :style               (style/lock-container size theme)}
-     [icons/icon (if locked? :i/locked :i/unlocked)
-      {:color           (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
-       :container-style style/lock-icon
-       :size            12}]]))
+(defn- badge-icon
+  [{:keys [badge size theme]}]
+  [rn/view
+   {:accessibility-label :channel-avatar-badge
+    :style               (style/badge-container size theme)}
+   [icons/icon
+    (case badge
+      :locked   :i/locked
+      :unlocked :i/unlocked)
+    {:color               (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
+     :container-style     style/badge-icon
+     :size                12
+     :accessibility-label (keyword (str "channel-avatar-badge-" (name badge)))}]])
 
 (defn- view-internal
   "Options:
 
-  :size - keyword (default nil) - Container size, for the moment,
-  only :size/l (meaning large) is supported.
+  :size - keyword (defaults to 24) - Container size (:size-32 :size-64)
 
   :emoji - string (default nil)
 
@@ -46,13 +47,12 @@
   community channel, then the default color should be the community custom
   color.
 
-  :locked? - nil/bool (default nil) - When true/false display a locked/unlocked
-  icon respectively. When nil does not show icon.
+  :badge - keyword (default nil) shows a badge next to the avatar (:locked :unlocked)
 
   :full-name - string (default nil) - When :emoji is blank, this value will be
   used to extract the initials.
   "
-  [{:keys [size emoji customization-color locked? full-name theme]}]
+  [{:keys [size emoji customization-color badge full-name theme]}]
   [rn/view
    {:accessibility-label :channel-avatar
     :style               (style/outer-container {:theme               theme
@@ -68,6 +68,10 @@
       {:style               (style/emoji-size size)
        :accessibility-label :emoji}
       (string/trim emoji)])
-   [lock locked? size theme]])
+   (when (keyword? badge)
+     [badge-icon
+      {:badge badge
+       :size  size
+       :theme theme}])])
 
 (def view (quo.theme/with-theme view-internal))

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

@@ -10,6 +10,4 @@
    :justify-content  :center
    :border-radius    (/ container-size 2)
    :overflow         :hidden
-   :background-color (colors/theme-colors (colors/custom-color customization-color 50)
-                                          (colors/custom-color customization-color 60)
-                                          theme)})
+   :background-color (colors/resolve-color customization-color theme)})

src/quo2/components/avatars/icon_avatar.cljs

@@ -15,7 +15,7 @@
    :size-20 {:component 20
              :icon      12}})
 
-(defn icon-avatar-internal
+(defn view-internal
   [{:keys [size icon color opacity border? theme]
     :or   {opacity 20
            size    :size-32}}]
@@ -35,4 +35,4 @@
       {:size  icon-size
        :color icon-color}]]))
 
-(def icon-avatar (quo.theme/with-theme icon-avatar-internal))
+(def view (quo.theme/with-theme view-internal))

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

@@ -9,10 +9,10 @@
   (h/describe "Profile picture"
     (h/test "Renders"
       (h/render
-       [user-avatar/user-avatar {:profile-picture mock-picture}])
+       [user-avatar/view {:profile-picture mock-picture}])
       (h/is-truthy (h/get-by-label-text :profile-picture)))
 
     (h/test "Renders even if `:full-name` is passed"
       (h/render
-       [user-avatar/user-avatar {:profile-picture mock-picture}])
+       [user-avatar/view {:profile-picture mock-picture}])
       (h/is-truthy (h/get-by-label-text :profile-picture)))))

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

@@ -3,7 +3,7 @@
     [quo2.foundations.colors :as colors]))
 
 (def sizes
-  {:big     {:dimensions                      80
+  {:size-80 {:dimensions                      80
              :status-indicator                12
              :status-indicator-border         4
              :status-indicator-center-to-edge 12
@@ -15,37 +15,37 @@
              :status-indicator-center-to-edge 6
              :font-size                       :heading-1
              :ring-width                      2}
-   :medium  {:dimensions                      48
+   :size-48 {: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
+   :size-32 {: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
+   :size-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
+   :size-24 {: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
+   :size-20 {:dimensions                      20
              :status-indicator                0
              :status-indicator-border         0
              :status-indicator-center-to-edge 0
              :font-size                       :label
              :ring-width                      2}
-   :xxxs    {:dimensions                      16
+   :size-16 {:dimensions                      16
              :status-indicator                0
              :status-indicator-border         0
              :status-indicator-center-to-edge 0

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

@@ -3,25 +3,23 @@
     [quo2.components.avatars.user-avatar.style :as style]
     [quo2.components.common.no-flicker-image :as no-flicker-image]
     [quo2.components.markdown.text :as text]
-    [quo2.theme]
+    [quo2.theme :as quo.theme]
     [react-native.core :as rn]
     [react-native.fast-image :as fast-image]
     utils.string))
 
-(defn initials-avatar
-  [{:keys [full-name size customization-color theme]}]
-  (let [font-size       (get-in style/sizes [size :font-size])
-        amount-initials (if (#{:xs :xxs :xxxs} size) 1 2)]
-    [rn/view
-     {:accessibility-label :initials-avatar
-      :style               (style/initials-avatar size customization-color theme)}
-     [text/text
-      {:style  style/initials-avatar-text
-       :size   font-size
-       :weight :semi-bold}
-      (utils.string/get-initials full-name amount-initials)]]))
+(defn- initials-avatar
+  [{:keys [full-name size customization-color theme amount-initials font-size]}]
+  [rn/view
+   {:accessibility-label :initials-avatar
+    :style               (style/initials-avatar size customization-color theme)}
+   [text/text
+    {:style  style/initials-avatar-text
+     :size   font-size
+     :weight :semi-bold}
+    (utils.string/get-initials full-name amount-initials)]])
 
-(defn user-avatar-internal
+(defn- view-internal
   "Render user avatar with `profile-picture`
   `profile-picture` should be one of {:uri profile-picture-uri} or {:fn profile-picture-fn}
 
@@ -66,17 +64,19 @@
         ;; https://github.com/status-im/status-mobile/issues/15553
         image-view         (if static? no-flicker-image/image fast-image/fast-image)
         font-size          (get-in style/sizes [size :font-size])
-        amount-initials    (if (#{:xs :xxs :xxxs} size) 1 2)
+        amount-initials    (if (#{:size-24 :size-20 :size-16} size) 1 2)
         sizes              (get style/sizes size)
         indicator-color    (get style/indicator-color (if online? :online :offline))
         profile-picture-fn (:fn profile-picture)]
 
     [rn/view {:style outer-styles :accessibility-label :user-avatar}
      (if (and full-name (not (or profile-picture-fn profile-picture)))
-       ;; this is for things that's not user-avatar
-       ;; but are currently using user-avatar to render the initials
-       ;; e.g. community avatar
-       [initials-avatar props]
+       ;; this is for things that's not user-avatar but are currently using user-avatar to render
+       ;; the initials e.g. community avatar e.g. community avatar
+       [initials-avatar
+        (assoc props
+               :amount-initials amount-initials
+               :font-size       font-size)]
        [image-view
         {:accessibility-label :profile-picture
          :style outer-styles
@@ -85,8 +85,7 @@
                {:uri (profile-picture-fn
                       {:length                   amount-initials
                        :full-name                full-name
-                       :font-size                (:font-size (text/text-style {:size
-                                                                               font-size}))
+                       :font-size                (:font-size (text/text-style {:size font-size}))
                        :indicator-size           (when status-indicator?
                                                    (:status-indicator sizes))
                        :indicator-border         (when status-indicator?
@@ -108,4 +107,4 @@
 
                :else {:uri profile-picture})}])]))
 
-(def user-avatar (quo2.theme/with-theme user-avatar-internal))
+(def view (quo.theme/with-theme view-internal))

src/quo2/components/avatars/wallet_user_avatar.cljs

@@ -6,37 +6,47 @@
     [quo2.theme :as quo.theme]
     [react-native.core :as rn]))
 
-(def circle-sizes
-  {:small   20
-   :medium  32
-   :large   48
+(def ^:private circle-sizes
+  {:size-20 20
+   :size-32 32
+   :size-48 48
    :size-64 64
-   :x-large 80})
+   :size-80 80})
 
-(def font-sizes
-  {:small   :label
-   :medium  :paragraph-2
-   :large   :paragraph-1
+(def ^:private font-sizes
+  {:size-20 :label
+   :size-32 :paragraph-2
+   :size-48 :paragraph-1
    :size-64 :heading-1
-   :x-large :heading-1})
+   :size-80 :heading-1})
 
-(def font-weights
-  {:small   :medium
-   :medium  :semi-bold
-   :large   :semi-bold
+(def ^:private font-weights
+  {:size-20 :medium
+   :size-32 :semi-bold
+   :size-48 :semi-bold
    :size-64 :medium
-   :x-large :medium})
+   :size-80 :medium})
 
-(defn- view-internal
+(defn- container-style
+  [size color]
+  {:width            size
+   :height           size
+   :border-radius    size
+   :text-align       :center
+   :justify-content  :center
+   :align-items      :center
+   :background-color color})
+
+(defn view-internal
   "params, first name, last name, customization-color, size
    and if it's dark or not!"
   [{:keys [f-name l-name customization-color size theme monospace? uppercase?]
     :or   {f-name     "John"
            l-name     "Doe"
-           size       :x-large
+           size       :size-80
            uppercase? true}}]
   (let [circle-size    (size circle-sizes)
-        small?         (= size :small)
+        small?         (= size :size-20)
         f-name-initial (-> f-name
                            (#(if uppercase? (string/upper-case %) %))
                            (subs 0 1))
@@ -50,13 +60,7 @@
                          (colors/resolve-color customization-color theme)
                          (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 theme))]
     [rn/view
-     {:style {:width            circle-size
-              :height           circle-size
-              :border-radius    circle-size
-              :text-align       :center
-              :justify-content  :center
-              :align-items      :center
-              :background-color circle-color}}
+     {:style (container-style circle-size circle-color)}
      [text/text
       {:size   (size font-sizes)
        :weight (if monospace? :monospace (size font-weights))
@@ -65,4 +69,4 @@
         (str f-name-initial)
         (str f-name-initial l-name-initial))]]))
 
-(def wallet-user-avatar (quo.theme/with-theme view-internal))
+(def view (quo.theme/with-theme view-internal))

src/quo2/components/drawers/drawer_top/view.cljs

@@ -18,16 +18,16 @@
   (case type
     :account         [account-avatar/view
                       {:customization-color customization-color
-                       :size                32
+                       :size                :size-32
                        :emoji               account-avatar-emoji
                        :type                :default}]
-    :keypair         [icon-avatar/icon-avatar
+    :keypair         [icon-avatar/view
                       {:icon    icon-avatar
                        :border? true
                        :color   :neutral}]
 
-    :default-keypair [user-avatar/user-avatar
-                      {:size              :small
+    :default-keypair [user-avatar/view
+                      {:size              :size-32
                        :status-indicator? false
                        :profile-picture   profile-picture}]
     nil))

src/quo2/components/inputs/profile_input/view.cljs

@@ -29,13 +29,13 @@
                  :width        24
                  :height       24
                  :borderRadius 12}]}
-       [user-avatar/user-avatar
+       [user-avatar/view
         (assoc image-picker-props
                :customization-color customization-color
                :static?             true
                :status-indicator?   false
                :full-name           (if (seq full-name) full-name placeholder)
-               :size                :medium)]]
+               :size                :size-48)]]
       [buttons/button
        {:accessibility-label :select-profile-picture-button
         :type                :grey

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

@@ -21,7 +21,7 @@
   [{: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)]
+   [account-avatar/view (assoc account-props :size :size-32)]
    [rn/view {:style style/account-container}
     [rn/view
      {:style style/account-title-container}

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

@@ -5,7 +5,7 @@
 
 (def account-props
   {:customization-color :purple
-   :size                32
+   :size                :size-32
    :emoji               "🍑"
    :type                :default
    :name                "Tip to Vegas"

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

@@ -12,8 +12,8 @@
 (defn- left-container
   [{:keys [theme address networks blur?]}]
   [rn/view {:style style/left-container}
-   [wallet-user-avatar/wallet-user-avatar
-    {:size       :medium
+   [wallet-user-avatar/view
+    {:size       :size-48
      :f-name     "0"
      :l-name     "x"
      :monospace? true

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

@@ -40,7 +40,7 @@
         :on-press-out        #(reset! pressed? false)}
        [channel-avatar/view
         {:size                :size-32
-         :locked?             locked?
+         :badge               (if locked? :locked :unlocked)
          :full-name           name
          :customization-color customization-color
          :emoji               emoji}]

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

@@ -7,43 +7,48 @@
   (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-32 {:size                32
+             :account-avatar-size :size-32
+             :user-avatar-size    :size-32
+             :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
+             :account-avatar-size :size-24
+             :user-avatar-size    :size-24
+             :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
+             :account-avatar-size :size-24
+             :user-avatar-size    :size-24
+             :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
+             :account-avatar-size :size-24
+             :user-avatar-size    :size-24
+             :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
+             :account-avatar-size :size-24
+             :user-avatar-size    :size-24
+             :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

@@ -11,19 +11,20 @@
 
 (defn- preview-item
   [{:keys [item type size-key]}]
-  (let [size             (get-in properties/sizes [size-key :size])
-        user-avatar-size (get-in properties/sizes [size-key :user-avatar-size])
-        border-radius    (get-in properties/sizes
-                                 [size-key :border-radius (properties/border-type type)])]
+  (let [size                (get-in properties/sizes [size-key :size])
+        account-avatar-size (get-in properties/sizes [size-key :account-avatar-size])
+        user-avatar-size    (get-in properties/sizes [size-key :user-avatar-size])
+        border-radius       (get-in properties/sizes
+                                    [size-key :border-radius (properties/border-type type)])]
     (case type
-      :user                        [user-avatar/user-avatar
+      :user                        [user-avatar/view
                                     (assoc item
                                            :ring?             false
                                            :status-indicator? false
                                            :size              user-avatar-size)]
 
       :accounts                    [account-avatar/view
-                                    (assoc item :size size)]
+                                    (assoc item :size account-avatar-size)]
 
       (:communities :collectibles) [fast-image/fast-image
                                     {:source (or (:source item) item)

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

@@ -16,8 +16,8 @@
         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
+     [wallet-user-avatar/view
+      {:size   :size-32
        :f-name first-name
        :l-name last-name
        :color  customization-color}]

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

@@ -18,7 +18,7 @@
     :style               style/account-container}
    [account-avatar/view
     {:emoji               emoji
-     :size                16
+     :size                :size-16
      :customization-color customization-color}]
    [text/text
     {:size   :paragraph-2
@@ -62,7 +62,7 @@
                                   (on-press))
           :accessibility-label :container}
          [rn/view {:style style/left-container}
-          [user-avatar/user-avatar (assoc contact-props :size :small)]
+          [user-avatar/view (assoc contact-props :size :size-32)]
           [rn/view {:style style/saved-contact-container}
            [rn/view
             {:style style/account-title-container}

src/quo2/components/list_items/user_list.cljs

@@ -45,11 +45,11 @@
     :accessibility-label :user-list
     :on-press            (when on-press on-press)
     :on-long-press       (when on-long-press on-long-press)}
-   [user-avatar/user-avatar
+   [user-avatar/view
     {:full-name       primary-name
      :profile-picture photo-path
      :online?         online?
-     :size            :small}]
+     :size            :size-32}]
    [rn/view {:style {:margin-left 8}}
     [author/author
      {:primary-name   primary-name

src/quo2/components/messages/system_message/view.cljs

@@ -14,7 +14,7 @@
   [{:keys [icon color opacity]}]
   [rn/view
    {:style style/sm-icon-wrapper}
-   [icon-avatar/icon-avatar
+   [icon-avatar/view
     {:size    :size-32
      :icon    icon
      :color   color
@@ -31,8 +31,8 @@
 (defn sm-user-avatar
   [display-name photo-path]
   [rn/view style/sm-user-avatar-wrapper
-   [user-avatar/user-avatar
-    {:size              :xxxs
+   [user-avatar/view
+    {:size              :size-16
      :full-name         display-name
      :profile-picture   photo-path
      :ring?             false

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

@@ -80,11 +80,11 @@
   [rn/touchable-without-feedback {:on-press on-press}
    [rn/view
     {:accessibility-label :open-profile}
-    [user-avatar/user-avatar
+    [user-avatar/view
      (merge {:status-indicator?   true
              :ring?               true
              :customization-color customization-color
-             :size                :small}
+             :size                :size-32}
             avatar-props)]]])
 
 (defn- right-section

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

@@ -79,7 +79,7 @@
                                  icon-color
                                  (assoc :color icon-color))]
                               user
-                              [user-avatar/user-avatar user])
+                              [user-avatar/view user])
        :title           title
        :text            text
        :right           (if undo-duration

src/quo2/components/profile/profile_card/view.cljs

@@ -53,10 +53,10 @@
                  :border-bottom-radius border-bottom-radius})}
        [rn/view
         {:style style/card-header}
-        [user-avatar/user-avatar
+        [user-avatar/view
          {:full-name           name
           :profile-picture     profile-picture
-          :size                :medium
+          :size                :size-48
           :status-indicator?   false
           :customization-color customization-color
           :static?             true}]

src/quo2/components/profile/select_profile/view.cljs

@@ -36,10 +36,10 @@
         :active-opacity      1
         :accessibility-label :select-profile}
        [rn/view {:style style/header}
-        [user-avatar/user-avatar
+        [user-avatar/view
          {:full-name         name
           :status-indicator? false
-          :size              :medium
+          :size              :size-48
           :profile-picture   profile-picture}]
         [rn/view {:style (style/select-radio @internal-selected?)}
          (when @internal-selected? [rn/view {:style style/select-radio-inner}])]]

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

@@ -16,7 +16,7 @@
 (defn avatar
   [avatar-props theme]
   [rn/view {:style (style/avatar-border theme)}
-   [account-avatar/view (assoc avatar-props :size 48)]])
+   [account-avatar/view (assoc avatar-props :size :size-48)]])
 
 (defn menu-button
   [{:keys [on-press theme]}]

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

@@ -28,7 +28,7 @@
                    :color               icon-color}]
         :account [account-avatar/view
                   {:customization-color customization-color
-                   :size                16
+                   :size                :size-16
                    :emoji               emoji
                    :type                :default}]
         :network [rn/image

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

@@ -53,8 +53,8 @@
    {:style (style/image-container description tag image)}
    (case image
      :icon        [icon/icon image-props (style/color blur? theme)]
-     :avatar      [user-avatar/user-avatar image-props]
-     :icon-avatar [icon-avatar/icon-avatar image-props]
+     :avatar      [user-avatar/view image-props]
+     :icon-avatar [icon-avatar/view image-props]
      nil)])
 
 (defn tag-component

src/quo2/components/share/qr_code/view.cljs

@@ -1,12 +1,11 @@
 (ns quo2.components.share.qr-code.view
-  (:require
-    [quo2.components.avatars.account-avatar.view :as account-avatar]
-    [quo2.components.avatars.channel-avatar.view :as channel-avatar]
-    [quo2.components.avatars.user-avatar.view :as user-avatar]
-    [quo2.components.avatars.wallet-user-avatar :as wallet-avatar]
-    [quo2.components.share.qr-code.style :as style]
-    [react-native.core :as rn]
-    [react-native.fast-image :as fast-image]))
+  (:require [quo2.components.avatars.account-avatar.view :as account-avatar]
+            [quo2.components.avatars.channel-avatar.view :as channel-avatar]
+            [quo2.components.avatars.user-avatar.view :as user-avatar]
+            [quo2.components.avatars.wallet-user-avatar :as wallet-user-avatar]
+            [quo2.components.share.qr-code.style :as style]
+            [react-native.core :as rn]
+            [react-native.fast-image :as fast-image]))
 
 (defn- avatar-image
   [{avatar-type :avatar
@@ -18,7 +17,7 @@
               style/avatar-container-circular)}
     (case avatar-type
       :profile
-      [user-avatar/user-avatar
+      [user-avatar/view
        (assoc props
               :size              :size-64
               :status-indicator? false
@@ -34,10 +33,10 @@
         :source (:picture props)}]
 
       :channel
-      [channel-avatar/view (assoc props :locked? nil :size :size-64)]
+      [channel-avatar/view (assoc props :badge nil :size :size-64)]
 
       :saved-address
-      [wallet-avatar/wallet-user-avatar (assoc props :size :size-64)]
+      [wallet-user-avatar/view (assoc props :size :size-64)]
 
       nil)]])
 

src/quo2/components/tabs/account_selector.cljs

@@ -60,7 +60,7 @@
         label-text])
      [rn/view {:style (account-container-row background-color)}
       [rn/view {:style account-avatar-container}
-       [account-avatar/view {:emoji account-emoji :size 32}]]
+       [account-avatar/view {:emoji account-emoji :size :size-32}]]
       [quo2/text
        {:weight :medium
         :size   :paragraph-1

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

@@ -91,10 +91,10 @@
    (case type
      :default
      [tag-skeleton {:theme theme :size size :text full-name}
-      [user-avatar/user-avatar
+      [user-avatar/view
        {:full-name           full-name
         :profile-picture     profile-picture
-        :size                (if (= size 24) :xxs 28)
+        :size                (if (= size 24) :size-24 :size-28)
         :status-indicator?   false
         :ring?               false
         :customization-color customization-color}]]
@@ -142,7 +142,7 @@
       [account-avatar/view
        {:customization-color customization-color
         :emoji               emoji
-        :size                (if (= size 24) 20 28)}]]
+        :size                (if (= size 24) :size-20 :size-28)}]]
 
      :address
      [address-tag props]

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

@@ -22,8 +22,8 @@
 (defn- row-icon
   [profile-picture type secondary-color]
   (case type
-    :default-keypair [user-avatar/user-avatar
-                      {:size            :xxs
+    :default-keypair [user-avatar/view
+                      {:size            :size-20
                        :ring?           false
                        :profile-picture profile-picture}]
     :recovery-phrase [icons/icon

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

@@ -5,7 +5,7 @@
 
 (def accounts
   [{:account-props {:customization-color :turquoise
-                    :size                32
+                    :size                :size-32
                     :emoji               "\uD83C\uDFB2"
                     :type                :default
                     :name                "Trip to Vegas"

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

@@ -29,12 +29,12 @@
     avatar-type         :type
     customization-color :customization-color}]
   (if (= avatar-type :default-keypair)
-    [user-avatar/user-avatar
+    [user-avatar/view
      {:full-name           full-name
       :ring?               true
-      :size                :small
+      :size                :size-32
       :customization-color customization-color}]
-    [icon-avatar/icon-avatar
+    [icon-avatar/view
      {:size    :size-32
       :icon    :i/placeholder
       :border? true}]))

src/quo2/components/wallet/summary_info/component_spec.cljs

@@ -5,7 +5,7 @@
 
 (def status-account-props
   {:customization-color :purple
-   :size                32
+   :size                :size-32
    :emoji               "🍑"
    :type                :default
    :name                "Collectibles vault"
@@ -31,11 +31,11 @@
                                 :arbitrum 25}
                 :account-props {:full-name           "M L"
                                 :status-indicator?   false
-                                :size                :small
+                                :size                :size-32
                                 :customization-color :blue
                                 :name                "Mark Libot"
                                 :address             "0x0ah...78b"
-                                :status-account      (merge status-account-props {:size 16})}}])
+                                :status-account      (merge status-account-props {:size :size-16})}}])
     (h/is-truthy (h/get-by-text "Mark Libot"))
     (h/is-truthy (h/get-by-text "Collectibles vault")))
 

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

@@ -53,7 +53,7 @@
     {:style style/info-container}
     (if (= type :status-account)
       [account-avatar/view account-props]
-      [user-avatar/user-avatar account-props])
+      [user-avatar/view account-props])
     [rn/view {:style {:margin-left 8}}
      (when (not= type :account) [text/text {:weight :semi-bold} (:name account-props)])
      [rn/view

src/quo2/core.cljs

@@ -155,9 +155,9 @@
 (def channel-avatar quo2.components.avatars.channel-avatar.view/view)
 (def collection-avatar quo2.components.avatars.collection-avatar.view/view)
 (def group-avatar quo2.components.avatars.group-avatar.view/view)
-(def icon-avatar quo2.components.avatars.icon-avatar/icon-avatar)
-(def user-avatar quo2.components.avatars.user-avatar.view/user-avatar)
-(def wallet-user-avatar quo2.components.avatars.wallet-user-avatar/wallet-user-avatar)
+(def icon-avatar quo2.components.avatars.icon-avatar/view)
+(def user-avatar quo2.components.avatars.user-avatar.view/view)
+(def wallet-user-avatar quo2.components.avatars.wallet-user-avatar/view)
 
 ;;;; Banner
 (def banner quo2.components.banners.banner.view/view)

src/status_im/ui/components/chat_icon/screen.cljs

@@ -169,7 +169,7 @@
    [quo/user-avatar
     {:full-name         primary-name
      :profile-picture   (multiaccounts/displayed-photo contact)
-     :size              :small
+     :size              :size-32
      :status-indicator? false}]])
 
 (defn dapp-icon-permission

src/status_im2/common/confirmation_drawer/view.cljs

@@ -16,7 +16,7 @@
     [quo/user-avatar
      {:full-name         display-name
       :profile-picture   photo-path
-      :size              :xxs
+      :size              :size-20
       :ring?             false
       :status-indicator? false}]))
 

src/status_im2/contexts/add_new_contact/views.cljs

@@ -24,7 +24,7 @@
         [quo/user-avatar
          {:full-name         primary-name
           :profile-picture   photo-path
-          :size              :small
+          :size              :size-32
           :status-indicator? false}]
         [rn/view style/found-user-text
          [quo/text

src/status_im2/contexts/chat/composer/reply/view.cljs

@@ -73,7 +73,7 @@
       {:full-name         display-name
        :profile-picture   photo-path
        :status-indicator? false
-       :size              :xxxs
+       :size              :size-16
        :ring?             false}]
      [quo/text
       {:weight          :semi-bold

src/status_im2/contexts/chat/home/chat_list_item/view.cljs

@@ -176,7 +176,7 @@
           photo-path (rf/sub [:chats/photo-path chat-id])]
       [quo/user-avatar
        (cond-> {:full-name       full-name
-                :size            :small
+                :size            :size-32
                 :online?         online?
                 :profile-picture photo-path}
          muted?

src/status_im2/contexts/chat/messages/content/deleted/view.cljs

@@ -20,7 +20,7 @@
       :profile-picture   profile-picture
       :status-indicator? false
       :ring?             false
-      :size              :xxxs}]]
+      :size              :size-16}]]
    [quo/text
     {:weight          :semi-bold
      :number-of-lines 1

src/status_im2/contexts/chat/messages/content/view.cljs

@@ -41,7 +41,7 @@
           in-reaction-and-action-menu?)
     [avatar/avatar
      {:public-key from
-      :size       :small
+      :size       :size-32
       :hide-ring? (or in-pinned-view? in-reaction-and-action-menu?)}]
     [rn/view {:padding-top 4 :width 32}]))
 

src/status_im2/contexts/chat/messages/list/view.cljs

@@ -160,7 +160,7 @@
       {:full-name       display-name
        :online?         online?
        :profile-picture profile-picture
-       :size            :big}]]))
+       :size            :size-80}]]))
 
 (defn list-footer-avatar
   [props]
@@ -315,10 +315,10 @@
        :render-fn                         render-fn
        :on-viewable-items-changed         on-viewable-items-changed
        :on-content-size-change            (fn [_ y]
-                                            ;; NOTE(alwx): here we set the initial value of `scroll-y`
-                                            ;; which is needed because by default the chat is
-                                            ;; scrolled to the bottom and no initial `on-scroll`
-                                            ;; event is getting triggered
+                                            ;; NOTE(alwx): here we set the initial value of
+                                            ;; `scroll-y` which is needed because by default the
+                                            ;; chat is scrolled to the bottom and no initial
+                                            ;; `on-scroll` event is getting triggered
                                             (let [scroll-y-shared       (reanimated/get-shared-value
                                                                          scroll-y)
                                                   content-height-shared (reanimated/get-shared-value

src/status_im2/contexts/chat/messages/navigation/view.cljs

@@ -75,7 +75,7 @@
             {:full-name       display-name
              :online?         online?
              :profile-picture photo-path
-             :size            :small}]])
+             :size            :size-32}]])
         [rn/view {:style style/header-text-container}
          [rn/view {:style {:flex-direction :row}}
           [quo/text

src/status_im2/contexts/contacts/drawers/nickname_drawer/view.cljs

@@ -43,7 +43,7 @@
         [quo/user-avatar
          {:full-name         primary-name
           :profile-picture   photo-path
-          :size              :xxs
+          :size              :size-20
           :status-indicator? false}]
         [quo/text
          {:weight :medium

src/status_im2/contexts/onboarding/identifiers/profile_card/view.cljs

@@ -26,7 +26,7 @@
         avatar               [quo/user-avatar
                               {:full-name           name
                                :profile-picture     profile-picture
-                               :size                :medium
+                               :size                :size-48
                                :status-indicator?   false
                                :customization-color customization-color}]]
     [rn/view

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

@@ -9,17 +9,18 @@
   [{:key     :type
     :type    :select
     :options [{:key :default}
-              {:key :watch-only}]}
+              {:key :watch-only}
+              {:key :missing-keypair}]}
    {:key     :size
     :type    :select
-    :options [{:key 16}
-              {:key 20}
-              {:key 24}
-              {:key 28}
-              {:key 32}
-              {:key 48}
+    :options [{:key :size-16}
+              {:key :size-20}
+              {:key :size-24}
+              {:key :size-28}
+              {:key :size-32}
+              {:key :size-48}
               {:key :size-64}
-              {:key 80}]}
+              {:key :size-80}]}
    {:key  "Emoji"
     :type :text}
    (preview/customization-color-option)])
@@ -27,7 +28,7 @@
 (defn view
   []
   (let [state (reagent/atom {:customization-color :purple
-                             :size                80
+                             :size                :size-80
                              :emoji               "🍑"
                              :type                :default})]
     (fn []
@@ -36,8 +37,7 @@
         :descriptor                descriptor
         :component-container-style {:align-items     :center
                                     :justify-content :center}}
-       [quo/account-avatar @state
-       ]
+       [quo/account-avatar @state]
        [quo/button
         {:type            :grey
          :container-style {:margin-top 30}

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

@@ -9,33 +9,27 @@
     :type    :select
     :options [{:key :size-64}
               {:key :size-32}
-              {:key :default}]}
+              {:key   nil
+               :value "Default"}]}
    {:key  :emoji
     :type :text}
    {:key  :full-name
     :type :text}
    (preview/customization-color-option)
-   {:key     :locked-state
+   {:key     :badge
     :type    :select
-    :options [{:key :not-set}
+    :options [{:key   nil
+               :value "Default"}
               {:key :unlocked}
               {:key :locked}]}])
 
 (defn view
   []
   (let [state (reagent/atom {:size                :size-32
-                             :locked-state        :not-set
+                             :badge               nil
                              :emoji               "🍑"
                              :full-name           "Some channel"
                              :customization-color :blue})]
     (fn []
-      (let [locked? (case (:locked-state @state)
-                      :not-set  nil
-                      :unlocked false
-                      :locked   true
-                      nil)]
-        [preview/preview-container {:state state :descriptor descriptor}
-         [quo/channel-avatar
-          (assoc @state
-                 :locked?
-                 locked?)]]))))
+      [preview/preview-container {:state state :descriptor descriptor}
+       [quo/channel-avatar @state]])))

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

@@ -13,7 +13,7 @@
               {:key :size-48}]}
    {:key     :icon
     :type    :select
-    :options [{:key   :i/placeholder20
+    :options [{:key   :i/placeholder
                :value "Placeholder"}
               {:key :i/wallet}
               {:key :i/play}]}
@@ -22,7 +22,7 @@
 (defn view
   []
   (let [state (reagent/atom {:size  :size-48
-                             :icon  :i/placeholder20
+                             :icon  :i/placeholder
                              :color :primary})]
     (fn []
       [preview/preview-container {:state state :descriptor descriptor}

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

@@ -8,13 +8,14 @@
 (def descriptor
   [{:key     :size
     :type    :select
-    :options [{:key :big}
+    :options [{:key :size-80}
               {:key :size-64}
-              {:key :medium}
-              {:key :small}
-              {:key :xs}
-              {:key :xxs}
-              {:key :xxxs}]}
+              {:key :size-48}
+              {:key :size-32}
+              {:key :size-28}
+              {:key :size-24}
+              {:key :size-20}
+              {:key :size-16}]}
    (preview/customization-color-option)
    {:key  :online?
     :type :boolean}
@@ -39,7 +40,7 @@
   (let [state (reagent/atom {:full-name           "A Y"
                              :status-indicator?   true
                              :online?             true
-                             :size                :medium
+                             :size                :size-48
                              :customization-color :blue})]
     (fn []
       [preview/preview-container {:state state :descriptor descriptor}

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

@@ -13,19 +13,18 @@
     :type  :text}
    {:key     :size
     :type    :select
-    :options [{:key :small}
-              {:key :medium}
-              {:key :large}
+    :options [{:key :size-20}
+              {:key :size-32}
+              {:key :size-48}
               {:key :size-64}
-              {:key   :x-large
-               :value "X Large"}]}
+              {:key :size-80}]}
    (preview/customization-color-option {:key :customization-color})])
 
 (defn view
   []
   (let [state (reagent/atom {:first-name          "empty"
                              :last-name           "name"
-                             :size                :x-large
+                             :size                :size-80
                              :customization-color :indigo})]
     (fn []
       [preview/preview-container {:state state :descriptor descriptor}

src/status_im2/contexts/quo_preview/gradient/gradient_cover.cljs

@@ -21,20 +21,20 @@
      :account-avatar-emoji "🍿"
      :customization-color  (or customization-color :blue)}]
    [quo/action-drawer
-    [[{:icon     :i/edit
-       :label    "Edit account"
-       :on-press #(js/alert "Edit account")}
-      {:icon     :i/copy
-       :label    "Copy address"
-       :on-press #(js/alert "Copy address")}
-      {:icon     :i/share
-       :label    "Share account"
-       :on-press #(js/alert "Share account")}
-      {:icon         :i/delete
-       :label        "Remove account"
-       :danger?      true
-       :on-press     #(js/alert "Remove account")
-       :add-divider? true}]]]])
+    [{:icon     :i/edit
+      :label    "Edit account"
+      :on-press #(js/alert "Edit account")}
+     {:icon     :i/copy
+      :label    "Copy address"
+      :on-press #(js/alert "Copy address")}
+     {:icon     :i/share
+      :label    "Share account"
+      :on-press #(js/alert "Share account")}
+     {:icon         :i/delete
+      :label        "Remove account"
+      :danger?      true
+      :on-press     #(js/alert "Remove account")
+      :add-divider? true}]]])
 
 (def descriptor
   [(preview/customization-color-option)

src/status_im2/contexts/quo_preview/list_items/account_list_card.cljs

@@ -15,7 +15,7 @@
 (defn view
   []
   (let [state (reagent/atom {:account-props    {:customization-color :purple
-                                                :size                32
+                                                :size                :size-32
                                                 :emoji               "🍑"
                                                 :type                :default
                                                 :name                "Trip to Vegas"

src/status_im2/contexts/quo_preview/notifications/notification.cljs

@@ -34,7 +34,7 @@
                    {:full-name           "A Y"
                     :status-indicator?   true
                     :online?             true
-                    :size                :small
+                    :size                :size-32
                     :customization-color :blue}]
     :title        "Alisher Yakupov accepted your contact request"
     :duration     4000
@@ -49,7 +49,7 @@
                {:full-name           "A Y"
                 :status-indicator?   true
                 :online?             true
-                :size                :small
+                :size                :size-32
                 :customization-color :blue}]
     :title    "Default to semibold title"
     :text     "The quick brown fox jumped over the lazy dog and ate a potatoe."
@@ -64,7 +64,7 @@
                {:full-name           "A Y"
                 :status-indicator?   true
                 :online?             true
-                :size                :small
+                :size                :size-32
                 :customization-color :blue}]
     :header   [rn/view
                [quo/info-message

src/status_im2/contexts/quo_preview/notifications/toast.cljs

@@ -75,7 +75,7 @@
    "Toast: with user-avatar"
    {:text "This is an example toast"
     :user {:profile-picture (resources/mock-images :user-picture-female2)
-           :size            :small}}])
+           :size            :size-32}}])
 
 (defn update-toast-button
   []

src/status_im2/contexts/quo_preview/settings/settings_item.cljs

@@ -72,9 +72,9 @@
    {:image-props       (case (:image data)
                          :icon        :i/browser
                          :avatar      {:full-name           "A Y"
-                                       :size                :xxs
+                                       :size                :size-20
                                        :customization-color :blue}
-                         :icon-avatar {:size  :medium
+                         :icon-avatar {:size  :size-48
                                        :icon  :i/placeholder
                                        :color :blue}
                          nil)

src/status_im2/contexts/quo_preview/wallet/keypair.cljs

@@ -7,7 +7,7 @@
 
 (def accounts
   [{:account-props {:customization-color :turquoise
-                    :size                32
+                    :size                :size-32
                     :emoji               "\uD83C\uDFB2"
                     :type                :default
                     :name                "Trip to Vegas"
@@ -16,7 +16,7 @@
     :state         :default
     :action        :none}
    {:account-props {:customization-color :purple
-                    :size                32
+                    :size                :size-32
                     :emoji               "\uD83C\uDF7F"
                     :type                :default
                     :name                "My savings"
@@ -25,7 +25,7 @@
     :state         :default
     :action        :none}
    {:account-props {:customization-color :army
-                    :size                32
+                    :size                :size-32
                     :emoji               "\uD83D\uDCC8"
                     :type                :default
                     :name                "Coin vault"
@@ -34,7 +34,7 @@
     :state         :default
     :action        :none}
    {:account-props {:customization-color :orange
-                    :size                32
+                    :size                :size-32
                     :emoji               "\uD83C\uDFF0"
                     :type                :default
                     :name                "Crypto fortress"
@@ -43,7 +43,7 @@
     :state         :default
     :action        :none}
    {:account-props {:customization-color :yellow
-                    :size                32
+                    :size                :size-32
                     :emoji               "\uD83C\uDFDD️"
                     :type                :default
                     :name                "Block treasure"

src/status_im2/contexts/quo_preview/wallet/summary_info.cljs

@@ -32,14 +32,14 @@
                                                         :optimism 50
                                                         :arbitrum 25}})
         status-account-props {:customization-color :purple
-                              :size                32
+                              :size                :size-32
                               :emoji               "🍑"
                               :type                :default
                               :name                "Collectibles vault"
                               :address             "0x0ah...78b"}
         user-props           {:full-name           "M L"
                               :status-indicator?   false
-                              :size                :small
+                              :size                :size-32
                               :ring-background     (resources/get-mock-image :ring)
                               :customization-color :blue
                               :name                "Mark Libot"

src/status_im2/contexts/shell/activity_center/events.cljs

@@ -510,7 +510,7 @@
               (let [user-avatar {:full-name         name
                                  :status-indicator? true
                                  :online?           nil
-                                 :size              :small
+                                 :size              :size-32
                                  :ring?             true}]
                 (cond
                   (and (not= author my-public-key)

src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs

@@ -118,7 +118,7 @@
   (cond
     (= type shell.constants/one-to-one-chat-card)
     [quo/user-avatar
-     (merge {:size              :medium
+     (merge {:size              :size-48
              :status-indicator? false}
             avatar-params)]
 

src/status_im2/contexts/wallet/create_account/view.cljs

@@ -37,7 +37,7 @@
         {:style style/account-avatar-container}
         [quo/account-avatar
          {:customization-color @account-color
-          :size                80
+          :size                :size-80
           :emoji               @emoji
           :type                :default}]
         [quo/button