From 5d4fbe7ef1ba97391abead97cfcfa73c7e5d53e5 Mon Sep 17 00:00:00 2001
From: Lungu Cristian <lungucristian95@gmail.com>
Date: Thu, 14 Sep 2023 12:21:11 +0300
Subject: [PATCH] fix: quo2 reaction styles (size + colors) (#17224)

---
 src/quo2/components/reactions/reaction.cljs   | 27 +++++++--------
 src/quo2/components/reactions/style.cljs      | 33 +++++++++----------
 .../contexts/quo_preview/reactions/react.cljs | 15 +++++----
 3 files changed, 39 insertions(+), 36 deletions(-)

diff --git a/src/quo2/components/reactions/reaction.cljs b/src/quo2/components/reactions/reaction.cljs
index 49dc0c6397..e6647beffc 100644
--- a/src/quo2/components/reactions/reaction.cljs
+++ b/src/quo2/components/reactions/reaction.cljs
@@ -12,31 +12,32 @@
   [rn/touchable-opacity
    {:on-press            on-press
     :accessibility-label :emoji-reaction-add
-    :style               (style/add-reaction)}
+    :style               (style/add-reaction theme)}
    [icons/icon :i/add-reaction
     {:size  20
-     :color (colors/theme-colors colors/neutral-50 colors/white theme)}]])
+     :color (colors/theme-colors colors/neutral-50
+                                 colors/neutral-40
+                                 theme)}]])
 
-(defn reaction
+(def add-reaction (theme/with-theme add-reaction-internal))
+
+(defn reaction-internal
   "Add your emoji as a param here"
-  [{:keys [emoji clicks neutral? on-press accessibility-label on-long-press]}]
+  [{:keys [emoji clicks neutral? on-press accessibility-label on-long-press theme]}]
   (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?)}
+      :style               (style/reaction neutral? theme)}
      [rn/image
       {:style               {:width 16 :height 16}
        :accessibility-label :emoji
        :source              (resource/get-reaction emoji)}]
      [text/text
-      {:size            :paragraph-2
-       :weight          :semi-bold
-       :flex-direction  :row
-       :align-items     :center
-       :justify-content :center}
-      (when (pos? numeric-value)
-        (str " " numeric-value))]]))
+      {:size   :paragraph-2
+       :weight :semi-bold
+       :style  style/reaction-count}
+      (str (if (pos? numeric-value) numeric-value 1))]]))
 
-(def add-reaction (theme/with-theme add-reaction-internal))
+(def reaction (theme/with-theme reaction-internal))
diff --git a/src/quo2/components/reactions/style.cljs b/src/quo2/components/reactions/style.cljs
index 6e20b4f87e..bbed750235 100644
--- a/src/quo2/components/reactions/style.cljs
+++ b/src/quo2/components/reactions/style.cljs
@@ -10,25 +10,24 @@
    :height             24})
 
 (defn add-reaction
-  []
+  [theme]
   (merge reaction-styling
-         {:padding-horizontal 9
+         {:padding-horizontal 8
           :border-width       1
-          :border-color       (colors/theme-colors colors/neutral-30 colors/neutral-70)}))
+          :border-color       (colors/theme-colors colors/neutral-20
+                                                   colors/neutral-70
+                                                   theme)}))
 
 (defn reaction
-  [neutral?]
+  [neutral? theme]
   (merge reaction-styling
-         (cond->
-           {:background-color (colors/theme-colors (if neutral?
-                                                     colors/neutral-30
-                                                     :transparent)
-                                                   (if neutral?
-                                                     colors/neutral-70
-                                                     :transparent))}
-           (and (colors/dark?) (not neutral?))
-           (assoc :border-color colors/neutral-70
-                  :border-width 1)
-           (and (not (colors/dark?)) (not neutral?))
-           (assoc :border-color colors/neutral-30
-                  :border-width 1))))
+         {:border-color     (colors/theme-colors colors/neutral-20
+                                                 colors/neutral-80
+                                                 theme)
+          :border-width     1
+          :background-color (if neutral?
+                              (colors/theme-colors colors/neutral-10
+                                                   colors/neutral-80-opa-40)
+                              :transparent)}))
+
+(def reaction-count {:margin-left 4})
diff --git a/src/status_im2/contexts/quo_preview/reactions/react.cljs b/src/status_im2/contexts/quo_preview/reactions/react.cljs
index e8a85a39c4..09464526da 100644
--- a/src/status_im2/contexts/quo_preview/reactions/react.cljs
+++ b/src/status_im2/contexts/quo_preview/reactions/react.cljs
@@ -1,6 +1,6 @@
 (ns status-im2.contexts.quo-preview.reactions.react
   (:require [clojure.string :as string]
-            [quo2.components.reactions.reaction :as quo2.reaction]
+            [quo2.core :as quo]
             [react-native.core :as rn]
             [reagent.core :as reagent]
             [status-im2.constants :as constants]
@@ -27,11 +27,14 @@
       [preview/preview-container
        {:state      state
         :descriptor descriptor}
-       [rn/view {:padding-bottom 150}
+       [rn/view
+        {:padding-bottom 150
+         :align-items    :center}
         [rn/view
-         {:padding-vertical 60
-          :justify-content  :center
+         {:width            100
+          :padding-vertical 60
+          :justify-content  :space-evenly
           :flex-direction   :row
           :align-items      :center}
-         [quo2.reaction/reaction @state]
-         [quo2.reaction/add-reaction @state]]]])))
+         [quo/reaction @state]
+         [quo/add-reaction]]]])))