Feature/15776 slideshow styles (#15933)

* Fixed issues with styling in the slideshow.

* Fixed design feedbacks.
This commit is contained in:
Rahul Pratap 2023-06-01 19:56:36 +05:30 committed by GitHub
parent 5017e13013
commit adb50fa0ee
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 48 additions and 73 deletions

View File

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

View File

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

View File

@ -26,6 +26,7 @@
[content-width]
[rn/image
{:style {:resize-mode :stretch
:margin-top 32
:width content-width}
:source (resources/get-image :onboarding-illustration)}])

View File

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

View File

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