Merge branch 'develop' into 15834

Implements the skeleton for all community channel drawer actions. This commit is
not concerned with the actual implementation of the actions, since that would
grow the scope a bit too much.

Partially implements https://github.com/status-im/status-mobile/issues/16178

Notes: I also updated the actions drawer component to accept a text aligned to
the right (this will be necessary to display the number of pinned messages in
the action drawer). In the Design System, the text is always hidden, and that's
my best guess as to why we didn't implement it. I talked to designers, and they
won't update the Design System Drawer action component
https://www.figma.com/file/WQZcp6S0EnzxdTL4taoKDv/Design-System-for-Mobile?type=design&node-id=1931-31188&t=hOK17fADEXTlnXPY-0)
for now, but we agreed the reference in Figma > Communities for Mobile
https://www.figma.com/file/h9wo4GipgZURbqqr1vShFN/Communities-for-Mobile?type=design&node-id=5483-193285&t=vOTiuhxD87zhmK2T-0)
is good enough.

ci/tests/Jenkinsfile.e2e-prs

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

doc/README.md

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

doc/patching.md

@@ -0,0 +1,13 @@
+# 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,6 +304,14 @@ 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,6 +248,13 @@
   (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/primary-50-opa-20
+   :background-color (colors/custom-color :blue 50 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}
-      (when (> pins-count 1) [counter/counter {:type :secondary} pins-count])]]))
+      [counter/counter {:type :secondary} pins-count]]]))

src/quo2/components/community/community_list_view.cljs

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

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

@@ -50,8 +50,23 @@
                   :label               "a sample label"
                   :right-icon          :i/friend
                   :accessibility-label :first-element}]]])
-    (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/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/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,8 +34,17 @@
   {: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,6 +29,7 @@
            label
            sub-label
            right-icon
+           right-text
            danger?
            disabled?
            on-press
@@ -70,14 +71,22 @@
             :style {:color
                     (colors/theme-colors colors/neutral-50 colors/neutral-40 override-theme)}}
            sub-label])]
-       (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 (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}]])])]]]))
 
 (defn action-drawer
   [sections]

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

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

src/quo2/components/info/info_message.cljs

@@ -22,27 +22,26 @@
   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)
-        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)]
+  (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)]
     [rn/view
-     {:style (merge {:flex-direction :row}
+     {:style (merge {:flex-direction :row
+                     :align-items    :center}
                     style)}
      [quo2.icons/icon icon
-      {:color           icon-color
-       :no-color        no-icon-color?
-       :size            icon-size
-       :container-style {:margin-top icon-margin-top}}]
+      {:color    icon-color
+       :no-color no-icon-color?
+       :size     icon-size}]
      [text/text
       {:size   size
        :weight weight
        :style  {:color             text-color
-                :margin-horizontal 8}} message]]))
+                :margin-horizontal 4}} message]]))

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

@@ -5,7 +5,8 @@
 (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"}])
+               {:placeholder        "Your Name"
+                :image-picker-props {:full-name "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           23
+   :top           24
    :bottom        0
    :left          33
    :right         0

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

@@ -6,7 +6,6 @@
     [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
@@ -15,49 +14,42 @@
            on-press
            title-input-props
            image-picker-props]}]
-  (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})]]]))
+  [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})]]])

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

@@ -15,13 +15,15 @@
 (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 false)
+  (let [focused?  (reagent/atom auto-focus)
         value     (reagent/atom default-value)
         on-change (fn [v]
                     (reset! value v)
@@ -42,6 +44,7 @@
           :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,58 +8,65 @@
             [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 [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])]]])
+  [{: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])]]]))

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

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

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

@@ -94,9 +94,8 @@
            style/keycard-icon))]
        (when show-user-hash?
          [text/text
-          {:weight          :monospace
-           :number-of-lines 1
-           :style           style/user-hash} hash])
+          {:weight :monospace
+           :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-opacity
+  [rn/touchable-without-feedback
    {: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

@@ -0,0 +1,58 @@
+(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,42 +5,51 @@
   {:flex 1})
 
 (defn title
-  []
+  [override-theme]
   {:color (colors/theme-colors
            colors/neutral-100
-           colors/white)})
+           colors/white
+           override-theme)})
 
 (def icon
-  {:margin-right 12})
+  {:margin-right 12
+   :align-self   :flex-start})
 
 (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))})
+                                          (colors/custom-color :blue 60)
+                                          override-theme)})
 
 (defn community-icon
-  [index]
+  [index override-theme]
   {:width         24
    :height        24
    :border-width  1
-   :border-color  (colors/theme-colors colors/white colors/black)
+   :border-color  (colors/theme-colors colors/white colors/black override-theme)
    :border-radius 12
    :position      :absolute
-   :top           "-50%"
    :right         (* 20 index)})
 
 (def communities-container
-  {:flex         1
-   :margin-right 12})
+  {:flex            1
+   :justify-content :center
+   :align-content   :center
+   :margin-right    12})
+
+(def tag-container
+  {:margin-top 8})

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

@@ -4,30 +4,36 @@
             [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]
+  [title status-tag-props override-theme]
   [rn/view
    {:style style/title-container}
-   [text/text
-    {:accessibility-label :setting-item-name-text
-     :ellipsize-mode      :tail
-     :style               (style/title)
-     :number-of-lines     1
-     :weight              :medium
-     :size                :paragraph-1}
-    title]])
+   (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]])])
 
-(defn browser-context-icon
-  []
-  [rn/view
-   [icons/icon :browser-context
-    {:container-style style/icon
-     :color           (colors/theme-colors
-                       colors/neutral-50
-                       colors/neutral-40)}]])
+(defn left-icon-comp
+  [icon]
+  [rn/view {:style style/icon}
+   [icons/icon icon
+    {:color (colors/theme-colors
+             colors/neutral-50
+             colors/neutral-40)}]])
 
 (def chevron-icon
   [rn/view
@@ -43,22 +49,28 @@
    {:checked?  checked?
     :on-change (fn [new-value] (on-change new-value))}])
 
-(def badge-icon
+(defn badge-icon
+  [override-theme]
   [rn/view
-   {:style (style/dot)}])
+   {:accessible          :true
+    :accessibility-label :setting-list-badge
+    :style               (style/dot override-theme)}])
 
 (defn right-button
   [{:keys [title
-           on-press]}]
+           on-press]}
+   override-theme]
   [button/button
-   {:type     :outline
-    :on-press on-press
-    :size     24}
+   {:type           :outline
+    :override-theme override-theme
+    :on-press       on-press
+    :size           24}
    title])
 
 (defn communities-icons
   [{:keys [data
-           icon-style]}]
+           icon-style]}
+   override-theme]
   (let [communities-count (dec (count data))]
     [rn/view
      {:style style/communities-container}
@@ -70,7 +82,8 @@
                                  {:uri source}
                                  source)
           :accessibility-label accessibility-label
-          :style               (merge (style/community-icon (- communities-count index)) icon-style)}])
+          :style               (merge (style/community-icon (- communities-count index) override-theme)
+                                      icon-style)}])
       data)]))
 
 (defn settings-list
@@ -78,7 +91,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` Symbol to indicate icon type on the left side of the component.
+   - `left-icon` icon keyword for icon on left.
    - `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.
@@ -89,7 +102,11 @@
        `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."
+   - `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
+   "
+
   [{:keys [title
            on-press
            accessibility-label
@@ -99,21 +116,22 @@
            badge?
            button-props
            communities-props
-           container-style]}]
+           container-style
+           override-theme
+           status-tag-props]}]
   [rn/touchable-without-feedback
    {:on-press            on-press
     :accessibility-label accessibility-label}
    [rn/view
     {:style (merge style/item-container container-style)}
-    (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)]])
+    [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)]]])

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

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

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

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

src/quo2/core_spec.cljs

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

src/status_im/data_store/messages.cljs

@@ -55,10 +55,11 @@
       (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})
+              {:parsedText       :parsed-text
+               :deleted          :deleted?
+               :deletedForMe     :deleted-for-me?
+               :communityId      :community-id
+               :albumImagesCount :album-images-count})
       (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      []
+                      :params      [false]
                       :js-response true
                       :on-success  #(do
                                       (log/info "fetched historical messages")

src/status_im/signals/core.cljs

@@ -10,7 +10,8 @@
             [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]))
+            [status-im2.constants :as constants]
+            [quo2.foundations.colors :as colors]))
 
 (rf/defn status-node-started
   [{db :db :as cofx} {:keys [error]}]
@@ -55,7 +56,7 @@
                 :peers-count (count (:peers peer-stats)))}))
 
 (rf/defn handle-local-pairing-signals
-  [{:keys [db] :as cofx} {:keys [type action data] :as event}]
+  [{:keys [db] :as cofx} {:keys [type action data error] :as event}]
   (log/info "local pairing signal received"
             {:event event})
   (let [{:keys [account password]}      data
@@ -78,7 +79,7 @@
                                              (and (some? account) (some? password)))
         multiaccount-data               (when received-account?
                                           (merge account {:password password}))
-        navigate-to-syncing-devices?    (and connection-success? receiver?)
+        navigate-to-syncing-devices?    (and (or connection-success? error-on-pairing?) receiver?)
         user-in-syncing-devices-screen? (= (:view-id db) :syncing-progress)]
     (merge {:db (cond-> db
                   connection-success?
@@ -92,12 +93,21 @@
 
                   completed-pairing?
                   (assoc-in [:syncing :pairing-status] :completed))}
-           (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]}))))
+           (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}]}))))
 
 (rf/defn process
   {:events [:signals/signal-received]}

src/status_im/utils/universal_links/core.cljs

@@ -84,16 +84,15 @@
 
 (rf/defn handle-navigation-to-desktop-community-from-mobile
   {:events [:handle-navigation-to-desktop-community-from-mobile]}
-  [{:keys [db]} cofx deserialized-key]
-  (navigation/navigate-to cofx :community {:community-id deserialized-key}))
-
+  [cofx deserialized-key]
+  (navigation/navigate-to cofx :community-overview 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 cofx (str deserialized-key)]))))
+     (rf/dispatch [:handle-navigation-to-desktop-community-from-mobile (str deserialized-key)]))))
 
 (rf/defn handle-community-chat
   [cofx {:keys [chat-id]}]

src/status_im2/common/bottom_sheet/style.cljs

@@ -1,5 +1,6 @@
-(ns status-im2.common.bottom-sheet.styles
+(ns status-im2.common.bottom-sheet.style
   (:require [quo2.foundations.colors :as colors]
+            [quo2.theme :as theme]
             [status-im.utils.platform :as platform]))
 
 (defn handle
@@ -7,7 +8,7 @@
   {:width            32
    :height           4
    :background-color (colors/theme-colors colors/neutral-100 colors/white override-theme)
-   :opacity          0.05
+   :opacity          (theme/theme-value 0.05 0.1)
    :border-radius    100
    :align-self       :center
    :margin-vertical  8})
@@ -24,7 +25,7 @@
    :border-top-right-radius 20
    :overflow                (when shell? :hidden)
    :flex                    1
-   :padding-bottom          (or padding-bottom-override (max 20 bottom))
+   :padding-bottom          (or padding-bottom-override (+ bottom 8))
    :background-color        (if shell?
                               :transparent
                               (colors/theme-colors colors/white colors/neutral-90 override-theme))})
@@ -38,9 +39,11 @@
    :bottom           0})
 
 (defn selected-item
-  [override-theme]
+  [override-theme window-height sheet-height {:keys [top]}]
   {: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,11 +3,12 @@
             [react-native.core :as rn]
             [quo2.foundations.colors :as colors]
             [react-native.reanimated :as reanimated]
-            [status-im2.common.bottom-sheet.styles :as styles]
+            [status-im2.common.bottom-sheet.style :as style]
             [react-native.gesture :as gesture]
             [oops.core :as oops]
             [react-native.hooks :as hooks]
-            [react-native.blur :as blur]))
+            [react-native.blur :as blur]
+            [reagent.core :as reagent]))
 
 (def duration 450)
 (def timing-options #js {:duration duration})
@@ -51,44 +52,48 @@
            (show translate-y bg-opacity)
            (hide translate-y bg-opacity window-height on-close))))))
 
-(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?))}
+(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}])
 
-       (when shell?
-         [blur/ios-view
-          {:style styles/shell-bg}])
+           (when selected-item
+             [rn/view
+              [rn/view {:style (style/selected-item override-theme window-height @sheet-height insets)}
+               [selected-item]]])
 
-       (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]]]]))
+           ;; handle
+           [rn/view {:style (style/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]
-    [react-native.reanimated :as reanimated]))
+  (:require [quo2.foundations.colors :as colors]
+            [quo2.theme :as theme]
+            [react-native.reanimated :as reanimated]))
 
 (defn background
   [opacity]
@@ -40,4 +40,5 @@
   {:width            32
    :height           4
    :border-radius    100
-   :background-color (colors/theme-colors colors/neutral-100-opa-30 colors/white-opa-30 override-theme)})
+   :background-color (colors/theme-colors colors/neutral-100 colors/white override-theme)
+   :opacity          (theme/theme-value 0.05 0.1)})

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

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

src/status_im2/common/not_implemented.cljs

@@ -6,3 +6,7 @@
   (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,10 +22,26 @@
    :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-messages-light             (js/require "../resources/images/ui2/no-messages-light.png")
-   :no-messages-dark              (js/require "../resources/images/ui2/no-messages-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")})
 
 (def mock-images
   {:coinbase             (js/require "../resources/images/mock2/coinbase.png")

src/status_im2/common/syncing/style.cljs

@@ -1,29 +0,0 @@
-(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

@@ -1,51 +0,0 @@
-(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,3 +331,5 @@
 (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,11 +1,12 @@
-(ns status-im2.contexts.chat.composer.reply.style)
+(ns status-im2.contexts.chat.composer.reply.style
+  (:require [react-native.platform :as platform]))
 
 
 (defn container
   [pin? in-chat-input?]
   {:flex-direction :row
    :height         (when-not pin? 24)
-   :margin-left    (when (and (not in-chat-input?) (not pin?)) 26)
+   :margin-left    (if (and (not in-chat-input?) (not pin?)) 26 (if platform/android? 4 0))
    :margin-bottom  (when (and (not in-chat-input?) (not pin?)) 8)})
 (defn reply-content
   [pin?]
@@ -33,7 +34,7 @@
   {:text-transform :none
    :margin-left    4
    :margin-top     2
-   :flex           1})
+   :flex-shrink    1})
 
 (def gradient
   {:position :absolute

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

@@ -84,7 +84,8 @@
    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)]
+        content-type       (or content-type contentType)
+        text               (get-quoted-text-with-mentions (or parsed-text (:parsed-text content)))]
     [rn/view
      {:style               (style/container pin? in-chat-input?)
       :accessibility-label :reply-message}
@@ -102,26 +103,30 @@
           {: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
-          {: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))))]])]
+          {: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)
+                 ""))]
+        ])]
      (when (and in-chat-input? (not recording-audio?))
        [quo/button
         {:width               24

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

@@ -109,3 +109,19 @@
    :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,34 +26,35 @@
   [:f> f-blur-view layout-height focused?])
 
 (defn- f-shell-button
-  [{:keys [maximized?]} {:keys [height]} {:keys [images link-previews? reply edit]}]
+  [{:keys [maximized? focused?]} {:keys [height]} {:keys [reply edit]}]
   (let [insets       (safe-area/get-insets)
         extra-height (utils/calc-top-content-height reply edit)
-        translate-y  (reanimated/use-shared-value
-                      (utils/calc-shell-neg-y insets maximized? extra-height))]
+        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))]
     (rn/use-effect
      (fn []
-       (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/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])
     [reanimated/view
-     {: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})}
+     {: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}}} {}]]
      [quo/floating-shell-button
-      (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}}))
-      {}]]))
+      (when @messages.list/show-floating-scroll-down-button
+        {:scroll-to-bottom {:on-press messages.list/scroll-to-bottom}})
+      {:bottom 24}]]))
 
 (defn shell-button
   [state animations subs]

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

@@ -4,6 +4,7 @@
     [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]
@@ -131,7 +132,7 @@
                        :background-y  background-y}
         props         (utils/init-props)
         state         (utils/init-state)]
-    [rn/view
+    [rn/view (when platform/ios? {:style {:z-index 1}})
      [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,10 +152,9 @@
                              (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
-                            :margin-right 20}
+      :style               {:color (colors/theme-colors colors/neutral-50
+                                                        colors/neutral-40)
+                            :flex  1}
       :number-of-lines     1
       :ellipsize-mode      :tail
       :accessibility-label :chat-message-text}
@@ -179,10 +178,15 @@
 
 (defn name-view
   [display-name contact timestamp]
-  [rn/view {:style {:flex-direction :row}}
+  [rn/view
+   {:style {:flex           1
+            :flex-direction :row}}
    [quo/text
     {:weight              :semi-bold
-     :accessibility-label :chat-name-text}
+     :accessibility-label :chat-name-text
+     :style               {:flex-shrink 1}
+     :number-of-lines     1
+     :ellipsize-mode      :tail}
     display-name]
    [verified-or-contact-icon contact]
    [quo/text
@@ -209,11 +213,12 @@
   [{: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]))]
+  (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))]
     [rn/touchable-opacity
      {:style         (style/container)
       :on-press      (open-chat chat-id)
@@ -224,10 +229,14 @@
        :chat-id   chat-id
        :full-name display-name
        :color     color}]
-     [rn/view {:style {:margin-left 8}}
+     [rn/view
+      {:style {:flex         1
+               :margin-left  8
+               :margin-right (if show-unread-badge? 36 0)}}
       [name-view display-name contact timestamp]
       [last-message-preview group-chat last-message]]
-     (when-not muted
-       (when (> unviewed-messages-count 0)
-         [quo/info-count {:style {:top 16}}
-          unviewed-messages-count]))]))
+     (when show-unread-badge?
+       [quo/info-count
+        {:style {:top   16
+                 :right 16}}
+        unviewed-messages-count])]))

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

@@ -22,3 +22,16 @@
    :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,23 +1,24 @@
 (ns status-im2.contexts.chat.home.view
-  (:require [utils.i18n :as i18n]
-            [utils.re-frame :as rf]
-            [quo2.core :as quo]
-            [re-frame.core :as re-frame]
-            [react-native.core :as rn]
-            [react-native.safe-area :as safe-area]
+  (:require [quo2.core :as quo]
             [quo2.foundations.colors :as colors]
+            [quo2.theme :as theme]
+            [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]
             [status-im.multiaccounts.core :as multiaccounts]
-            [status-im2.contexts.chat.home.style :as style]
+            [status-im2.common.contact-list-item.view :as contact-list-item]
             [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.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]))
+            [status-im2.contexts.chat.home.style :as style]
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]))
 
 (defn get-item-layout
   [_ index]
@@ -30,36 +31,51 @@
          (filter key)
          (sort-by :timestamp >))))
 
-(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 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 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)
-      [welcome-blank-chats]
+      [empty-state {:top top :selected-tab selected-tab}]
       [rn/flat-list
        {:key-fn                            #(or (:chat-id %) (:public-key %) (:id %))
         :content-inset-adjustment-behavior :never
-        :header                            [rn/view {:height (+ 245 top)}]
+        :header                            [rn/view {:style (style/header-space 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])
@@ -77,13 +93,13 @@
   [pending-contact-requests top]
   (let [items (rf/sub [:contacts/active-sections])]
     (if (and (empty? items) (empty? pending-contact-requests))
-      [welcome-blank-contacts]
+      [empty-state {:top top :selected-tab :tab/contacts}]
       [rn/section-list
        {:key-fn                            :public-key
         :get-item-layout                   get-item-layout
         :content-inset-adjustment-behavior :never
         :header                            [:<>
-                                            [rn/view {:height (+ 245 top)}]
+                                            [rn/view {:style (style/header-space top)}]
                                             (when (seq pending-contact-requests)
                                               [contact-request/contact-requests
                                                pending-contact-requests])]
@@ -103,45 +119,41 @@
 
 (defn home
   []
-  (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
+  (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]))
                                      (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,7 +6,8 @@
     [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.contexts.chat.lightbox.constants :as c]
+    [status-im2.constants :as constants]))
 
 (defn get-small-item-layout
   [_ index]
@@ -56,7 +57,8 @@
       :start  {:x 0 :y 1}
       :end    {:x 0 :y 0}
       :style  (style/gradient-container insets animations derived)}
-     [rn/text {:style style/text-style} text]
+     (when constants/image-description-in-lightbox?
+       [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,7 +2,6 @@
   (: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]
@@ -251,9 +250,10 @@
          [rn/text {:style {:color quo.colors/black}} description]]]
        [rn/view (style/community-view-button)
         [rn/touchable-opacity
-         {:on-press #(re-frame/dispatch
-                      [:communities/navigate-to-community
-                       (:id community)])}
+         {:on-press #(do (rf/dispatch
+                          [:communities/navigate-to-community
+                           (:id community)])
+                         (rf/dispatch [:chat/close]))}
          [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-radius (/ system-message-default-size 2))
+(def system-message-margin-right 8)
 
 (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-radius
+   :margin-right     system-message-margin-right
    :border-radius    system-message-default-size
    :justify-content  :center
    :align-items      :center

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

@@ -17,25 +17,23 @@
                    :emoji-id   emoji-id}])))
 
 (defn- on-long-press
-  [message-id emoji-id]
+  [message-id emoji-id user-message-content reactions]
   (rf/dispatch [:chat.ui/emoji-reactions-by-message-id
-                {: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}]))
+                {: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}]))}]))
 
 (defn message-reactions-row
   [{:keys [message-id chat-id]} user-message-content]
@@ -55,11 +53,10 @@
              :neutral?            own
              :clicks              quantity
              :on-press            #(on-press own message-id emoji-id emoji-reaction-id)
-             :on-long-press       (fn []
-                                    (on-long-press message-id
-                                                   emoji-id)
-                                    (show-authors-sheet user-message-content
-                                                        reactions))
+             :on-long-press       #(on-long-press message-id
+                                                  emoji-id
+                                                  user-message-content
+                                                  (map :emoji-id reactions))
              :accessibility-label (str "emoji-reaction-" emoji-id)}]])
         [quo/add-reaction
          {:on-press (fn []

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

@@ -74,11 +74,7 @@
       constants/content-type-contact-request       [not-implemented/not-implemented
                                                     [old-message/system-contact-request message-data]])))
 
-(defn on-long-press
-  [message-data context]
-  (rf/dispatch [:dismiss-keyboard])
-  (rf/dispatch [:show-bottom-sheet
-                {:content (drawers/reactions-and-actions message-data context)}]))
+(declare on-long-press)
 
 (defn user-message-content
   []
@@ -94,7 +90,9 @@
             outgoing        (if (= content-type constants/content-type-album)
                               (:outgoing first-image)
                               outgoing)
-            context         (assoc context :on-long-press #(on-long-press message-data context))
+            context         (assoc context
+                                   :on-long-press
+                                   #(on-long-press message-data context keyboard-shown?))
             response-to     (:response-to content)
             height          (rf/sub [:dimensions/window-height])]
         [rn/touchable-highlight
@@ -113,8 +111,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)}
-         [rn/view {:style {:padding-vertical 8}}
+          :on-long-press       #(on-long-press message-data context keyboard-shown?)}
+         [rn/view {:style {:padding-vertical 4}}
           (when (and (seq response-to) quoted-message)
             [reply/quoted-message quoted-message])
           [rn/view
@@ -152,6 +150,15 @@
              (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
@@ -168,4 +175,5 @@
      [system-message-content message-data]
      [user-message-content message-data context keyboard-shown false])
    [reactions/message-reactions-row message-data
-    [user-message-content message-data context keyboard-shown true]]])
+    [rn/view {:pointer-events :none}
+     [user-message-content message-data context keyboard-shown true]]]])

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

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

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

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

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

@@ -291,10 +291,9 @@
                                                                                colors/neutral-95))}
        :inverted                     true
        :on-layout                    (fn [e]
-                                       (when platform/android?
-                                         ;; FIXME: this is due to Android not triggering the initial
-                                         ;; scrollTo event
-                                         (scroll-to-offset 1))
+                                       ;; 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?)}]]))
@@ -326,7 +325,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,6 +1,5 @@
 (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)
@@ -17,33 +16,47 @@
     :background-color (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40)}
    position))
 
-(defn blur-view
-  [status-bar-height]
+(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
   {:position       :absolute
    :top            0
    :left           0
    :right          0
-   :height         (- navigation-bar-height
-                      (if platform/ios? 0 status-bar-height))
+   :height         navigation-bar-height
    :display        :flex
    :flex-direction :row
    :overflow       :hidden})
 
 (defn animated-blur-view
-  [enabled? animation status-bar-height]
+  [enabled? animation]
   (reanimated/apply-animations-to-style
    (when enabled?
      {:opacity animation})
-   (blur-view status-bar-height)))
+   blur-view))
 
 (def navigation-view
-  {:z-index 4})
+  {:z-index 1})
 
-(defn header-container
-  [status-bar-height]
+(def header-container
   {:position       :absolute
-   :top            (- header-offset
-                      (if platform/ios? 0 status-bar-height))
+   :top            header-offset
    :left           0
    :right          0
    :padding-bottom 8
@@ -63,21 +76,6 @@
       :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,21 +2,22 @@
   (: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.safe-area :as safe-area]
+            [react-native.platform :as platform]
             [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]))
+            [utils.i18n :as i18n]
+            [status-im2.common.home.actions.view :as actions]))
 
 (defn f-navigation-view
   [{:keys [scroll-y]}]
-  (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])
+  (let [{:keys [group-chat chat-id chat-name emoji
+                chat-type]
+         :as   chat}             (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]))
@@ -37,7 +38,7 @@
                                                           (+ style/navigation-bar-height 100)]
                                                          [0 1]
                                                          {:extrapolateLeft  "clamp"
-                                                          :extrapolateRight "clamp"})
+                                                          :extrapolateRight "extend"})
         translate-animation      (reanimated/interpolate scroll-y
                                                          [(+ style/navigation-bar-height 25)
                                                           (+ style/navigation-bar-height 100)]
@@ -50,17 +51,23 @@
                                                          {:extrapolateLeft  "clamp"
                                                           :extrapolateRight "clamp"})]
     [rn/view {:style style/navigation-view}
-     [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)}]
+     [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}}]]
 
      [rn/view
-      [rn/view {:style (style/header-container status-bar-height)}
+      [rn/view {:style style/header-container}
        [rn/touchable-opacity
         {:active-opacity      1
-         :on-press            #(rf/dispatch [:navigate-back])
+         :on-press            #(do
+                                 (rf/dispatch [:chat/close])
+                                 (rf/dispatch [:navigate-back]))
          :accessibility-label :back-button
          :style               (style/button-container {:margin-left 20})}
         [quo/icon :i/arrow-left
@@ -93,12 +100,18 @@
        [rn/touchable-opacity
         {:active-opacity      1
          :style               (style/button-container {:margin-right 20})
-         :accessibility-label :options-button}
+         :accessibility-label :options-button
+         :on-press            (fn []
+                                (rf/dispatch [:dismiss-keyboard])
+                                (rf/dispatch [:show-bottom-sheet
+                                              {:content (fn [] [actions/chat-actions chat true])}]))}
         [quo/icon :i/options {:size 20 :color (colors/theme-colors colors/black colors/white)}]]]
 
-      [reanimated/view
-       {:style (style/animated-pinned-banner all-loaded? banner-opacity-animation status-bar-height)}
-       [pin.banner/banner chat-id]]]]))
+      [pin.banner/banner
+       {:chat-id           chat-id
+        :opacity-animation banner-opacity-animation
+        :all-loaded?       all-loaded?
+        :top-offset        style/navigation-bar-height}]]]))
 
 (defn navigation-view
   [props]

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

@@ -0,0 +1,41 @@
+(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)))