Fixed issues with styling in pinned messages panel. (#16498)

src/quo2/components/common/separator/view.cljs

@@ -1,4 +1,4 @@
-(ns quo2.components.separator
+(ns quo2.components.common.separator.view
   (:require [quo2.foundations.colors :as quo2.colors]
             [react-native.core :as rn]))
 

src/quo2/components/dividers/date.cljs

@@ -1,6 +1,6 @@
 (ns quo2.components.dividers.date
   (:require [quo2.components.markdown.text :as text]
-            [quo2.components.separator :as separator]
+            [quo2.components.common.separator.view :as separator]
             [quo2.foundations.colors :as colors]
             [react-native.core :as rn]))
 

src/quo2/core.cljs

@@ -14,10 +14,12 @@
     quo2.components.buttons.slide-button.view
     quo2.components.code.snippet
     quo2.components.colors.color-picker.view
+    quo2.components.common.separator.view
+    quo2.components.community.banner.view
+    quo2.components.community.channel-actions
     quo2.components.community.community-card-view
     quo2.components.community.community-list-view
     quo2.components.community.community-view
-    quo2.components.community.banner.view
     quo2.components.community.icon
     quo2.components.community.token-gating
     quo2.components.counter.counter
@@ -31,8 +33,8 @@
     quo2.components.drawers.drawer-buttons.view
     quo2.components.drawers.permission-context.view
     quo2.components.dropdowns.dropdown
-    quo2.components.header
     quo2.components.empty-state.empty-state.view
+    quo2.components.header
     quo2.components.icon
     quo2.components.info.info-message
     quo2.components.info.information-box.view
@@ -42,9 +44,9 @@
     quo2.components.inputs.search-input.view
     quo2.components.inputs.title-input.view
     quo2.components.keycard.view
+    quo2.components.links.link-preview.view
     quo2.components.links.url-preview-list.view
     quo2.components.links.url-preview.view
-    quo2.components.links.link-preview.view
     quo2.components.list-items.channel
     quo2.components.list-items.menu-item
     quo2.components.list-items.preview-list
@@ -69,15 +71,16 @@
     quo2.components.profile.profile-card.view
     quo2.components.profile.select-profile.view
     quo2.components.reactions.reaction
-    quo2.components.selectors.reactions.view
     quo2.components.record-audio.record-audio.view
     quo2.components.record-audio.soundtrack.view
     quo2.components.selectors.disclaimer.view
     quo2.components.selectors.filter.view
+    quo2.components.selectors.reactions.view
     quo2.components.selectors.selectors.view
-    quo2.components.separator
     quo2.components.settings.accounts.view
     quo2.components.settings.privacy-option
+    quo2.components.settings.reorder-item.view
+    quo2.components.settings.settings-list.view
     quo2.components.share.qr-code.view
     quo2.components.share.share-qr-code.view
     quo2.components.tabs.account-selector
@@ -89,13 +92,10 @@
     quo2.components.tags.tag
     quo2.components.tags.tags
     quo2.components.tags.token-tag
-    quo2.components.text-combinations.title.view
-    quo2.components.settings.settings-list.view
-    quo2.components.settings.reorder-item.view
-    quo2.components.community.channel-actions))
+    quo2.components.text-combinations.title.view))
 
 (def icon quo2.components.icon/icon)
-(def separator quo2.components.separator/separator)
+(def separator quo2.components.common.separator.view/separator)
 (def header quo2.components.header/header)
 (def dropdown quo2.components.dropdowns.dropdown/dropdown)
 (def info-message quo2.components.info.info-message/info-message)

src/status_im2/contexts/chat/menus/pinned_messages/style.cljs

@@ -13,7 +13,8 @@
    :align-self        :flex-start
    :margin-horizontal 20
    :padding           4
-   :margin-top        8})
+   :margin-top        8
+   :margin-bottom     16})
 
 (defn heading-text
   []

src/status_im2/contexts/chat/menus/pinned_messages/view.cljs

@@ -51,7 +51,7 @@
          :render-fn   message-render-fn
          :footer      [rn/view {:style (style/list-footer bottom-inset)}]
          :key-fn      list-key-fn
-         :separator   quo/separator}]
+         :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]]

src/status_im2/contexts/chat/messages/content/style.cljs

@@ -11,5 +11,5 @@
      (and (not in-pinned-view?) (or mentioned pinned-by))
      (assoc :background-color colors/primary-50-opa-5 :margin-bottom 4)
 
-     (or mentioned pinned-by last-in-group?)
+     (and (not in-pinned-view?) (or mentioned pinned-by last-in-group?))
      (assoc :margin-top 8))))

src/status_im2/contexts/chat/messages/content/view.cljs

@@ -187,21 +187,22 @@
                                      :show-reactions? true}]])}]))
 
 (defn message
-  [{:keys [pinned-by mentioned in-pinned-view? content-type last-in-group? deleted? deleted-for-me?]
+  [{:keys [pinned-by mentioned content-type last-in-group? deleted? deleted-for-me?]
     :as   message-data} context keyboard-shown?]
-  (if (or deleted? deleted-for-me?)
-    [rn/view {:style (style/message-container)}
-     [content.deleted/deleted-message message-data context]]
-    [rn/view
-     {:style               (style/message-container in-pinned-view? pinned-by mentioned last-in-group?)
-      :accessibility-label :chat-item}
-     (if (#{constants/content-type-system-text constants/content-type-community
-            constants/content-type-contact-request
-            constants/content-type-system-pinned-message}
-          content-type)
-       [system-message-content message-data]
-       [user-message-content
-        {:message-data    message-data
-         :context         context
-         :keyboard-shown? keyboard-shown?
-         :show-reactions? true}])]))
+  (let [in-pinned-view? (:in-pinned-view? context)]
+    (if (or deleted? deleted-for-me?)
+      [rn/view {:style (style/message-container)}
+       [content.deleted/deleted-message message-data context]]
+      [rn/view
+       {:style               (style/message-container in-pinned-view? pinned-by mentioned last-in-group?)
+        :accessibility-label :chat-item}
+       (if (#{constants/content-type-system-text constants/content-type-community
+              constants/content-type-contact-request
+              constants/content-type-system-pinned-message}
+            content-type)
+         [system-message-content message-data]
+         [user-message-content
+          {:message-data    message-data
+           :context         context
+           :keyboard-shown? keyboard-shown?
+           :show-reactions? true}])])))