fix: group-avatar component usage (#17041)

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

@@ -3,12 +3,12 @@
 
 (defn container
   [{:keys [container-size customization-color theme]}]
-  {:width container-size
+  {:width            container-size
-   :height container-size
+   :height           container-size
-   :align-items :center
+   :align-items      :center
-   :justify-content :center
+   :justify-content  :center
-   :border-radius (/ container-size 2)
+   :border-radius    (/ container-size 2)
-   :background-color
+   :overflow         :hidden
-   (colors/theme-colors (colors/custom-color customization-color 50)
+   :background-color (colors/theme-colors (colors/custom-color customization-color 50)
-                        (colors/custom-color customization-color 60)
+                                          (colors/custom-color customization-color 60)
-                        theme)})
+                                          theme)})

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

@@ -7,25 +7,24 @@
             [quo2.components.avatars.group-avatar.style :as style]))
 
 (def sizes
-  {:icon      {:x-small 12
+  {:size/s-20 {:icon      12
-               :small   16
+               :container 20}
-               :medium  16
+   :size/s-28 {:icon      16
-               :large   20
+               :container 28}
-               :x-large 32}
+   :size/s-32 {:icon      16
-   :container {:x-small 20
+               :container 32}
-               :small   28
+   :size/s-48 {:icon      20
-               :medium  32
+               :container 48}
-               :large   48
+   :size/s-80 {:icon      32
-               :x-large 80}})
+               :container 80}})
 
 (defn- view-internal
   [_]
   (fn [{:keys [size theme customization-color picture]
-        :or   {size                :x-small
+        :or   {size                :size/s-20
-               customization-color :blue
+               customization-color :blue}}]
-               picture             nil}}]
+    (let [container-size (get-in sizes [size :container])
-    (let [container-size (get-in sizes [:container size])
+          icon-size      (get-in sizes [size :icon])]
-          icon-size      (get-in sizes [:icon size])]
       [rn/view
        {:style (style/container {:container-size      container-size
                                  :customization-color customization-color

src/status_im2/common/confirmation_drawer/view.cljs

@@ -11,7 +11,7 @@
   (if group-chat
     [quo/group-avatar
      {:customization-color color
-      :size                :x-small}]
+      :size                :size/s-20}]
     [quo/user-avatar
      {:full-name         display-name
       :profile-picture   photo-path

src/status_im2/contexts/chat/group_details/view.cljs

@@ -169,7 +169,7 @@
                :padding-horizontal 20}}
       [quo/group-avatar
        {:customization-color color
-        :size                :small}]
+        :size                :size/s-32}]
       [quo/text
        {:weight :semi-bold
         :size   :heading-1

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

@@ -211,7 +211,7 @@
          (assoc :ring? false))])
     [quo/group-avatar
      {:customization-color color
-      :size                :small}]))
+      :size                :size/s-32}]))
 
 (defn notification
   [{:keys [muted group-chat unviewed-messages-count unviewed-mentions-count]}]

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

@@ -10,28 +10,28 @@
   [{:label   "Size"
     :key     :size
     :type    :select
-    :options [{:key   :x-small
+    :options [{:key   :size/s-20
-               :value "x-small"}
+               :value "20"}
-              {:key   :small
+              {:key   :size/s-28
-               :value "Small"}
+               :value "28"}
-              {:key   :medium
+              {:key   :size/s-32
-               :value "Medium"}
+               :value "32"}
-              {:key   :large
+              {:key   :size/s-48
-               :value "Large"}
+               :value "48"}
-              {:key   :x-large
+              {:key   :size/s-80
-               :value "x-Large"}]}
+               :value "80"}]}
    {:label "Avatar"
     :key   :picture?
     :type  :boolean}
    (preview/customization-color-option)])
 
-(def avatar (resources/get-mock-image :user-picture-male4))
+(def avatar (resources/get-mock-image :photo1))
 
 (defn cool-preview
   []
   (let [state (reagent/atom {:theme               :light
                              :customization-color :blue
-                             :size                :small
+                             :size                :size/s-20
                              :picture?            false})]
     (fn []
       [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}

src/status_im2/contexts/quo_preview/tags/context_tags.cljs

@@ -141,7 +141,7 @@
 
               :group-avatar [quo2/group-avatar-tag (:label @state)
                              {:blur?               (:blur? @state)
-                              :size                :x-small
+                              :size                :size/s-20
                               :customization-color :purple}]
 
               :public-key   [quo2/public-key-tag

src/status_im2/contexts/shell/activity_center/notification/common/view.cljs

@@ -9,7 +9,7 @@
             [utils.re-frame :as rf]))
 
 (def tag-params
-  {:size                   :small
+  {:size                   :size/s-20
    :customization-color    :blue
    :style                  style/user-avatar-tag
    :text-style             style/user-avatar-tag-text

src/status_im2/contexts/shell/activity_center/notification/membership/view.cljs

@@ -67,7 +67,7 @@
         :context             [[common/user-avatar-tag author]
                               (i18n/label :t/added-you-to)
                               [quo/group-avatar-tag chat-name
-                               {:size                :x-small
+                               {:size                :size/s-20
                                 :customization-color :purple}]]
         :items               (when-not (or accepted dismissed)
                                [{:type                :button

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

@@ -125,7 +125,7 @@
     shell.constants/private-group-chat-card
     [quo/group-avatar
      {:customization-color customization-color
-      :size                :large
+      :size                :size/s-48
       :override-theme      :dark}]
 
     (shell.constants/community-card