chore: update group-avatar component (#17014)

We merge it without QA because it only changes the API and doesn't need design review because nothing has been changed 👍

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,34 +7,27 @@
             [quo2.components.avatars.group-avatar.style :as style]))
 
 (def sizes
-  {:icon      {:x-small 12
+  {20 {:icon 12}
-               :small   16
+   28 {:icon 16}
-               :medium  16
+   32 {:icon 16}
-               :large   20
+   48 {:icon 20}
-               :x-large 32}
+   80 {:icon 32}})
-   :container {:x-small 20
-               :small   28
-               :medium  32
-               :large   48
-               :x-large 80}})
 
 (defn- view-internal
   [_]
   (fn [{:keys [size theme customization-color picture]
-        :or   {size                :x-small
+        :or   {size                20
-               customization-color :blue
+               customization-color :blue}}]
-               picture             nil}}]
+    (let [icon-size (get-in sizes [size :icon])]
-    (let [container-size (get-in sizes [:container size])
-          icon-size      (get-in sizes [:icon size])]
       [rn/view
-       {:style (style/container {:container-size      container-size
+       {:style (style/container {:container-size      size
                                  :customization-color customization-color
                                  :theme               theme})}
        (if picture
          [fast-image/fast-image
           {:source picture
-           :style  {:width  container-size
+           :style  {:width  size
-                    :height container-size}}]
+                    :height size}}]
          [icon/icon :i/members
           {:size  icon-size
            :color colors/white-opa-70}])])))

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   20
-               :value "x-small"}
+               :value 20}
-              {:key   :small
+              {:key   28
-               :value "Small"}
+               :value 28}
-              {:key   :medium
+              {:key   32
-               :value "Medium"}
+               :value 32}
-              {:key   :large
+              {:key   48
-               :value "Large"}
+               :value 48}
-              {:key   :x-large
+              {:key   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                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                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                   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                20
                                 :customization-color :purple}]]
         :items               (when-not (or accepted dismissed)
                                [{:type                :button