From a4f1f23d3ca03c5e37f0b945609e78da83376c92 Mon Sep 17 00:00:00 2001 From: Alexander Date: Tue, 5 Dec 2023 11:31:45 +0100 Subject: [PATCH] Style fixes for pinned messages (#18061) * Style fixes for pinned messages * Small code style update --- .../chat/menus/pinned_messages/style.cljs | 34 +++++++++------- .../chat/menus/pinned_messages/view.cljs | 40 +++++++++++-------- translations/en.json | 4 +- 3 files changed, 46 insertions(+), 32 deletions(-) diff --git a/src/status_im2/contexts/chat/menus/pinned_messages/style.cljs b/src/status_im2/contexts/chat/menus/pinned_messages/style.cljs index 906540d3f0..67746fbffd 100644 --- a/src/status_im2/contexts/chat/menus/pinned_messages/style.cljs +++ b/src/status_im2/contexts/chat/menus/pinned_messages/style.cljs @@ -1,11 +1,12 @@ (ns status-im2.contexts.chat.menus.pinned-messages.style (:require - [quo.foundations.colors :as colors])) + [quo.foundations.colors :as colors] + [react-native.platform :as platform])) (defn heading [community?] - {:margin-horizontal 20 - :margin-bottom (when-not community? 24)}) + {:padding-horizontal 20 + :margin-bottom (when-not community? 12)}) (defn heading-container [] @@ -31,23 +32,28 @@ :margin-right 8 :color (colors/theme-colors colors/neutral-60 colors/neutral-20)}) -(defn list-footer - [bottom-inset] - {:height bottom-inset}) - -(defn no-pinned-messages-container - [bottom-inset] +(def no-pinned-messages-container {:justify-content :center :align-items :center - :margin-top 20 - :margin-bottom bottom-inset}) + :margin 12 + :margin-bottom (when platform/android? 12)}) (def no-pinned-messages-icon - {:width 120 - :height 120 + {:width 80 + :height 80 :justify-content :center :align-items :center :border-width 1}) +(def no-pinned-messages-content + {:margin-top 12}) + +(def no-pinned-messages-title + {:text-align :center}) + (def no-pinned-messages-text - {:margin-top 20}) + {:text-align :center + :margin-top 2}) + +(def list-footer + {:height (when platform/android? 12)}) diff --git a/src/status_im2/contexts/chat/menus/pinned_messages/view.cljs b/src/status_im2/contexts/chat/menus/pinned_messages/view.cljs index a0084eb454..01ae9138b9 100644 --- a/src/status_im2/contexts/chat/menus/pinned_messages/view.cljs +++ b/src/status_im2/contexts/chat/menus/pinned_messages/view.cljs @@ -5,7 +5,6 @@ [react-native.core :as rn] [react-native.fast-image :as fast-image] [react-native.gesture :as gesture] - [react-native.safe-area :as safe-area] [status-im2.contexts.chat.menus.pinned-messages.style :as style] [status-im2.contexts.chat.messages.content.view :as message] [utils.i18n :as i18n] @@ -24,6 +23,25 @@ [message _ _ context] [message/message message context (atom false)]) +(defn empty-pinned-messages-state + [{:keys [community?]}] + [rn/view {:style style/no-pinned-messages-container} + [rn/view {:style style/no-pinned-messages-icon} + [quo/icon :i/placeholder]] + [rn/view {:style style/no-pinned-messages-content} + [quo/text + {:size :paragraph-1 + :weight :semi-bold + :style style/no-pinned-messages-title} + (i18n/label :t/no-pinned-messages)] + [quo/text + {:size :paragraph-2 + :style style/no-pinned-messages-text} + (i18n/label + (if community? + :t/no-pinned-messages-community-desc + :t/no-pinned-messages-desc))]]]) + (defn pinned-messages [chat-id] (let [pinned (rf/sub [:chats/pinned-sorted-list chat-id]) @@ -31,10 +49,10 @@ current-chat (rf/sub [:chat-by-id chat-id]) {:keys [community-id]} current-chat community (rf/sub [:communities/community community-id]) - bottom-inset (safe-area/get-bottom) community-images (rf/sub [:community/images community-id])] [gesture/scroll-view - {:accessibility-label :pinned-messages-menu} + {:accessibility-label :pinned-messages-menu + :bounces false} [:<> [quo/text {:size :heading-2 @@ -61,18 +79,8 @@ {:data pinned :render-data render-data :render-fn message-render-fn - :footer [rn/view {:style (style/list-footer bottom-inset)}] + :footer [rn/view {:style style/list-footer}] :key-fn list-key-fn :separator [quo/separator {:style {:margin-vertical 8}}]}] - [rn/view {:style (style/no-pinned-messages-container bottom-inset)} - [rn/view {:style style/no-pinned-messages-icon} - [quo/icon :i/placeholder]] - [quo/text - {:weight :semi-bold - :style style/no-pinned-messages-text} - (i18n/label :t/no-pinned-messages)] - [quo/text {:size :paragraph-2} - (i18n/label - (if community - :t/no-pinned-messages-community-desc - :t/no-pinned-messages-desc))]])])) + [empty-pinned-messages-state + {:community? (boolean community)}])])) diff --git a/translations/en.json b/translations/en.json index fd94787bf7..2f86b33ba3 100644 --- a/translations/en.json +++ b/translations/en.json @@ -2013,8 +2013,8 @@ "you-must-now-hold": "You must now hold:", "you-must-always-hold": "You must always hold:", "shell-placeholder-title": "Your apps will run here", - "no-pinned-messages-desc": "This chat doesn't have any pinned messages.", - "no-pinned-messages-community-desc": "This channel doesn't have any pinned messages.", + "no-pinned-messages-desc": "This chat doesn’t have any\npinned messages.", + "no-pinned-messages-community-desc": "This channel doesn’t have any\npinned messages.", "shell-placeholder-subtitle": "Open tabs of your communities, messages,\nwallet account and browser windows", "invite-friends-to-status": "Invite friends to Status", "share-invite-link": "Share an invite link",