From 27f11fcb2df1e6b17c56184a52026e696fc21f3f Mon Sep 17 00:00:00 2001 From: codemaster <39961806+codemaster115@users.noreply.github.com> Date: Tue, 22 Aug 2023 09:46:10 -0400 Subject: [PATCH] fix: group-avatar component usage (#17041) --- .../avatars/group_avatar/style.cljs | 18 ++++++------ .../components/avatars/group_avatar/view.cljs | 29 +++++++++---------- .../common/confirmation_drawer/view.cljs | 2 +- .../contexts/chat/group_details/view.cljs | 2 +- .../chat/home/chat_list_item/view.cljs | 2 +- .../quo_preview/avatars/group_avatar.cljs | 24 +++++++-------- .../quo_preview/tags/context_tags.cljs | 2 +- .../notification/common/view.cljs | 2 +- .../notification/membership/view.cljs | 2 +- .../components/switcher_cards/view.cljs | 2 +- 10 files changed, 42 insertions(+), 43 deletions(-) diff --git a/src/quo2/components/avatars/group_avatar/style.cljs b/src/quo2/components/avatars/group_avatar/style.cljs index b769d8fbd8..595841256a 100644 --- 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)}) diff --git a/src/quo2/components/avatars/group_avatar/view.cljs b/src/quo2/components/avatars/group_avatar/view.cljs index bda2218121..de4239e6ce 100644 --- 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 diff --git a/src/status_im2/common/confirmation_drawer/view.cljs b/src/status_im2/common/confirmation_drawer/view.cljs index e84162bbbe..cfbba52dc1 100644 --- 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 diff --git a/src/status_im2/contexts/chat/group_details/view.cljs b/src/status_im2/contexts/chat/group_details/view.cljs index 059f6e58d6..1f4b711741 100644 --- 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 diff --git a/src/status_im2/contexts/chat/home/chat_list_item/view.cljs b/src/status_im2/contexts/chat/home/chat_list_item/view.cljs index a24cdb23b8..bb9671afd7 100644 --- 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]}] diff --git a/src/status_im2/contexts/quo_preview/avatars/group_avatar.cljs b/src/status_im2/contexts/quo_preview/avatars/group_avatar.cljs index ceca4fc31f..4df21a2bb0 100644 --- 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!} diff --git a/src/status_im2/contexts/quo_preview/tags/context_tags.cljs b/src/status_im2/contexts/quo_preview/tags/context_tags.cljs index 7bb5200a33..61a55b622f 100644 --- 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 diff --git a/src/status_im2/contexts/shell/activity_center/notification/common/view.cljs b/src/status_im2/contexts/shell/activity_center/notification/common/view.cljs index 299b1bfe22..02271b91c0 100644 --- 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 diff --git a/src/status_im2/contexts/shell/activity_center/notification/membership/view.cljs b/src/status_im2/contexts/shell/activity_center/notification/membership/view.cljs index ee38def155..56f5a7cb53 100644 --- 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 diff --git 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 index 70e45e881b..05b1b00e71 100644 --- 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