chore: update group-avatar component

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

@@ -0,0 +1,41 @@
+(ns quo2.components.avatars.group-avatar.view
+  (:require [quo2.components.icon :as icon]
+            [quo2.theme :as theme]
+            [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]
+            [react-native.fast-image :as fast-image]
+            [quo2.components.avatars.group-avatar.style :as style]))
+
+(def sizes
+  {:icon      {:x-small 12
+               :small   16
+               :medium  16
+               :large   20
+               :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                :x-small
+               customization-color :blue}}]
+    (let [container-size (get-in sizes [:container size])
+          icon-size      (get-in sizes [:icon size])]
+      [rn/view
+       {:style (style/container {:container-size      container-size
+                                 :customization-color customization-color
+                                 :theme               theme})}
+       (if picture
+         [fast-image/fast-image
+          {:source picture
+           :style  {:width  container-size
+                    :height container-size}}]
+         [icon/icon :i/group
+          {:size  icon-size
+           :color colors/white-opa-70}])])))
+
+(def view (theme/with-theme view-internal))

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

@@ -21,9 +21,9 @@
               {:key   :x-large
                :value "x-Large"}]}
    {:label "Avatar"
-    :key   :avatar?
+    :key   :picture?
     :type  :boolean}
-   (preview/customization-color-option)]) ; TODO: this is temporary only. Issue: https://github.com/status-im/status-mobile/issues/14566
+   (preview/customization-color-option)])
 
 (def avatar (resources/get-mock-image :user-picture-male4))
 
@@ -32,29 +32,28 @@
   (let [state (reagent/atom {:theme               :light
                              :customization-color :blue
                              :size                :small
-                             :avatar?             false})]
+                             :picture?            false})]
     (fn []
       [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view {:padding-bottom 150}
+       [rn/view {:style {:padding-bottom 150}}
-        [rn/view {:flex 1}
+        [rn/view {:style {:flex 1}}
          [preview/customizer state descriptor]]
         [rn/view
-         {:padding-vertical 60
+         {:style {:padding-vertical 60
-          :flex-direction   :row
+                  :flex-direction   :row
-          :justify-content  :center}
+                  :justify-content  :center}}
-         (let [{:keys [avatar?]} @state
+         (let [{:keys [picture?]} @state
-               params            (cond-> @state
+               params             (cond-> @state
-                                   (boolean avatar?)
+                                    (picture?)
-                                   (assoc :avatar? avatar))]
+                                    (assoc :picture avatar))]
-           (println params)
            [quo2/group-avatar params])]]])))
 
 (defn preview-group-avatar
   []
   [rn/view
-   {:background-color (colors/theme-colors colors/white
+   {:style {:background-color (colors/theme-colors colors/white
-                                           colors/neutral-90)
+                                                   colors/neutral-90)
-    :flex             1}
+            :flex             1}}
    [rn/flat-list
     {:flex                         1
      :keyboard-should-persist-taps :always