Revert "chore: update group-avatar component (#17014)" (#17039)

This reverts commit 673b1afc3a9edf35202ea8c238f0a899fefef17f.

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)
-   :overflow         :hidden
+   :background-color
-   :background-color (colors/theme-colors (colors/custom-color customization-color 50)
+   (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,27 +7,34 @@
             [quo2.components.avatars.group-avatar.style :as style]))
 
 (def sizes
-  {20 {:icon 12}
+  {:icon      {:x-small 12
-   28 {:icon 16}
+               :small   16
-   32 {:icon 16}
+               :medium  16
-   48 {:icon 20}
+               :large   20
-   80 {:icon 32}})
+               :x-large 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                20
+        :or   {size                :x-small
-               customization-color :blue}}]
+               customization-color :blue
-    (let [icon-size (get-in sizes [size :icon])]
+               picture             nil}}]
+    (let [container-size (get-in sizes [:container size])
+          icon-size      (get-in sizes [:icon size])]
       [rn/view
-       {:style (style/container {:container-size      size
+       {:style (style/container {:container-size      container-size
                                  :customization-color customization-color
                                  :theme               theme})}
        (if picture
          [fast-image/fast-image
           {:source picture
-           :style  {:width  size
+           :style  {:width  container-size
-                    :height size}}]
+                    :height container-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   20
+    :options [{:key   :x-small
-               :value 20}
+               :value "x-small"}
-              {:key   28
+              {:key   :small
-               :value 28}
+               :value "Small"}
-              {:key   32
+              {:key   :medium
-               :value 32}
+               :value "Medium"}
-              {:key   48
+              {:key   :large
-               :value 48}
+               :value "Large"}
-              {:key   80
+              {:key   :x-large
-               :value 80}]}
+               :value "x-Large"}]}
    {:label "Avatar"
     :key   :picture?
     :type  :boolean}
    (preview/customization-color-option)])
 
-(def avatar (resources/get-mock-image :photo1))
+(def avatar (resources/get-mock-image :user-picture-male4))
 
 (defn cool-preview
   []
   (let [state (reagent/atom {:theme               :light
                              :customization-color :blue
-                             :size                20
+                             :size                :small
                              :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                20
+                              :size                :x-small
                               :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                   20
+  {:size                   :small
    :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                20
+                               {:size                :x-small
                                 :customization-color :purple}]]
         :items               (when-not (or accepted dismissed)
                                [{:type                :button