Feature/15776 slideshow styles (#15933)

* Fixed issues with styling in the slideshow.

* Fixed design feedbacks.

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]
+  (:require [quo2.foundations.colors :as colors]))
-            [react-native.platform :as platform]))
 
 (def outer-container
-  {:height        216
+  {:height                  216
-   :border-radius 20})
+   :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?
+   :background-color        colors/neutral-80-opa-80-blur})
-                              colors/neutral-80-opa-80-blur
-                              colors/neutral-80)})
 
 (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
+   :height          32
-   :width           28
+   :width           32
    :justify-content :center
    :align-items     :center
    :border-color    colors/white-opa-5})

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
+   [blur/view
-    (merge {:gap   4
+    {:blur-type   :dark
-            :top?  true
+     :blur-amount 10
-            :style style/top-card}
+     :style       {:flex                    1
-           top-card) child-1]
+                   :border-top-left-radius  20
-   [card
+                   :border-top-right-radius 20}}]
-    (merge {:style style/bottom-card
+   [rn/view
-            :gap   20}
+    {:style {:flex             1
-           bottom-card) child-2]])
+             :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]]])

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)}])
 

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
+  {:size   :paragraph-2
-   :color (colors/alpha colors/white 0.7)})
+   :weight :regular
+   :color  colors/white-opa-70})
 
 (def highlighted-text
-  {:flex  1
+  {:flex   1
-   :color colors/white})
+   :size   :paragraph-2
+   :weight :regular
+   :color  colors/white})

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}
-       :style  style/plain-text
-       :weight :semi-bold}
       (i18n/label :t/by-continuing-you-accept)]
      [quo/text
       {:on-press #(rf/dispatch [:open-modal :privacy-policy])
-       :size     :paragraph-2
+       :style    style/highlighted-text}
-       :style    style/highlighted-text
-       :weight   :semi-bold}
       (i18n/label :t/terms-of-service)]]]])