[#16864] Design review: messages home (#17050)

---------

Co-authored-by: Yevheniia Berdnyk <ie.berdnyk@gmail.com>
Co-authored-by: Churikova Tetiana <tatiana@status.im>

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

@@ -6,22 +6,26 @@
    :flex-direction :row
    :align-items    :center})
 
-(def middle-dot-nickname
+(defn middle-dot-nickname
-  {:color             colors/neutral-50
+  []
+  {:color             (colors/theme-colors colors/neutral-40 colors/neutral-50)
    :margin-horizontal 4})
 
-(def chat-key-text
+(defn chat-key-text
-  {:color       colors/neutral-50
+  []
+  {:color       (colors/theme-colors colors/neutral-40 colors/neutral-50)
    :margin-left 8})
 
-(def middle-dot-chat-key
+(defn middle-dot-chat-key
-  {:color       colors/neutral-50
+  []
+  {:color       (colors/theme-colors colors/neutral-40 colors/neutral-50)
    :margin-left 4})
 
 (def icon-container
   {:margin-left 4})
 
 (defn time-text
-  [ens?]
+  [verified?]
-  {:color       colors/neutral-50
+  {:color       (colors/theme-colors colors/neutral-40 colors/neutral-50)
-   :margin-left (if ens? 8 4)})
+   :padding-top 1
+   :margin-left (if verified? 8 4)})

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

@@ -9,26 +9,33 @@
 (def middle-dot "·")
 
 (defn author
-  [{:keys [primary-name secondary-name style short-chat-key time-str contact? verified? untrustworthy?]}]
+  [{: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)}
    [text/text
     {:weight              :semi-bold
-     :size            :paragraph-2
+     :size                (if (= size 15) :paragraph-1 :paragraph-2)
      :number-of-lines     1
-     :style           {:color (colors/theme-colors colors/neutral-100 colors/white)}}
+     :accessibility-label :author-primary-name
+     :style               {:color (if muted?
+                                    colors/neutral-50
+                                    (colors/theme-colors colors/neutral-100 colors/white))}}
     primary-name]
    (when (not (string/blank? secondary-name))
      [:<>
       [text/text
-       {:size            :paragraph-2
+       {:size            :label
         :number-of-lines 1
-        :style           style/middle-dot-nickname}
+        :style           (style/middle-dot-nickname)}
        middle-dot]
       [text/text
        {:weight              :medium
-        :size            :paragraph-2
+        :size                :label
         :number-of-lines     1
-        :style           {:color (colors/theme-colors colors/neutral-60 colors/neutral-40)}}
+        :accessibility-label :author-secondary-name
+        :style               {:padding-top 1
+                              :color       (colors/theme-colors colors/neutral-50 colors/neutral-40)}}
        secondary-name]])
    (when contact?
      [icons/icon :main-icons2/contact
@@ -51,14 +58,14 @@
       {:monospace       true
        :size            :label
        :number-of-lines 1
-       :style           style/chat-key-text}
+       :style           (style/chat-key-text)}
       short-chat-key])
-   (when (and (not verified?) time-str)
+   (when (and (not verified?) time-str short-chat-key)
      [text/text
       {:monospace       true
        :size            :label
        :number-of-lines 1
-       :style           style/middle-dot-chat-key}
+       :style           (style/middle-dot-chat-key)}
       middle-dot])
    (when time-str
      [text/text

src/status_im2/contexts/chat/home/chat_list_item/style.cljs

@@ -3,22 +3,13 @@
 
 (defn container
   []
-  {:margin-top         8
+  {:margin-horizontal  8
-   :margin-horizontal  8
    :padding-vertical   8
    :padding-horizontal 12
    :border-radius      12
    :flex-direction     :row
    :align-items        :center})
 
-(defn timestamp
-  [muted?]
-  {:color       (if muted?
-                  colors/neutral-50
-                  (colors/theme-colors colors/neutral-50 colors/neutral-40))
-   :margin-top  3
-   :margin-left 8})
-
 (def chat-data-container
   {:flex         1
    :margin-left  8

src/status_im2/contexts/chat/home/chat_list_item/view.cljs

@@ -167,36 +167,6 @@
       :accessibility-label :chat-message-text}
      preview-text]))
 
-
-(defn verified-or-contact-icon
-  [{:keys [ens-verified added?]}]
-  (if ens-verified
-    [rn/view {:style {:margin-left 5 :margin-top 4}}
-     [quo/icon :i/verified
-      {:no-color true
-       :size     12
-       :color    (colors/theme-colors colors/success-50 colors/success-60)}]]
-    (when added?
-      [rn/view {:style {:margin-left 5 :margin-top 4}}
-       [quo/icon :i/contact
-        {:no-color true
-         :size     12
-         :color    (colors/theme-colors colors/primary-50 colors/primary-60)}]])))
-
-(defn name-view
-  [display-name contact timestamp muted?]
-  [rn/view {:style {:flex-direction :row}}
-   [quo/text
-    {:weight              :semi-bold
-     :accessibility-label :chat-name-text
-     :style               {:color (when muted? colors/neutral-50)}}
-    display-name]
-   [verified-or-contact-icon contact]
-   [quo/text
-    {:size  :label
-     :style (style/timestamp muted?)}
-    (datetime/to-short-str timestamp)]])
-
 (defn avatar-view
   [{:keys [contact chat-id full-name color muted?]}]
   (if contact ; `contact` is passed when it's not a group chat
@@ -244,12 +214,13 @@
         unviewed-messages-count])]))
 
 (defn chat-list-item
-  [{:keys [chat-id group-chat color name timestamp last-message muted]
+  [{:keys [chat-id group-chat color name last-message timestamp muted]
     :as   item}]
-  (let [display-name (if group-chat
+  (let [[primary-name secondary-name]
-                       name
+        (if group-chat
-                       (first (rf/sub [:contacts/contact-two-names-by-identity chat-id])))
+          [name ""]
-        contact      (when-not group-chat
+          (rf/sub [:contacts/contact-two-names-by-identity chat-id]))
+        {:keys [ens-verified added?] :as contact} (when-not group-chat
                                                     (rf/sub [:contacts/contact-by-address chat-id]))]
     [rn/touchable-opacity
      {:style         (style/container)
@@ -259,10 +230,17 @@
      [avatar-view
       {:contact   contact
        :chat-id   chat-id
-       :full-name display-name
+       :full-name primary-name
        :color     color
        :muted?    muted}]
      [rn/view {:style style/chat-data-container}
-      [name-view display-name contact timestamp muted]
+      [quo/author
+       {:primary-name   primary-name
+        :secondary-name secondary-name
+        :size           15
+        :verified?      ens-verified
+        :contact?       added?
+        :muted?         muted
+        :time-str       (datetime/to-short-str timestamp)}]
       [last-message-preview group-chat last-message muted]]
      [notification item]]))

src/status_im2/contexts/quo_preview/messages/author.cljs

@@ -4,8 +4,7 @@
             [quo2.foundations.colors :as colors]
             [react-native.core :as rn]
             [reagent.core :as reagent]
-            [status-im2.contexts.quo-preview.preview :as preview]
+            [status-im2.contexts.quo-preview.preview :as preview]))
-            [utils.address :as address]))
 
 (def descriptor
   [{:label "Primary name"
@@ -36,8 +35,6 @@
   []
   (let [state (reagent/atom {:primary-name    "Alisher Yakupov"
                              :seconadary-name ""
-                             :short-chat-key  (address/get-shortened-compressed-key
-                                               "zQ3ssgRy5TtB47MMiMKMKaGyaawkCgMqqbrnAUYrZJ1sgt5N")
                              :time-str        "09:30"
                              :contact?        false
                              :verified?       false

src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs

@@ -101,8 +101,7 @@
   [rn/view {:style style/notification-container}
    (if (= notification-indicator :counter)
      [quo/counter
-      {:outline             false
+      {:customization-color customization-color}
-       :customization-color customization-color}
       counter-label]
      [rn/view {:style (style/unread-dot customization-color)}])])
 

test/appium/tests/critical/test_public_chat_browsing.py

@@ -398,7 +398,7 @@ class TestCommunityOneDeviceMerged(MultipleSharedDeviceTestCase):
             expected_time.strftime('%H:%M'),
             "today" if current_time.hour < 23 else "tomorrow"
         )
-        self.home.get_chat(self.community_name).long_press_element()
+        self.home.get_chat(self.community_name, community=True).long_press_element()
         if not self.home.element_by_text(expected_text).is_element_displayed():
             self.errors.append("Text '%s' is not shown for muted community" % expected_text)
         self.home.click_system_back_button()
@@ -429,7 +429,6 @@ class TestCommunityOneDeviceMerged(MultipleSharedDeviceTestCase):
         if not self.home.element_by_text(expected_text).is_element_displayed():
             self.errors.append("Text '%s' is not shown for a muted community channel" % expected_text)
         self.home.click_system_back_button()
-
         self.home.navigate_back_to_home_view()
         self.home.communities_tab.click()
         self.home.get_chat(self.community_name, community=True).long_press_element()
@@ -913,8 +912,8 @@ class TestCommunityMultipleDeviceMerged(MultipleSharedDeviceTestCase):
             self.errors.append("Messages from blocked user is not cleared in public chat ")
         self.chat_1.navigate_back_to_home_view()
         self.home_1.chats_tab.click()
-        if self.home_1.element_by_text(self.username_2).is_element_displayed():
+        if not self.home_1.element_by_translation_id( "no-messages").is_element_displayed():
-            self.errors.append("1-1 chat from blocked user is not removed!")
+            self.errors.append("1-1 chat from blocked user is not removed and messages home is not empty!")
         self.chat_1.toggle_airplane_mode()
 
         # workaround for app closed after airplane mode
@@ -929,7 +928,10 @@ class TestCommunityMultipleDeviceMerged(MultipleSharedDeviceTestCase):
 
         self.chat_1.just_fyi('Check that new messages from blocked user are not delivered')
         self.chat_1.toggle_airplane_mode()
-        self.home_1.jump_to_card_by_text('# %s' % self.channel_name)
+        # self.home_1.jump_to_card_by_text('# %s' % self.channel_name)
+        self.home_1.communities_tab.click()
+        self.home_1.get_chat(self.community_name, community=True).click()
+        self.home_1.get_chat(self.channel_name, community_channel=True).click()
         for message in message_to_disappear, message_blocked:
             if self.chat_1.chat_element_by_text(message).is_element_displayed(30):
                 self.errors.append(
@@ -977,6 +979,7 @@ class TestCommunityMultipleDeviceMerged(MultipleSharedDeviceTestCase):
 
         if unblocked:
             self.home_2.just_fyi("Check message in 1-1 chat after unblock")
+            self.home_2.chats_tab.click()
             self.home_2.get_chat(self.username_1).click()
             self.chat_2.send_message(message_unblocked)
             try:

test/appium/views/home_view.py

@@ -33,14 +33,18 @@ class ChatElement(SilentButton):
         self.username = username_part
         self.community = community
         self.community_channel = community_channel
-        if self.community_channel is True:
+        if self.community_channel:
             super().__init__(
                 driver,
                 xpath="//*[@content-desc='chat-name-text']//*[starts-with(@text,'# %s')]/../.." % username_part)
-        else:
+        elif community:
             super().__init__(
                 driver,
                 xpath="//*[@content-desc='chat-name-text'][starts-with(@text,'%s')]/.." % username_part)
+        else:
+            super().__init__(
+                driver,
+                xpath="//*[@content-desc='author-primary-name'][starts-with(@text,'%s')]/.." % username_part)
 
     def navigate(self):
         if self.community:
@@ -523,7 +527,7 @@ class HomeView(BaseView):
 
     def mute_chat_long_press(self, chat_name, mute_period="mute-till-unmute", community=False, community_channel=False):
         self.driver.info("Muting chat with %s" % chat_name)
-        self.get_chat(username=chat_name, community_channel=community_channel).long_press_element()
+        self.get_chat(username=chat_name, community=community, community_channel=community_channel).long_press_element()
         if community:
             self.mute_community_button.click()
         elif community_channel: