fix: group-avatar component usage (#17041)

2023-08-22 09:46:10 -04:00 · 2023-08-22 09:46:10 -04:00 · 27f11fcb2d
parent 8e7c6fe778
commit 27f11fcb2d
10 changed files with 42 additions and 43 deletions
--- a/src/quo2/components/avatars/group_avatar/style.cljs
+++ b/src/quo2/components/avatars/group_avatar/style.cljs
@ -3,12 +3,12 @@

 (defn container
  [{:keys [container-size customization-color theme]}]
-  {:width container-size
-   :height container-size
-   :align-items :center
-   :justify-content :center
-   :border-radius (/ container-size 2)
-   :background-color
-   (colors/theme-colors (colors/custom-color customization-color 50)
-                        (colors/custom-color customization-color 60)
-                        theme)})
+  {:width            container-size
+   :height           container-size
+   :align-items      :center
+   :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)})
--- a/src/quo2/components/avatars/group_avatar/view.cljs
+++ b/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
-               :small   16
-               :medium  16
-               :large   20
-               :x-large 32}
-   :container {:x-small 20
-               :small   28
-               :medium  32
-               :large   48
-               :x-large 80}})
+  {:size/s-20 {:icon      12
+               :container 20}
+   :size/s-28 {:icon      16
+               :container 28}
+   :size/s-32 {:icon      16
+               :container 32}
+   :size/s-48 {:icon      20
+               :container 48}
+   :size/s-80 {:icon      32
+               :container 80}})

 (defn- view-internal
  [_]
  (fn [{:keys [size theme customization-color picture]
-        :or   {size                :x-small
-               customization-color :blue
-               picture             nil}}]
-    (let [container-size (get-in sizes [:container size])
-          icon-size      (get-in sizes [:icon size])]
+        :or   {size                :size/s-20
+               customization-color :blue}}]
+    (let [container-size (get-in sizes [size :container])
+          icon-size      (get-in sizes [size :icon])]
      [rn/view
       {:style (style/container {:container-size      container-size
                                 :customization-color customization-color
--- a/src/status_im2/common/confirmation_drawer/view.cljs
+++ b/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
--- a/src/status_im2/contexts/chat/group_details/view.cljs
+++ b/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
--- a/src/status_im2/contexts/chat/home/chat_list_item/view.cljs
+++ b/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]}]
--- a/src/status_im2/contexts/quo_preview/avatars/group_avatar.cljs
+++ b/src/status_im2/contexts/quo_preview/avatars/group_avatar.cljs
@ -10,28 +10,28 @@
  [{:label   "Size"
    :key     :size
    :type    :select
-    :options [{:key   :x-small
-               :value "x-small"}
-              {:key   :small
-               :value "Small"}
-              {:key   :medium
-               :value "Medium"}
-              {:key   :large
-               :value "Large"}
-              {:key   :x-large
-               :value "x-Large"}]}
+    :options [{:key   :size/s-20
+               :value "20"}
+              {:key   :size/s-28
+               :value "28"}
+              {:key   :size/s-32
+               :value "32"}
+              {:key   :size/s-48
+               :value "48"}
+              {:key   :size/s-80
+               :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!}
--- a/src/status_im2/contexts/quo_preview/tags/context_tags.cljs
+++ b/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
--- a/src/status_im2/contexts/shell/activity_center/notification/common/view.cljs
+++ b/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
--- a/src/status_im2/contexts/shell/activity_center/notification/membership/view.cljs
+++ b/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
--- a/src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs
+++ b/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