fix: action/reaction drawer UI issue

src/quo/components/drawers/drawer_action/component_spec.cljs

@@ -6,24 +6,26 @@
 
 (h/describe "Drawers: drawer-action"
   (h/test "default render"
-    (h/render-with-theme-provider [drawer-action/view {}])
+    (h/render-with-theme-provider [drawer-action/view {:accessibility-label :container}])
     (h/is-truthy (h/query-by-label-text :container)))
 
   (h/test "on-press-in changes internal state to :pressed"
-    (h/render-with-theme-provider [drawer-action/view {}])
+    (h/render-with-theme-provider [drawer-action/view {:accessibility-label :container}])
     (h/fire-event :on-press-in (h/get-by-label-text :container))
     (h/wait-for #(h/has-style (h/query-by-label-text :container)
                               {:backgroundColor (colors/resolve-color :blue :light 5)})))
 
   (h/test "render default action with state :selected"
-    (h/render-with-theme-provider [drawer-action/view {:state :selected}])
+    (h/render-with-theme-provider [drawer-action/view
+                                   {:state :selected :accessibility-label :container}])
     (h/has-style (h/query-by-label-text :container)
                  {:backgroundColor (colors/resolve-color :blue :light 5)})
     (h/is-truthy (h/query-by-label-text :check-icon)))
 
   (h/test "call on-press"
     (let [on-press (h/mock-fn)]
-      (h/render-with-theme-provider [drawer-action/view {:on-press on-press}])
+      (h/render-with-theme-provider [drawer-action/view
+                                     {:on-press on-press :accessibility-label :container}])
       (h/fire-event :on-press (h/get-by-label-text :container))
       (h/was-called on-press)))
 
@@ -38,8 +40,9 @@
 
   (h/test "render :toggle action with state :selected"
     (h/render-with-theme-provider [drawer-action/view
-                                   {:action :toggle
-                                    :state  :selected}])
+                                   {:accessibility-label :container
+                                    :action              :toggle
+                                    :state               :selected}])
     (h/is-truthy (h/query-by-label-text "toggle-on"))
     (h/has-style (h/query-by-label-text :container)
                  {:backgroundColor :transparent}))
@@ -51,4 +54,5 @@
                                     :description "Just a small desc"}])
     (h/is-truthy (h/query-by-label-text :left-icon))
     (h/is-truthy (h/query-by-text "Check contact"))
+    (h/has-style (h/query-by-text "Check contact") {:color colors/neutral-100})
     (h/is-truthy (h/query-by-text "Just a small desc"))))

src/quo/components/drawers/drawer_action/schema.cljs

@@ -4,6 +4,8 @@
   [:=>
    [:cat
     [:map {:closed true}
+     [:accessibility-label {:optional true} [:maybe :keyword]]
+     [:type {:optional true} [:maybe [:enum :main :danger]]]
      [:action {:optional true} [:maybe [:enum :arrow :toggle]]]
      [:icon {:optional true} [:maybe :keyword]]
      [:description {:optional true} [:maybe :string]]

src/quo/components/drawers/drawer_action/style.cljs

@@ -28,6 +28,23 @@
   {:flex         1
    :margin-right 12})
 
+(defn text
+  [{:keys [theme blur? type]}]
+  (let [base {:weight :medium}
+        theme-with-blur (if blur? :blue theme)
+        matcher [theme-with-blur type]
+        color
+        (case matcher
+          ([:dark :main] [:light :main])     (colors/theme-colors colors/neutral-100
+                                                                  colors/white
+                                                                  theme)
+          [:blur :main]                      colors/white-70-blur
+          ([:dark :danger] [:light :danger]) (colors/theme-colors colors/danger-50
+                                                                  colors/danger-60
+                                                                  theme)
+          [:blur :danger]                    colors/danger-60)]
+    (assoc-in base [:style :color] color)))
+
 (defn- neutral-color
   [theme blur?]
   (if blur?
@@ -41,8 +58,14 @@
    :margin-top   1})
 
 (defn icon-color
-  [{:keys [theme blur?]}]
-  (neutral-color theme blur?))
+  [{:keys [theme blur? type]}]
+  (let [theme-with-blur (if blur? :blue theme)
+        matcher         [theme-with-blur type]]
+    (case matcher
+      ([:dark :main] [:light :main])     (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
+      [:blur :main]                      colors/white-70-blur
+      ([:dark :danger] [:light :danger]) (colors/theme-colors colors/danger-50 colors/danger-60 theme)
+      [:blur :danger]                    colors/danger-60)))
 
 (defn desc
   [{:keys [theme blur?]}]

src/quo/components/drawers/drawer_action/view.cljs

@@ -10,11 +10,13 @@
     [schema.core :as schema]))
 
 (defn view-internal
-  [{:keys [action icon description state title on-press
-           customization-color blur?]
-    :or   {customization-color :blue
-           blur?               false}}]
+  [{:keys       [action icon description state title on-press customization-color
+                 blur? accessibility-label]
+    action-type :type
+    :or         {customization-color :blue
+                 blur?               false}}]
   (let [theme                  (quo.theme/use-theme)
+        action-type            (or action-type :main)
         [pressed? set-pressed] (rn/use-state false)
         on-press-in            (rn/use-callback #(set-pressed true))
         on-press-out           (rn/use-callback #(set-pressed false))]
@@ -29,16 +31,21 @@
                                              :pressed?            pressed?
                                              :description?        (not-empty description)
                                              :blur?               blur?})
-      :accessibility-label :container}
+      :accessibility-label accessibility-label}
      (when icon
        [icon/icon icon
         {:accessibility-label :left-icon
          :container-style     (style/left-icon)
          :color               (style/icon-color {:theme theme
+                                                 :type  action-type
                                                  :blur? blur?})}])
 
-     [rn/view {:style (style/text-container)}
-      [text/text {:weight :medium}
+     [rn/view
+      {:style (style/text-container)}
+      [text/text
+       (style/text {:theme theme
+                    :type  action-type
+                    :blur? blur?})
        title]
 
       (when (seq description)
@@ -61,6 +68,7 @@
        [icon/icon :i/chevron-right
         {:accessibility-label :arrow-icon
          :color               (style/icon-color {:theme theme
+                                                 :type  action-type
                                                  :blur? blur?})}]
 
        (= state :selected)

src/quo/components/messages/author/style.cljs

@@ -3,39 +3,14 @@
     [quo.foundations.colors :as colors]
     [react-native.platform :as platform]))
 
-(defn- primary-name-top-offset
-  [size]
-  (when (= size 15)
-    (cond platform/ios?     1
-          platform/android? -0.5
-          :else             0)))
-
-(defn- primary-name-margin-bottom-offset
-  [size]
-  (when (and (= size 15)
-             (or platform/ios? platform/android?))
-    -0.25))
-
-(defn- primary-name-layout-offsets
-  [size]
-  ;; NOTE(seanstrom): We need to sometimes offset the primary-name to align the baseline of the text
-  ;; while avoiding shifting elements downward.
-  {:top           (primary-name-top-offset size)
-   :margin-bottom (primary-name-margin-bottom-offset size)})
-
 (defn container
   [size]
-  {:flex-shrink    1
-   :flex-wrap      :nowrap
-   :flex-direction :row
-   :align-items    :baseline
-   ;; NOTE(seanstrom): Because we're offseting the primary-name we need to inverse the offset on the
-   ;; container to avoid shifting elements downward
-   :top            (* -1 (primary-name-top-offset size))})
-
-(def details-container
-  {:flex-direction :row
-   :margin-left    8})
+  (cond->
+    {:flex-shrink    1
+     :flex-wrap      :nowrap
+     :flex-direction :row
+     :align-items    :center
+     :height         (if (= size 15) 22 18)}))
 
 (defn middle-dot
   [theme]
@@ -48,25 +23,25 @@
 
 (defn primary-name
   [muted? theme size]
-  (merge (primary-name-layout-offsets size)
-         {:color       (if muted?
-                         colors/neutral-50
-                         (colors/theme-colors colors/neutral-100 colors/white theme))
-          :flex-shrink 1}))
+  {:color           (if muted?
+                      colors/neutral-50
+                      (colors/theme-colors colors/neutral-100 colors/white theme))
+   ;; iOS: primary-name height is 22.3 / 18.7
+   ;; Android: primary-name height is 21.8 / 18.5
+   :margin-vertical (if (= size 15)
+                      (if platform/ios? -0.15 0)
+                      (if platform/ios? -0.35 -0.25))
+   :flex-shrink     1})
 
 (defn secondary-name
   [theme]
   {:flex-shrink 999999
    :color       (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)})
 
 (defn icon-container
-  [is-first?]
+  [is-first? size]
   {:margin-left (if is-first? 4 2)
-   ;; NOTE(seanstrom): Because we're using flex baseline to align elements
-   ;; we need to offset the icon container to match the designs.
-   :top         (cond platform/ios?     1
-                      platform/android? 2
-                      :else             0)})
+   :padding-top (if (= size 15) 6 4)})
 
 (defn time-text
   [theme]

src/quo/components/messages/author/view.cljs

@@ -13,7 +13,35 @@
   [{:keys [primary-name secondary-name style short-chat-key time-str contact? verified? untrustworthy?
            muted? size]
     :or   {size 13}}]
-  (let [theme (quo.theme/use-theme)]
+  (let [theme (quo.theme/use-theme)
+
+        short-chat-key-component
+        (when (and (not verified?) short-chat-key)
+          [text/text
+           {:weight          :monospace
+            :size            :label
+            :number-of-lines 1
+            :style           (style/chat-key-text theme)}
+           short-chat-key])
+
+        time-str-component
+        (when time-str
+          [text/text
+           {:monospace           true
+            :size                :label
+            :accessibility-label :message-timestamp
+            :number-of-lines     1
+            :style               (style/time-text theme)}
+           time-str])
+
+        middle-dot-seperator-component
+        (when (and short-chat-key-component time-str-component)
+          [text/text
+           {:monospace       true
+            :size            :label
+            :number-of-lines 1
+            :style           (style/middle-dot theme)}
+           middle-dot])]
     [rn/view
      {:style (merge (style/container size) style)}
      [text/text
@@ -23,7 +51,7 @@
        :accessibility-label :author-primary-name
        :style               (style/primary-name muted? theme size)}
       primary-name]
-     (when (not (string/blank? secondary-name))
+     (when-not (string/blank? secondary-name)
        [:<>
         [text/text
          {:size            :label
@@ -41,38 +69,22 @@
        [icons/icon :main-icons2/contact
         {:size            12
          :no-color        true
-         :container-style (style/icon-container true)}])
+         :container-style (style/icon-container true size)}])
      (cond
        verified?
        [icons/icon :main-icons2/verified
         {:size            12
          :no-color        true
-         :container-style (style/icon-container contact?)}]
+         :container-style (style/icon-container contact? size)}]
        untrustworthy?
        [icons/icon :main-icons2/untrustworthy
         {:size            12
          :no-color        true
-         :container-style (style/icon-container contact?)}])
-     [rn/view {:style style/details-container}
-      (when (and (not verified?) short-chat-key)
-        [text/text
-         {:weight          :monospace
-          :size            :label
-          :number-of-lines 1
-          :style           (style/chat-key-text theme)}
-         short-chat-key])
-      (when (and (not verified?) time-str short-chat-key)
-        [text/text
-         {:monospace       true
-          :size            :label
-          :number-of-lines 1
-          :style           (style/middle-dot theme)}
-         middle-dot])
-      (when time-str
-        [text/text
-         {:monospace           true
-          :size                :label
-          :accessibility-label :message-timestamp
-          :number-of-lines     1
-          :style               (style/time-text theme)}
-         time-str])]]))
+         :container-style (style/icon-container contact? size)}])
+
+     (when (or short-chat-key-component time-str-component)
+       [rn/view {:style {:width 8}}])
+
+     short-chat-key-component
+     middle-dot-seperator-component
+     time-str-component]))

src/quo/components/selectors/react/view.cljs

@@ -5,7 +5,8 @@
     [react-native.core :as rn]))
 
 (defn view
-  [{:keys [reactions on-press on-long-press add-reaction? on-press-add use-case container-style]}]
+  [{:keys [reactions on-press on-long-press hide-new-reaction-button? on-press-add use-case
+           container-style]}]
   [rn/view {:style (merge style/container container-style)}
    (for [emoji-reaction reactions
          :let           [{:keys [emoji emoji-id emoji-reaction-id quantity own]} emoji-reaction]]
@@ -19,7 +20,7 @@
        :on-press            #(on-press emoji-reaction)
        :on-long-press       #(on-long-press emoji-reaction)
        :accessibility-label (str "emoji-reaction-" emoji-id)}])
-   (when add-reaction?
+   (when-not hide-new-reaction-button?
      [react-selector/view
       {:on-press            on-press-add
        :state               :add-reaction

src/quo/components/selectors/reactions_selector/style.cljs

@@ -1,12 +1,31 @@
 (ns quo.components.selectors.reactions-selector.style
   (:require
-    [quo.foundations.colors :as colors]))
+    [quo.foundations.colors :as colors]
+    [react-native.platform :as platform]))
 
 (defn container
   [pressed? theme]
-  {:padding          10
-   :border-radius    12
-   :border-width     1
-   :border-color     (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
-   :background-color (when pressed?
-                       (colors/theme-colors colors/neutral-10 colors/neutral-80-opa-40 theme))})
+  (merge
+   {:border-radius    12
+    :border-width     1
+    :border-color     (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
+    :background-color (when pressed?
+                        (colors/theme-colors colors/neutral-10 colors/neutral-80-opa-40 theme))}
+   (if platform/ios?
+     {:padding            9.5
+      :padding-horizontal 8}
+     {:padding 8})))
+
+(def emoji-text-style
+  (merge
+   {:line-height 20
+    :text-align  :center}
+   (if platform/ios?
+     {:line-height 20
+      :font-size   17
+      :text-align  :center}
+     {:font-size           18
+      :height              24
+      :width               24
+      :text-align          :center
+      :text-align-vertical :center})))

src/quo/components/selectors/reactions_selector/view.cljs

@@ -20,4 +20,6 @@
       :style                   (merge (style/container pressed? theme)
                                       container-style)
       :on-press                on-press}
-     [rn/text (reactions.resource/system-emojis emoji)]]))
+     [rn/text
+      {:style style/emoji-text-style}
+      (reactions.resource/system-emojis emoji)]]))