Merge branch 'develop' into 15834

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

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

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

ci/tests/Jenkinsfile.e2e-prs

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

doc/README.md

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

doc/patching.md

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

modules/react-native-status/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) {

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

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

src/native_module/core.cljs

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

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

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

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

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

src/quo2/components/buttons/button.cljs

@@ -220,10 +220,10 @@
    only icon
    [button {:icon true} :i/close-circle]"
   [_ _]
-  (let [pressed (reagent/atom false)]
+  (let [pressed-in (reagent/atom false)]
     (fn
-      [{:keys [on-press disabled type size before after above
-               width customization-color override-theme override-background-color
+      [{:keys [on-press disabled type size before after above icon-secondary-no-color
+               width customization-color override-theme override-background-color pressed
                on-long-press accessibility-label icon icon-no-color style inner-style test-ID]
         :or   {type                :primary
                size                40
@@ -234,17 +234,17 @@
                     [(or
                       override-theme
                       (theme/get-theme)) type])
-            state (cond disabled :disabled
-                        @pressed :pressed
-                        :else    :default)
+            state (cond disabled                 :disabled
+                        (or @pressed-in pressed) :pressed
+                        :else                    :default)
             icon-size (when (= 24 size) 12)
             icon-secondary-color (or icon-secondary-color icon-color)]
         [rn/touchable-without-feedback
          (merge {:test-ID             test-ID
                  :disabled            disabled
                  :accessibility-label accessibility-label
-                 :on-press-in         #(reset! pressed true)
-                 :on-press-out        #(reset! pressed nil)}
+                 :on-press-in         #(reset! pressed-in true)
+                 :on-press-out        #(reset! pressed-in nil)}
                 (when on-press
                   {:on-press on-press})
                 (when on-long-press
@@ -306,5 +306,6 @@
               [quo2.icons/icon after
                {:container-style {:margin-left  4
                                   :margin-right (if (= size 40) 12 8)}
+                :no-color        icon-secondary-no-color
                 :color           icon-secondary-color
                 :size            icon-size}]])]]]))))

src/quo2/components/buttons/predictive_keyboard/view.cljs

@@ -42,7 +42,8 @@
     (case type
       :words
       [rn/flat-list
-       {:data                              words
+       {:keyboard-should-persist-taps      :always
+        :data                              words
         :content-container-style           style/word-list
         :render-fn                         word-component
         :render-data                       {:blur?    blur?

src/quo2/components/community/community_list_view.cljs

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

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

@@ -1,53 +1,77 @@
 (ns quo2.components.drawers.action-drawers.component-spec
-  (:require ["@testing-library/react-native" :as rtl]
-            [quo2.components.drawers.action-drawers.view :as action-drawer]
-            [reagent.core :as reagent]))
+  (:require [quo2.components.drawers.action-drawers.view :as action-drawer]
+            [test-helpers.component :as h]))
 
-(defn render-action-drawer
-  ([options]
-   (rtl/render (reagent/as-element [action-drawer/action-drawer options]))))
+(h/describe "action drawer"
+  (h/test "default render"
+    (h/render [action-drawer/action-drawer
+               [[{:icon  :i/friend
+                  :label "a sample label"}]]])
+    (h/is-truthy (h/get-by-text "a sample label")))
 
-(js/global.test "action-drawer renders with elements label displaying"
-  (fn []
-    (render-action-drawer [[{:icon  :i/friend
-                             :label "a sample label"}]])
-    (-> (js/expect (rtl/screen.getByText "a sample label"))
-        (.toBeTruthy))))
+  (h/test "renders with elements sub-label displaying"
+    (h/render [action-drawer/action-drawer
+               [[{:icon      :i/friend
+                  :label     "a sample label"
+                  :sub-label "a sample sub label"}]]])
+    (h/is-truthy (h/get-by-text "a sample sub label")))
 
-(js/global.test "action-drawer renders with elements sub-label displaying"
-  (fn []
-    (render-action-drawer [[{:icon      :i/friend
-                             :label     "a sample label"
-                             :sub-label "a sample sub label"}]])
-    (-> (js/expect (rtl/screen.getByText "a sample sub label"))
-        (.toBeTruthy))))
+  (h/test "on click action works on element"
+    (let [on-press (js/jest.fn)]
+      (h/render [action-drawer/action-drawer
+                 [[{:icon     :i/friend
+                    :label    "a sample label"
+                    :on-press on-press}]]])
+      (h/fire-event :press (h/get-by-text "a sample label"))
+      (h/was-called on-press)))
 
-(js/global.test "action-drawer on click action works on element"
-  (let [event (js/jest.fn)]
-    (fn []
-      (render-action-drawer [[{:icon     :i/friend
-                               :label    "a sample label"
-                               :on-press event}]])
-      (rtl/fireEvent.press (rtl/screen.getByText "a sample label"))
-      (-> (js/expect event)
-          (.toHaveBeenCalled)))))
+  (h/test "disabled state"
+    (let [on-press-muted  (js/jest.fn)
+          on-press-friend (js/jest.fn)
+          label-mute      "Mute"
+          label-friend    "View member details"]
+      (h/render [action-drawer/action-drawer
+                 [[{:icon     :i/muted
+                    :label    label-mute
+                    :on-press on-press-muted}
+                   {:icon      :i/friend
+                    :label     label-friend
+                    :disabled? true
+                    :on-press  on-press-friend}]]])
+      (h/fire-event :press (h/get-by-text label-mute))
+      (h/was-called on-press-muted)
 
-(js/global.test "action-drawer renders two icons when set"
-  (fn []
-    (render-action-drawer [[{:icon                :i/friend
-                             :label               "a sample label"
-                             :right-icon          :i/friend
-                             :accessibility-label :first-element}]])
-    (-> (js/expect (rtl/screen.getByLabelText "right-icon-for-action"))
-        (.toBeTruthy))
-    (-> (js/expect (rtl/screen.queryByLabelText "left-icon-for-action"))
-        (.toBeTruthy))))
+      (h/fire-event :press (h/get-by-text label-friend))
+      (h/was-not-called on-press-friend)))
 
-(js/global.test "action-drawer renders a divider when the add-divider? prop is true"
-  (fn []
-    (render-action-drawer [[{:icon                :i/friend
-                             :label               "a sample label"
-                             :add-divider?        true
-                             :accessibility-label :first-element}]])
-    (-> (js/expect (rtl/screen.getAllByLabelText "divider"))
-        (.toBeTruthy))))
+  (h/test "renders two icons when set"
+    (h/render [action-drawer/action-drawer
+               [[{:icon                :i/friend
+                  :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/test "renders a divider when the add-divider? prop is true"
+    (h/render [action-drawer/action-drawer
+               [[{:icon                :i/friend
+                  :label               "a sample label"
+                  :add-divider?        true
+                  :accessibility-label :first-element}]]])
+    (h/is-truthy (h/get-all-by-label-text "divider"))))

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

@@ -11,9 +11,10 @@
    :flex-direction   :row})
 
 (defn container
-  [sub-label]
+  [sub-label disabled?]
   {:border-radius     12
    :height            (if sub-label 58 50)
+   :opacity           (when disabled? 0.3)
    :margin-horizontal 8})
 
 (defn row-container
@@ -33,8 +34,17 @@
   {:flex            1
    :justify-content :center})
 
+(def right-side-container
+  {:flex-direction :row
+   :align-items    :center})
+
 (def right-icon
   {:height        20
    :margin-top    :auto
    :margin-bottom :auto
    :width         20})
+
+(defn right-text
+  [override-theme]
+  {:color        (colors/theme-colors colors/neutral-50 colors/neutral-40 override-theme)
+   :margin-right 12})

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

@@ -11,19 +11,27 @@
     colors/danger-60
     (colors/theme-colors colors/neutral-50 colors/neutral-40 override-theme)))
 
-(defn divider
+(defn- divider
   []
   [rn/view
    {:style               (style/divider)
     :accessible          true
     :accessibility-label :divider}])
 
-(defn action
+(defn- maybe-pressable
+  [disabled? props child]
+  (if disabled?
+    [rn/view (dissoc props :on-press) child]
+    [rn/touchable-highlight props child]))
+
+(defn- action
   [{:keys [icon
            label
            sub-label
            right-icon
+           right-text
            danger?
+           disabled?
            on-press
            add-divider?
            override-theme
@@ -33,9 +41,9 @@
     [:<> {:key label}
      (when add-divider?
        [divider])
-     [rn/touchable-highlight
+     [maybe-pressable disabled?
       {:accessibility-label accessibility-label
-       :style               (style/container sub-label)
+       :style               (style/container sub-label disabled?)
        :underlay-color      (colors/theme-colors colors/neutral-5 colors/neutral-90 override-theme)
        :on-press            on-press}
       [rn/view
@@ -63,14 +71,22 @@
             :style {:color
                     (colors/theme-colors colors/neutral-50 colors/neutral-40 override-theme)}}
            sub-label])]
-       (when right-icon
-         [rn/view
-          {:style               style/right-icon
-           :accessible          true
-           :accessibility-label :right-icon-for-action}
-          [icon/icon right-icon
-           {:color (get-icon-color danger? override-theme)
-            :size  20}]])]]]))
+       (when (or right-text right-icon)
+         [rn/view {:style style/right-side-container}
+          (when right-text
+            [text/text
+             {:accessibility-label :right-text-for-action
+              :size                :paragraph-1
+              :style               (style/right-text override-theme)}
+             right-text])
+          (when right-icon
+            [rn/view
+             {:style               style/right-icon
+              :accessible          true
+              :accessibility-label :right-icon-for-action}
+             [icon/icon right-icon
+              {:color (get-icon-color danger? override-theme)
+               :size  20}]])])]]]))
 
 (defn action-drawer
   [sections]

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

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

src/quo2/components/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/dropdowns/dropdown.cljs

@@ -1,165 +1,14 @@
 (ns quo2.components.dropdowns.dropdown
-  (:require [quo2.components.icon :as icons]
-            [quo2.components.markdown.text :as text]
-            [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
-            [react-native.reanimated :as reanimated]
-            [reagent.core :as reagent]))
-
-(defn apply-anim
-  [dd-height val]
-  (reanimated/animate-shared-value-with-delay dd-height
-                                              val
-                                              300
-                                              :easing1
-                                              0))
-
-(def sizes
-  {:big    {:icon-size 20
-            :font      {:font-size :paragraph-1}
-            :height    40
-            :padding   {:padding-with-icon    {:padding-vertical   9
-                                               :padding-horizontal 12}
-                        :padding-with-no-icon {:padding-vertical 9
-                                               :padding-left     12
-                                               :padding-right    8}}}
-   :medium {:icon-size 20
-            :font      {:font-size :paragraph-1}
-            :height    32
-            :padding   {:padding-with-icon    {:padding-vertical   5
-                                               :padding-horizontal 8}
-                        :padding-with-no-icon {:padding-vertical 5
-                                               :padding-left     12
-                                               :padding-right    8}}}
-   :small  {:icon-size 15
-            :font      {:font-size :paragraph-2}
-            :height    24
-            :padding   {:padding-with-icon    {:padding-vertical   3
-                                               :padding-horizontal 6}
-                        :padding-with-no-icon {:padding-vertical   3
-                                               :padding-horizontal 6}}}})
-(defn color-by-10
-  [color]
-  (colors/alpha color 0.6))
-
-(defn dropdown-comp
-  [{:keys [icon dd-height size disabled? dd-color use-border? border-color]}]
-  (let [dark?                                                         (colors/dark?)
-        {:keys [width height width-with-icon padding font icon-size]} (size sizes)
-        {:keys [padding-with-icon padding-with-no-icon]}              padding
-        font-size                                                     (:font-size font)
-        spacing                                                       (case size
-                                                                        :big    4
-                                                                        :medium 2
-                                                                        :small  2)
-        open?                                                         (reagent/atom false)]
-    (fn []
-      [rn/touchable-opacity
-       (cond->
-         {:on-press (fn []
-                      (if (swap! open? not)
-                        (apply-anim dd-height 120)
-                        (apply-anim dd-height 0)))
-          :style    (cond->
-                      (merge
-                       (if icon
-                         padding-with-icon
-                         padding-with-no-icon)
-                       {:width            (if icon
-                                            width-with-icon
-                                            width)
-                        :height           height
-                        :border-radius    (case size
-                                            :big    12
-                                            :medium 10
-                                            :small  8)
-                        :flex-direction   :row
-                        :align-items      :center
-                        :background-color (if @open?
-                                            dd-color
-                                            (color-by-10 dd-color))})
-                      use-border? (assoc :border-width 1
-                                         :border-color (if @open?
-                                                         border-color
-                                                         (color-by-10 border-color))))}
-         disabled? (assoc-in [:style :opacity] 0.3)
-         disabled? (assoc :disabled true))
-       (when icon
-         [icons/icon icon
-          {:no-color        true
-           :size            20
-           :container-style {:margin-right spacing
-                             :margin-top   1
-                             :width        icon-size
-                             :height       icon-size}}])
-       [text/text
-        {:size   font-size
-         :weight :medium
-         :font   :font-medium
-         :color  :main} "Dropdown"]
-       [icons/icon
-        (if @open?
-          (if dark?
-            :main-icons/pullup-dark
-            :main-icons/pullup)
-          (if dark?
-            :main-icons/dropdown-dark
-            :main-icons/dropdown))
-        {:size            20
-         :no-color        true
-         :container-style {:width         (+ icon-size 3)
-                           :border-radius 20
-                           :margin-left   (if (= :small size)
-                                            2
-                                            4)
-                           :margin-top    1
-                           :height        (+ icon-size 4)}}]])))
-
-(defn items-comp
-  [{:keys [items on-select]}]
-  (let [items-count (count items)]
-    [rn/scroll-view
-     {:horizontal          false
-      :nestedScrollEnabled true}
-     (doall
-      (map-indexed (fn [index item]
-                     [rn/touchable-opacity
-                      {:key      (str item index)
-                       :style    {:padding             4
-                                  :border-bottom-width (if (= index (- items-count 1))
-                                                         0
-                                                         1)
-                                  :border-color        (colors/theme-colors
-                                                        colors/neutral-100
-                                                        colors/white)
-                                  :text-align          :center}
-                       :on-press #(on-select item)}
-                      [text/text {:style {:text-align :center}} item]])
-                   items))]))
-
-(defn- f-dropdown
-  [{:keys [items icon text default-item on-select size disabled? border-color use-border? dd-color]}]
-  (let [dd-height (reanimated/use-shared-value 0)]
-    [rn/view {:style {:flex-grow 1}}
-     [dropdown-comp
-      {:items        items
-       :icon         icon
-       :disabled?    disabled?
-       :size         size
-       :dd-color     dd-color
-       :text         text
-       :border-color (colors/custom-color-by-theme border-color 50 60)
-       :use-border?  use-border?
-       :default-item default-item
-       :dd-height    dd-height}]
-     [reanimated/view
-      {:style (reanimated/apply-animations-to-style
-               {:height dd-height}
-               {})}
-      [items-comp
-       {:items     items
-        :on-select on-select}]]]))
+  (:require [quo2.components.buttons.button :as button]))
 
 (defn dropdown
-  [params]
-  [:f> f-dropdown params])
+  [_ _]
+  (fn [{:keys [on-change selected] :as opts} children]
+    [button/button
+     (merge
+      opts
+      {:after                   (if selected :i/pullup :i/dropdown)
+       :icon-secondary-no-color true
+       :pressed                 selected
+       :on-press                #(when on-change (on-change selected))})
+     children]))

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

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

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

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

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

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

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

@@ -28,8 +28,9 @@
   (h/describe "Error text"
     (h/test "Marked when words doesn't satisfy a predicate"
       (h/render [recovery-phrase/recovery-phrase-input
-                 {:mark-errors? true
-                  :error-pred   #(>= (count %) 5)}
+                 {:mark-errors?             true
+                  :error-pred-current-word  #(>= (count %) 5)
+                  :error-pred-written-words #(>= (count %) 5)}
                  "Text with some error words that don't satisfy the predicate"])
       (let [children-text-nodes            (-> (h/get-by-label-text :recovery-phrase-input)
                                                (oops/oget "props" "children" "props" "children")

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

@@ -15,15 +15,27 @@
    text])
 
 (defn- mark-error-words
-  [pred text word-limit]
-  (let [word-limit (or word-limit ##Inf)]
-    (into [:<>]
-          (comp (map-indexed (fn [idx word]
-                               (if (or (pred word) (>= idx word-limit))
-                                 [error-word word]
-                                 word)))
-                (interpose " "))
-          (string/split text #" "))))
+  [pred-last-word pred-previous-words text word-limit]
+  (let [last-index (dec (count (string/split text #"\s+")))
+        words      (map #(apply str %)
+                        (partition-by #(= " " %) text))]
+    (->> words
+         (reduce (fn [{:keys [idx] :as acc} word]
+                   (let [error-pred        (if (= last-index idx) pred-last-word pred-previous-words)
+                         invalid-word?     (and (or (error-pred word)
+                                                    (>= idx word-limit))
+                                                (not (string/blank? word)))
+                         not-blank-spaces? (not (string/blank? word))]
+                     (cond-> acc
+                       not-blank-spaces? (update :idx inc)
+                       :always           (update :result
+                                                 conj
+                                                 (if invalid-word?
+                                                   [error-word word]
+                                                   word)))))
+                 {:result [:<>]
+                  :idx    0})
+         :result)))
 
 (defn recovery-phrase-input
   [_ _]
@@ -31,9 +43,11 @@
         set-focused #(reset! state :focused)
         set-default #(reset! state :default)]
     (fn [{:keys [customization-color override-theme blur? on-focus on-blur mark-errors?
-                 error-pred word-limit]
-          :or   {customization-color :blue
-                 error-pred          (constantly false)}
+                 error-pred-current-word error-pred-written-words word-limit]
+          :or   {customization-color      :blue
+                 word-limit               ##Inf
+                 error-pred-current-word  (constantly false)
+                 error-pred-written-words (constantly false)}
           :as   props}
          text]
       (let [extra-props (apply dissoc props custom-props)]
@@ -53,5 +67,5 @@
                                             (when on-blur (on-blur)))}
                  extra-props)
           (if mark-errors?
-            (mark-error-words error-pred text word-limit)
+            (mark-error-words error-pred-current-word error-pred-written-words text word-limit)
             text)]]))))

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

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

src/quo2/components/list_items/channel.cljs

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

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

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

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

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

src/quo2/components/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]
@@ -13,7 +14,7 @@
      {:on-press            on-press
       :accessibility-label :emoji-reaction-add
       :style               (style/add-reaction)}
-     [icons/icon :i/add
+     [icons/icon :i/add-reaction
       {:size  20
        :color (if dark?
                 colors/white
@@ -21,15 +22,17 @@
 
 (defn reaction
   "Add your emoji as a param here"
-  [{:keys [emoji clicks neutral? on-press accessibility-label]}]
+  [{:keys [emoji clicks neutral? on-press accessibility-label on-long-press]}]
   (let [numeric-value (int clicks)]
     [rn/touchable-opacity
      {:on-press            on-press
+      :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))})