WIP: theme colors with jaime

Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>

ci/tests/Jenkinsfile.e2e-prs

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

modules/react-native-status/android/src/main/java/im/status/ethereum/pushnotifications/PushNotificationHelper.java

@@ -67,8 +67,8 @@ public class PushNotificationHelper {
     private static final long DEFAULT_VIBRATION = 300L;
     private static final String CHANNEL_ID = "status-im-notifications";
     public static final String ACTION_DELETE_NOTIFICATION = "im.status.ethereum.module.DELETE_NOTIFICATION";
-    public static final String ACTION_TAP_NOTIFICATION = "im.status.ethereum.module.TAP_NOTIFICATION";
     public static final String ACTION_TAP_STOP = "im.status.ethereum.module.TAP_STOP";
+    final int flag =  Build.VERSION.SDK_INT >= Build.VERSION_CODES.M ? PendingIntent.FLAG_CANCEL_CURRENT | PendingIntent.FLAG_MUTABLE : PendingIntent.FLAG_CANCEL_CURRENT;
 
     private NotificationManager notificationManager;
 
@@ -119,13 +119,8 @@ public class PushNotificationHelper {
     private final BroadcastReceiver notificationActionReceiver = new BroadcastReceiver() {
             @Override
             public void onReceive(Context context, Intent intent) {
-                if (intent.getAction() == ACTION_TAP_NOTIFICATION ||
-                    intent.getAction() == ACTION_DELETE_NOTIFICATION) {
-                    String deepLink = intent.getExtras().getString("im.status.ethereum.deepLink");
+                if (intent.getAction() == ACTION_DELETE_NOTIFICATION) {
                     String groupId = intent.getExtras().getString("im.status.ethereum.groupId");
-                    if (intent.getAction() == ACTION_TAP_NOTIFICATION) {
-                        context.startActivity(getOpenAppIntent(deepLink));
-                    }
                     if (groupId != null) {
                         cleanGroup(groupId);
                     }
@@ -141,7 +136,6 @@ public class PushNotificationHelper {
     private void registerBroadcastReceiver() {
         IntentFilter filter = new IntentFilter();
         filter.addAction(ACTION_DELETE_NOTIFICATION);
-        filter.addAction(ACTION_TAP_NOTIFICATION);
         filter.addAction(ACTION_TAP_STOP);
         context.registerReceiver(notificationActionReceiver, filter);
         Log.e(LOG_TAG, "Broadcast Receiver registered");
@@ -701,37 +695,31 @@ public class PushNotificationHelper {
 
     private StatusMessage createMessage(Bundle data) {
         Person author = getPerson(data.getBundle("notificationAuthor"));
-        return new StatusMessage(data.getString("id"), author,  data.getLong("timestamp"), data.getString("message"));
+        long timeStampLongValue = (long) data.getDouble("timestamp");
+        return new StatusMessage(data.getString("id"), author, timeStampLongValue, data.getString("message"));
     }
 
     private PendingIntent createGroupOnDismissedIntent(Context context, int notificationId, String groupId, String deepLink) {
         Intent intent = new Intent(ACTION_DELETE_NOTIFICATION);
         intent.putExtra("im.status.ethereum.deepLink", deepLink);
         intent.putExtra("im.status.ethereum.groupId", groupId);
-        return PendingIntent.getBroadcast(context.getApplicationContext(), notificationId, intent,
-                PendingIntent.FLAG_CANCEL_CURRENT | PendingIntent.FLAG_MUTABLE);
+        return PendingIntent.getBroadcast(context.getApplicationContext(), notificationId, intent, flag);
     }
 
     private PendingIntent createGroupOnTapIntent(Context context, int notificationId, String groupId, String deepLink) {
-        Intent intent = new Intent(ACTION_TAP_NOTIFICATION);
-        intent.putExtra("im.status.ethereum.deepLink", deepLink);
-        intent.putExtra("im.status.ethereum.groupId", groupId);
-        return PendingIntent.getBroadcast(context.getApplicationContext(), notificationId, intent,
-                PendingIntent.FLAG_CANCEL_CURRENT | PendingIntent.FLAG_MUTABLE);
+        Intent intent = getOpenAppIntent(deepLink);
+        return PendingIntent.getActivity(context.getApplicationContext(), notificationId, intent, flag);
    }
 
     private PendingIntent createOnTapIntent(Context context, int notificationId, String deepLink) {
-        Intent intent = new Intent(ACTION_TAP_NOTIFICATION);
-        intent.putExtra("im.status.ethereum.deepLink", deepLink);
-        return PendingIntent.getBroadcast(context.getApplicationContext(), notificationId, intent,
-                PendingIntent.FLAG_CANCEL_CURRENT | PendingIntent.FLAG_MUTABLE);
+        Intent intent = getOpenAppIntent(deepLink);
+        return PendingIntent.getActivity(context.getApplicationContext(), notificationId, intent, flag);
    }
 
     private PendingIntent createOnDismissedIntent(Context context, int notificationId, String deepLink) {
         Intent intent = new Intent(ACTION_DELETE_NOTIFICATION);
         intent.putExtra("im.status.ethereum.deepLink", deepLink);
-        return PendingIntent.getBroadcast(context.getApplicationContext(), notificationId, intent,
-                PendingIntent.FLAG_CANCEL_CURRENT | PendingIntent.FLAG_MUTABLE);
+        return PendingIntent.getBroadcast(context.getApplicationContext(), notificationId, intent, flag);
     }
 
     public void removeStatusMessage(Bundle bundle) {

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/counter/counter.cljs

@@ -26,9 +26,8 @@
    value]
   (let [type       (or type :default)
         text-color (or override-text-color
-                       (if (or
-                            (= (theme/get-theme) :dark)
-                            (= type :default))
+                       (if (or (= (theme/get-theme) :dark)
+                               (= type :default))
                          colors/white
                          colors/neutral-100))
         value      (utils.number/parse-int value)
@@ -52,16 +51,20 @@
                                     style)
                              (= type :outline)
                              (merge {:border-width 1
-                                     :border-color (get-color type)})
+                                     :border-color (colors/get-color :yin-yang (theme/get-theme))})
 
                              (not= type :outline)
                              (assoc :background-color
                                     (or override-bg-color
-                                        (get-color type)))
+                                        (colors/get-color :yin-yang (theme/get-theme))))
 
                              (> value max-value)
                              (assoc :padding-left 0.5))}
      [text/text
       {:weight :medium
        :size   :label
-       :style  {:color text-color}} label]]))
+       :style  {:color (colors/get-secondary-color
+                        :yin-yang
+                        (theme/get-theme)
+                        colors/white)}}
+      label]]))

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/drawers/drawer_buttons/style.cljs

@@ -1,10 +1,11 @@
 (ns quo2.components.drawers.drawer-buttons.style
-  (:require [quo2.foundations.colors :as colors]
-            [react-native.platform :as platform]))
+  (:require [quo2.foundations.colors :as colors]))
 
 (def outer-container
-  {:height        216
-   :border-radius 20})
+  {:height                  216
+   :border-top-left-radius  20
+   :border-top-right-radius 20
+   :overflow                :hidden})
 
 (def top-card
   {:flex                    1
@@ -12,9 +13,7 @@
    :padding-horizontal      20
    :border-top-left-radius  20
    :border-top-right-radius 20
-   :background-color        (if platform/ios?
-                              colors/neutral-80-opa-80-blur
-                              colors/neutral-80)})
+   :background-color        colors/neutral-80-opa-80-blur})
 
 (def bottom-card
   {:position                :absolute
@@ -33,11 +32,11 @@
    :justify-content :space-between})
 
 (def bottom-icon
-  {:border-radius   40
+  {:border-radius   32
    :border-width    1
    :margin-left     24
-   :height          28
-   :width           28
+   :height          32
+   :width           32
    :justify-content :center
    :align-items     :center
    :border-color    colors/white-opa-5})
@@ -52,4 +51,4 @@
 (defn heading-text
   [gap]
   {:color         colors/white
-   :margin-bottom gap})
+   :margin-bottom gap})

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

@@ -71,14 +71,28 @@
     child-2           string, keyword or hiccup
    "
   [{:keys [container-style top-card bottom-card]} child-1 child-2]
-  [blur/ios-view
+  [rn/view
    {:style (merge container-style style/outer-container)}
-   [card
-    (merge {:gap   4
-            :top?  true
-            :style style/top-card}
-           top-card) child-1]
-   [card
-    (merge {:style style/bottom-card
-            :gap   20}
-           bottom-card) child-2]])
+   [blur/view
+    {:blur-type   :dark
+     :blur-amount 10
+     :style       {:flex                    1
+                   :border-top-left-radius  20
+                   :border-top-right-radius 20}}]
+   [rn/view
+    {:style {:flex             1
+             :background-color :transparent
+             :position         :absolute
+             :top              0
+             :left             0
+             :right            0
+             :bottom           0}}
+    [card
+     (merge {:gap   4
+             :top?  true
+             :style style/top-card}
+            top-card) child-1]
+    [card
+     (merge {:style style/bottom-card
+             :gap   20}
+            bottom-card) child-2]]])

src/quo2/components/empty_state/empty_state/styles.cljs

@@ -0,0 +1,30 @@
+(ns quo2.components.empty-state.empty-state.styles
+  (:require [quo2.foundations.colors :as colors]))
+
+(def container
+  {:padding     12
+   :align-items :center})
+
+(def image
+  {:width  80
+   :height 80})
+
+(def text-container
+  {:margin-top  12
+   :align-items :center})
+
+(defn title
+  [blur?]
+  (cond-> {:margin-bottom 2}
+    blur? (assoc :color colors/white)))
+
+(defn description
+  [blur?]
+  (when blur?
+    {:color colors/white}))
+
+(def button-container {:margin-top 20})
+
+(defn upper-button-color
+  [customization-color]
+  (colors/custom-color-by-theme customization-color 50 60))

src/quo2/components/empty_state/empty_state/view.cljs

@@ -0,0 +1,50 @@
+(ns quo2.components.empty-state.empty-state.view
+  (:require [quo2.components.buttons.button :as button]
+            [quo2.components.empty-state.empty-state.styles :as styles]
+            [quo2.components.markdown.text :as text]
+            [react-native.core :as rn]
+            [react-native.fast-image :as fast-image]))
+
+(defn empty-state
+  [{:keys        [customization-color image title description blur?]
+    upper-button :upper-button
+    lower-button :lower-button
+    :or          {customization-color :blue}}]
+  [rn/view {:style styles/container}
+   [fast-image/fast-image
+    {:style  styles/image
+     :source image}]
+   [rn/view {:style styles/text-container}
+    [text/text
+     {:style           (styles/title blur?)
+      :number-of-lines 1
+      :weight          :semi-bold
+      :size            :paragraph-1}
+     title]
+    [text/text
+     {:style           (styles/description blur?)
+      :number-of-lines 1
+      :text-align      :center
+      :weight          :regular
+      :size            :paragraph-2}
+     description]]
+   (when-let [{upper-button-text     :text
+               upper-button-on-press :on-press} upper-button]
+     [rn/view {:style styles/button-container}
+      [button/button
+       (cond-> {:type                      :primary
+                :size                      32
+                :override-background-color (styles/upper-button-color customization-color)
+                :on-press                  upper-button-on-press}
+         blur? (assoc :override-theme :dark))
+       upper-button-text]
+
+      (when-let [{lower-button-text     :text
+                  lower-button-on-press :on-press} lower-button]
+        [button/button
+         (cond-> {:style    {:margin-top 12}
+                  :size     32
+                  :type     :blur-bg
+                  :on-press lower-button-on-press}
+           blur? (assoc :override-theme :dark))
+         lower-button-text])])])

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/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

@@ -22,7 +22,7 @@
       (if platform/ios?
         [hole-view/hole-view
          {:holes [{:x            33
-                   :y            23
+                   :y            24
                    :width        24
                    :height       24
                    :borderRadius 12}]}

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/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/reactions/reaction.cljs

@@ -1,6 +1,7 @@
 (ns quo2.components.reactions.reaction
   (:require [quo2.components.icon :as icons]
             [quo2.components.markdown.text :as text]
+            [quo2.components.reactions.resource :as resource]
             [quo2.components.reactions.style :as style]
             [quo2.foundations.colors :as colors]
             [quo2.theme :as theme]
@@ -28,9 +29,10 @@
       :on-long-press       on-long-press
       :accessibility-label accessibility-label
       :style               (style/reaction neutral?)}
-     [icons/icon emoji
-      {:no-color true
-       :size     16}]
+     [rn/image
+      {:style               {:width 16 :height 16}
+       :accessibility-label :emoji
+       :source              (resource/get-reaction emoji)}]
      [text/text
       {:size            :paragraph-2
        :weight          :semi-bold

src/quo2/components/reactions/resource.clj

@@ -0,0 +1,30 @@
+(ns quo2.components.reactions.resource
+  (:require [clojure.java.io :as io]
+            [clojure.string :as string]))
+
+(def ^:private reactions-dir "./resources/images/reactions/")
+
+(defn- resolve-reaction
+  [reaction]
+  (let [path (str reactions-dir (name reaction) ".png")
+        file (io/file path)]
+    (when (.exists file)
+      `(js/require ~(str "." path)))))
+
+(defn- find-all-image-base-names
+  []
+  (let [dir (io/file reactions-dir)]
+    (->> dir
+         file-seq
+         (filter #(string/ends-with? % "png"))
+         (map #(.getName %))
+         (map #(string/replace % #"\.png$" ""))
+         (map #(first (string/split % #"@")))
+         distinct)))
+
+(defmacro resolve-all-reactions
+  []
+  (reduce (fn [acc reaction]
+            (assoc acc reaction (resolve-reaction reaction)))
+          {}
+          (find-all-image-base-names)))

src/quo2/components/reactions/resource.cljs

@@ -0,0 +1,12 @@
+(ns quo2.components.reactions.resource
+  (:require-macros [quo2.components.reactions.resource :refer [resolve-all-reactions]]))
+
+(def ^:private reactions
+  (resolve-all-reactions))
+
+(defn get-reaction
+  [reaction]
+  (assert (keyword? reaction) "Reaction should be a keyword")
+  (assert (= "reaction" (namespace reaction))
+          "Reaction keyword should be namespaced with :reaction")
+  (get reactions (name reaction)))

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/selectors/reactions/component_spec.cljs

@@ -0,0 +1,23 @@
+(ns quo2.components.selectors.reactions.component-spec
+  (:require [quo2.components.selectors.reactions.view :as view]
+            [test-helpers.component :as h]))
+
+(h/describe "Selectors > Reactions"
+  (h/test "renders component"
+    (h/render [view/view :reaction/sad])
+    (h/is-truthy (h/get-by-label-text :reaction)))
+
+  (h/describe "on-press event"
+    (h/test "starts with released state"
+      (let [on-press (h/mock-fn)]
+        (h/render [view/view :reaction/love {:on-press on-press}])
+        (h/fire-event :press (h/get-by-label-text :reaction))
+        (h/was-called on-press)))
+
+    (h/test "starts with pressed state"
+      (let [on-press (h/mock-fn)]
+        (h/render [view/view :reaction/love
+                   {:on-press       on-press
+                    :start-pressed? true}])
+        (h/fire-event :press (h/get-by-label-text :reaction))
+        (h/was-called on-press)))))

src/quo2/components/selectors/reactions/style.cljs

@@ -0,0 +1,11 @@
+(ns quo2.components.selectors.reactions.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(defn container
+  [pressed?]
+  {:padding          10
+   :border-radius    12
+   :border-width     1
+   :border-color     (colors/theme-colors colors/neutral-20 colors/neutral-80)
+   :background-color (when pressed?
+                       (colors/theme-colors colors/neutral-10 colors/neutral-80-opa-40))})

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

@@ -0,0 +1,25 @@
+(ns quo2.components.selectors.reactions.view
+  (:require [quo2.components.reactions.resource :as reactions.resource]
+            [quo2.components.selectors.reactions.style :as style]
+            [react-native.core :as rn]
+            [reagent.core :as reagent]))
+
+(defn view
+  [_ {:keys [start-pressed?]}]
+  (let [pressed? (reagent/atom start-pressed?)]
+    (fn [emoji
+         {:keys [container-style on-press
+                 accessibility-label]
+          :or   {accessibility-label :reaction}}]
+      [rn/touchable-without-feedback
+       {:accessibility-label accessibility-label
+        :on-press            (fn [e]
+                               (swap! pressed? not)
+                               (when on-press
+                                 (on-press e)))}
+       [rn/view
+        {:style (merge (style/container @pressed?)
+                       container-style)}
+        [rn/image
+         {:source (reactions.resource/get-reaction emoji)
+          :style  {:width 20 :height 20}}]]])))

src/quo2/core.cljs

@@ -30,6 +30,7 @@
     quo2.components.drawers.permission-context.view
     quo2.components.dropdowns.dropdown
     quo2.components.header
+    quo2.components.empty-state.empty-state.view
     quo2.components.icon
     quo2.components.info.info-message
     quo2.components.info.information-box
@@ -64,6 +65,7 @@
     quo2.components.profile.profile-card.view
     quo2.components.profile.select-profile.view
     quo2.components.reactions.reaction
+    quo2.components.selectors.reactions.view
     quo2.components.record-audio.record-audio.view
     quo2.components.record-audio.soundtrack.view
     quo2.components.selectors.disclaimer.view
@@ -110,6 +112,9 @@
 (def skeleton quo2.components.loaders.skeleton/skeleton)
 (def author quo2.components.messages.author.view/author)
 
+;;;; SELECTORS
+(def reactions quo2.components.selectors.reactions.view/view)
+
 ;;;; AVATAR
 (def account-avatar quo2.components.avatars.account-avatar/account-avatar)
 (def channel-avatar quo2.components.avatars.channel-avatar/channel-avatar)
@@ -164,6 +169,9 @@
 (def drawer-buttons quo2.components.drawers.drawer-buttons.view/view)
 (def permission-context quo2.components.drawers.permission-context.view/view)
 
+;;;; EMPTY STATE
+(def empty-state quo2.components.empty-state.empty-state.view/empty-state)
+
 ;;;; INPUTS
 (def input quo2.components.inputs.input.view/input)
 (def profile-input quo2.components.inputs.profile-input.view/profile-input)

src/quo2/core_spec.cljs

@@ -14,13 +14,13 @@
     [quo2.components.drawers.drawer-buttons.component-spec]
     [quo2.components.drawers.permission-context.component-spec]
     [quo2.components.inputs.input.component-spec]
-    [quo2.components.keycard.component-spec]
     [quo2.components.inputs.profile-input.component-spec]
     [quo2.components.inputs.recovery-phrase.component-spec]
     [quo2.components.inputs.title-input.component-spec]
+    [quo2.components.keycard.component-spec]
+    [quo2.components.links.link-preview.component-spec]
     [quo2.components.links.url-preview-list.component-spec]
     [quo2.components.links.url-preview.component-spec]
-    [quo2.components.links.link-preview.component-spec]
     [quo2.components.markdown.--tests--.text-component-spec]
     [quo2.components.notifications.notification.component-spec]
     [quo2.components.onboarding.small-option-card.component-spec]
@@ -30,6 +30,7 @@
     [quo2.components.record-audio.soundtrack.--tests--.soundtrack-component-spec]
     [quo2.components.selectors.disclaimer.component-spec]
     [quo2.components.selectors.filter.component-spec]
+    [quo2.components.selectors.reactions.component-spec]
     [quo2.components.selectors.selectors.component-spec]
     [quo2.components.share.share-qr-code.component-spec]
     [quo2.components.tags.--tests--.status-tags-component-spec]))

src/quo2/foundations/colors.cljs

@@ -186,44 +186,111 @@
 
 ;; Colors for customizing profiles and communities themes
 (def customization
-  {:primary   {50 primary-50 ;; User can also use primary color as customisation color
-               60 primary-60}
-   :purple    {50 "#7140FD"
-               60 "#5A33CA"}
-   :indigo    {50 "#496289"
-               60 "#3D5273"}
-   :turquoise {50 "#2A799B"
-               60 "#22617C"}
-   :blue      {50 "#2A4AF5"
-               60 "#223BC4"}
-   :green     {50 "#5BCC95"
-               60 "#4CAB7D"}
-   :yellow    {50 "#F6B03C"
-               60 "#C58D30"}
-   :orange    {50 "#FF7D46"
-               60 "#CC6438"}
-   :red       {50 "#F46666"
-               60 "#CD5656"}
-   :pink      {50 "#F66F8F"
-               60 "#C55972"}
-   :brown     {50 "#99604D"
-               60 "#805141"}
-   :sky       {50 "#1992D7"
-               60 "#1475AC"}
-   :army      {50 "#216266"
-               60 "#1A4E52"}
-   :magenta   {50 "#EC266C"
-               60 "#BD1E56"}
-   :copper    {50 "#CB6256"
-               60 "#A24E45"}
-   :camel     {50 "#C78F67"
-               60 "#9F7252"}
-   :yin       {50 "#09101C"
-               60 "#1D232E"}
-   :yang      {50 "#FFFFFF"
-               60 "#EBEBEB"}
-   :beige     {50 "#CAAE93"
-               60 "#AA927C"}})
+  {:community-color {:main-color {50 "#7140FD"
+                                  60 "#5A33CA"}
+                     }
+
+   :primary         {50 primary-50 ;; User can also use primary color as customisation color
+                     60 primary-60}
+   :purple          {50 "#7140FD"
+                     60 "#5A33CA"}
+   :indigo          {50 "#496289"
+                     60 "#3D5273"}
+   :turquoise       {50 "#2A799B"
+                     60 "#22617C"}
+   :blue            {50 "#2A4AF5"
+                     60 "#223BC4"}
+   :green           {50 "#5BCC95"
+                     60 "#4CAB7D"}
+   :yellow          {50 "#F6B03C"
+                     60 "#C58D30"}
+   :orange          {50 "#FF7D46"
+                     60 "#CC6438"}
+   :red             {50 "#F46666"
+                     60 "#CD5656"}
+   :pink            {50 "#F66F8F"
+                     60 "#C55972"}
+   :brown           {50 "#99604D"
+                     60 "#805141"}
+   :sky             {50 "#1992D7"
+                     60 "#1475AC"}
+   :army            {50 "#216266"
+                     60 "#1A4E52"}
+   :magenta         {50 "#EC266C"
+                     60 "#BD1E56"}
+   :copper          {50 "#CB6256"
+                     60 "#A24E45"}
+   :camel           {50 "#C78F67"
+                     60 "#9F7252"}
+   :yin             {50 "#09101C"
+                     60 "#1D232E"}
+   :yang            {50 "#FFFFFF"
+                     60 "#EBEBEB"}
+   :beige           {50 "#CAAE93"
+                     60 "#AA927C"}})
+
+
+;; TODO: rename
+(def customization-colors-map
+  {:primary   {:primary-color   {:light primary-50 :dark primary-60}
+               :secondary-color nil}
+   :purple    {:primary-color   {:light "#7140FD" :dark "#5A33CA"}
+               :secondary-color nil}
+   :indigo    {:primary-color   {:light "#496289" :dark "#3D5273"}
+               :secondary-color nil}
+   :turquoise {:primary-color   {:light "#2A799B" :dark "#22617C"}
+               :secondary-color nil}
+   :blue      {:primary-color   {:light "#2A4AF5" :dark "#223BC4"}
+               :secondary-color nil}
+   :green     {:primary-color   {:light "#5BCC95" :dark "#4CAB7D"}
+               :secondary-color nil}
+   :yellow    {:primary-color   {:light "#F6B03C" :dark "#C58D30"}
+               :secondary-color nil}
+   :orange    {:primary-color   {:light "#FF7D46" :dark "#CC6438"}
+               :secondary-color nil}
+   :red       {:primary-color   {:light "#F46666" :dark "#CD5656"}
+               :secondary-color nil}
+   :pink      {:primary-color   {:light "#F66F8F" :dark "#C55972"}
+               :secondary-color nil}
+   :brown     {:primary-color   {:light "#99604D" :dark "#805141"}
+               :secondary-color nil}
+   :sky       {:primary-color   {:light "#1992D7" :dark "#1475AC"}
+               :secondary-color nil}
+   :army      {:primary-color   {:light "#216266" :dark "#1A4E52"}
+               :secondary-color nil}
+   :magenta   {:primary-color   {:light "#EC266C" :dark "#BD1E56"}
+               :secondary-color nil}
+   :copper    {:primary-color   {:light "#CB6256" :dark "#A24E45"}
+               :secondary-color nil}
+   :camel     {:primary-color   {:light "#C78F67" :dark "#9F7252"}
+               :secondary-color nil}
+   :beige     {:primary-color   {:light "#CAAE93" :dark "#AA927C"}
+               :secondary-color nil}
+   ;;
+   :yin-yang  {:primary-color   {:light "#09101C" :dark "#EBEBEB"}
+               :secondary-color {:light "#FFFFFF" :dark neutral-100}}
+   ;;
+   #_#_:purple    {:light {:main "#7140FD" :secondary nil}
+               :dark  {:main "#5A33CA" :secondary nil}}
+
+   #_#_:yin-yang  {:light {:main "#09101C"
+                       :dark "#1D232E"}
+               :dark  {:main "#FFFFFF"
+                       :dark "#EBEBEB"}}
+
+   })
+
+(defn get-color [color-kw theme]
+  (get-in customization-colors-map [color-kw :primary-color theme]))
+
+
+(defn get-secondary-color [color-kw theme default-value]
+  (if-let [secondary-color (get-in customization-colors-map
+                                   [color-kw
+                                    :secondary-color
+                                    theme])]
+    secondary-color
+    default-value))
 
 (def colors-map
   (merge {:danger  {50 danger-50

src/status_im/chat/models/loading.cljs

@@ -103,7 +103,7 @@
 (rf/defn messages-loaded
   "Loads more messages for current chat"
   {:events [::messages-loaded]}
-  [{db :db} chat-id session-id {:keys [cursor messages]}]
+  [{db :db} chat-id session-id {:keys [cursor messages]} on-loaded]
   (when-not (and (get-in db [:pagination-info chat-id :messages-initialized?])
                  (not= session-id
                        (get-in db [:pagination-info chat-id :messages-initialized?])))
@@ -141,6 +141,8 @@
                                       [:pagination-info chat-id
                                        :cursor-clock-value])
           clock-value (when cursor (cursor->clock-value cursor))]
+      (when on-loaded
+        (on-loaded (count new-messages)))
       {:db (-> db
                (update-in [:pagination-info chat-id :cursor-clock-value]
                           #(if (and (seq cursor) (or (not %) (< clock-value %)))
@@ -161,7 +163,7 @@
 
 (rf/defn load-more-messages
   {:events [:chat.ui/load-more-messages]}
-  [{:keys [db]} chat-id first-request]
+  [{:keys [db]} chat-id first-request on-loaded]
   (when-let [session-id (get-in db [:pagination-info chat-id :messages-initialized?])]
     (when (and
            (not (get-in db [:pagination-info chat-id :all-loaded?]))
@@ -175,13 +177,13 @@
             chat-id
             cursor
             constants/default-number-of-messages
-            #(re-frame/dispatch [::messages-loaded chat-id session-id %])
+            #(re-frame/dispatch [::messages-loaded chat-id session-id % on-loaded])
             #(re-frame/dispatch [::failed-loading-messages chat-id session-id %]))))))))
 
 (rf/defn load-more-messages-for-current-chat
   {:events [:chat.ui/load-more-messages-for-current-chat]}
-  [{:keys [db] :as cofx}]
-  (load-more-messages cofx (:current-chat-id db) false))
+  [{:keys [db] :as cofx} on-loaded]
+  (load-more-messages cofx (:current-chat-id db) false on-loaded))
 
 (rf/defn load-messages
   [{:keys [db now] :as cofx} chat-id]
@@ -191,4 +193,4 @@
                :utils/dispatch-later [{:ms 50 :dispatch [:chat.ui/mark-all-read-pressed chat-id]}
                                       (when-not (get-in cofx [:db :chats chat-id :public?])
                                         {:ms 100 :dispatch [:pin-message/load-pin-messages chat-id]})]}
-              (load-more-messages chat-id true))))
+              (load-more-messages chat-id true nil))))

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_im2/common/bottom_sheet/styles.cljs

@@ -1,5 +1,6 @@
 (ns status-im2.common.bottom-sheet.styles
   (:require [quo2.foundations.colors :as colors]
+            [quo2.theme :as theme]
             [status-im.utils.platform :as platform]))
 
 (defn handle
@@ -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})
@@ -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

@@ -7,7 +7,8 @@
             [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}]}
+                        (styles/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 styles/shell-bg}])
 
-       (when shell?
-         [blur/ios-view
-          {:style styles/shell-bg}])
+           (when selected-item
+             [rn/view
+              [rn/view {:style (styles/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 (styles/handle override-theme)}]
+           ;; content
+           [content]]]]))))

src/status_im2/common/bottom_sheet_screen/style.cljs

@@ -1,7 +1,7 @@
 (ns status-im2.common.bottom-sheet-screen.style
-  (:require
-    [quo2.foundations.colors :as colors]
-    [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

@@ -71,7 +71,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 +81,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 +97,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 +133,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 +141,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 +155,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 +396,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 +433,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}]
@@ -471,4 +476,4 @@
     [quo/action-drawer
      [(when admin? [(edit-name-image-entry)])
       [(notifications-entry admin?)]
-      (destructive-actions group)]]))
+      (destructive-actions group false)]]))

src/status_im2/common/resources.cljs

@@ -22,8 +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-contacts-dark              (js/require "../resources/images/ui2/no-contacts-dark.png")
+   :no-sent-requests-light        (js/require "../resources/images/ui2/no-sent-requests-light.png")
+   :no-sent-requests-dark         (js/require "../resources/images/ui2/no-sent-requests-dark.png")
+   :no-received-requests-light    (js/require "../resources/images/ui2/no-received-requests-light.png")
+   :no-received-requests-dark     (js/require "../resources/images/ui2/no-received-requests-dark.png")
+   :no-communities-light          (js/require "../resources/images/ui2/no-communities-light.png")
+   :no-communities-dark           (js/require "../resources/images/ui2/no-communities-dark.png")
+   :no-pending-communities-light  (js/require "../resources/images/ui2/no-pending-communities-light.png")
+   :no-pending-communities-dark   (js/require "../resources/images/ui2/no-pending-communities-dark.png")
+   :no-opened-communities-light   (js/require "../resources/images/ui2/no-opened-communities-light.png")
+   :no-opened-communities-dark    (js/require "../resources/images/ui2/no-opened-communities-dark.png")
+   :no-contacts-to-invite-light   (js/require "../resources/images/ui2/no-contacts-to-invite-light.png")
+   :no-contacts-to-invite-dark    (js/require "../resources/images/ui2/no-contacts-to-invite-dark.png")
+   :no-notifications-light        (js/require "../resources/images/ui2/no-notifications-light.png")
+   :no-notifications-dark         (js/require "../resources/images/ui2/no-notifications-dark.png")})
 
 (def mock-images
   {:coinbase             (js/require "../resources/images/mock2/coinbase.png")

src/status_im2/constants.cljs

@@ -71,12 +71,12 @@
 (def request-to-join-pending-state 1)
 
 (def reactions
-  {emoji-reaction-love        :i/love
-   emoji-reaction-thumbs-up   :i/thumbs-up
-   emoji-reaction-thumbs-down :i/thumbs-down
-   emoji-reaction-laugh       :i/laugh
-   emoji-reaction-sad         :i/sad
-   emoji-reaction-angry       :i/angry})
+  {emoji-reaction-love        :reaction/love
+   emoji-reaction-thumbs-up   :reaction/thumbs-up
+   emoji-reaction-thumbs-down :reaction/thumbs-down
+   emoji-reaction-laugh       :reaction/laugh
+   emoji-reaction-sad         :reaction/sad
+   emoji-reaction-angry       :reaction/angry})
 
 (def ^:const invitation-state-unknown 0)
 (def ^:const invitation-state-requested 1)

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/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/utils.cljs

@@ -15,24 +15,37 @@
     [status-im2.contexts.chat.lightbox.constants :as constants]
     [utils.worklets.lightbox :as worklet]))
 
+(defn clear-timers
+  [timers]
+  (js/clearTimeout (:mount-animation @timers))
+  (js/clearTimeout (:mount-index-lock @timers))
+  (js/clearTimeout (:hide-0 @timers))
+  (js/clearTimeout (:hide-1 @timers))
+  (js/clearTimeout (:show-0 @timers))
+  (js/clearTimeout (:show-1 @timers))
+  (js/clearTimeout (:show-2 @timers)))
 
 (defn effect
-  [{:keys [flat-list-ref scroll-index-lock?]} {:keys [opacity layout border]} index]
-  (rn/use-effect (fn []
-                   (reagent/next-tick (fn []
-                                        (when @flat-list-ref
-                                          (.scrollToIndex ^js @flat-list-ref
-                                                          #js {:animated false :index index}))))
-                   (js/setTimeout (fn []
-                                    (anim/animate opacity 1)
-                                    (anim/animate layout 0)
-                                    (anim/animate border 12))
-                                  (if platform/ios? 250 100))
-                   (js/setTimeout #(reset! scroll-index-lock? false) 300)
-                   (fn []
-                     (rf/dispatch [:chat.ui/zoom-out-signal nil])
-                     (when platform/android?
-                       (rf/dispatch [:chat.ui/lightbox-scale 1]))))))
+  [{:keys [flat-list-ref scroll-index-lock? timers]} {:keys [opacity layout border]} index]
+  (rn/use-effect
+   (fn []
+     (reagent/next-tick (fn []
+                          (when @flat-list-ref
+                            (.scrollToIndex ^js @flat-list-ref
+                                            #js {:animated false :index index}))))
+     (swap! timers assoc
+       :mount-animation
+       (js/setTimeout (fn []
+                        (anim/animate opacity 1)
+                        (anim/animate layout 0)
+                        (anim/animate border 12))
+                      (if platform/ios? 250 100)))
+     (swap! timers assoc :mount-index-lock (js/setTimeout #(reset! scroll-index-lock? false) 300))
+     (fn []
+       (rf/dispatch [:chat.ui/zoom-out-signal nil])
+       (when platform/android?
+         (rf/dispatch [:chat.ui/lightbox-scale 1]))
+       (clear-timers timers)))))
 
 (defn handle-orientation
   [result {:keys [flat-list-ref]} {:keys [scroll-index]} animations]
@@ -102,7 +115,7 @@
                           (anim/animate opacity 0)
                           (rf/dispatch [:navigate-back]))
                         (do
-                          #(reset! set-full-height? true)
+                          (reset! set-full-height? true)
                           (anim/animate (if x? pan-x pan-y) 0)
                           (anim/animate opacity 1)
                           (anim/animate layout 0)))))))
@@ -111,7 +124,8 @@
   []
   {:flat-list-ref      (atom nil)
    :small-list-ref     (atom nil)
-   :scroll-index-lock? (atom true)})
+   :scroll-index-lock? (atom true)
+   :timers             (atom {})})
 
 (defn init-state
   [messages index]