e2e: temp check of not reported tests

ci/tests/Jenkinsfile.e2e-prs

@@ -45,7 +45,6 @@ pipeline {
 
   options {
     disableConcurrentBuilds()
-    timeout(time: 90, unit: 'MINUTES')
   }
 
   stages {

doc/README.md

@@ -20,8 +20,6 @@
 
 [Debugging](debugging.md)
 
-[Patching](patching.md)
-
 
 ## Testing
 

doc/patching.md

@@ -1,13 +0,0 @@
-# Patching
-
-## Libraries
-If 3rd party library has an issue and fix is not yet released (or we can't switch to a new release), we use forks. Fix should be commited to the fork, tagged and referenced from package.json.
-
-Example: [`react-native-hole-view`](https://github.com/status-im/react-native-hole-view#refs/tags/v2.1.1-status)
-
-## React Native
-When patch need to be applied to React Native itself Status does patching with Nix instead of doing it nodejs-way.
-
-Patches should be added to [this file](https://github.com/status-im/status-mobile/blob/develop/nix/deps/nodejs-patched/default.nix).
-
-Example: [patching `react-native/Yoga` to build app with XCode 14.3](https://github.com/status-im/status-mobile/pull/15589)

modules/react-native-status/ios/RCTStatus/RCTStatus.m

@@ -304,14 +304,6 @@ RCT_EXPORT_METHOD(hashMessage:(NSString *)message
     callback(@[result]);
 }
 
-RCT_EXPORT_METHOD(localPairingPreflightOutboundCheck:(RCTResponseSenderBlock)callback) {
-#if DEBUG
-    NSLog(@"LocalPairingPreflightOutboundCheck() method called");
-#endif
-    NSString *result = StatusgoLocalPairingPreflightOutboundCheck();
-    callback(@[result]);
-}
-
 RCT_EXPORT_METHOD(getConnectionStringForBootstrappingAnotherDevice:(NSString *)configJSON
                   callback:(RCTResponseSenderBlock)callback) {
 

src/native_module/core.cljs

@@ -248,13 +248,6 @@
   (log/debug "[native-module] hash-message")
   (.hashMessage ^js (status) message callback))
 
-(defn local-pairing-preflight-outbound-check
-  "Checks whether the device has allows connecting to the local server"
-  [callback]
-  (log/info "[native-module] Performing local pairing preflight check")
-  (when platform/ios?
-    (.localPairingPreflightOutboundCheck ^js (status) callback)))
-
 (defn get-connection-string-for-bootstrapping-another-device
   "Generates connection string form status-go for the purpose of local pairing on the sender end"
   [config-json callback]

src/quo2/components/banners/banner/style.cljs

@@ -4,7 +4,7 @@
 
 (def container
   {:height           40
-   :background-color (colors/custom-color :blue 50 20)
+   :background-color colors/primary-50-opa-20
    :flex-direction   :row
    :align-items      :center
    :padding-right    22

src/quo2/components/banners/banner/view.cljs

@@ -27,4 +27,4 @@
      [rn/view
       {:accessibility-label :pins-count
        :style               style/counter}
-      [counter/counter {:type :secondary} pins-count]]]))
+      (when (> pins-count 1) [counter/counter {:type :secondary} pins-count])]]))

src/quo2/components/community/community_list_view.cljs

@@ -90,8 +90,7 @@
    (merge {:underlay-color (colors/theme-colors
                             colors/neutral-5
                             colors/neutral-95)
-           :style          {:border-radius 12
-                            :margin-left   12}}
+           :style          {:border-radius 12}}
           props)
    [rn/view (merge (style/membership-info-container) style)
     [community-icon/community-icon

src/quo2/components/drawers/action_drawers/component_spec.cljs

@@ -50,23 +50,8 @@
                   :label               "a sample label"
                   :right-icon          :i/friend
                   :accessibility-label :first-element}]]])
-    (h/is-truthy (h/query-by-label-text :right-icon-for-action))
-    (h/is-truthy (h/query-by-label-text :left-icon-for-action)))
-
-  (h/test "renders right text besides icon when non-nil"
-    (h/render [action-drawer/action-drawer
-               [[{:icon       :i/friend
-                  :label      "a sample label"
-                  :right-text "20+"
-                  :right-icon :i/friend}]]])
-    (h/is-truthy (h/query-by-label-text :right-text-for-action)))
-
-  (h/test "does not render right text when not present"
-    (h/render [action-drawer/action-drawer
-               [[{:icon       :i/friend
-                  :label      "a sample label"
-                  :right-icon :i/friend}]]])
-    (h/is-null (h/query-by-label-text :right-text-for-action)))
+    (h/is-truthy (h/get-by-label-text "right-icon-for-action"))
+    (h/is-truthy (h/query-by-label-text "left-icon-for-action")))
 
   (h/test "renders a divider when the add-divider? prop is true"
     (h/render [action-drawer/action-drawer

src/quo2/components/drawers/action_drawers/style.cljs

@@ -34,17 +34,8 @@
   {:flex            1
    :justify-content :center})
 
-(def right-side-container
-  {:flex-direction :row
-   :align-items    :center})
-
 (def right-icon
   {:height        20
    :margin-top    :auto
    :margin-bottom :auto
    :width         20})
-
-(defn right-text
-  [override-theme]
-  {:color        (colors/theme-colors colors/neutral-50 colors/neutral-40 override-theme)
-   :margin-right 12})

src/quo2/components/drawers/action_drawers/view.cljs

@@ -11,7 +11,7 @@
     colors/danger-60
     (colors/theme-colors colors/neutral-50 colors/neutral-40 override-theme)))
 
-(defn- divider
+(defn divider
   []
   [rn/view
    {:style               (style/divider)
@@ -29,7 +29,6 @@
            label
            sub-label
            right-icon
-           right-text
            danger?
            disabled?
            on-press
@@ -71,22 +70,14 @@
             :style {:color
                     (colors/theme-colors colors/neutral-50 colors/neutral-40 override-theme)}}
            sub-label])]
-       (when (or right-text right-icon)
-         [rn/view {:style style/right-side-container}
-          (when right-text
-            [text/text
-             {:accessibility-label :right-text-for-action
-              :size                :paragraph-1
-              :style               (style/right-text override-theme)}
-             right-text])
-          (when right-icon
-            [rn/view
-             {:style               style/right-icon
-              :accessible          true
-              :accessibility-label :right-icon-for-action}
-             [icon/icon right-icon
-              {:color (get-icon-color danger? override-theme)
-               :size  20}]])])]]]))
+       (when right-icon
+         [rn/view
+          {:style               style/right-icon
+           :accessible          true
+           :accessibility-label :right-icon-for-action}
+          [icon/icon right-icon
+           {:color (get-icon-color danger? override-theme)
+            :size  20}]])]]]))
 
 (defn action-drawer
   [sections]

src/quo2/components/drawers/documentation_drawers/style.cljs

@@ -1,9 +1,10 @@
 (ns quo2.components.drawers.documentation-drawers.style)
 
 (def container
-  {:align-items        :flex-start
-   :padding-horizontal 20})
+  {:align-items :flex-start
+   :padding     20})
 
 (def content
-  {:margin-top    8
+  {:margin-top    12
    :margin-bottom 16})
+

src/quo2/components/info/info_message.cljs

@@ -22,26 +22,27 @@
   opts
   {:type           :default/:success/:error
    :size           :default/:tiny
-   :icon           :i/info       ;; info message icon
-   :text-color     colors/white  ;; text color override
-   :icon-color     colors/white  ;; icon color override
-   :no-icon-color? false         ;; disable tint color for icon"
+   :icon           :i/info ;; info message icon
+   :text-color     colors/white     ;; text color override
+   :icon-color     colors/white    ;; icon color override
+   :no-icon-color? false       ;; disable tint color for icon"
   [{:keys [type size icon text-color icon-color no-icon-color? style]} message]
-  (let [weight     (if (= size :default) :regular :medium)
-        icon-size  (if (= size :default) 16 12)
-        size       (if (= size :default) :paragraph-2 :label)
-        text-color (or text-color (get-color type))
-        icon-color (or icon-color text-color)]
+  (let [weight          (if (= size :default) :regular :medium)
+        icon-size       (if (= size :default) 16 12)
+        icon-margin-top (if (= size :default) 2 3)
+        size            (if (= size :default) :paragraph-2 :label)
+        text-color      (or text-color (get-color type))
+        icon-color      (or icon-color text-color)]
     [rn/view
-     {:style (merge {:flex-direction :row
-                     :align-items    :center}
+     {:style (merge {:flex-direction :row}
                     style)}
      [quo2.icons/icon icon
-      {:color    icon-color
-       :no-color no-icon-color?
-       :size     icon-size}]
+      {:color           icon-color
+       :no-color        no-icon-color?
+       :size            icon-size
+       :container-style {:margin-top icon-margin-top}}]
      [text/text
       {:size   size
        :weight weight
        :style  {:color             text-color
-                :margin-horizontal 4}} message]]))
+                :margin-horizontal 8}} message]]))

src/quo2/components/inputs/profile_input/component_spec.cljs

@@ -5,8 +5,7 @@
 (h/describe "Profile Input"
   (h/test "renders user avatar with placeholder name if no value is specified"
     (h/render [profile-input/profile-input
-               {:placeholder        "Your Name"
-                :image-picker-props {:full-name "Your Name"}}])
+               {:placeholder "Your Name"}])
     (-> (js/expect (h/get-by-text "YN"))
         (.toBeTruthy)))
 

src/quo2/components/inputs/profile_input/style.cljs

@@ -13,7 +13,7 @@
 
 (def button
   {:position      :absolute
-   :top           24
+   :top           23
    :bottom        0
    :left          33
    :right         0

src/quo2/components/inputs/profile_input/view.cljs

@@ -6,6 +6,7 @@
     [quo2.components.inputs.title-input.view :as title-input]
     [quo2.foundations.colors :as colors]
     [react-native.core :as rn]
+    [react-native.platform :as platform]
     [react-native.hole-view :as hole-view]))
 
 (defn profile-input
@@ -14,42 +15,49 @@
            on-press
            title-input-props
            image-picker-props]}]
-  [rn/view
-   {:style (style/container customization-color)}
-   [rn/view
-    [hole-view/hole-view
-     ;; Force re-render hole view when props are changed
-     ;; https://github.com/status-im/status-mobile/issues/15577
-     {:key   (hash
-              (if (:profile-picture image-picker-props)
-                (:profile-picture image-picker-props)
-                image-picker-props))
-      :holes [{:x            33
-               :y            24
-               :width        24
-               :height       24
-               :borderRadius 12}]}
-     [user-avatar/user-avatar
-      (assoc image-picker-props
-             :static?           true
-             :status-indicator? false
-             :size              :medium)]]
-    [buttons/button
-     {:accessibility-label       :select-profile-picture-button
-      :type                      :grey
-      :override-theme            :dark
-      :override-background-color (colors/alpha colors/white 0.05)
-      :on-press                  on-press
-      :icon-size                 20
-      :width                     24
-      :size                      24
-      :icon                      :i/camera
-      :style                     style/button
-      :inner-style               style/button-inner} :i/camera]]
-   [rn/view {:style style/input-container}
-    [title-input/title-input
-     (merge title-input-props
-            {:blur?               true
-             :override-theme      :dark
-             :placeholder         placeholder
-             :customization-color customization-color})]]])
+  (let [full-name (:full-name image-picker-props)]
+    [rn/view
+     {:style (style/container customization-color)}
+     [rn/view
+      (if platform/ios?
+        [hole-view/hole-view
+         {:holes [{:x            33
+                   :y            23
+                   :width        24
+                   :height       24
+                   :borderRadius 12}]}
+         [user-avatar/user-avatar
+          (assoc image-picker-props
+                 :customization-color customization-color
+                 :full-name           (if (seq full-name)
+                                        full-name
+                                        placeholder)
+                 :status-indicator?   false
+                 :size                :medium)]]
+        [user-avatar/user-avatar
+         (assoc image-picker-props
+                :customization-color customization-color
+                :full-name           (if (seq full-name)
+                                       full-name
+                                       placeholder)
+                :status-indicator?   false
+                :size                :medium)])
+      [buttons/button
+       {:accessibility-label       :select-profile-picture-button
+        :type                      :grey
+        :override-theme            :dark
+        :override-background-color (colors/alpha colors/white 0.05)
+        :on-press                  on-press
+        :icon-size                 20
+        :width                     24
+        :size                      24
+        :icon                      :i/camera
+        :style                     style/button
+        :inner-style               style/button-inner} :i/camera]]
+     [rn/view {:style style/input-container}
+      [title-input/title-input
+       (merge title-input-props
+              {:blur?               true
+               :override-theme      :dark
+               :placeholder         placeholder
+               :customization-color customization-color})]]]))

src/quo2/components/inputs/title_input/view.cljs

@@ -15,15 +15,13 @@
 (defn title-input
   [{:keys [blur?
            on-change-text
-           auto-focus
            placeholder
            max-length
            default-value
            override-theme]
     :or   {max-length    0
-           auto-focus    false
            default-value ""}}]
-  (let [focused?  (reagent/atom auto-focus)
+  (let [focused?  (reagent/atom false)
         value     (reagent/atom default-value)
         on-change (fn [v]
                     (reset! value v)
@@ -44,7 +42,6 @@
           :keyboard-appearance (theme/theme-value :light :dark override-theme)
           :on-focus #(swap! focused? (fn [] true))
           :on-blur #(swap! focused? (fn [] false))
-          :auto-focus auto-focus
           :input-mode :text
           :on-change-text on-change
           :editable (not disabled?)

src/quo2/components/list_items/channel.cljs

@@ -8,65 +8,58 @@
             [react-native.core :as rn]
             [quo2.components.common.unread-grey-dot.view :refer [unread-grey-dot]]))
 
-(def ^:private custom-props
-  [:name :locked? :mentions-count :unread-messages?
-   :muted? :is-active-channel? :emoji :channel-color])
-
 (defn list-item
-  [{:keys [locked? mentions-count unread-messages?
-           muted? is-active-channel? emoji channel-color]
-    :or   {channel-color colors/primary-50}
-    :as   props}]
-  (let [standard-props (apply dissoc props custom-props)
-        name-text      (:name props)]
-    [rn/touchable-opacity standard-props
-     [rn/view
-      {:style (merge {:height          48
-                      :display         :flex
-                      :border-radius   12
-                      :flex-direction  :row
-                      :justify-content :space-between
-                      :align-items     :center
-                      :width           "100%"
-                      :padding-left    12
-                      :padding-right   12}
-                     (when is-active-channel?
-                       {:background-color (colors/theme-alpha channel-color 0.05 0.05)}))}
-      [rn/view
-       {:display             :flex
-        :flex-direction      :row
-        :justify-content     :flex-start
-        :align-items         :center
-        :accessible          true
-        :accessibility-label :chat-name-text}
-       [channel-avatar/channel-avatar
-        {:big?                   true
-         :locked?                locked?
-         :emoji-background-color (colors/theme-alpha channel-color 0.1 0.1)
-         :emoji                  emoji}]
-       [quo2.text/text
-        {:style  (merge {:margin-left 12}
-                        (when (and (not locked?) muted?)
-                          {:color (if (theme/dark?) colors/neutral-60 colors/neutral-40)}))
-         :weight :medium
-         :size   :paragraph-1} (str "# " name-text)]]
-      [rn/view
-       {:style {:height          20
-                :justify-content :center}}
-       (when (and (not locked?)
-                  muted?)
-         [quo2.icons/icon :i/muted
-          {:size     20
-           :no-color true}])
-       (when (and (not locked?)
-                  (not muted?)
-                  (pos? (int mentions-count)))
-         [rn/view
-          {:style {:margin-right 2
-                   :margin-top   2}}
-          [quo2.counter/counter {:override-bg-color channel-color} mentions-count]])
-       (when (and (not locked?)
-                  (not muted?)
-                  (not (pos? (int mentions-count)))
-                  unread-messages?)
-         [unread-grey-dot :unviewed-messages-public])]]]))
+  [{:keys [name locked? mentions-count unread-messages?
+           muted? is-active-channel? emoji channel-color on-press]
+    :or   {channel-color colors/primary-50}}]
+  [rn/touchable-opacity {:on-press on-press}
+   [rn/view
+    {:style (merge {:height          48
+                    :display         :flex
+                    :border-radius   12
+                    :flex-direction  :row
+                    :justify-content :space-between
+                    :align-items     :center
+                    :width           "100%"
+                    :padding-left    12
+                    :padding-right   12}
+                   (when is-active-channel?
+                     {:background-color (colors/theme-alpha channel-color 0.05 0.05)}))}
+    [rn/view
+     {:display             :flex
+      :flex-direction      :row
+      :justify-content     :flex-start
+      :align-items         :center
+      :accessible          true
+      :accessibility-label :chat-name-text}
+     [channel-avatar/channel-avatar
+      {:big?                   true
+       :locked?                locked?
+       :emoji-background-color (colors/theme-alpha channel-color 0.1 0.1)
+       :emoji                  emoji}]
+     [quo2.text/text
+      {:style  (merge {:margin-left 12}
+                      (when (and (not locked?) muted?)
+                        {:color (if (theme/dark?) colors/neutral-60 colors/neutral-40)}))
+       :weight :medium
+       :size   :paragraph-1} (str "# " name)]]
+    [rn/view
+     {:style {:height          20
+              :justify-content :center}}
+     (when (and (not locked?)
+                muted?)
+       [quo2.icons/icon :i/muted
+        {:size     20
+         :no-color true}])
+     (when (and (not locked?)
+                (not muted?)
+                (pos? (int mentions-count)))
+       [rn/view
+        {:style {:margin-right 2
+                 :margin-top   2}}
+        [quo2.counter/counter {:override-bg-color channel-color} mentions-count]])
+     (when (and (not locked?)
+                (not muted?)
+                (not (pos? (int mentions-count)))
+                unread-messages?)
+       [unread-grey-dot :unviewed-messages-public])]]])

src/quo2/components/profile/profile_card/style.cljs

@@ -27,8 +27,7 @@
   {:color colors/white})
 
 (def emoji-hash
-  {:margin-top     12
-   :letter-spacing 1.5})
+  {:margin-top 12})
 
 (def user-hash
   {:margin-top 2

src/quo2/components/profile/profile_card/view.cljs

@@ -94,8 +94,9 @@
            style/keycard-icon))]
        (when show-user-hash?
          [text/text
-          {:weight :monospace
-           :style  style/user-hash} hash])
+          {:weight          :monospace
+           :number-of-lines 1
+           :style           style/user-hash} hash])
        (when (and show-emoji-hash? emoji-hash)
          [text/text
           {:weight          :monospace

src/quo2/components/selectors/disclaimer/view.cljs

@@ -6,9 +6,9 @@
 
 (defn view
   [{:keys [checked? blur? accessibility-label container-style on-change]} label]
-  [rn/touchable-without-feedback
+  [rn/touchable-opacity
    {:on-press            on-change
-    :accessibility-label :disclaimer-touchable-opacity}
+    :accessibility-label "disclaimer-touchable-opacity"}
    [rn/view {:style (merge container-style (style/container blur?))}
     [selectors/checkbox
      {:accessibility-label accessibility-label

src/quo2/components/settings/settings_list/component_spec.cljs

@@ -1,58 +0,0 @@
-(ns quo2.components.settings.settings-list.component-spec
-  (:require [quo2.components.settings.settings-list.view :as settings-list]
-            [test-helpers.component :as h]))
-
-(h/describe "Settings list tests"
-  (h/test "Default render of Setting list component"
-    (h/render [settings-list/settings-list {:accessibility-label "test"}])
-    (h/is-truthy (h/get-by-label-text :test)))
-
-  (h/test "It renders a title"
-    (h/render [settings-list/settings-list {:title "test"}])
-    (h/is-truthy (h/get-by-text "test")))
-
-  (h/test "its gets passed an on press event"
-    (let [event (h/mock-fn)]
-      (h/render [settings-list/settings-list
-                 {:title    "test"
-                  :on-press event}])
-      (h/fire-event :press (h/get-by-text "test"))
-      (h/was-called event)))
-
-  (h/test "on change event gets fired for toggle"
-    (let [on-change (h/mock-fn)]
-      (h/render [settings-list/settings-list
-                 {:title        "test"
-                  :toggle-props {:on-change on-change}}])
-      (h/fire-event :press (h/get-by-label-text :toggle-off))
-      (h/was-called on-change)))
-
-  (h/test "It renders a badge"
-    (h/render [settings-list/settings-list {:badge? true}])
-    (h/is-truthy (h/get-by-label-text :setting-list-badge)))
-
-  (h/test "It renders a status tag component"
-    (h/render [settings-list/settings-list
-               {:status-tag-props
-                {:size   :small
-                 :status {:type :positive}
-                 :label  "test tag"}}])
-    (h/is-truthy (h/get-by-text "test tag")))
-
-  (h/test "on press event gets fired for button"
-    (let [event (h/mock-fn)]
-      (h/render [settings-list/settings-list
-                 {:button-props {:title    "test button"
-                                 :on-press event}}])
-      (h/fire-event :press (h/get-by-text "test button"))
-      (h/was-called event)))
-
-  (h/test "It renders a list of community icons"
-    (h/render [settings-list/settings-list
-               {:communities-props {:data
-                                    [{:source              "1"
-                                      :accessibility-label :community-1}
-                                     {:source              "2"
-                                      :accessibility-label :community-2}]}}])
-    (h/is-truthy (h/get-by-label-text :community-1))
-    (h/is-truthy (h/get-by-label-text :community-2))))

src/quo2/components/settings/settings_list/style.cljs

@@ -5,51 +5,42 @@
   {:flex 1})
 
 (defn title
-  [override-theme]
+  []
   {:color (colors/theme-colors
            colors/neutral-100
-           colors/white
-           override-theme)})
+           colors/white)})
 
 (def icon
-  {:margin-right 12
-   :align-self   :flex-start})
+  {:margin-right 12})
 
 (def item-container
   {:justify-content    :space-between
+   :height             48
+   :flex-direction     :row
    :align-items        :center
    :padding-horizontal 12
    :padding-vertical   13})
 
-(def inner-container
-  {:flex-direction :row
-   :align-items    :center})
-
 (defn dot
-  [override-theme]
+  []
   {:width            15
    :height           15
    :border-radius    8
    :margin-right     14.5
    :background-color (colors/theme-colors (colors/custom-color :blue 50)
-                                          (colors/custom-color :blue 60)
-                                          override-theme)})
+                                          (colors/custom-color :blue 60))})
 
 (defn community-icon
-  [index override-theme]
+  [index]
   {:width         24
    :height        24
    :border-width  1
-   :border-color  (colors/theme-colors colors/white colors/black override-theme)
+   :border-color  (colors/theme-colors colors/white colors/black)
    :border-radius 12
    :position      :absolute
+   :top           "-50%"
    :right         (* 20 index)})
 
 (def communities-container
-  {:flex            1
-   :justify-content :center
-   :align-content   :center
-   :margin-right    12})
-
-(def tag-container
-  {:margin-top 8})
+  {:flex         1
+   :margin-right 12})

src/quo2/components/settings/settings_list/view.cljs

@@ -4,36 +4,30 @@
             [quo2.components.selectors.selectors.view :as selectors]
             [quo2.components.buttons.button :as button]
             [quo2.components.markdown.text :as text]
-            [quo2.components.tags.status-tags :as status-tag]
             [quo2.foundations.colors :as colors]
             [react-native.core :as rn]))
 
 (defn settings-title
-  [title status-tag-props override-theme]
+  [title]
   [rn/view
    {:style style/title-container}
-   (when title
-     [text/text
-      {:accessibility-label :setting-item-name-text
-       :ellipsize-mode      :tail
-       :style               (style/title override-theme)
-       :override-theme      override-theme
-       :number-of-lines     1
-       :weight              :medium
-       :size                :paragraph-1}
-      title])
-   (when status-tag-props
-     [rn/view {:style style/tag-container}
-      [status-tag/status-tag
-       status-tag-props]])])
+   [text/text
+    {:accessibility-label :setting-item-name-text
+     :ellipsize-mode      :tail
+     :style               (style/title)
+     :number-of-lines     1
+     :weight              :medium
+     :size                :paragraph-1}
+    title]])
 
-(defn left-icon-comp
-  [icon]
-  [rn/view {:style style/icon}
-   [icons/icon icon
-    {:color (colors/theme-colors
-             colors/neutral-50
-             colors/neutral-40)}]])
+(defn browser-context-icon
+  []
+  [rn/view
+   [icons/icon :browser-context
+    {:container-style style/icon
+     :color           (colors/theme-colors
+                       colors/neutral-50
+                       colors/neutral-40)}]])
 
 (def chevron-icon
   [rn/view
@@ -49,28 +43,22 @@
    {:checked?  checked?
     :on-change (fn [new-value] (on-change new-value))}])
 
-(defn badge-icon
-  [override-theme]
+(def badge-icon
   [rn/view
-   {:accessible          :true
-    :accessibility-label :setting-list-badge
-    :style               (style/dot override-theme)}])
+   {:style (style/dot)}])
 
 (defn right-button
   [{:keys [title
-           on-press]}
-   override-theme]
+           on-press]}]
   [button/button
-   {:type           :outline
-    :override-theme override-theme
-    :on-press       on-press
-    :size           24}
+   {:type     :outline
+    :on-press on-press
+    :size     24}
    title])
 
 (defn communities-icons
   [{:keys [data
-           icon-style]}
-   override-theme]
+           icon-style]}]
   (let [communities-count (dec (count data))]
     [rn/view
      {:style style/communities-container}
@@ -82,8 +70,7 @@
                                  {:uri source}
                                  source)
           :accessibility-label accessibility-label
-          :style               (merge (style/community-icon (- communities-count index) override-theme)
-                                      icon-style)}])
+          :style               (merge (style/community-icon (- communities-count index)) icon-style)}])
       data)]))
 
 (defn settings-list
@@ -91,7 +78,7 @@
    - `title` String to show in the center of the component, right to the icon and left to optional gadgets.
    - `on-press` Callback called when the component is pressed.
    - `accessibility-label` String to use as accessibility-label for VoiceOver.
-   - `left-icon` icon keyword for icon on left.
+   - `left-icon` Symbol to indicate icon type on the left side of the component.
    - `chevron?` Boolean to show/hide chevron at the right border of the component.
    - `toggle-prop` Map with the following keys:
        `checked?` Boolean value to set check or unchecked toggle.
@@ -102,11 +89,7 @@
        `on-press` Callback called when button is pressed.
    - `communities-props` Map with the following keys:
        `data` Array of maps containg source of the community asset.
-   - `style` Styles map to be merge with default container styles.
-   - `overide-theme` :dark or :light
-   - `status-tag-props see the spec for status-tag component
-   "
-
+   - `style` Styles map to be merge with default container styles."
   [{:keys [title
            on-press
            accessibility-label
@@ -116,22 +99,21 @@
            badge?
            button-props
            communities-props
-           container-style
-           override-theme
-           status-tag-props]}]
+           container-style]}]
   [rn/touchable-without-feedback
    {:on-press            on-press
     :accessibility-label accessibility-label}
    [rn/view
     {:style (merge style/item-container container-style)}
-    [rn/view {:style style/inner-container}
-     (when left-icon
-       [left-icon-comp left-icon])
-     [settings-title title status-tag-props override-theme]
-     (when toggle-props
-       [toggle-button toggle-props])
-     (when badge? [badge-icon override-theme])
-     (when button-props
-       [right-button button-props override-theme])
-     (when communities-props (communities-icons communities-props override-theme))
-     (when chevron? chevron-icon)]]])
+    (case left-icon
+      ;; TODO: Add Icon Avatar on next variants development
+      :browser-context (browser-context-icon)
+      nil)
+    [settings-title title]
+    (when toggle-props
+      (toggle-button toggle-props))
+    (when badge? badge-icon)
+    (when button-props
+      (right-button button-props))
+    (when communities-props (communities-icons communities-props))
+    (when chevron? chevron-icon)]])

src/quo2/components/text_combinations/title/style.cljs

@@ -2,16 +2,14 @@
   (:require
     [quo2.foundations.colors :as colors]))
 
-(defn title-container
-  [container-style]
-  (merge
-   {:justify-content    :center
-    :padding-horizontal 20}
-   container-style))
+(def title-container
+  {:justify-content    :center
+   :margin-top         12
+   :padding-horizontal 20})
 
 (def title-text
   {:color colors/white})
 
 (def subtitle-text
-  {:color      colors/white
-   :margin-top 8})
+  {:color         colors/white
+   :margin-bottom 8})

src/quo2/components/text_combinations/title/view.cljs

@@ -5,12 +5,11 @@
     [react-native.core :as rn]))
 
 (defn title
-  [{:keys [container-style
-           title
+  [{:keys [title
            title-accessibility-label
            subtitle
            subtitle-accessibility-label]}]
-  [rn/view {:style (style/title-container container-style)}
+  [rn/view {:style style/title-container}
    [text/text
     {:accessibility-label title-accessibility-label
      :weight              :semi-bold

src/quo2/core_spec.cljs

@@ -32,6 +32,5 @@
     [quo2.components.selectors.filter.component-spec]
     [quo2.components.selectors.reactions.component-spec]
     [quo2.components.selectors.selectors.component-spec]
-    [quo2.components.settings.settings-list.component-spec]
     [quo2.components.share.share-qr-code.component-spec]
     [quo2.components.tags.--tests--.status-tags-component-spec]))

src/status_im/chat/models/reactions.cljs

@@ -104,6 +104,7 @@
    :emoji-id       emoji-id
    :from           from})
 
+
 (defn- format-response
   [response]
   (->> (transforms/js->clj response)
@@ -112,22 +113,24 @@
 
 (rf/defn save-emoji-reaction-details
   {:events [:chat/save-emoji-reaction-details]}
-  [{:keys [db]} reaction-authors]
-  {:db (assoc db :chat/reactions-authors reaction-authors)})
+  [{:keys [db]} message-reactions long-pressed-emoji]
+  {:db (assoc db
+              :chat/reactions-authors
+              {:reaction-authors-list message-reactions
+               :selected-reaction     long-pressed-emoji})})
 
 (rf/defn clear-emoji-reaction-details
   {:events [:chat/clear-emoji-reaction-author-details]}
-  [{:keys [db]}]
-  {:db (dissoc db :chat/reactions-authors)})
+  [{:keys [db]} message-reactions]
+  {:db (update db dissoc :chat/reactions-authors)})
 
 (rf/defn emoji-reactions-by-message-id
   {:events [:chat.ui/emoji-reactions-by-message-id]}
-  [{:keys [db]} {:keys [message-id on-success]}]
-  {:db            (dissoc db :chat/reactions-authors)
-   :json-rpc/call [{:method      "wakuext_emojiReactionsByChatIDMessageID"
+  [{:keys [db]} {:keys [message-id long-pressed-emoji]}]
+  {:json-rpc/call [{:method      "wakuext_emojiReactionsByChatIDMessageID"
                     :params      [(:current-chat-id db) message-id]
                     :js-response true
                     :on-error    #(log/error "failed to fetch emoji reaction by message-id: "
                                              {:message-id message-id :error %})
-                    :on-success  #(when on-success
-                                    (on-success (format-response %)))}]})
+                    :on-success  #(rf/dispatch [:chat/save-emoji-reaction-details
+                                                (format-response %) long-pressed-emoji])}]})

src/status_im/data_store/messages.cljs

@@ -55,11 +55,10 @@
       (update :link-previews #(map <-link-preview-rpc %))
       (update :quoted-message
               set/rename-keys
-              {:parsedText       :parsed-text
-               :deleted          :deleted?
-               :deletedForMe     :deleted-for-me?
-               :communityId      :community-id
-               :albumImagesCount :album-images-count})
+              {:parsedText   :parsed-text
+               :deleted      :deleted?
+               :deletedForMe :deleted-for-me?
+               :communityId  :community-id})
       (update :outgoing-status keyword)
       (update :command-parameters
               set/rename-keys

src/status_im/mailserver/core.cljs

@@ -126,7 +126,7 @@
          (not (:mailserver/current-request db)))
     {:db            (assoc db :mailserver/current-request true)
      :json-rpc/call [{:method      "wakuext_requestAllHistoricMessagesWithRetries"
-                      :params      [false]
+                      :params      []
                       :js-response true
                       :on-success  #(do
                                       (log/info "fetched historical messages")

src/status_im/signals/core.cljs

@@ -10,8 +10,7 @@
             [utils.re-frame :as rf]
             [status-im2.contexts.chat.messages.link-preview.events :as link-preview]
             [taoensso.timbre :as log]
-            [status-im2.constants :as constants]
-            [quo2.foundations.colors :as colors]))
+            [status-im2.constants :as constants]))
 
 (rf/defn status-node-started
   [{db :db :as cofx} {:keys [error]}]
@@ -56,7 +55,7 @@
                 :peers-count (count (:peers peer-stats)))}))
 
 (rf/defn handle-local-pairing-signals
-  [{:keys [db] :as cofx} {:keys [type action data error] :as event}]
+  [{:keys [db] :as cofx} {:keys [type action data] :as event}]
   (log/info "local pairing signal received"
             {:event event})
   (let [{:keys [account password]}      data
@@ -79,7 +78,7 @@
                                              (and (some? account) (some? password)))
         multiaccount-data               (when received-account?
                                           (merge account {:password password}))
-        navigate-to-syncing-devices?    (and (or connection-success? error-on-pairing?) receiver?)
+        navigate-to-syncing-devices?    (and connection-success? receiver?)
         user-in-syncing-devices-screen? (= (:view-id db) :syncing-progress)]
     (merge {:db (cond-> db
                   connection-success?
@@ -93,21 +92,12 @@
 
                   completed-pairing?
                   (assoc-in [:syncing :pairing-status] :completed))}
-           (cond
-             (and navigate-to-syncing-devices? (not user-in-syncing-devices-screen?))
-             {:dispatch [:navigate-to :syncing-progress]}
-
-             (and completed-pairing? sender?)
-             {:dispatch [:syncing/clear-states]}
-
-             (and completed-pairing? receiver?)
-             {:dispatch [:multiaccounts.login/local-paired-user]}
-
-             (and error-on-pairing? (some? error))
-             {:dispatch [:toasts/upsert
-                         {:icon       :i/alert
-                          :icon-color colors/danger-50
-                          :text       error}]}))))
+           (when (and navigate-to-syncing-devices? (not user-in-syncing-devices-screen?))
+             {:dispatch [:navigate-to :syncing-progress]})
+           (when (and completed-pairing? sender?)
+             {:dispatch [:syncing/clear-states]})
+           (when (and completed-pairing? receiver?)
+             {:dispatch [:multiaccounts.login/local-paired-user]}))))
 
 (rf/defn process
   {:events [:signals/signal-received]}

src/status_im/utils/universal_links/core.cljs

@@ -84,15 +84,16 @@
 
 (rf/defn handle-navigation-to-desktop-community-from-mobile
   {:events [:handle-navigation-to-desktop-community-from-mobile]}
-  [cofx deserialized-key]
-  (navigation/navigate-to cofx :community-overview deserialized-key))
+  [{:keys [db]} cofx deserialized-key]
+  (navigation/navigate-to cofx :community {:community-id deserialized-key}))
+
 
 (rf/defn handle-desktop-community
   [cofx {:keys [community-id]}]
   (native-module/deserialize-and-compress-key
    community-id
    (fn [deserialized-key]
-     (rf/dispatch [:handle-navigation-to-desktop-community-from-mobile (str deserialized-key)]))))
+     (rf/dispatch [:handle-navigation-to-desktop-community-from-mobile cofx (str deserialized-key)]))))
 
 (rf/defn handle-community-chat
   [cofx {:keys [chat-id]}]

src/status_im2/common/bottom_sheet/styles.cljs

@@ -1,6 +1,5 @@
-(ns status-im2.common.bottom-sheet.style
+(ns status-im2.common.bottom-sheet.styles
   (:require [quo2.foundations.colors :as colors]
-            [quo2.theme :as theme]
             [status-im.utils.platform :as platform]))
 
 (defn handle
@@ -8,7 +7,7 @@
   {:width            32
    :height           4
    :background-color (colors/theme-colors colors/neutral-100 colors/white override-theme)
-   :opacity          (theme/theme-value 0.05 0.1)
+   :opacity          0.05
    :border-radius    100
    :align-self       :center
    :margin-vertical  8})
@@ -25,7 +24,7 @@
    :border-top-right-radius 20
    :overflow                (when shell? :hidden)
    :flex                    1
-   :padding-bottom          (or padding-bottom-override (+ bottom 8))
+   :padding-bottom          (or padding-bottom-override (max 20 bottom))
    :background-color        (if shell?
                               :transparent
                               (colors/theme-colors colors/white colors/neutral-90 override-theme))})
@@ -39,11 +38,9 @@
    :bottom           0})
 
 (defn selected-item
-  [override-theme window-height sheet-height {:keys [top]}]
+  [override-theme]
   {:position          :absolute
    :bottom            10
-   :max-height        (- window-height sheet-height top)
-   :overflow          :hidden
    :left              0
    :right             0
    :border-radius     12

src/status_im2/common/bottom_sheet/view.cljs

@@ -3,12 +3,11 @@
             [react-native.core :as rn]
             [quo2.foundations.colors :as colors]
             [react-native.reanimated :as reanimated]
-            [status-im2.common.bottom-sheet.style :as style]
+            [status-im2.common.bottom-sheet.styles :as styles]
             [react-native.gesture :as gesture]
             [oops.core :as oops]
             [react-native.hooks :as hooks]
-            [react-native.blur :as blur]
-            [reagent.core :as reagent]))
+            [react-native.blur :as blur]))
 
 (def duration 450)
 (def timing-options #js {:duration duration})
@@ -52,48 +51,44 @@
            (show translate-y bg-opacity)
            (hide translate-y bg-opacity window-height on-close))))))
 
-(defn f-view
-  [_ _]
-  (let [sheet-height (reagent/atom 0)]
-    (fn [{:keys [hide? insets]}
-         {:keys [content override-theme selected-item padding-bottom-override on-close shell?]}]
-      (let [{window-height :height} (rn/get-window)
-            bg-opacity              (reanimated/use-shared-value 0)
-            translate-y             (reanimated/use-shared-value window-height)
-            sheet-gesture           (get-sheet-gesture translate-y bg-opacity window-height on-close)]
-        (rn/use-effect
-         #(if hide? (hide translate-y bg-opacity window-height on-close) (show translate-y bg-opacity))
-         [hide?])
-        (hooks/use-back-handler #(do (when (fn? on-close)
-                                       (on-close))
-                                     (rf/dispatch [:hide-bottom-sheet])
-                                     true))
-        [rn/view {:style {:flex 1}}
-         ;; backdrop
-         [rn/touchable-without-feedback {:on-press #(rf/dispatch [:hide-bottom-sheet])}
-          [reanimated/view
-           {:style (reanimated/apply-animations-to-style
-                    {:opacity bg-opacity}
-                    {:flex 1 :background-color colors/neutral-100-opa-70})}]]
-         ;; sheet
-         [gesture/gesture-detector {:gesture sheet-gesture}
-          [reanimated/view
-           {:style     (reanimated/apply-animations-to-style
-                        {:transform [{:translateY translate-y}]}
-                        (style/sheet insets
-                                     window-height
-                                     override-theme
-                                     padding-bottom-override
-                                     shell?))
-            :on-layout #(reset! sheet-height (oops/oget % "nativeEvent" "layout" "height"))}
-           (when shell? [blur/ios-view {:style style/shell-bg}])
+(defn view
+  [{:keys [hide? insets]}
+   {:keys [content override-theme selected-item padding-bottom-override on-close shell?]}]
+  (let [{window-height :height} (rn/get-window)
+        bg-opacity              (reanimated/use-shared-value 0)
+        translate-y             (reanimated/use-shared-value window-height)
+        sheet-gesture           (get-sheet-gesture translate-y bg-opacity window-height on-close)]
+    (rn/use-effect
+     #(if hide? (hide translate-y bg-opacity window-height on-close) (show translate-y bg-opacity))
+     [hide?])
+    (hooks/use-back-handler #(do (when (fn? on-close)
+                                   (on-close))
+                                 (rf/dispatch [:hide-bottom-sheet])
+                                 true))
+    [rn/view {:flex 1}
+     ;; backdrop
+     [rn/touchable-without-feedback {:on-press #(rf/dispatch [:hide-bottom-sheet])}
+      [reanimated/view
+       {:style (reanimated/apply-animations-to-style
+                {:opacity bg-opacity}
+                {:flex 1 :background-color colors/neutral-100-opa-70})}]]
+     ;; sheet
+     [gesture/gesture-detector {:gesture sheet-gesture}
+      [reanimated/view
+       {:style (reanimated/apply-animations-to-style
+                {:transform [{:translateY translate-y}]}
+                (styles/sheet insets window-height override-theme padding-bottom-override shell?))}
 
-           (when selected-item
-             [rn/view
-              [rn/view {:style (style/selected-item override-theme window-height @sheet-height insets)}
-               [selected-item]]])
+       (when shell?
+         [blur/ios-view
+          {:style styles/shell-bg}])
 
-           ;; handle
-           [rn/view {:style (style/handle override-theme)}]
-           ;; content
-           [content]]]]))))
+       (when selected-item
+         [rn/view
+          [rn/view {:style (styles/selected-item override-theme)}
+           [selected-item]]])
+
+       ;; handle
+       [rn/view {:style (styles/handle override-theme)}]
+       ;; content
+       [content]]]]))

src/status_im2/common/bottom_sheet_screen/style.cljs

@@ -1,7 +1,7 @@
 (ns status-im2.common.bottom-sheet-screen.style
-  (:require [quo2.foundations.colors :as colors]
-            [quo2.theme :as theme]
-            [react-native.reanimated :as reanimated]))
+  (:require
+    [quo2.foundations.colors :as colors]
+    [react-native.reanimated :as reanimated]))
 
 (defn background
   [opacity]
@@ -40,5 +40,4 @@
   {:width            32
    :height           4
    :border-radius    100
-   :background-color (colors/theme-colors colors/neutral-100 colors/white override-theme)
-   :opacity          (theme/theme-value 0.05 0.1)})
+   :background-color (colors/theme-colors colors/neutral-100-opa-30 colors/white-opa-30 override-theme)})

src/status_im2/common/home/actions/view.cljs

@@ -1,13 +1,12 @@
 (ns status-im2.common.home.actions.view
-  (:require [clojure.string :as string]
+  (:require [utils.i18n :as i18n]
             [quo2.core :as quo]
-            [quo2.foundations.colors :as colors]
-            [status-im2.contexts.communities.actions.chat.view :as chat-actions]
             [status-im2.common.confirmation-drawer.view :as confirmation-drawer]
             [status-im2.constants :as constants]
+            [utils.re-frame :as rf]
             [status-im2.contexts.contacts.drawers.nickname-drawer.view :as nickname-drawer]
-            [utils.i18n :as i18n]
-            [utils.re-frame :as rf]))
+            [clojure.string :as string]
+            [quo2.foundations.colors :as colors]))
 
 (defn- entry
   [{:keys [icon label on-press danger? sub-label chevron? add-divider? accessibility-label]}]
@@ -72,7 +71,7 @@
                   :on-press            #(hide-sheet-and-dispatch [:chat.ui/clear-history chat-id])}])}]))
 
 (defn delete-chat-action
-  [{:keys [chat-id] :as item} inside-chat?]
+  [{:keys [chat-id] :as item}]
   (hide-sheet-and-dispatch
    [:show-bottom-sheet
     {:content (fn []
@@ -82,10 +81,7 @@
                   :context             item
                   :accessibility-label :delete-chat-confirm
                   :button-text         (i18n/label :t/delete-chat)
-                  :on-press            (fn []
-                                         (hide-sheet-and-dispatch [:chat.ui/remove-chat chat-id])
-                                         (when inside-chat?
-                                           (rf/dispatch [:navigate-back])))}])}]))
+                  :on-press            #(hide-sheet-and-dispatch [:chat.ui/remove-chat chat-id])}])}]))
 
 (defn leave-group-action
   [item chat-id]
@@ -98,10 +94,10 @@
                   :context             item
                   :accessibility-label :leave-group
                   :button-text         (i18n/label :t/leave-group)
-                  :on-press            (fn []
-                                         (hide-sheet-and-dispatch [:group-chats.ui/leave-chat-confirmed
-                                                                   chat-id])
-                                         (rf/dispatch [:navigate-back]))}])}]))
+                  :on-press            #(do
+                                          (rf/dispatch [:navigate-back])
+                                          (hide-sheet-and-dispatch [:group-chats.ui/leave-chat-confirmed
+                                                                    chat-id]))}])}]))
 
 (defn block-user-action
   [{:keys [public-key] :as item}]
@@ -134,7 +130,7 @@
             :chevron?            true})))
 
 (defn mark-as-read-entry
-  [chat-id needs-divider?]
+  [chat-id]
   (entry {:icon                :i/correct
           :label               (i18n/label :t/mark-as-read)
           :on-press            #(mark-all-read-action chat-id)
@@ -142,7 +138,7 @@
           :accessibility-label :mark-as-read
           :sub-label           nil
           :chevron?            false
-          :add-divider?        needs-divider?}))
+          :add-divider?        true}))
 
 (defn clear-history-entry
   [chat-id]
@@ -156,10 +152,10 @@
           :add-divider?        true}))
 
 (defn delete-chat-entry
-  [item inside-chat?]
+  [item]
   (entry {:icon                :i/delete
           :label               (i18n/label :t/delete-chat)
-          :on-press            #(delete-chat-action item inside-chat?)
+          :on-press            #(delete-chat-action item)
           :danger?             true
           :accessibility-label :delete-chat
           :sub-label           nil
@@ -397,15 +393,15 @@
           :chevron?            false}))
 
 (defn destructive-actions
-  [{:keys [group-chat] :as item} inside-chat?]
+  [{:keys [group-chat] :as item}]
   [(clear-history-entry item)
    (if group-chat
      (leave-group-entry item nil)
-     (delete-chat-entry item inside-chat?))])
+     (delete-chat-entry item))])
 
 (defn notification-actions
-  [{:keys [chat-id group-chat public?]} inside-chat? needs-divider?]
-  [(mark-as-read-entry chat-id needs-divider?)
+  [{:keys [chat-id group-chat public?]} inside-chat?]
+  [(mark-as-read-entry chat-id)
    (mute-chat-entry chat-id)
    (notifications-entry false)
    (when inside-chat?
@@ -434,17 +430,15 @@
   [quo/action-drawer
    [[(view-profile-entry chat-id)
      (edit-nickname-entry chat-id)]
-    (notification-actions item inside-chat? false)
-    (destructive-actions item inside-chat?)]])
+    (notification-actions item inside-chat?)
+    (destructive-actions item)]])
 
 (defn private-group-chat-actions
   [item inside-chat?]
   [quo/action-drawer
-   (let [show-group-actions? (:group-chat-member? item)]
-     [(when show-group-actions?
-        (group-actions item inside-chat?))
-      (notification-actions item inside-chat? show-group-actions?)
-      (destructive-actions item inside-chat?)])])
+   [(group-actions item inside-chat?)
+    (notification-actions item inside-chat?)
+    (destructive-actions item)]])
 
 (defn contact-actions
   [{:keys [public-key] :as contact} {:keys [chat-id admin?] :as extra-data}]
@@ -463,15 +457,12 @@
            (remove-from-group-entry contact chat-id))])]]))
 
 (defn chat-actions
-  [{:keys [chat-type] :as chat} inside-chat?]
-  (condp = chat-type
+  [{:keys [chat-type] :as item} inside-chat?]
+  (case chat-type
     constants/one-to-one-chat-type
-    [one-to-one-actions chat inside-chat?]
+    [one-to-one-actions item inside-chat?]
     constants/private-group-chat-type
-    [private-group-chat-actions chat inside-chat?]
-    constants/community-chat-type
-    [chat-actions/actions chat inside-chat?]
-    nil))
+    [private-group-chat-actions item inside-chat?]))
 
 (defn group-details-actions
   [{:keys [admins] :as group}]
@@ -480,4 +471,4 @@
     [quo/action-drawer
      [(when admin? [(edit-name-image-entry)])
       [(notifications-entry admin?)]
-      (destructive-actions group false)]]))
+      (destructive-actions group)]]))

src/status_im2/common/not_implemented.cljs

@@ -6,7 +6,3 @@
   (when content
     [rn/view {:border-color :red :border-width 1}
      content]))
-
-(defn alert
-  []
-  (js/alert "Feature not implemented."))

src/status_im2/common/resources.cljs

@@ -22,26 +22,10 @@
    :keycard-watermark             (js/require "../resources/images/ui2/keycard-watermark.png")
    :discover                      (js/require "../resources/images/ui2/discover.png")
    :invite-friends                (js/require "../resources/images/ui2/invite-friends.png")
-   :no-messages-light             (js/require "../resources/images/ui2/no-messages-light.png")
-   :no-messages-dark              (js/require "../resources/images/ui2/no-messages-dark.png")
-   :no-group-chats-light          (js/require "../resources/images/ui2/no-group-chats-light.png")
-   :no-group-chats-dark           (js/require "../resources/images/ui2/no-group-chats-dark.png")
    :no-contacts-light             (js/require "../resources/images/ui2/no-contacts-light.png")
    :no-contacts-dark              (js/require "../resources/images/ui2/no-contacts-dark.png")
-   :no-sent-requests-light        (js/require "../resources/images/ui2/no-sent-requests-light.png")
-   :no-sent-requests-dark         (js/require "../resources/images/ui2/no-sent-requests-dark.png")
-   :no-received-requests-light    (js/require "../resources/images/ui2/no-received-requests-light.png")
-   :no-received-requests-dark     (js/require "../resources/images/ui2/no-received-requests-dark.png")
-   :no-communities-light          (js/require "../resources/images/ui2/no-communities-light.png")
-   :no-communities-dark           (js/require "../resources/images/ui2/no-communities-dark.png")
-   :no-pending-communities-light  (js/require "../resources/images/ui2/no-pending-communities-light.png")
-   :no-pending-communities-dark   (js/require "../resources/images/ui2/no-pending-communities-dark.png")
-   :no-opened-communities-light   (js/require "../resources/images/ui2/no-opened-communities-light.png")
-   :no-opened-communities-dark    (js/require "../resources/images/ui2/no-opened-communities-dark.png")
-   :no-contacts-to-invite-light   (js/require "../resources/images/ui2/no-contacts-to-invite-light.png")
-   :no-contacts-to-invite-dark    (js/require "../resources/images/ui2/no-contacts-to-invite-dark.png")
-   :no-notifications-light        (js/require "../resources/images/ui2/no-notifications-light.png")
-   :no-notifications-dark         (js/require "../resources/images/ui2/no-notifications-dark.png")})
+   :no-messages-light             (js/require "../resources/images/ui2/no-messages-light.png")
+   :no-messages-dark              (js/require "../resources/images/ui2/no-messages-dark.png")})
 
 (def mock-images
   {:coinbase             (js/require "../resources/images/mock2/coinbase.png")

src/status_im2/common/syncing/style.cljs

@@ -0,0 +1,29 @@
+(ns status-im2.common.syncing.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(def device-container
+  {:padding-top        12
+   :padding-horizontal 12
+   :padding-bottom     16
+   :border-color       colors/white-opa-5
+   :border-radius      16
+   :border-width       1
+   :margin-bottom      24})
+
+(def device-container-orientation
+  {:flex-direction :row})
+
+(def icon-container
+  {:height       20
+   :margin-right 12})
+
+(def tag-container
+  {:margin-top 8})
+
+(def render-device-status
+  {:background-color colors/success-60
+   :align-self       :center
+   :width            8
+   :height           8
+   :border-radius    4
+   :margin-right     6})

src/status_im2/common/syncing/view.cljs

@@ -0,0 +1,51 @@
+(ns status-im2.common.syncing.view
+  [:require
+   [quo2.core :as quo]
+   [utils.i18n :as i18n]
+   [quo2.foundations.colors :as colors]
+   [react-native.core :as rn]
+   [status-im2.common.not-implemented :as not-implemented]
+   [status-im2.common.syncing.style :as style]])
+
+;; TODO replace with section list component
+;; https://github.com/status-im/status-mobile/issues/15665
+(defn view
+  [{:keys [name
+           this-device?
+           device-type]}]
+  [rn/view {:style style/device-container}
+   [rn/view {:style style/device-container-orientation}
+    [rn/view {:style style/icon-container}
+     [quo/icon
+      (if (= device-type :mobile) :i/mobile :i/desktop)
+      {:color colors/white}]]
+    [rn/view
+     [quo/text
+      {:accessibility-label :device-name
+       :weight              :medium
+       :size                :paragraph-1
+       :style               {:color colors/white}}
+      name]
+     (when this-device?
+       [not-implemented/not-implemented
+        [quo/text
+         {:accessibility-label :next-back-up
+          :size                :paragraph-2
+          :style               {:color colors/white-opa-40}}
+         "Next backup in 04:36:12"]])
+     (when this-device?
+       [rn/view {:style style/tag-container}
+        [quo/status-tag
+         {:size           :small
+          :status         {:type :positive}
+          :no-icon?       true
+          :label          (i18n/label :t/this-device)
+          :override-theme :dark}]])
+     (when-not this-device?
+       [rn/view {:style {:flex-direction :row}}
+        [rn/view style/render-device-status]
+        [quo/text
+         {:accessibility-label :next-back-up
+          :size                :paragraph-2
+          :style               {:color colors/white-opa-40}}
+         (i18n/label :t/online-now)]])]]])

src/status_im2/constants.cljs

@@ -331,5 +331,3 @@
 (def ^:const auth-method-biometric "biometric")
 (def ^:const auth-method-biometric-prepare "biometric-prepare")
 (def ^:const auth-method-none "none")
-
-(def ^:const image-description-in-lightbox? false)

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

@@ -1,12 +1,11 @@
-(ns status-im2.contexts.chat.composer.reply.style
-  (:require [react-native.platform :as platform]))
+(ns status-im2.contexts.chat.composer.reply.style)
 
 
 (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?]
@@ -34,7 +33,7 @@
   {:text-transform :none
    :margin-left    4
    :margin-top     2
-   :flex-shrink    1})
+   :flex           1})
 
 (def gradient
   {:position :absolute

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

@@ -84,8 +84,7 @@
    in-chat-input? pin? recording-audio?]
   (let [contact-name       (rf/sub [:contacts/contact-name-by-identity from])
         current-public-key (rf/sub [:multiaccount/public-key])
-        content-type       (or content-type contentType)
-        text               (get-quoted-text-with-mentions (or parsed-text (:parsed-text content)))]
+        content-type       (or content-type contentType)]
     [rn/view
      {:style               (style/container pin? in-chat-input?)
       :accessibility-label :reply-message}
@@ -103,30 +102,26 @@
           {:from               from
            :contact-name       contact-name
            :current-public-key current-public-key}]
-         (when (not-empty text)
-           [quo/text
-            {:number-of-lines     1
-             :size                :label
-             :weight              :regular
-             :accessibility-label :quoted-message
-             :ellipsize-mode      :tail
-             :style               style/message-text}
-            text])
          [quo/text
-          {:size   :label
-           :weight :regular
-           :style  {:color      (colors/theme-colors colors/neutral-50 colors/neutral-40)
-                    :margin-top 2}}
-          (str " "
-               (case (or content-type contentType)
-                 constant/content-type-image   (if (pos? album-images-count)
-                                                 (i18n/label :t/album-images-count
-                                                             {:album-images-count album-images-count})
-                                                 (i18n/label :t/photo))
-                 constant/content-type-sticker (i18n/label :t/sticker)
-                 constant/content-type-audio   (i18n/label :t/audio)
-                 ""))]
-        ])]
+          {:number-of-lines     1
+           :size                :label
+           :weight              :regular
+           :accessibility-label :quoted-message
+           :ellipsize-mode      :tail
+           :style               (merge
+                                 style/message-text
+                                 (when (or (= constant/content-type-image content-type)
+                                           (= constant/content-type-sticker content-type)
+                                           (= constant/content-type-audio content-type))
+                                   {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}))}
+          (case (or content-type contentType)
+            constant/content-type-image   (if album-images-count
+                                            (i18n/label :t/images-albums-count
+                                                        {:album-images-count album-images-count})
+                                            (i18n/label :t/image))
+            constant/content-type-sticker (i18n/label :t/sticker)
+            constant/content-type-audio   (i18n/label :t/audio)
+            (get-quoted-text-with-mentions (or parsed-text (:parsed-text content))))]])]
      (when (and in-chat-input? (not recording-audio?))
        [quo/button
         {:width               24

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

@@ -109,19 +109,3 @@
    :blur-radius (if platform/ios? 20 10)
    :blur-type   (colors/theme-colors :light :dark)
    :blur-amount 20})
-
-(defn shell-container
-  [bottom translate-y]
-  (reanimated/apply-animations-to-style
-   {:bottom    bottom ; we use height of the input directly as bottom position
-    :transform [{:translate-y translate-y}]}
-   {:position :absolute
-    :left     0
-    :right    0}))
-
-(defn shell-button
-  [translate-y opacity]
-  (reanimated/apply-animations-to-style
-   {:transform [{:translate-y translate-y}]
-    :opacity   opacity}
-   {}))

src/status_im2/contexts/chat/composer/sub_view.cljs

@@ -26,35 +26,34 @@
   [:f> f-blur-view layout-height focused?])
 
 (defn- f-shell-button
-  [{:keys [maximized? focused?]} {:keys [height]} {:keys [reply edit]}]
+  [{:keys [maximized?]} {:keys [height]} {:keys [images link-previews? reply edit]}]
   (let [insets       (safe-area/get-insets)
         extra-height (utils/calc-top-content-height reply edit)
-        neg-y        (utils/calc-shell-neg-y insets maximized? extra-height)
-        y-container  (reanimated/use-shared-value neg-y)
-        hide-shell?  (or @focused? @messages.list/show-floating-scroll-down-button)
-        y-shell      (reanimated/use-shared-value (if hide-shell? 35 0))
-        opacity      (reanimated/use-shared-value (if hide-shell? 0 1))]
+        translate-y  (reanimated/use-shared-value
+                      (utils/calc-shell-neg-y insets maximized? extra-height))]
     (rn/use-effect
      (fn []
-       (reanimated/animate opacity (if hide-shell? 0 1))
-       (reanimated/animate y-shell (if hide-shell? 35 0)))
-     [@focused? @messages.list/show-floating-scroll-down-button])
-    (rn/use-effect #(reanimated/animate y-container neg-y) [reply edit])
+       (let [extra-height (utils/calc-top-content-height reply edit)]
+         (reanimated/animate translate-y
+                             (utils/calc-shell-neg-y insets maximized? extra-height))))
+     [@maximized? images link-previews? reply edit])
     [reanimated/view
-     {:style (style/shell-container height y-container)}
-     [reanimated/view
-      {:style (style/shell-button y-shell opacity)}
-      [quo/floating-shell-button
-       {:jump-to
-        {:on-press (fn []
-                     (rf/dispatch [:chat/close true])
-                     (rf/dispatch [:shell/navigate-to-jump-to]))
-         :label    (i18n/label :t/jump-to)
-         :style    {:align-self :center}}} {}]]
+     {:style (reanimated/apply-animations-to-style
+              {:bottom    height ; we use height of the input directly as bottom position
+               :transform [{:translate-y translate-y}]} ; translate down when maximized
+              {:position :absolute
+               :left     0
+               :right    0})}
      [quo/floating-shell-button
-      (when @messages.list/show-floating-scroll-down-button
-        {:scroll-to-bottom {:on-press messages.list/scroll-to-bottom}})
-      {:bottom 24}]]))
+      (merge {:jump-to
+              {:on-press (fn []
+                           (rf/dispatch [:chat/close true])
+                           (rf/dispatch [:shell/navigate-to-jump-to]))
+               :label    (i18n/label :t/jump-to)
+               :style    {:align-self :center}}}
+             (when @messages.list/show-floating-scroll-down-button
+               {:scroll-to-bottom {:on-press messages.list/scroll-to-bottom}}))
+      {}]]))
 
 (defn shell-button
   [state animations subs]

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

@@ -4,7 +4,6 @@
     [react-native.core :as rn]
     [react-native.gesture :as gesture]
     [react-native.hooks :as hooks]
-    [react-native.platform :as platform]
     [react-native.reanimated :as reanimated]
     [reagent.core :as reagent]
     [utils.i18n :as i18n]
@@ -132,7 +131,7 @@
                        :background-y  background-y}
         props         (utils/init-props)
         state         (utils/init-state)]
-    [rn/view (when platform/ios? {:style {:z-index 1}})
+    [rn/view
      [reanimated/view {:style (style/background opacity background-y window-height)}]
      [sub-view/blur-view blur-height (:focused? state)]
      [:f> sheet-component extra-params props state]]))

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

@@ -152,9 +152,10 @@
                              (preview-text-from-content group-chat primary-name message)))]
     [quo/text
      {:size                :paragraph-2
-      :style               {:color (colors/theme-colors colors/neutral-50
-                                                        colors/neutral-40)
-                            :flex  1}
+      :style               {:color        (colors/theme-colors colors/neutral-50
+                                                               colors/neutral-40)
+                            :flex         1
+                            :margin-right 20}
       :number-of-lines     1
       :ellipsize-mode      :tail
       :accessibility-label :chat-message-text}
@@ -178,15 +179,10 @@
 
 (defn name-view
   [display-name contact timestamp]
-  [rn/view
-   {:style {:flex           1
-            :flex-direction :row}}
+  [rn/view {:style {:flex-direction :row}}
    [quo/text
     {:weight              :semi-bold
-     :accessibility-label :chat-name-text
-     :style               {:flex-shrink 1}
-     :number-of-lines     1
-     :ellipsize-mode      :tail}
+     :accessibility-label :chat-name-text}
     display-name]
    [verified-or-contact-icon contact]
    [quo/text
@@ -213,12 +209,11 @@
   [{:keys [chat-id group-chat color name unviewed-messages-count
            timestamp last-message muted]
     :as   item}]
-  (let [display-name       (if group-chat
-                             name
-                             (first (rf/sub [:contacts/contact-two-names-by-identity chat-id])))
-        contact            (when-not group-chat
-                             (rf/sub [:contacts/contact-by-address chat-id]))
-        show-unread-badge? (and (not muted) (> unviewed-messages-count 0))]
+  (let [display-name (if group-chat
+                       name
+                       (first (rf/sub [:contacts/contact-two-names-by-identity chat-id])))
+        contact      (when-not group-chat
+                       (rf/sub [:contacts/contact-by-address chat-id]))]
     [rn/touchable-opacity
      {:style         (style/container)
       :on-press      (open-chat chat-id)
@@ -229,14 +224,10 @@
        :chat-id   chat-id
        :full-name display-name
        :color     color}]
-     [rn/view
-      {:style {:flex         1
-               :margin-left  8
-               :margin-right (if show-unread-badge? 36 0)}}
+     [rn/view {:style {:margin-left 8}}
       [name-view display-name contact timestamp]
       [last-message-preview group-chat last-message]]
-     (when show-unread-badge?
-       [quo/info-count
-        {:style {:top   16
-                 :right 16}}
-        unviewed-messages-count])]))
+     (when-not muted
+       (when (> unviewed-messages-count 0)
+         [quo/info-count {:style {:top 16}}
+          unviewed-messages-count]))]))

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

@@ -22,16 +22,3 @@
    :right       0
    :left        0
    :padding-top top})
-
-(def header-height 245)
-
-(defn header-space
-  [top]
-  {:height (+ header-height top)})
-
-(defn empty-content-container
-  [top]
-  {:flex            1
-   :margin-top      (+ header-height top)
-   :margin-bottom   44
-   :justify-content :center})

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

@@ -1,24 +1,23 @@
 (ns status-im2.contexts.chat.home.view
-  (:require [quo2.core :as quo]
-            [quo2.foundations.colors :as colors]
-            [quo2.theme :as theme]
+  (:require [utils.i18n :as i18n]
+            [utils.re-frame :as rf]
+            [quo2.core :as quo]
             [re-frame.core :as re-frame]
-            [react-native.blur :as blur]
             [react-native.core :as rn]
-            [react-native.platform :as platform]
             [react-native.safe-area :as safe-area]
+            [quo2.foundations.colors :as colors]
+            [react-native.blur :as blur]
+            [react-native.platform :as platform]
             [status-im.multiaccounts.core :as multiaccounts]
-            [status-im2.common.contact-list-item.view :as contact-list-item]
+            [status-im2.contexts.chat.home.style :as style]
             [status-im2.common.contact-list.view :as contact-list]
-            [status-im2.common.home.actions.view :as actions]
             [status-im2.common.home.view :as common.home]
-            [status-im2.common.resources :as resources]
-            [status-im2.contexts.chat.actions.view :as home.sheet]
             [status-im2.contexts.chat.home.chat-list-item.view :as chat-list-item]
             [status-im2.contexts.chat.home.contact-request.view :as contact-request]
-            [status-im2.contexts.chat.home.style :as style]
-            [utils.i18n :as i18n]
-            [utils.re-frame :as rf]))
+            [status-im2.common.contact-list-item.view :as contact-list-item]
+            [status-im2.common.home.actions.view :as actions]
+            [status-im2.common.resources :as resources]
+            [status-im2.contexts.chat.actions.view :as home.sheet]))
 
 (defn get-item-layout
   [_ index]
@@ -31,51 +30,36 @@
          (filter key)
          (sort-by :timestamp >))))
 
-(defn empty-state-content
-  [selected-tab]
-  (case selected-tab
-    :tab/contacts
-    {:title       (i18n/label :t/no-contacts)
-     :description (i18n/label :t/no-contacts-description)
-     :image       (resources/get-image
-                   (theme/theme-value :no-contacts-light :no-contacts-dark))}
-    :tab/groups
-    {:title       (i18n/label :t/no-group-chats)
-     :description (i18n/label :t/no-group-chats-description)
-     :image       (resources/get-image
-                   (theme/theme-value :no-group-chats-light :no-group-chats-dark))}
-    :tab/recent
-    {:title       (i18n/label :t/no-messages)
-     :description (i18n/label :t/no-messages-description)
-     :image       (resources/get-image
-                   (theme/theme-value :no-messages-light :no-messages-dark))}
-    nil))
-
-(defn empty-state
-  [{:keys [selected-tab top]}]
-  (let [{:keys [image title description]} (empty-state-content selected-tab)]
-    [rn/view {:style (style/empty-content-container top)}
-     [quo/empty-state
-      {:image       image
-       :title       title
-       :description description}]]))
+(defn welcome-blank-chats
+  []
+  [rn/view {:style {:flex 1 :align-items :center :justify-content :center}}
+   [quo/icon :i/placeholder]
+   [quo/text {:weight :semi-bold} (i18n/label :t/no-messages)]
+   [quo/text (i18n/label :t/blank-messages-text)]])
 
 (defn chats
   [selected-tab top]
   (let [unfiltered-items (rf/sub [:chats-stack-items])
         items            (filter-and-sort-items-by-tab selected-tab unfiltered-items)]
     (if (empty? items)
-      [empty-state {:top top :selected-tab selected-tab}]
+      [welcome-blank-chats]
       [rn/flat-list
        {:key-fn                            #(or (:chat-id %) (:public-key %) (:id %))
         :content-inset-adjustment-behavior :never
-        :header                            [rn/view {:style (style/header-space top)}]
+        :header                            [rn/view {:height (+ 245 top)}]
         :get-item-layout                   get-item-layout
         :on-end-reached                    #(re-frame/dispatch [:chat/show-more-chats])
         :keyboard-should-persist-taps      :always
         :data                              items
         :render-fn                         chat-list-item/chat-list-item}])))
 
+(defn welcome-blank-contacts
+  []
+  [rn/view {:style {:flex 1 :align-items :center :justify-content :center}}
+   [quo/icon :i/placeholder]
+   [quo/text {:weight :semi-bold} (i18n/label :t/no-contacts)]
+   [quo/text (i18n/label :t/blank-contacts-text)]])
+
 (defn contact-item-render
   [{:keys [public-key] :as item}]
   (let [current-pk           (rf/sub [:multiaccount/public-key])
@@ -93,13 +77,13 @@
   [pending-contact-requests top]
   (let [items (rf/sub [:contacts/active-sections])]
     (if (and (empty? items) (empty? pending-contact-requests))
-      [empty-state {:top top :selected-tab :tab/contacts}]
+      [welcome-blank-contacts]
       [rn/section-list
        {:key-fn                            :public-key
         :get-item-layout                   get-item-layout
         :content-inset-adjustment-behavior :never
         :header                            [:<>
-                                            [rn/view {:style (style/header-space top)}]
+                                            [rn/view {:height (+ 245 top)}]
                                             (when (seq pending-contact-requests)
                                               [contact-request/contact-requests
                                                pending-contact-requests])]
@@ -119,41 +103,45 @@
 
 (defn home
   []
-  (let [pending-contact-requests (rf/sub [:activity-center/pending-contact-requests])
-        selected-tab             (or (rf/sub [:messages-home/selected-tab]) :tab/recent)
-        {:keys [key-uid]}        (rf/sub [:multiaccount])
-        account                  (rf/sub [:profile/multiaccount])
-        customization-color      (or (:color (rf/sub [:onboarding-2/profile]))
+  (fn []
+    (let [pending-contact-requests (rf/sub [:activity-center/pending-contact-requests])
+          selected-tab             (or (rf/sub [:messages-home/selected-tab]) :tab/recent)
+          {:keys [key-uid]}        (rf/sub [:multiaccount])
+          account                  (rf/sub [:profile/multiaccount])
+          profile-color            (:color (rf/sub [:onboarding-2/profile]))
+          customization-color      (if profile-color
+                                     profile-color
                                      (rf/sub [:profile/customization-color key-uid]))
-        top                      (safe-area/get-top)]
-    [:<>
-     (if (= selected-tab :tab/contacts)
-       [contacts pending-contact-requests top]
-       [chats selected-tab top])
-     [rn/view {:style (style/blur-container top)}
-      [blur/view
-       {:blur-amount (if platform/ios? 20 10)
-        :blur-type   (if (colors/dark?) :dark (if platform/ios? :light :xlight))
-        :style       style/blur}]
-      [common.home/top-nav
-       {:type   :grey
-        :avatar {:customization-color customization-color
-                 :full-name           (multiaccounts/displayed-name account)
-                 :profile-picture     (multiaccounts/displayed-photo account)}}]
-      [common.home/title-column
-       {:label               (i18n/label :t/messages)
-        :handler             #(rf/dispatch [:show-bottom-sheet {:content home.sheet/new-chat}])
-        :accessibility-label :new-chat-button
-        :customization-color customization-color}]
-      [quo/discover-card
-       {:banner      (resources/get-image :invite-friends)
-        :title       (i18n/label :t/invite-friends-to-status)
-        :description (i18n/label :t/share-invite-link)}]
-      ^{:key (str "tabs-" selected-tab)}
-      [quo/tabs
-       {:style          style/tabs
-        :size           32
-        :on-change      (fn [tab]
-                          (rf/dispatch [:messages-home/select-tab tab]))
-        :default-active selected-tab
-        :data           (get-tabs-data (pos? (count pending-contact-requests)))}]]]))
+          top                      (safe-area/get-top)]
+      [:<>
+       (if (= selected-tab :tab/contacts)
+         [contacts pending-contact-requests top]
+         [chats selected-tab top])
+       [rn/view
+        {:style (style/blur-container top)}
+        [blur/view
+         {:blur-amount (if platform/ios? 20 10)
+          :blur-type   (if (colors/dark?) :dark (if platform/ios? :light :xlight))
+          :style       style/blur}]
+        [common.home/top-nav
+         {:type   :grey
+          :avatar {:customization-color customization-color
+                   :full-name           (multiaccounts/displayed-name account)
+                   :profile-picture     (multiaccounts/displayed-photo account)}}]
+        [common.home/title-column
+         {:label               (i18n/label :t/messages)
+          :handler             #(rf/dispatch [:show-bottom-sheet {:content home.sheet/new-chat}])
+          :accessibility-label :new-chat-button
+          :customization-color customization-color}]
+        [quo/discover-card
+         {:banner      (resources/get-image :invite-friends)
+          :title       (i18n/label :t/invite-friends-to-status)
+          :description (i18n/label :t/share-invite-link)}]
+        ^{:key (str "tabs-" selected-tab)}
+        [quo/tabs
+         {:style          style/tabs
+          :size           32
+          :on-change      (fn [tab]
+                            (rf/dispatch [:messages-home/select-tab tab]))
+          :default-active selected-tab
+          :data           (get-tabs-data (pos? (count pending-contact-requests)))}]]])))

src/status_im2/contexts/chat/lightbox/bottom_view.cljs

@@ -6,8 +6,7 @@
     [status-im2.contexts.chat.lightbox.style :as style]
     [utils.re-frame :as rf]
     [status-im2.contexts.chat.lightbox.animations :as anim]
-    [status-im2.contexts.chat.lightbox.constants :as c]
-    [status-im2.constants :as constants]))
+    [status-im2.contexts.chat.lightbox.constants :as c]))
 
 (defn get-small-item-layout
   [_ index]
@@ -57,8 +56,7 @@
       :start  {:x 0 :y 1}
       :end    {:x 0 :y 0}
       :style  (style/gradient-container insets animations derived)}
-     (when constants/image-description-in-lightbox?
-       [rn/text {:style style/text-style} text])
+     [rn/text {:style style/text-style} text]
      [rn/flat-list
       {:ref                               #(reset! (:small-list-ref props) %)
        :key-fn                            :message-id

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

@@ -2,6 +2,7 @@
   (:require
     [quo.design-system.colors :as quo.colors]
     [quo.react-native :as rn]
+    [re-frame.core :as re-frame]
     [status-im.react-native.resources :as resources]
     [status-im.ui.components.fast-image :as fast-image]
     [status-im.ui.screens.chat.message.gap :as message.gap]
@@ -250,10 +251,9 @@
          [rn/text {:style {:color quo.colors/black}} description]]]
        [rn/view (style/community-view-button)
         [rn/touchable-opacity
-         {:on-press #(do (rf/dispatch
-                          [:communities/navigate-to-community
-                           (:id community)])
-                         (rf/dispatch [:chat/close]))}
+         {:on-press #(re-frame/dispatch
+                      [:communities/navigate-to-community
+                       (:id community)])}
          [rn/text
           {:style {:text-align :center
                    :color      quo.colors/blue}} (i18n/label :t/view)]]]])))

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

@@ -2,7 +2,7 @@
   (:require [quo2.foundations.colors :as colors]))
 
 (def system-message-default-size 36)
-(def system-message-margin-right 8)
+(def system-message-radius (/ system-message-default-size 2))
 
 (def pin-indicator-container
   {:margin-top      4
@@ -26,7 +26,7 @@
 (def system-message-inner-container
   {:width            system-message-default-size
    :height           system-message-default-size
-   :margin-right     system-message-margin-right
+   :margin-right     system-message-radius
    :border-radius    system-message-default-size
    :justify-content  :center
    :align-items      :center

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

@@ -17,23 +17,25 @@
                    :emoji-id   emoji-id}])))
 
 (defn- on-long-press
-  [message-id emoji-id user-message-content reactions]
+  [message-id emoji-id]
   (rf/dispatch [:chat.ui/emoji-reactions-by-message-id
-                {:message-id message-id
-                 :on-success (fn [response]
-                               (rf/dispatch [:chat/save-emoji-reaction-details
-                                             {:reaction-authors-list response
-                                              :selected-reaction     emoji-id}])
-                               (rf/dispatch [:dismiss-keyboard])
-                               (rf/dispatch [:show-bottom-sheet
-                                             {:on-close (fn []
-                                                          (rf/dispatch
-                                                           [:chat/clear-emoji-reaction-author-details]))
-                                              :content (fn []
-                                                         [drawers/reaction-authors reactions])
-                                              :selected-item (fn []
-                                                               user-message-content)
-                                              :padding-bottom-override 0}]))}]))
+                {:message-id         message-id
+                 :long-pressed-emoji emoji-id}]))
+
+(defn show-authors-sheet
+  [user-message-content reactions]
+  (rf/dispatch [:dismiss-keyboard])
+  (rf/dispatch
+   [:show-bottom-sheet
+    {:on-close                (fn []
+                                (rf/dispatch
+                                 [:chat/clear-emoji-reaction-author-details]))
+     :content                 (fn []
+                                [drawers/reaction-authors
+                                 (map :emoji-id reactions)])
+     :selected-item           (fn []
+                                user-message-content)
+     :padding-bottom-override 0}]))
 
 (defn message-reactions-row
   [{:keys [message-id chat-id]} user-message-content]
@@ -53,10 +55,11 @@
              :neutral?            own
              :clicks              quantity
              :on-press            #(on-press own message-id emoji-id emoji-reaction-id)
-             :on-long-press       #(on-long-press message-id
-                                                  emoji-id
-                                                  user-message-content
-                                                  (map :emoji-id reactions))
+             :on-long-press       (fn []
+                                    (on-long-press message-id
+                                                   emoji-id)
+                                    (show-authors-sheet user-message-content
+                                                        reactions))
              :accessibility-label (str "emoji-reaction-" emoji-id)}]])
         [quo/add-reaction
          {:on-press (fn []

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

@@ -74,7 +74,11 @@
       constants/content-type-contact-request       [not-implemented/not-implemented
                                                     [old-message/system-contact-request message-data]])))
 
-(declare on-long-press)
+(defn on-long-press
+  [message-data context]
+  (rf/dispatch [:dismiss-keyboard])
+  (rf/dispatch [:show-bottom-sheet
+                {:content (drawers/reactions-and-actions message-data context)}]))
 
 (defn user-message-content
   []
@@ -90,9 +94,7 @@
             outgoing        (if (= content-type constants/content-type-album)
                               (:outgoing first-image)
                               outgoing)
-            context         (assoc context
-                                   :on-long-press
-                                   #(on-long-press message-data context keyboard-shown?))
+            context         (assoc context :on-long-press #(on-long-press message-data context))
             response-to     (:response-to content)
             height          (rf/sub [:dimensions/window-height])]
         [rn/touchable-highlight
@@ -111,8 +113,8 @@
                                      (reset! show-delivery-state? true)
                                      (js/setTimeout #(reset! show-delivery-state? false)
                                                     delivery-state-showing-time-ms))))
-          :on-long-press       #(on-long-press message-data context keyboard-shown?)}
-         [rn/view {:style {:padding-vertical 4}}
+          :on-long-press       #(on-long-press message-data context)}
+         [rn/view {:style {:padding-vertical 8}}
           (when (and (seq response-to) quoted-message)
             [reply/quoted-message quoted-message])
           [rn/view
@@ -150,15 +152,6 @@
              (when @show-delivery-state?
                [status/status outgoing-status])])]]]))))
 
-(defn on-long-press
-  [message-data context keyboard-shown]
-  (rf/dispatch [:dismiss-keyboard])
-  (rf/dispatch [:show-bottom-sheet
-                {:content       (drawers/reactions-and-actions message-data context)
-                 :selected-item (fn []
-                                  [rn/view {:pointer-events :none}
-                                   [user-message-content message-data context keyboard-shown true]])}]))
-
 (defn message-with-reactions
   [{:keys [pinned-by mentioned in-pinned-view? content-type last-in-group?] :as message-data}
    context
@@ -175,5 +168,4 @@
      [system-message-content message-data]
      [user-message-content message-data context keyboard-shown false])
    [reactions/message-reactions-row message-data
-    [rn/view {:pointer-events :none}
-     [user-message-content message-data context keyboard-shown true]]]])
+    [user-message-content message-data context keyboard-shown true]]])

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

@@ -6,10 +6,7 @@
    :align-items     :center
    :justify-content :center})
 
-(def tab-icon
-  {:margin-right 4
-   :width        20
-   :height       20})
+(def tab-icon {:margin-right 4})
 
 (defn tab-count
   [active?]

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

@@ -9,8 +9,7 @@
             [reagent.core :as reagent]
             [status-im2.common.contact-list-item.view :as contact-list-item]
             [status-im2.contexts.chat.messages.drawers.style :as style]
-            [react-native.gesture :as gesture]
-            [quo2.components.reactions.resource :as reactions.resource]))
+            [react-native.gesture :as gesture]))
 
 (defn contact-list-item-fn
   [{:keys [from compressed-key]}]
@@ -34,10 +33,10 @@
            {:id                  reaction-type-int
             :accessibility-label (keyword (str "authors-for-reaction-" reaction-type-int))
             :label               [rn/view {:style style/tab}
-                                  [rn/image
-                                   {:source (reactions.resource/get-reaction
-                                             (get constants/reactions reaction-type-int))
-                                    :style  style/tab-icon}]
+                                  [quo/icon
+                                   (get constants/reactions reaction-type-int)
+                                   {:no-color        true
+                                    :container-style style/tab-icon}]
                                   [quo/text
                                    {:weight :medium
                                     :size   :paragraph-1

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

@@ -291,9 +291,10 @@
                                                                                colors/neutral-95))}
        :inverted                     true
        :on-layout                    (fn [e]
-                                       ;; FIXME: this is due to Android not triggering the initial
-                                       ;; scrollTo event
-                                       (scroll-to-offset 1)
+                                       (when platform/android?
+                                         ;; FIXME: this is due to Android not triggering the initial
+                                         ;; scrollTo event
+                                         (scroll-to-offset 1))
                                        (let [layout-height (oops/oget e "nativeEvent.layout.height")]
                                          (reset! messages-view-height layout-height)))
        :scroll-enabled               (not recording?)}]]))
@@ -325,7 +326,7 @@
        :keyboard-shown? keyboard-shown}]
 
      (when footer-comp
-       [footer-comp {:insets insets}])]))
+       (footer-comp {:insets insets}))]))
 
 (defn messages-list
   [props]

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

@@ -1,5 +1,6 @@
 (ns status-im2.contexts.chat.messages.navigation.style
   (:require [quo2.foundations.colors :as colors]
+            [react-native.platform :as platform]
             [react-native.reanimated :as reanimated]))
 
 (defonce ^:const navigation-bar-height 100)
@@ -16,47 +17,33 @@
     :background-color (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40)}
    position))
 
-(def background-view
-  {:position         :absolute
-   :top              0
-   :left             0
-   :right            0
-   :height           navigation-bar-height
-   :background-color (colors/theme-colors colors/white-opa-70 :transparent)
-   :display          :flex
-   :flex-direction   :row
-   :overflow         :hidden})
-
-(defn animated-background-view
-  [enabled? animation]
-  (reanimated/apply-animations-to-style
-   (when enabled?
-     {:opacity animation})
-   background-view))
-
-(def blur-view
+(defn blur-view
+  [status-bar-height]
   {:position       :absolute
    :top            0
    :left           0
    :right          0
-   :height         navigation-bar-height
+   :height         (- navigation-bar-height
+                      (if platform/ios? 0 status-bar-height))
    :display        :flex
    :flex-direction :row
    :overflow       :hidden})
 
 (defn animated-blur-view
-  [enabled? animation]
+  [enabled? animation status-bar-height]
   (reanimated/apply-animations-to-style
    (when enabled?
      {:opacity animation})
-   blur-view))
+   (blur-view status-bar-height)))
 
 (def navigation-view
-  {:z-index 1})
+  {:z-index 4})
 
-(def header-container
+(defn header-container
+  [status-bar-height]
   {:position       :absolute
-   :top            header-offset
+   :top            (- header-offset
+                      (if platform/ios? 0 status-bar-height))
    :left           0
    :right          0
    :padding-bottom 8
@@ -76,6 +63,21 @@
       :opacity   opacity-animation})
    header))
 
+(defn pinned-banner
+  [status-bar-height]
+  {:position :absolute
+   :left     0
+   :right    0
+   :top      (- navigation-bar-height
+                (if platform/ios? 0 status-bar-height))})
+
+(defn animated-pinned-banner
+  [enabled? animation status-bar-height]
+  (reanimated/apply-animations-to-style
+   (when enabled?
+     {:opacity animation})
+   (pinned-banner status-bar-height)))
+
 (def header-content-container
   {:flex-direction :row
    :align-items    :center

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

@@ -2,22 +2,21 @@
   (:require [quo2.core :as quo]
             [quo2.foundations.colors :as colors]
             [re-frame.db]
-            [react-native.blur :as blur]
             [react-native.core :as rn]
             [react-native.reanimated :as reanimated]
-            [react-native.platform :as platform]
+            [react-native.safe-area :as safe-area]
             [status-im2.contexts.chat.messages.navigation.style :as style]
             [status-im2.contexts.chat.messages.pin.banner.view :as pin.banner]
             [status-im2.constants :as constants]
             [utils.re-frame :as rf]
-            [utils.i18n :as i18n]
-            [status-im2.common.home.actions.view :as actions]))
+            [utils.i18n :as i18n]))
 
 (defn f-navigation-view
   [{:keys [scroll-y]}]
-  (let [{:keys [group-chat chat-id chat-name emoji
-                chat-type]
-         :as   chat}             (rf/sub [:chats/current-chat-chat-view])
+  (let [insets                   (safe-area/get-insets)
+        status-bar-height        (:top insets)
+        {:keys [group-chat chat-id chat-name emoji
+                chat-type]}      (rf/sub [:chats/current-chat-chat-view])
         all-loaded?              (rf/sub [:chats/all-loaded? chat-id])
         display-name             (if (= chat-type constants/one-to-one-chat-type)
                                    (first (rf/sub [:contacts/contact-two-names-by-identity chat-id]))
@@ -38,7 +37,7 @@
                                                           (+ style/navigation-bar-height 100)]
                                                          [0 1]
                                                          {:extrapolateLeft  "clamp"
-                                                          :extrapolateRight "extend"})
+                                                          :extrapolateRight "clamp"})
         translate-animation      (reanimated/interpolate scroll-y
                                                          [(+ style/navigation-bar-height 25)
                                                           (+ style/navigation-bar-height 100)]
@@ -51,23 +50,17 @@
                                                          {:extrapolateLeft  "clamp"
                                                           :extrapolateRight "clamp"})]
     [rn/view {:style style/navigation-view}
-     [reanimated/view
-      {:style (style/animated-background-view all-loaded? opacity-animation)}]
-
-     [reanimated/view {:style (style/animated-blur-view all-loaded? opacity-animation)}
-      [blur/view
-       {:blur-amount 20
-        :blur-type   (colors/theme-colors :light :dark)
-        :blur-radius (if platform/ios? 20 10)
-        :style       {:flex 1}}]]
+     [reanimated/blur-view
+      {:blurAmount   32
+       :blurType     (colors/theme-colors :xlight :dark)
+       :overlayColor :transparent
+       :style        (style/animated-blur-view all-loaded? opacity-animation status-bar-height)}]
 
      [rn/view
-      [rn/view {:style style/header-container}
+      [rn/view {:style (style/header-container status-bar-height)}
        [rn/touchable-opacity
         {:active-opacity      1
-         :on-press            #(do
-                                 (rf/dispatch [:chat/close])
-                                 (rf/dispatch [:navigate-back]))
+         :on-press            #(rf/dispatch [:navigate-back])
          :accessibility-label :back-button
          :style               (style/button-container {:margin-left 20})}
         [quo/icon :i/arrow-left
@@ -100,18 +93,12 @@
        [rn/touchable-opacity
         {:active-opacity      1
          :style               (style/button-container {:margin-right 20})
-         :accessibility-label :options-button
-         :on-press            (fn []
-                                (rf/dispatch [:dismiss-keyboard])
-                                (rf/dispatch [:show-bottom-sheet
-                                              {:content (fn [] [actions/chat-actions chat true])}]))}
+         :accessibility-label :options-button}
         [quo/icon :i/options {:size 20 :color (colors/theme-colors colors/black colors/white)}]]]
 
-      [pin.banner/banner
-       {:chat-id           chat-id
-        :opacity-animation banner-opacity-animation
-        :all-loaded?       all-loaded?
-        :top-offset        style/navigation-bar-height}]]]))
+      [reanimated/view
+       {:style (style/animated-pinned-banner all-loaded? banner-opacity-animation status-bar-height)}
+       [pin.banner/banner chat-id]]]]))
 
 (defn navigation-view
   [props]

src/status_im2/contexts/chat/messages/pin/banner/style.cljs

@@ -1,41 +0,0 @@
-(ns status-im2.contexts.chat.messages.pin.banner.style
-  (:require
-    [quo2.foundations.colors :as colors]
-    [react-native.platform :as platform]
-    [react-native.reanimated :as reanimated]))
-
-(defonce ^:const pinned-banner-height 40)
-
-(defn blur-container-style
-  [top-offset opacity-animation enabled?]
-  (reanimated/apply-animations-to-style
-   {:opacity opacity-animation}
-   {:position :absolute
-    :display  (if enabled? :flex :none)
-    :top      top-offset
-    :left     0
-    :right    0
-    :bottom   0
-    :height   pinned-banner-height
-    :overflow :hidden}))
-
-(defn blur-view-style
-  []
-  {:style       {:flex 1}
-   :blur-radius (if platform/ios? 20 10)
-   :blur-type   (colors/theme-colors :light :dark)
-   :blur-amount 20})
-
-(defn pinned-banner
-  [top-offset]
-  {:position :absolute
-   :left     0
-   :right    0
-   :top      top-offset})
-
-(defn animated-pinned-banner
-  [top-offset enabled? animation]
-  (reanimated/apply-animations-to-style
-   (when enabled?
-     {:opacity animation})
-   (pinned-banner top-offset)))