diff --git a/src/quo/components/gradient/gradient_cover/style.cljs b/src/quo/components/gradient/gradient_cover/style.cljs index e758e9af6d..3911127264 100644 --- a/src/quo/components/gradient/gradient_cover/style.cljs +++ b/src/quo/components/gradient/gradient_cover/style.cljs @@ -1,6 +1,6 @@ (ns quo.components.gradient.gradient-cover.style) (defn root-container - [opacity] - {:height 252 + [opacity height] + {:height (or height 252) :opacity opacity}) diff --git a/src/quo/components/gradient/gradient_cover/view.cljs b/src/quo/components/gradient/gradient_cover/view.cljs index 1d8fe5068e..d038cf1475 100644 --- a/src/quo/components/gradient/gradient_cover/view.cljs +++ b/src/quo/components/gradient/gradient_cover/view.cljs @@ -6,7 +6,7 @@ [react-native.linear-gradient :as linear-gradient])) (defn- view-internal - [{:keys [customization-color opacity container-style] :or {customization-color :blue}}] + [{:keys [customization-color opacity container-style height] :or {customization-color :blue}}] (let [color-top (colors/custom-color customization-color 50 20) color-bottom (colors/custom-color customization-color 50 0)] [linear-gradient/linear-gradient @@ -14,6 +14,6 @@ :colors [color-top color-bottom] :start {:x 0 :y 0} :end {:x 0 :y 1} - :style (merge (style/root-container opacity) container-style)}])) + :style (merge (style/root-container opacity height) container-style)}])) (def view (quo.theme/with-theme view-internal)) diff --git a/src/quo/components/share/share_qr_code/style.cljs b/src/quo/components/share/share_qr_code/style.cljs index 96f8ef5bbc..9b13f07dd9 100644 --- a/src/quo/components/share/share_qr_code/style.cljs +++ b/src/quo/components/share/share_qr_code/style.cljs @@ -16,6 +16,12 @@ :padding-top 12 :padding-bottom 8}) +(def gradient-bg + {:position :absolute + :top 0 + :left 0 + :right 0}) + ;;; Header (def header-container {:flex-direction :row diff --git a/src/quo/components/share/share_qr_code/view.cljs b/src/quo/components/share/share_qr_code/view.cljs index fa02c018b6..f614cec244 100644 --- a/src/quo/components/share/share_qr_code/view.cljs +++ b/src/quo/components/share/share_qr_code/view.cljs @@ -4,14 +4,13 @@ [oops.core :as oops] [quo.components.avatars.account-avatar.view :as account-avatar] [quo.components.buttons.button.view :as button] + [quo.components.gradient.gradient-cover.view :as gradient-cover] [quo.components.markdown.text :as text] [quo.components.share.qr-code.view :as qr-code] [quo.components.share.share-qr-code.style :as style] [quo.components.tabs.tab.view :as tab] [quo.theme] - [react-native.blur :as blur] [react-native.core :as rn] - [react-native.platform :as platform] [reagent.core :as reagent] [utils.i18n :as i18n])) @@ -126,41 +125,44 @@ [{:keys [share-qr-type qr-image-uri component-width customization-color full-name profile-picture emoji on-share-press] :as props}] - [rn/view {:style style/content-container} - [rn/view - {:style style/share-qr-container} + [:<> + [rn/view {:style style/gradient-bg} + [gradient-cover/view {:customization-color customization-color :height 463}]] + [rn/view {:style style/content-container} [rn/view - {:style style/share-qr-inner-container} - [account-avatar/view - {:customization-color customization-color - :emoji emoji - :size 32}] - [text/text - {:size :heading-2 - :weight :semi-bold - :style {:margin-left 8}} full-name]] - [share-button {:on-press on-share-press}]] - (when (#{:wallet-legacy :wallet-multichain} share-qr-type) - [header props]) - [quo.theme/provider {:theme :light} - [qr-code/view - {:qr-image-uri qr-image-uri - :size (style/qr-code-size component-width) - :avatar (if (= share-qr-type :profile) - :profile - :wallet-account) - :customization-color customization-color - :full-name full-name - :profile-picture profile-picture - :emoji emoji}]] - [rn/view {:style style/bottom-container} - (case share-qr-type - :profile [profile-bottom props] - :wallet-legacy [wallet-legacy-bottom props] - :wallet-multichain [wallet-multichain-bottom props] - nil)]]) + {:style style/share-qr-container} + [rn/view + {:style style/share-qr-inner-container} + [account-avatar/view + {:customization-color customization-color + :emoji emoji + :size 32}] + [text/text + {:size :heading-2 + :weight :semi-bold + :style {:margin-left 8}} full-name]] + [share-button {:on-press on-share-press}]] + (when (#{:wallet-legacy :wallet-multichain} share-qr-type) + [header props]) + [quo.theme/provider {:theme :light} + [qr-code/view + {:qr-image-uri qr-image-uri + :size (style/qr-code-size component-width) + :avatar (if (= share-qr-type :profile) + :profile + :wallet-account) + :customization-color customization-color + :full-name full-name + :profile-picture profile-picture + :emoji emoji}]] + [rn/view {:style style/bottom-container} + (case share-qr-type + :profile [profile-bottom props] + :wallet-legacy [wallet-legacy-bottom props] + :wallet-multichain [wallet-multichain-bottom props] + nil)]]]) -(defn view +(defn- view-internal "Receives the following properties: - type: :profile | :wallet-legacy | :wallet-multichain - qr-image-uri: Image source value. @@ -190,16 +192,9 @@ Sometimes while using a blur layer on top of another on Android, this component looks bad because of the `blur/view`, so we can set `unblur-on-android? true` to fix it. " - [{:keys [unblur-on-android?] :as props}] + [props] (reagent/with-let [component-width (reagent/atom nil) - container-component (if (and platform/android? unblur-on-android?) - [rn/view {:background-color style/overlay-color}] - [blur/view - {:blur-radius 20 - :blur-amount 20 - :blur-type :transparent - :overlay-color style/overlay-color - :background-color style/overlay-color}])] + container-component [rn/view {:background-color style/overlay-color}]] [quo.theme/provider {:theme :dark} [rn/view {:accessibility-label :share-qr-code @@ -211,3 +206,6 @@ (-> props (assoc :component-width @component-width) (clojure.set/rename-keys {:type :share-qr-type}))]))]])) + + +(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/shell/share/profile/view.cljs b/src/status_im/contexts/shell/share/profile/view.cljs index 7b4b3c79ac..e82c6033a4 100644 --- a/src/status_im/contexts/shell/share/profile/view.cljs +++ b/src/status_im/contexts/shell/share/profile/view.cljs @@ -25,7 +25,6 @@ [rn/view {:style style/qr-code-container} [qr-codes/share-qr-code {:type :profile - :unblur-on-android? true :qr-data universal-profile-url :qr-data-label-shown abbreviated-url :on-share-press #(list-selection/open-share {:message universal-profile-url}) diff --git a/src/status_im/contexts/shell/share/style.cljs b/src/status_im/contexts/shell/share/style.cljs index 8b4f269942..7aaf5376c8 100644 --- a/src/status_im/contexts/shell/share/style.cljs +++ b/src/status_im/contexts/shell/share/style.cljs @@ -5,13 +5,6 @@ (def screen-padding 20) -(def blur - {:position :absolute - :top 0 - :left 0 - :right 0 - :bottom 0 - :overlay-color colors/neutral-80-opa-80-blur}) (def header-row {:flex-direction :row diff --git a/src/status_im/contexts/shell/share/view.cljs b/src/status_im/contexts/shell/share/view.cljs index ecb708998a..da5c72bd75 100644 --- a/src/status_im/contexts/shell/share/view.cljs +++ b/src/status_im/contexts/shell/share/view.cljs @@ -1,9 +1,7 @@ (ns status-im.contexts.shell.share.view (:require [quo.core :as quo] - [react-native.blur :as blur] [react-native.core :as rn] - [react-native.platform :as platform] [react-native.safe-area :as safe-area] [reagent.core :as reagent] [status-im.contexts.shell.share.profile.view :as profile-view] @@ -43,7 +41,7 @@ [] (let [selected-tab (reagent/atom :profile)] (fn [] - [:<> + [rn/view {:style {:padding-top (safe-area/get-top)}} [header] [rn/view {:style style/tabs-container} [quo/segmented-control @@ -61,9 +59,7 @@ (defn view [] - [rn/view {:flex 1 :padding-top (safe-area/get-top)} - [blur/view - {:style style/blur - :blur-amount 20 - :blur-radius (if platform/android? 25 10)}] - [tab-content]]) + [quo/overlay {:type :shell} + [rn/view + {:key :share} + [tab-content]]]) diff --git a/src/status_im/contexts/shell/share/wallet/view.cljs b/src/status_im/contexts/shell/share/wallet/view.cljs index 43856d031d..fcec17b1a0 100644 --- a/src/status_im/contexts/shell/share/wallet/view.cljs +++ b/src/status_im/contexts/shell/share/wallet/view.cljs @@ -66,7 +66,6 @@ :networks @selected-networks :on-share-press #(share-action qr-url share-title) :profile-picture nil - :unblur-on-android? true :full-name (:name account) :customization-color (:color account) :emoji (:emoji account) diff --git a/src/status_im/contexts/wallet/share_address/view.cljs b/src/status_im/contexts/wallet/share_address/view.cljs index e098e4565d..18e00f4995 100644 --- a/src/status_im/contexts/wallet/share_address/view.cljs +++ b/src/status_im/contexts/wallet/share_address/view.cljs @@ -73,7 +73,8 @@ [quo/overlay {:type :shell} [rn/view {:flex 1 - :padding-top padding-top} + :padding-top padding-top + :key :share-adress} [quo/page-nav {:icon-name :i/close :on-press #(rf/dispatch [:navigate-back]) @@ -92,7 +93,6 @@ :networks @selected-networks :on-share-press #(share-action qr-url share-title) :profile-picture nil - :unblur-on-android? true :full-name (:name account) :customization-color color :emoji emoji