Style fixes for pinned messages (#18061)

* Style fixes for pinned messages

* Small code style update

Author: alwx

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)})

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,17 +23,36 @@
   [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])
         render-data            (rf/sub [:chats/current-chat-message-list-view-context :in-pinned-view])
         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)}])]))

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",