Feature/15776 slideshow styles (#15933)
* Fixed issues with styling in the slideshow. * Fixed design feedbacks.
This commit is contained in:
Rahul Pratap
GitHub
parent
5017e13013
commit
adb50fa0ee
|
|
@ -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})
|
||||
|
|
|
|||
|
|
@ -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]]])
|
||||
|
|
@ -26,6 +26,7 @@
|
|||
[content-width]
|
||||
[rn/image
|
||||
{:style {:resize-mode :stretch
|
||||
:margin-top 32
|
||||
:width content-width}
|
||||
:source (resources/get-image :onboarding-illustration)}])
|
||||
|
||||
|
|
|
|||
|
|
@ -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})
|
||||
|
|
|
|||
|
|
@ -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)]]]])
|
||||
|
|
|
|||
Loading…
Reference in New Issue