move reaction-drawer and fix some icons2 (#14211)

* move reaction-drawer and fix some icons2

src/quo2/components/buttons/button.cljs

@@ -176,7 +176,7 @@
   (let [pressed (reagent/atom false)]
     (fn [{:keys [on-press disabled type size before after above width
                  override-theme override-background-color
-                 on-long-press accessibility-label icon style]
+                 on-long-press accessibility-label icon icon-no-color style]
           :or   {type :primary
                  size 40}}
          children]
@@ -226,8 +226,9 @@
                                       :size            icon-size}]])
           [rn/view
            (cond
-             icon
+             (or icon icon-no-color)
              [quo2.icons/icon children {:color icon-color
+                                        :no-color icon-no-color
                                         :size  icon-size}]
 
              (string? children)

src/quo2/components/list_items/menu_item.cljs

@@ -2,7 +2,7 @@
   (:require [quo.react-native :as rn]
             [quo2.foundations.colors :as colors :refer [theme-colors]]
             [quo2.components.markdown.text :as text]
-            [status-im.ui.components.icons.icons :as icons]))
+            [quo2.components.icon :as icons]))
 
 (defn themes [type]
   (case type

src/quo2/components/reactions/reaction.cljs

@@ -1,9 +1,9 @@
 (ns quo2.components.reactions.reaction
-  (:require [quo2.components.markdown.text :as quo2-text]
+  (:require [quo2.components.markdown.text :as quo2.text]
             [quo.react-native :as rn]
             [quo.theme :as theme]
             [quo2.foundations.colors :as colors]
-            [status-im.ui.components.icons.icons :as icons]))
+            [quo2.components.icon :as icons]))
 
 (def reaction-styling
   {:flex-direction :row
@@ -24,9 +24,8 @@
                                           :border-color (if dark?
                                                           colors/neutral-70
                                                           colors/neutral-30)})}
-     [icons/icon :main-icons/add-reaction20
-      {:width 20
-       :height 20
+     [icons/icon :main-icons2/add
+      {:size 20
        :color (if dark?
                 colors/white
                 colors/neutral-100)}]]))
@@ -54,9 +53,8 @@
                                            (and (not dark?) (not neutral?)) (assoc :border-color colors/neutral-30
                                                                                    :border-width 1)))}
      [icons/icon emoji {:no-color true
-                        :width 16
-                        :height 16}]
-     [quo2-text/text {:size :paragraph-2
+                        :size     16}]
+     [quo2.text/text {:size :paragraph-2
                       :weight :semi-bold
                       :color text-color
                       :flex-direction :row
@@ -65,4 +63,3 @@
       (if clicks-positive?
         (str " " numeric-value)
         "")]]))
-

src/status_im/constants.cljs

@@ -50,12 +50,12 @@
                     emoji-reaction-sad         (:sad resources/reactions-old)
                     emoji-reaction-angry       (:angry resources/reactions-old)})
 
-(def reactions {emoji-reaction-love        (:love resources/reactions)
-                emoji-reaction-thumbs-up   (:thumbs-up resources/reactions)
-                emoji-reaction-thumbs-down (:thumbs-down resources/reactions)
-                emoji-reaction-laugh       (:laugh resources/reactions)
-                emoji-reaction-sad         (:sad resources/reactions)
-                emoji-reaction-angry       (:angry resources/reactions)})
+(def reactions {emoji-reaction-love        :main-icons2/love
+                emoji-reaction-thumbs-up   :main-icons2/angry
+                emoji-reaction-thumbs-down :main-icons2/sad
+                emoji-reaction-laugh       :main-icons2/laugh
+                emoji-reaction-sad         :main-icons2/thumbs-up
+                emoji-reaction-angry       :main-icons2/thumbs-down})
 
 (def ^:const invitation-state-unknown 0)
 (def ^:const invitation-state-requested 1)

src/status_im/react_native/resources.cljs

@@ -90,11 +90,3 @@
    :laugh       (js/require "../resources/images/reactions/laugh.png")
    :thumbs-up   (js/require "../resources/images/reactions/thumbs-up.png")
    :thumbs-down (js/require "../resources/images/reactions/thumbs-down.png")})
-
-(def reactions
-  {:love        :main-icons/love16
-   :angry       :main-icons/angry16
-   :sad         :main-icons/sad16
-   :laugh       :main-icons/laugh16
-   :thumbs-up   :main-icons/thumbs-up16
-   :thumbs-down :main-icons/thumbs-down16})

src/status_im/ui2/screens/chat/components/reaction_drawer.cljs

@@ -1,45 +1,45 @@
-(ns status-im.ui.screens.chat.bottom-sheets.context-drawer
+(ns status-im.ui2.screens.chat.components.reaction-drawer
   (:require [quo.react-native :as rn]
-            [status-im.ui.components.react :as react]
             [re-frame.core :as re-frame]
-            [status-im.ui.screens.wallet.components.views :as components]
             [status-im.constants :as constants]
             [quo2.components.buttons.button :as quo2.button]
             [quo2.foundations.colors :as quo2.colors]
-            [quo2.components.list-items.menu-item :as quo2.menu-item]))
+            [quo2.components.list-items.menu-item :as quo2.menu-item]
+            [quo2.components.separator :as quo2.separator]))
 
 (defn message-options [actions own-reactions send-emoji]
   (fn []
     (let [main-actions (filter #(= (:type %) :main) actions)
           danger-actions (filter #(= (:type %) :danger) actions)
           admin-actions (filter #(= (:type %) :admin) actions)]
-      [react/view {:flex 1}
-       [react/view {:style {:width "100%"
-                            :flex-direction :row
-                            :justify-content :space-between
-                            :padding-horizontal 30
-                            :padding-top 5
-                            :padding-bottom 15}}
+      [rn/view {:flex 1}
+       [rn/view {:style {:width "100%"
+                         :flex-direction :row
+                         :justify-content :space-between
+                         :padding-horizontal 30
+                         :padding-top 5
+                         :padding-bottom 15}}
         (doall
-         (for [[id resource] constants/reactions-old
-               :let          [active (own-reactions id)]]
+         (for [[id icon] constants/reactions
+               :let      [active (own-reactions id)]]
+           ;;TODO reactions selector should be used https://www.figma.com/file/WQZcp6S0EnzxdTL4taoKDv/Design-System?node-id=9961%3A166549
+           ;; not implemented yet
            ^{:key id}
            [quo2.button/button (merge
-                                {:width               40
-                                 :size                40
+                                {:size                40
                                  :type                :grey
+                                 :icon                true
+                                 :icon-no-color       true
                                  :accessibility-label :reply-cancel-button
                                  :on-press            #(do
                                                          (send-emoji id)
                                                          (re-frame/dispatch [:bottom-sheet/hide]))}
-                                (when active {:style {:background-color quo2.colors/neutral-70}}))
-            [rn/image {:source resource
-                       :style  {:height 20
-                                :width  20}}]]))]
+                                (when active {:style {:background-color quo2.colors/neutral-10}}))
+            icon]))]
        [rn/view {:style {:padding-horizontal 8}}
         (for [action main-actions]
-          ^{:key (:id action)}
           (let [on-press (:on-press action)]
+            ^{:key (:id action)}
             [quo2.menu-item/menu-item
              {:type                :main
               :title               (:label action)
@@ -49,11 +49,10 @@
                                       (when on-press (on-press))
                                       (re-frame/dispatch [:bottom-sheet/hide]))}]))
         (when-not (empty? danger-actions)
-          [rn/view {:style {:padding-vertical 8}}
-           [components/separator]])
+          [quo2.separator/separator])
         (for [action danger-actions]
-          ^{:key (:id action)}
           (let [on-press (:on-press action)]
+            ^{:key (:id action)}
             [quo2.menu-item/menu-item
              {:type                :danger
               :title               (:label action)
@@ -63,11 +62,10 @@
                                       (when on-press (on-press))
                                       (re-frame/dispatch [:bottom-sheet/hide]))}]))
         (when-not (empty? admin-actions)
-          [rn/view {:style {:padding-vertical 8}}
-           [components/separator]])
+          [quo2.separator/separator])
         (for [action admin-actions]
-          ^{:key (:id action)}
           (let [on-press (:on-press action)]
+            ^{:key (:id action)}
             [quo2.menu-item/menu-item
              {:type                :danger
               :title               (:label action)

src/status_im/ui2/screens/chat/messages/message.cljs

@@ -20,7 +20,7 @@
             [status-im.ui.components.icons.icons :as icons]
             [status-im.ui.components.list.views :as list]
             [status-im.ui.components.react :as react]
-            [status-im.ui.screens.chat.bottom-sheets.context-drawer :as message-context-drawer]
+            [status-im.ui2.screens.chat.components.reaction-drawer :as reaction-drawer]
             [status-im.ui.screens.chat.image.preview.views :as preview]
             [status-im.ui.screens.chat.message.audio :as message.audio]
             [status-im.ui.screens.chat.message.command :as message.command]
@@ -425,39 +425,39 @@
       [{:type     :main
         :on-press #(re-frame/dispatch [:chat.ui/edit-message message])
         :label    (i18n/label :t/edit-message)
-        :icon     :main-icons/edit-context20
+        :icon     :main-icons2/edit
         :id       :edit}])
     (when show-input?
       [{:type     :main
         :on-press #(re-frame/dispatch [:chat.ui/reply-to-message message])
         :label    (i18n/label :t/message-reply)
-        :icon     :main-icons/reply-context20
+        :icon     :main-icons2/reply
         :id       :reply}])
     [{:type     :main
       :on-press #(react/copy-to-clipboard
                   (components.reply/get-quoted-text-with-mentions
                    (get content :parsed-text)))
       :label    (i18n/label :t/copy-text)
-      :icon     :main-icons/copy-context20
+      :icon     :main-icons2/copy
       :id       :copy}]
     (when message-pin-enabled
       [{:type     :main
         :on-press #(pin-message message)
         :label    (i18n/label (if pinned (if community? :t/unpin-from-channel :t/unpin-from-chat) (if community? :t/pin-to-channel :t/pin-to-chat)))
-        :icon     :main-icons/pin-context20
+        :icon     :main-icons2/pin
         :id       (if pinned :unpin :pin)}])
     [{:type     :danger
       :on-press #(re-frame/dispatch
                   [:chat.ui/delete-message-for-me message
                    config/delete-message-for-me-undo-time-limit-ms])
       :label    (i18n/label :t/delete-for-me)
-      :icon     :main-icons/delete-context20
+      :icon     :main-icons2/delete
       :id       :delete-for-me}]
     (when (and outgoing config/delete-message-enabled?)
       [{:type     :danger
         :on-press #(re-frame/dispatch [:chat.ui/soft-delete-message message])
         :label    (i18n/label :t/delete-for-everyone)
-        :icon     :main-icons/delete-context20
+        :icon     :main-icons2/delete
         :id       :delete-for-all}]))))
 
 (defn collapsible-text-message [_ _]
@@ -728,7 +728,7 @@
                              (send-emoji {:emoji-id emoji-id}))))
         on-open-drawer (fn [actions]
                          (re-frame/dispatch [:bottom-sheet/show-sheet
-                                             {:content (message-context-drawer/message-options
+                                             {:content (reaction-drawer/message-options
                                                         actions
                                                         (into #{} (js->clj own-reactions))
                                                         #(on-emoji-press %))}]))