diff --git a/src/quo2/components/drawers/drawer_buttons/style.cljs b/src/quo2/components/drawers/drawer_buttons/style.cljs index 4d272604de..9cc7956c8e 100644 --- a/src/quo2/components/drawers/drawer_buttons/style.cljs +++ b/src/quo2/components/drawers/drawer_buttons/style.cljs @@ -1,10 +1,11 @@ (ns quo2.components.drawers.drawer-buttons.style - (:require [quo2.foundations.colors :as colors] - [react-native.platform :as platform])) + (:require [quo2.foundations.colors :as colors])) (def outer-container - {:height 216 - :border-radius 20}) + {:height 216 + :border-top-left-radius 20 + :border-top-right-radius 20 + :overflow :hidden}) (def top-card {:flex 1 @@ -12,9 +13,7 @@ :padding-horizontal 20 :border-top-left-radius 20 :border-top-right-radius 20 - :background-color (if platform/ios? - colors/neutral-80-opa-80-blur - colors/neutral-80)}) + :background-color colors/neutral-80-opa-80-blur}) (def bottom-card {:position :absolute @@ -33,11 +32,11 @@ :justify-content :space-between}) (def bottom-icon - {:border-radius 40 + {:border-radius 32 :border-width 1 :margin-left 24 - :height 28 - :width 28 + :height 32 + :width 32 :justify-content :center :align-items :center :border-color colors/white-opa-5}) @@ -52,4 +51,4 @@ (defn heading-text [gap] {:color colors/white - :margin-bottom gap}) + :margin-bottom gap}) \ No newline at end of file diff --git a/src/quo2/components/drawers/drawer_buttons/view.cljs b/src/quo2/components/drawers/drawer_buttons/view.cljs index 04b7b5453f..b28b15ad1e 100644 --- a/src/quo2/components/drawers/drawer_buttons/view.cljs +++ b/src/quo2/components/drawers/drawer_buttons/view.cljs @@ -71,14 +71,28 @@ child-2 string, keyword or hiccup " [{:keys [container-style top-card bottom-card]} child-1 child-2] - [blur/ios-view + [rn/view {:style (merge container-style style/outer-container)} - [card - (merge {:gap 4 - :top? true - :style style/top-card} - top-card) child-1] - [card - (merge {:style style/bottom-card - :gap 20} - bottom-card) child-2]]) + [blur/view + {:blur-type :dark + :blur-amount 10 + :style {:flex 1 + :border-top-left-radius 20 + :border-top-right-radius 20}}] + [rn/view + {:style {:flex 1 + :background-color :transparent + :position :absolute + :top 0 + :left 0 + :right 0 + :bottom 0}} + [card + (merge {:gap 4 + :top? true + :style style/top-card} + top-card) child-1] + [card + (merge {:style style/bottom-card + :gap 20} + bottom-card) child-2]]]) \ No newline at end of file diff --git a/src/status_im2/contexts/onboarding/common/background/view.cljs b/src/status_im2/contexts/onboarding/common/background/view.cljs index 3830b0b5ba..0ddd2f5255 100644 --- a/src/status_im2/contexts/onboarding/common/background/view.cljs +++ b/src/status_im2/contexts/onboarding/common/background/view.cljs @@ -26,6 +26,7 @@ [content-width] [rn/image {:style {:resize-mode :stretch + :margin-top 32 :width content-width} :source (resources/get-image :onboarding-illustration)}]) diff --git a/src/status_im2/contexts/onboarding/intro/style.cljs b/src/status_im2/contexts/onboarding/intro/style.cljs index da79b44d3b..1907630743 100644 --- a/src/status_im2/contexts/onboarding/intro/style.cljs +++ b/src/status_im2/contexts/onboarding/intro/style.cljs @@ -1,60 +1,23 @@ (ns status-im2.contexts.onboarding.intro.style (:require - [react-native.platform :as platform] [quo2.foundations.colors :as colors])) -(def progress-bar-container - {:background-color :transparent - :flex-direction :row - :margin-vertical 16}) - -(defn progress-bar-item - [index position end?] - {:height 2 - :flex 1 - :border-width 1 - :border-color (if (= index position) colors/white colors/white-opa-10) - :margin-right (if end? 0 8)}) - -(def carousel - {:height 92 - ;; (padding-top) This insets issue needs a consistent implementation across all screens. - :padding-top (if platform/android? 0 44) - :position :absolute - :top 0 - :bottom 0 - :left 0 - :right 0 - :z-index 2 - :background-color :transparent - :padding-vertical 12 - :padding-horizontal 20}) - -(def carousel-text - {:background-color :transparent - :color colors/white}) - (def page-container {:flex 1 :justify-content :flex-end}) -(def page-image - {:position :absolute - :top 0 - :bottom 0 - :left 0 - :right 0 - :width "100%" - :aspect-ratio 1}) - (def text-container {:flex 1 + :max-width 180 :flex-wrap :wrap}) (def plain-text - {:flex 1 - :color (colors/alpha colors/white 0.7)}) + {:size :paragraph-2 + :weight :regular + :color colors/white-opa-70}) (def highlighted-text - {:flex 1 - :color colors/white}) + {:flex 1 + :size :paragraph-2 + :weight :regular + :color colors/white}) diff --git a/src/status_im2/contexts/onboarding/intro/view.cljs b/src/status_im2/contexts/onboarding/intro/view.cljs index c26853d535..0f15339256 100644 --- a/src/status_im2/contexts/onboarding/intro/view.cljs +++ b/src/status_im2/contexts/onboarding/intro/view.cljs @@ -21,17 +21,15 @@ (rf/dispatch [:hide-terms-of-services-opt-in-screen])) :heading (i18n/label :t/new-to-status) :accessibility-label :new-to-status-button}} - (i18n/label :t/you-already-use-status) + [quo/text + {:style style/plain-text} + (i18n/label :t/you-already-use-status)] [quo/text {:style style/text-container} [quo/text - {:size :paragraph-2 - :style style/plain-text - :weight :semi-bold} + {:style style/plain-text} (i18n/label :t/by-continuing-you-accept)] [quo/text {:on-press #(rf/dispatch [:open-modal :privacy-policy]) - :size :paragraph-2 - :style style/highlighted-text - :weight :semi-bold} + :style style/highlighted-text} (i18n/label :t/terms-of-service)]]]])