fixes #9205

src/status_im/ui/screens/chat/message/message.cljs

@@ -1,22 +1,19 @@
 (ns status-im.ui.screens.chat.message.message
   (:require [re-frame.core :as re-frame]
-            [status-im.chat.commands.core :as commands]
-            [status-im.chat.commands.protocol :as protocol]
             [status-im.chat.commands.receiving :as commands-receiving]
             [status-im.constants :as constants]
             [status-im.i18n :as i18n]
-            [status-im.ui.components.action-sheet :as action-sheet]
             [status-im.ui.components.colors :as colors]
             [status-im.ui.components.icons.vector-icons :as vector-icons]
             [status-im.ui.components.list-selection :as list-selection]
             [status-im.ui.components.popup-menu.views :as desktop.pop-up]
             [status-im.ui.components.react :as react]
+            [status-im.ui.screens.chat.message.sheets :as sheets]
             [status-im.ui.screens.chat.photos :as photos]
             [status-im.ui.screens.chat.styles.message.message :as style]
             [status-im.ui.screens.chat.utils :as chat.utils]
             [status-im.utils.contenthash :as contenthash]
-            [status-im.utils.platform :as platform]
+            [status-im.utils.platform :as platform])
-            [status-im.utils.config :as config])
   (:require-macros [status-im.utils.views :refer [defview letsubs]]))
 
 (defview message-content-command
@@ -145,25 +142,14 @@
 (defn message-not-sent-text
   [chat-id message-id]
   [react/touchable-highlight
-   {:on-press (fn [] (cond
+   {:on-press (fn [] (if platform/desktop?
-                       platform/ios?
-                       (action-sheet/show
-                        {:title   (i18n/label :message-not-sent)
-                         :options [{:label  (i18n/label :resend-message)
-                                    :action #(re-frame/dispatch
-                                              [:chat.ui/resend-message chat-id message-id])}
-                                   {:label        (i18n/label :delete-message)
-                                    :destructive? true
-                                    :action       #(re-frame/dispatch
-                                                    [:chat.ui/delete-message chat-id message-id])}]})
-                       platform/desktop?
                        (desktop.pop-up/show-desktop-menu
                         (desktop.pop-up/get-message-menu-items chat-id message-id))
-
+                       (do
-                       :else
+                         (re-frame/dispatch [:bottom-sheet/show-sheet
-                       (re-frame/dispatch
+                                             {:content        (sheets/options chat-id message-id)
-                        [:chat.ui/show-message-options {:chat-id    chat-id
+                                              :content-height 200}])
-                                                        :message-id message-id}])))}
+                         (react/dismiss-keyboard!))))}
    [react/view style/not-sent-view
     [react/text {:style style/not-sent-text}
      (i18n/label (if platform/desktop?

src/status_im/ui/screens/chat/message/options.cljs

@@ -1,38 +0,0 @@
-(ns status-im.ui.screens.chat.message.options
-  (:require-macros [status-im.utils.views :refer [defview]])
-  (:require [re-frame.core :as re-frame]
-            [status-im.ui.components.react :as react]
-            [status-im.ui.components.colors :as colors]
-            [status-im.ui.screens.chat.bottom-info :as bottom-info]
-            [status-im.ui.screens.chat.styles.main :as styles]
-            [status-im.ui.screens.chat.styles.message.options :as options.styles]
-            [status-im.ui.components.icons.vector-icons :as vector-icons]))
-
-(defn action-item [{:keys [label icon style on-press]}]
-  [react/touchable-highlight {:on-press on-press}
-   [react/view options.styles/row
-    [react/view
-     [vector-icons/icon icon style]]
-    [react/view (merge options.styles/label style)
-     [react/i18n-text {:style   (merge options.styles/label-text style)
-                       :key     label}]]]])
-
-(defn view []
-  (let [{:keys [chat-id message-id]} @(re-frame/subscribe [:chats/current-chat-ui-prop :message-options])
-        close-message-options-fn #(re-frame/dispatch [:chat.ui/set-chat-ui-props {:show-message-options? false}])]
-    [bottom-info/overlay {:on-click-outside close-message-options-fn}
-     [bottom-info/container (* styles/item-height 2)
-      [react/view
-       [react/view options.styles/title
-        [react/i18n-text {:style options.styles/title-text :key :message-not-sent}]]
-       [action-item {:label    :resend-message
-                     :icon     :main-icons/refresh
-                     :on-press #(do
-                                  (close-message-options-fn)
-                                  (re-frame/dispatch [:chat.ui/resend-message chat-id message-id]))}]
-       [action-item {:label    :delete-message
-                     :icon     :main-icons/delete
-                     :style    {:color colors/red}
-                     :on-press #(do
-                                  (close-message-options-fn)
-                                  (re-frame/dispatch [:chat.ui/delete-message chat-id message-id]))}]]]]))

src/status_im/ui/screens/chat/message/sheets.cljs

@@ -0,0 +1,26 @@
+(ns status-im.ui.screens.chat.message.sheets
+  (:require [re-frame.core :as re-frame]
+            [status-im.ui.components.react :as react]
+            [status-im.ui.screens.chat.styles.message.sheets :as sheets.styles]
+            [status-im.ui.components.list-item.views :as list-item]))
+
+(defn hide-sheet-and-dispatch [event]
+  (re-frame/dispatch [:bottom-sheet/hide-sheet])
+  (re-frame/dispatch event))
+
+(defn options [chat-id message-id]
+  (fn []
+    [react/view
+     [react/i18n-text {:style sheets.styles/sheet-text :key :message-not-sent}]
+     [list-item/list-item
+      {:theme               :action
+       :title               :t/resend-message
+       :icon                :main-icons/refresh
+       :accessibility-label :resend-message-button
+       :on-press            #(hide-sheet-and-dispatch [:chat.ui/resend-message chat-id message-id])}]
+     [list-item/list-item
+      {:theme               :action-destructive
+       :title               :t/delete-message
+       :icon                :main-icons/delete
+       :accessibility-label :delete-transaction-button
+       :on-press            #(hide-sheet-and-dispatch [:chat.ui/delete-message chat-id message-id])}]]))

src/status_im/ui/screens/chat/styles/message/options.cljs

@@ -1,33 +0,0 @@
-(ns status-im.ui.screens.chat.styles.message.options
-  (:require [status-im.ui.components.colors :as colors]
-            [status-im.utils.styles :as styles]))
-
-(styles/def row
-  {:flex-direction     :row
-   :background-color   :white
-   :align-items        :center
-   :padding-horizontal 16
-   :ios                {:height 36}
-   :desktop            {:height 36}
-   :android            {:height 36}})
-
-(def title
-  {:padding-horizontal 16
-   :padding-top        10
-   :padding-bottom     10})
-
-(def title-text
-  {:font-weight "700"})
-
-(def label
-  {:padding-horizontal 16})
-
-(def label-text
-  {:typography :caption})
-
-(def icon
-  {:width            40
-   :height           40
-   :border-radius    20
-   :align-items      :center
-   :justify-content  :center})

src/status_im/ui/screens/chat/styles/message/sheets.cljs

@@ -0,0 +1,8 @@
+(ns status-im.ui.screens.chat.styles.message.sheets
+  (:require [status-im.ui.components.colors :as colors]))
+
+(def sheet-text
+  {:color       colors/gray
+   :padding     24
+   :line-height 22
+   :font-size   15})

src/status_im/ui/screens/chat/views.cljs

@@ -21,7 +21,6 @@
             [status-im.ui.screens.chat.message.datemark :as message-datemark]
             [status-im.ui.screens.chat.message.gap :as gap]
             [status-im.ui.screens.chat.message.message :as message]
-            [status-im.ui.screens.chat.message.options :as message-options]
             [status-im.ui.screens.chat.stickers.views :as stickers]
             [status-im.ui.screens.chat.styles.main :as style]
             [status-im.ui.screens.chat.toolbar-content :as toolbar-content]
@@ -398,7 +397,6 @@
   (letsubs [{:keys [public? chat-id chat-name show-input? group-chat contact] :as current-chat}
             [:chats/current-chat]
             current-chat-id       [:chats/current-chat-id]
-            show-message-options? [:chats/current-chat-ui-prop :show-message-options?]
             show-stickers?        [:chats/current-chat-ui-prop :show-stickers?]
             two-pane-ui-enabled?  [:two-pane-ui-enabled?]
             anim-translate-y      (animation/create-value
@@ -438,9 +436,7 @@
      (when show-input?
        [input/container])
      (when show-stickers?
-       [stickers/stickers-view])
+       [stickers/stickers-view])]))
-     (when show-message-options?
-       [message-options/view])]))
 
 (defview chat []
   [chat-root false])