Refactor local pairing dispatches

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

ci/tests/Jenkinsfile.e2e-prs

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

doc/README.md

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

doc/patching.md

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

modules/react-native-status/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,8 +119,13 @@ public class PushNotificationHelper {
     private final BroadcastReceiver notificationActionReceiver = new BroadcastReceiver() {
             @Override
             public void onReceive(Context context, Intent intent) {
-                if (intent.getAction() == ACTION_DELETE_NOTIFICATION) {
+                if (intent.getAction() == ACTION_TAP_NOTIFICATION ||
+                    intent.getAction() == ACTION_DELETE_NOTIFICATION) {
+                    String deepLink = intent.getExtras().getString("im.status.ethereum.deepLink");
                     String groupId = intent.getExtras().getString("im.status.ethereum.groupId");
+                    if (intent.getAction() == ACTION_TAP_NOTIFICATION) {
+                        context.startActivity(getOpenAppIntent(deepLink));
+                    }
                     if (groupId != null) {
                         cleanGroup(groupId);
                     }
@@ -136,6 +141,7 @@ 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");
@@ -695,31 +701,37 @@ public class PushNotificationHelper {
 
     private StatusMessage createMessage(Bundle data) {
         Person author = getPerson(data.getBundle("notificationAuthor"));
-        long timeStampLongValue = (long) data.getDouble("timestamp");
-        return new StatusMessage(data.getString("id"), author, timeStampLongValue, data.getString("message"));
+        return new StatusMessage(data.getString("id"), author,  data.getLong("timestamp"), 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, flag);
+        return PendingIntent.getBroadcast(context.getApplicationContext(), notificationId, intent,
+                PendingIntent.FLAG_CANCEL_CURRENT | PendingIntent.FLAG_MUTABLE);
     }
 
     private PendingIntent createGroupOnTapIntent(Context context, int notificationId, String groupId, String deepLink) {
-        Intent intent = getOpenAppIntent(deepLink);
-        return PendingIntent.getActivity(context.getApplicationContext(), notificationId, intent, flag);
+        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);
    }
 
     private PendingIntent createOnTapIntent(Context context, int notificationId, String deepLink) {
-        Intent intent = getOpenAppIntent(deepLink);
-        return PendingIntent.getActivity(context.getApplicationContext(), notificationId, intent, flag);
+        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);
    }
 
     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, flag);
+        return PendingIntent.getBroadcast(context.getApplicationContext(), notificationId, intent,
+                PendingIntent.FLAG_CANCEL_CURRENT | PendingIntent.FLAG_MUTABLE);
     }
 
     public void removeStatusMessage(Bundle bundle) {

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

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

src/native_module/core.cljs

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

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

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

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

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

src/quo2/components/community/community_list_view.cljs

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

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

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

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

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

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

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

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

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

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

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

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

@@ -71,28 +71,14 @@
     child-2           string, keyword or hiccup
    "
   [{:keys [container-style top-card bottom-card]} child-1 child-2]
-  [rn/view
+  [blur/ios-view
    {:style (merge container-style style/outer-container)}
-   [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]]])
+   [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

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

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

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

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

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

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

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

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

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

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

src/quo2/components/list_items/channel.cljs

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

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

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

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

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

src/quo2/components/reactions/reaction.cljs

@@ -1,7 +1,6 @@
 (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]
@@ -29,10 +28,9 @@
       :on-long-press       on-long-press
       :accessibility-label accessibility-label
       :style               (style/reaction neutral?)}
-     [rn/image
-      {:style               {:width 16 :height 16}
-       :accessibility-label :emoji
-       :source              (resource/get-reaction emoji)}]
+     [icons/icon emoji
+      {:no-color true
+       :size     16}]
      [text/text
       {:size            :paragraph-2
        :weight          :semi-bold

src/quo2/components/reactions/resource.clj

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

@@ -1,12 +0,0 @@
-(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-without-feedback
+  [rn/touchable-opacity
    {:on-press            on-change
-    :accessibility-label :disclaimer-touchable-opacity}
+    :accessibility-label "disclaimer-touchable-opacity"}
    [rn/view {:style (merge container-style (style/container blur?))}
     [selectors/checkbox
      {:accessibility-label accessibility-label

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

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

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

@@ -1,25 +0,0 @@
-(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/components/settings/settings_list/component_spec.cljs

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

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

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

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

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

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

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

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

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

src/quo2/core.cljs

@@ -30,7 +30,6 @@
     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
@@ -65,7 +64,6 @@
     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
@@ -112,9 +110,6 @@
 (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)
@@ -169,9 +164,6 @@
 (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)