From 594776988132e2678a36421ed555925a79be692a Mon Sep 17 00:00:00 2001
From: Jamie Caprani <jamiecaprani@gmail.com>
Date: Thu, 1 Dec 2022 11:58:50 +0000
Subject: [PATCH] chore: update action drawer with designer feedback (#14465)

---
 .../components/drawers/action_drawers.cljs    | 16 +++++--
 .../quo_preview/drawers/action_drawers.cljs   | 47 +++++++++++--------
 2 files changed, 39 insertions(+), 24 deletions(-)

diff --git a/src/quo2/components/drawers/action_drawers.cljs b/src/quo2/components/drawers/action_drawers.cljs
index 22f8f504c5..c70f9bd28a 100644
--- a/src/quo2/components/drawers/action_drawers.cljs
+++ b/src/quo2/components/drawers/action_drawers.cljs
@@ -6,12 +6,13 @@
 
 (defn- get-icon-color [danger?]
   (if danger?
-    (colors/theme-colors colors/danger-50 colors/danger-60)
+    colors/danger-50
     (colors/theme-colors colors/neutral-50 colors/neutral-40)))
 
 (defn divider []
   [rn/view {:style {:border-top-width 1
-                    :border-top-color (colors/theme-colors colors/neutral-10 colors/neutral-80)
+                    :border-top-color (colors/theme-colors
+                                       colors/neutral-10 colors/neutral-90)
                     :margin-top       8
                     :margin-bottom    7
                     :align-items      :center
@@ -27,10 +28,15 @@
   (when action-props
     [:<> {:key label}
      (when add-divider? [divider])
-     [rn/touchable-opacity {:on-press on-press}
+     [rn/touchable-highlight {:style          {:border-radius     12
+                                               :height (if sub-label 58 50)
+                                               :margin-horizontal 8}
+                              :underlay-color (colors/theme-colors colors/neutral-5 colors/neutral-90)
+                              :on-press       on-press}
       [rn/view {:style
-                {:height            (if sub-label 56 47)
-                 :margin-horizontal 20
+                {:height (if sub-label 58 50)
+
+                 :margin-horizontal 12
                  :flex-direction    :row}}
        [rn/view {:style
                  {:height        20
diff --git a/src/status_im2/contexts/quo_preview/drawers/action_drawers.cljs b/src/status_im2/contexts/quo_preview/drawers/action_drawers.cljs
index efa3c067c1..d736e29b03 100644
--- a/src/status_im2/contexts/quo_preview/drawers/action_drawers.cljs
+++ b/src/status_im2/contexts/quo_preview/drawers/action_drawers.cljs
@@ -16,25 +16,34 @@
 
 (def options-with-consequences [{:icon    :i/delete
                                  :danger? true
-                                 :label   "Clear history"}])
+                                 :label   "Clear history"
+                                 :add-divider? true
+                                 :on-press #(js/alert "clear history")}])
 
 (defn render-action-sheet [state]
-  [quo2/action-drawer (cond-> [[{:icon  :i/friend
-                                 :label "View channel members and details"}
-                                {:icon  :i/communities
-                                 :label "Mark as read"}
-                                {:icon       :i/muted
-                                 :label      (if (:muted? @state) "Unmute channel" "Mute channel")
-                                 :right-icon :i/chevron-right
-                                 :sub-label  (when (:muted? @state) "Muted for 15 min")}
-                                {:icon       :i/scan
-                                 :right-icon :i/chevron-right
-                                 :label      "Fetch messages"}
-                                {:icon  :i/add-user
-                                 :label "Share link to the channel"}]]
+  [rn/view {:height 300
+            :background-color (colors/theme-colors colors/white colors/neutral-95)}
+   [quo2/action-drawer (cond-> [[{:icon     :i/friend
+                                  :label    "View channel members and details"
+                                  :on-press #(js/alert "View channel members and details")}
+                                 {:icon     :i/communities
+                                  :label    "Mark as read"
+                                  :on-press #(js/alert "Mark as read")}
+                                 {:icon       :i/muted
+                                  :label      (if (:muted? @state) "Unmute channel" "Mute channel")
+                                  :on-press   #(js/alert (if (:muted? @state) "Unmute channel" "Mute channel"))
+                                  :right-icon :i/chevron-right
+                                  :sub-label  (when (:muted? @state) "Muted for 15 min")}
+                                 {:icon       :i/scan
+                                  :on-press   #(js/alert "Fetch messages")
+                                  :right-icon :i/chevron-right
+                                  :label      "Fetch messages"}
+                                 {:icon     :i/add-user
+                                  :on-press #(js/alert "Share link to the channel")
+                                  :label    "Share link to the channel"}]]
 
-                        (:show-red-options? @state)
-                        (conj options-with-consequences))])
+                         (:show-red-options? @state)
+                         (conj options-with-consequences))]])
 
 (defn cool-preview []
   (let [state         (reagent/atom {:muted?         true
@@ -51,10 +60,10 @@
          "See in bottom sheet"]
         [rn/view {:padding-vertical 60}
          (render-action-sheet state)]]])))
-(defn preview-action-drawers []
-  [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)
-            :flex             1}
 
+(defn preview-action-drawers []
+  [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-95)
+            :flex             1}
    [rn/flat-list {:flex                      1
                   :nestedScrollEnabled       true
                   :keyboardShouldPersistTaps :always