Design notes for pinned message (#16997)

src/quo2/components/avatars/icon_avatar.cljs

@@ -4,9 +4,8 @@
             [quo2.theme :as quo.theme]
             [react-native.core :as rn]))
 
-(def sizes
+(def ^:private sizes
-  {:big    48
+  {:medium 32
-   :medium 32
    :small  20})
 
 (defn icon-avatar-internal
@@ -16,8 +15,7 @@
         circle-color   (colors/custom-color color 50 opacity)
         icon-color     (colors/custom-color-by-theme color 50 60)
         icon-size      (case size
-                         :big    20
+                         :medium 20
-                         :medium 16
                          :small  12)]
     [rn/view
      {:style {:width            component-size

src/quo2/components/messages/author/view.cljs

@@ -12,7 +12,7 @@
   [{:keys [primary-name secondary-name style short-chat-key time-str contact? verified? untrustworthy?
            muted? size]
     :or   {size 13}}]
-  [rn/view {:style (merge style/container style)}
+  [rn/view {:style (merge style/container style {:height (if (= size 15) 21.75 18.2)})}
    [text/text
     {:weight              :semi-bold
      :size                (if (= size 15) :paragraph-1 :paragraph-2)

src/quo2/components/messages/system_message.cljs

@@ -15,7 +15,7 @@
 
 (defn time-color
   [theme]
-  (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))
+  (colors/theme-colors colors/neutral-40 colors/neutral-50 theme))
 
 (defn sm-icon
   [{:keys [icon color opacity]}]
@@ -28,11 +28,11 @@
      :opacity opacity}]])
 
 (defn sm-timestamp
-  [timestamp]
+  [timestamp theme]
   [rn/view {:margin-left 8 :margin-top 2}
    [text/text
     {:size  :label
-     :style {:color          (time-color :time)
+     :style {:color          (time-color theme)
              :text-transform :none}}
     timestamp]])
 
@@ -61,10 +61,11 @@
         item])]))
 
 (defn system-message-base
-  [{:keys [icon timestamp]} child]
+  [{:keys [icon timestamp theme]} child]
   [rn/view
    {:flex-direction :row
-    :flex           1}
+    :flex           1
+    :align-items    :center}
    [sm-icon icon]
    [rn/view
     {:align-self     :center
@@ -72,7 +73,7 @@
      :margin-right   40 ;; dirty hack, flexbox won't work as expected
      :flex           1}
     child
-    [sm-timestamp timestamp]]])
+    [sm-timestamp timestamp theme]]])
 
 (defn system-message-deleted-internal
   [{:keys [label child theme timestamp]}]
@@ -80,7 +81,8 @@
    {:icon      {:icon    :i/delete
                 :color   :danger
                 :opacity 5}
-    :timestamp timestamp}
+    :timestamp timestamp
+    :theme     theme}
    (if child
      child
      [text/text
@@ -156,7 +158,8 @@
    [rn/view
     [rn/view
      {:flex-direction :row
-      :flex-wrap      :wrap}
+      :flex-wrap      :wrap
+      :height         18.2}
      [author/author {:primary-name pinned-by}]
      [split-text (i18n/label :pinned-a-message) theme true]]
     (when child child)]])

src/status_im2/contexts/chat/composer/reply/style.cljs

@@ -1,13 +1,13 @@
-(ns status-im2.contexts.chat.composer.reply.style
+(ns status-im2.contexts.chat.composer.reply.style)
-  (:require [react-native.platform :as platform]))
 
 
 (defn container
   [pin? in-chat-input?]
   {:flex-direction :row
    :height         (when-not pin? 24)
-   :margin-left    (if (and (not in-chat-input?) (not pin?)) 26 (if platform/android? 4 0))
+   :margin-left    (when (and (not in-chat-input?) (not pin?)) 26)
    :margin-bottom  (when (and (not in-chat-input?) (not pin?)) 8)})
+
 (defn reply-content
   [pin?]
   {:padding-right  (when-not pin? 10)

src/status_im2/contexts/chat/composer/reply/view.cljs

@@ -61,7 +61,7 @@
     (i18n/label :t/message-deleted)]])
 
 (defn reply-from
-  [{:keys [from contact-name current-public-key]}]
+  [{:keys [from contact-name current-public-key pin?]}]
   (let [display-name (first (rf/sub [:contacts/contact-two-names-by-identity from]))
         photo-path   (rf/sub [:chats/photo-path from])]
     [rn/view {:style style/reply-from}
@@ -73,7 +73,7 @@
        :ring?             false}]
      [quo/text
       {:weight          :semi-bold
-       :size            :paragraph-2
+       :size            (if pin? :label :paragraph-2)
        :number-of-lines 1
        :style           style/message-author-text}
       (format-reply-author from contact-name current-public-key)]]))
@@ -100,7 +100,8 @@
          [reply-deleted-message]]
         [rn/view {:style (style/quoted-message pin?)}
          [reply-from
-          {:from               from
+          {:pin?               pin?
+           :from               from
            :contact-name       contact-name
            :current-public-key current-public-key}]
          (when (not-empty text)