From 418053b21e28df0b1925a020277c412a01318d99 Mon Sep 17 00:00:00 2001 From: Sean Hagstrom Date: Mon, 25 Mar 2024 10:17:47 +0000 Subject: [PATCH] Tweak UI for contact request notifications (#19337) * fix: ensure contact-request notifications are displayed as notifications * fix: provide context-theme for notification sub-components * fix: adjust font weight for notification text * fix: adjust alignment of user-avatar inside a notification with a header and body * tidy: rename override-theme to theme inside notifications * fix: update notifications component to use `user` prop instead of `avatar` * tweak: adapt notification to avatar to vertically center when only displaying header or title * fix: use title font-size for contact-request-accepted notification * fix: allow for custom avatar component prop in quo notification component * fix: ensure we use the correct font-weight for contact-request-accepted notification * tidy: fix formatting --- .../notifications/notification/style.cljs | 18 ++++-- .../notifications/notification/view.cljs | 60 +++++++++++-------- .../quo/notifications/notification.cljs | 33 +++++----- .../shell/activity_center/events.cljs | 9 ++- 4 files changed, 67 insertions(+), 53 deletions(-) diff --git a/src/quo/components/notifications/notification/style.cljs b/src/quo/components/notifications/notification/style.cljs index e75c79c702..c1afa412d0 100644 --- a/src/quo/components/notifications/notification/style.cljs +++ b/src/quo/components/notifications/notification/style.cljs @@ -26,14 +26,20 @@ :padding-vertical 8 :padding-horizontal 12})) -(def right-side-container {:flex 1}) +(def right-side-container + {:flex 1 + :justify-content :center}) (defn title - [override-theme] - {:color (colors/theme-colors colors/white colors/neutral-100 override-theme)}) + [theme] + {:color (colors/theme-colors colors/white colors/neutral-100 theme)}) (defn text - [override-theme] - {:color (colors/theme-colors colors/white colors/neutral-100 override-theme)}) + [theme] + {:color (colors/theme-colors colors/white colors/neutral-100 theme)}) -(def avatar-container {:margin-right 8 :margin-top 4}) +(defn avatar-container + [{:keys [multiline?]}] + {:margin-right 8 + :align-self (when-not multiline? :center) + :margin-top (if multiline? 4 0)}) diff --git a/src/quo/components/notifications/notification/view.cljs b/src/quo/components/notifications/notification/view.cljs index d6626a9ccc..9218b7432e 100644 --- a/src/quo/components/notifications/notification/view.cljs +++ b/src/quo/components/notifications/notification/view.cljs @@ -1,7 +1,9 @@ (ns quo.components.notifications.notification.view (:require + [quo.components.avatars.user-avatar.view :as user-avatar] [quo.components.markdown.text :as text] [quo.components.notifications.notification.style :as style] + [quo.theme] [react-native.blur :as blur] [react-native.core :as rn])) @@ -15,33 +17,33 @@ [into [rn/view {:accessibility-label :notification-body}] children]) (defn avatar-container - [& children] + [{:keys [multiline?]} & children] [into [rn/view - {:style style/avatar-container + {:style (style/avatar-container {:multiline? multiline?}) :accessibility-label :notification-avatar}] children]) (defn title - ([text weight] (title text weight nil)) - ([text weight override-theme] + ([{:keys [text weight theme multiline?]}] [text/text {:size :paragraph-1 - :weight (or weight :semi-bold) - :style (style/title override-theme) + :weight (or weight (if multiline? :semi-bold :medium)) + :style (style/title theme) :accessibility-label :notification-title} text])) (defn message - [text override-theme] + [text theme] [text/text {:size :paragraph-2 - :style (style/text override-theme) + :weight :medium + :style (style/text theme) :accessibility-label :notification-content} text]) (defn- notification-container - [{:keys [avatar header body container-style override-theme]}] + [{:keys [avatar header body container-style theme]}] [rn/view {:style (merge style/box-container container-style)} [blur/view @@ -51,7 +53,7 @@ :blur-type :transparent :overlay-color :transparent}] [rn/view - {:style (style/content-container override-theme)} + {:style (style/content-container theme)} avatar [rn/view {:style style/right-side-container} @@ -59,17 +61,27 @@ body]]]) (defn notification - [{title-text :title :keys [avatar header title-weight text body container-style override-theme]}] - (let [header (or header - (when title-text - [title title-text title-weight override-theme])) - header (when header [header-container header]) - body (or body (when text [message text override-theme])) - body (when body [body-container body]) - avatar (when avatar [avatar-container avatar])] - [notification-container - {:avatar avatar - :header header - :body body - :container-style container-style - :override-theme override-theme}])) + [{title-text :title :keys [avatar user header title-weight text body container-style theme]}] + (let [theme (or theme (quo.theme/get-theme)) + body (or body (when text [message text theme])) + header (or header + (when title-text + [title + {:text title-text + :weight title-weight + :theme theme + :multiline? (some? body)}])) + header (when header [header-container header]) + body (when body [body-container body]) + user-avatar (or avatar (when user (user-avatar/user-avatar user))) + avatar (when user-avatar + [avatar-container + {:multiline? (and header body)} + user-avatar])] + [quo.theme/provider {:theme theme} + [notification-container + {:avatar avatar + :header header + :body body + :container-style container-style + :theme theme}]])) diff --git a/src/status_im/contexts/preview/quo/notifications/notification.cljs b/src/status_im/contexts/preview/quo/notifications/notification.cljs index 02844a43dd..412d7db6d6 100644 --- a/src/status_im/contexts/preview/quo/notifications/notification.cljs +++ b/src/status_im/contexts/preview/quo/notifications/notification.cljs @@ -30,12 +30,11 @@ [] [notification-button "Notification: with title(header)" - {:avatar [quo/user-avatar - {:full-name "A Y" - :status-indicator? true - :online? true - :size :small - :customization-color :blue}] + {:user {:full-name "A Y" + :status-indicator? true + :online? true + :size :small + :customization-color :blue} :title "Alisher Yakupov accepted your contact request" :duration 4000 :title-weight :medium @@ -45,12 +44,11 @@ [] [notification-button "with title and body" - {:avatar [quo/user-avatar - {:full-name "A Y" - :status-indicator? true - :online? true - :size :small - :customization-color :blue}] + {:user {:full-name "A Y" + :status-indicator? true + :online? true + :size :small + :customization-color :blue} :title "Default to semibold title" :text "The quick brown fox jumped over the lazy dog and ate a potatoe." :duration 4000 @@ -60,12 +58,11 @@ [] [notification-button "with anything as header & body" - {:avatar [quo/user-avatar - {:full-name "A Y" - :status-indicator? true - :online? true - :size :small - :customization-color :blue}] + {:user {:full-name "A Y" + :status-indicator? true + :online? true + :size :small + :customization-color :blue} :header [rn/view [quo/info-message {:type :success diff --git a/src/status_im/contexts/shell/activity_center/events.cljs b/src/status_im/contexts/shell/activity_center/events.cljs index b0093915a2..e65423fd82 100644 --- a/src/status_im/contexts/shell/activity_center/events.cljs +++ b/src/status_im/contexts/shell/activity_center/events.cljs @@ -2,7 +2,6 @@ (:require [legacy.status-im.data-store.activities :as activities] [legacy.status-im.data-store.chats :as data-store.chats] - [quo.foundations.colors :as colors] [re-frame.core :as re-frame] [status-im.common.json-rpc.events :as json-rpc] [status-im.common.toasts.events :as toasts] @@ -544,9 +543,9 @@ (not accepted) (not dismissed)) (toasts/upsert cofx - {:user user-avatar + {:type :notification + :user user-avatar :user-public-key author - :icon-color colors/primary-50-opa-40 :title (i18n/label :t/contact-request-sent-toast {:name name}) :text (get-in message [:content :text])}) @@ -556,10 +555,10 @@ accepted (not dismissed)) (toasts/upsert cofx - {:user user-avatar + {:type :notification + :user user-avatar ;; user public key who accepted the request :user-public-key chat-id - :icon-color colors/success-50-opa-40 :title (i18n/label :t/contact-request-accepted-toast {:name (or name (:alias message))})}) :else