expanded toolbar buttons' touch area

src/status_im/chat/styles/screen.cljs

@@ -49,10 +49,10 @@
   {:flex            1
    :justify-content :center
    :android         {:align-items    :flex-start
-                     :margin-left    (if show-actions 56 32)
+                     :margin-left    (if show-actions 66 18)
                      :padding-bottom 6}
    :ios             {:align-items :center
-                     :margin-left (if show-actions 40 16)}})
+                     :margin-left (if show-actions 54 6)}})
 
 (def chat-name-text
   {:color      color-gray6

src/status_im/components/context_menu.cljs

@@ -54,14 +54,14 @@
                                       (handler))))})
   nil)
 
-(defn context-menu [trigger options & [customStyles]]
+(defn context-menu [trigger options & customStyles trigger-style]
   (if ios?
-    [touchable-highlight
-     {:on-press #(open-ios-menu options)}
+    [touchable-highlight {:style    trigger-style
+                          :on-press #(open-ios-menu options)}
      [view
       trigger]]
     [menu {:onSelect #(when % (do (%) nil))}
-     [menu-trigger trigger]
+     [menu-trigger {:style trigger-style} trigger]
      [menu-options (context-menu-options customStyles)
       (for [{:keys [style value destructive?] :as option} options]
         ^{:key option}

src/status_im/components/toolbar_new/styles.cljs

@@ -31,14 +31,14 @@
 (defnstyle toolbar-nav-actions-container
   [actions]
   {:flex-direction :row
-   :margin-left    16
+   :margin-left    4
    :ios            {:width (when (and actions (pos? (count actions)))
                              (-> (+ toolbar-icon-width toolbar-icon-spacing)
                                  (* (count actions))))}})
 
 (defstyle toolbar-title-container
   {:flex       1
-   :android    {:padding-left 30}
+   :android    {:padding-left 18}
    :ios        {:align-items  :center}})
 
 (defstyle toolbar-title-text
@@ -54,14 +54,13 @@
 
 (defn toolbar-actions-container [actions-count custom]
   (merge {:flex-direction :row}
-         (when-not custom {:margin-right 16})
+         (when-not custom {:margin-right 4})
          (when (and (zero? actions-count) (not custom))
            {:width (+ toolbar-icon-width toolbar-icon-spacing)})))
 
 (def toolbar-action
   {:width           toolbar-icon-width
    :height          toolbar-icon-height
-   :margin-left     toolbar-icon-spacing
    :align-items     :center
    :justify-content :center})
 
@@ -70,7 +69,7 @@
 
 (defstyle toolbar-with-search-content
   {:flex    1
-   :android {:padding-left 30}
+   :android {:padding-left 18}
    :ios     {:align-items :center}})
 
 (defstyle toolbar-search-input
@@ -90,3 +89,6 @@
   {:width  24
    :height 24})
 
+(def toolbar-button
+  {:paddingVertical   16
+   :paddingHorizontal 12})

src/status_im/components/toolbar_new/view.cljs

@@ -34,10 +34,12 @@
       [view (st/toolbar-nav-actions-container actions)
        (when-not hide-nav?
          (if nav-action
-           [touchable-highlight {:on-press (:handler nav-action)}
+           [touchable-highlight {:style    st/toolbar-button
+                                 :on-press (:handler nav-action)}
             [view
              [image (:image nav-action)]]]
-           [touchable-highlight {:on-press            #(dispatch [:navigate-back])
+           [touchable-highlight {:style               st/toolbar-button
+                                 :on-press            #(dispatch [:navigate-back])
                                  :accessibility-label id/toolbar-back-button}
             [view
              [image {:source {:uri :icon_back_dark}
@@ -55,13 +57,17 @@
            (with-meta
              (cond (= action-image :blank)
                    [view st/toolbar-action]
+
                    action-options
                    [context-menu
-                    [view st/toolbar-action
-                     [image action-image]]
-                    action-options]
+                    [view st/toolbar-action [image action-image]]
+                    action-options
+                    nil
+                    st/toolbar-button]
+
                    :else
-                   [touchable-highlight {:on-press action-handler}
+                   [touchable-highlight {:style    st/toolbar-button
+                                         :on-press action-handler}
                     [view st/toolbar-action
                      [image action-image]]])
              {:key (str "action-" action-image)}))

src/status_im/transactions/styles/screens.cljs

@@ -12,7 +12,7 @@
 (defstyle toolbar-title-container
   {:flex           1
    :flex-direction :row
-   :padding-left   30
+   :padding-left   18
    :ios            {:align-items     :center
                     :justify-content :center}})