Skip to content

Commit

Permalink
Tweak UI for contact request notifications (#19337)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@seanstrom
seanstrom authored Mar 25, 2024
1 parent 2528efb commit 418053b
Show file tree
Hide file tree
Showing 4 changed files with 67 additions and 53 deletions.
18 changes: 12 additions & 6 deletions src/quo/components/notifications/notification/style.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)})
60 changes: 36 additions & 24 deletions src/quo/components/notifications/notification/view.cljs
View file
Original file line number Diff line number Diff line change
@@ -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]))

Expand All @@ -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
Expand All @@ -51,25 +53,35 @@
: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}
header
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}]]))
33 changes: 15 additions & 18 deletions src/status_im/contexts/preview/quo/notifications/notification.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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
Expand Down
9 changes: 4 additions & 5 deletions src/status_im/contexts/shell/activity_center/events.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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]
Expand Down Expand Up @@ -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])})
Expand All @@ -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
Expand Down

0 comments on commit 418053b

Please sign in to comment.