diff --git a/src/status_im/ui/components/connectivity/styles.cljs b/src/status_im/ui/components/connectivity/styles.cljs index 8d0563fe38..5725290937 100644 --- a/src/status_im/ui/components/connectivity/styles.cljs +++ b/src/status_im/ui/components/connectivity/styles.cljs @@ -3,21 +3,23 @@ (:require [status-im.ui.components.colors :as colors] [status-im.utils.platform :as platform])) -(defnstyle text-wrapper [top opacity window-width pending?] +(defnstyle text-wrapper [{:keys [top window-width pending? modal?]}] (cond-> - {:opacity opacity + {:opacity 1.0 :background-color colors/gray-notifications :height 35 :position :absolute} platform/desktop? (assoc - :left 0 - :right 0) + :left 0 + :right 0) (not platform/desktop?) (assoc - :ios {:z-index 0} - :width window-width - :top (+ (+ 56 top) (if pending? 35 0))))) + :ios {:z-index 0} + :width window-width + :top (+ top + (if (and modal? platform/android?) 31 56) + (if pending? 35 0))))) (def text {:text-align :center diff --git a/src/status_im/ui/components/connectivity/view.cljs b/src/status_im/ui/components/connectivity/view.cljs index 079c8fcf45..c6bed1d691 100644 --- a/src/status_im/ui/components/connectivity/view.cljs +++ b/src/status_im/ui/components/connectivity/view.cljs @@ -6,6 +6,22 @@ [status-im.ui.components.connectivity.styles :as styles] [status-im.i18n :as i18n])) +(defview error-label + [{:keys [view-id label mailserver-error?] :as opts}] + + {:should-component-update + (fn [_ [_ old-props] [_ new-props]] + ;; prevents flickering on navigation + (= (:view-id old-props) (:view-id new-props)))} + (let [wrapper-style (styles/text-wrapper + (assoc opts :modal? (= view-id :chat-modal)))] + [react/view {:style wrapper-style + :accessibility-label :connection-status-text} + [react/text {:style styles/text + :on-press (when mailserver-error? + #(re-frame/dispatch [:inbox/reconnect]))} + (i18n/label label)]])) + (defview error-view [{:keys [top]}] (letsubs [offline? [:offline?] disconnected? [:disconnected?] @@ -21,9 +37,10 @@ fetching? :t/fetching-messages :else nil)] (let [pending? (and (:pending current-chat-contact) (= :chat view-id))] - [react/view {:style (styles/text-wrapper top 1.0 window-width pending?) - :accessibility-label :connection-status-text} - [react/text {:style styles/text - :on-press (when mailserver-error? - #(re-frame/dispatch [:inbox/reconnect]))} - (i18n/label label)]])))) + [error-label + {:view-id view-id + :top top + :window-width window-width + :pending? pending? + :label label + :mailserver-error? mailserver-error?}]))))