[#17423] fix: android illustration size issue

status-im · Oct 25, 2023 · d396b79 · d396b79
1 parent 83ccca0
commit d396b79
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 4 deletions.
diff --git a/src/status_im2/contexts/onboarding/welcome/style.cljs b/src/status_im2/contexts/onboarding/welcome/style.cljs
@@ -7,13 +7,27 @@
   {:flex        1
    :padding-top (:top insets)})
 
-(def page-illustration
+(defn page-illustration
+  [width]
   {:resize-mode   :stretch
    :resize-method :scale
+   :width         width
    :margin-top    12
    :margin-bottom 4})
 
 (defn buttons
   [insets]
-  {:margin        default-margin
-   :margin-bottom (+ 14 (:bottom insets))})
+  {:position      :absolute
+   :left          0
+   :right         0
+   :padding-left  default-margin
+   :padding-right default-margin
+   :bottom        (+ 12 (:bottom insets))})
+
+(def bottom-shadow
+  {:position :absolute
+   :height   64
+   :top      0
+   :bottom   0
+   :left     0
+   :right    0})
diff --git a/src/status_im2/contexts/onboarding/welcome/view.cljs b/src/status_im2/contexts/onboarding/welcome/view.cljs
@@ -1,8 +1,10 @@
 (ns status-im2.contexts.onboarding.welcome.view
   (:require
     [quo.core :as quo]
+    [quo.foundations.colors :as colors]
     [re-frame.core :as re-frame]
     [react-native.core :as rn]
+    [react-native.linear-gradient :as linear-gradient]
     [react-native.safe-area :as safe-area]
     [status-im2.common.resources :as resources]
     [status-im2.constants :as constants]
@@ -31,6 +33,7 @@
   []
   (let [profile-color         (rf/sub [:onboarding-2/customization-color])
         {:keys [status-type]} (rf/sub [:multiaccount/current-user-visibility-status])
+        window                (rf/sub [:dimensions/window])
         insets                (safe-area/get-insets)]
     [rn/view {:style (style/page-container insets)}
      (when (nil? status-type)
@@ -42,9 +45,13 @@
        :on-press   #(rf/dispatch [:navigate-back-within-stack :enable-notifications])}]
      [page-title]
      [rn/image
-      {:style  style/page-illustration
+      {:style  (style/page-illustration (:width window))
        :source (resources/get-image :welcome-illustration)}]
      [rn/view {:style (style/buttons insets)}
+      (when (< (:height window) 700)
+        [linear-gradient/linear-gradient
+         {:style  style/bottom-shadow
+          :colors [colors/neutral-100-opa-0 colors/neutral-100-opa-80]}])
       [quo/button
        {:on-press            (fn []
                                (rf/dispatch [:init-root :shell-stack])