chore: update to new ui on intro screen of syncing (#15450)
This commit is contained in:
parent
6417d90e1c
commit
2ab491f12b
|
@ -11,12 +11,14 @@
|
|||
|
||||
(def small-container-style
|
||||
(merge default-container-style
|
||||
{:padding-horizontal 8
|
||||
{:min-height 24
|
||||
:padding-horizontal 8
|
||||
:padding-vertical 1}))
|
||||
|
||||
(def large-container-style
|
||||
(merge default-container-style
|
||||
{:padding-horizontal 11
|
||||
{:min-height 32
|
||||
:padding-horizontal 11
|
||||
:padding-vertical 4}))
|
||||
|
||||
(defn base-tag
|
||||
|
@ -36,6 +38,7 @@
|
|||
:style (assoc (if (= size :small)
|
||||
small-container-style
|
||||
large-container-style)
|
||||
:align-self :flex-start
|
||||
:border-width 1
|
||||
:border-color border-color
|
||||
:background-color background-color)}
|
||||
|
@ -45,10 +48,11 @@
|
|||
[rn/view
|
||||
{:style {:justify-content :center
|
||||
:align-items :center}}
|
||||
[icon/icon
|
||||
icon
|
||||
{:no-color true
|
||||
:size (if (= size :large) 20 12)}]]
|
||||
(when icon
|
||||
[icon/icon
|
||||
icon
|
||||
{:no-color true
|
||||
:size (if (= size :large) 20 12)}])]
|
||||
[text/text
|
||||
{:size paragraph-size
|
||||
:weight :medium
|
||||
|
@ -56,11 +60,11 @@
|
|||
:color text-color}} label]]])))
|
||||
|
||||
(defn- positive
|
||||
[size theme label _]
|
||||
[size theme label _ no-icon?]
|
||||
[base-tag
|
||||
{:accessibility-label :status-tag-positive
|
||||
:size size
|
||||
:icon :i/positive-state
|
||||
:icon (when-not no-icon? :i/positive-state)
|
||||
:background-color colors/success-50-opa-10
|
||||
:border-color colors/success-50-opa-20
|
||||
:label label
|
||||
|
@ -68,11 +72,11 @@
|
|||
:text-color (if (= theme :dark) colors/success-60 colors/success-50)}])
|
||||
|
||||
(defn- negative
|
||||
[size theme label _]
|
||||
[size theme label _ no-icon?]
|
||||
[base-tag
|
||||
{:accessibility-label :status-tag-negative
|
||||
:size size
|
||||
:icon :i/negative-state
|
||||
:icon (when-not no-icon? :i/negative-state)
|
||||
:background-color colors/danger-50-opa-10
|
||||
:border-color colors/danger-50-opa-20
|
||||
:label label
|
||||
|
@ -80,14 +84,15 @@
|
|||
:text-color (if (= theme :light) colors/danger-50 colors/danger-60)}])
|
||||
|
||||
(defn- pending
|
||||
[size theme label blur?]
|
||||
[size theme label blur? no-icon?]
|
||||
[base-tag
|
||||
{:accessibility-label :status-tag-pending
|
||||
:size size
|
||||
:label label
|
||||
:icon (if blur?
|
||||
:i/pending-dark-blur
|
||||
(if (= theme :light) :i/pending-light :i/pending-dark))
|
||||
:icon (when-not no-icon?
|
||||
(if blur?
|
||||
:i/pending-dark-blur
|
||||
(if (= theme :light) :i/pending-light :i/pending-dark)))
|
||||
:background-color (if blur?
|
||||
colors/white-opa-5
|
||||
(colors/theme-colors colors/neutral-10 colors/neutral-80-opa-40 theme))
|
||||
|
@ -100,7 +105,7 @@
|
|||
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}])
|
||||
|
||||
(defn status-tag
|
||||
[{:keys [status size override-theme label blur?]}]
|
||||
[{:keys [status size override-theme label blur? no-icon?]}]
|
||||
(when status
|
||||
(when-let [status-component (case (:type status)
|
||||
:positive positive
|
||||
|
@ -111,4 +116,5 @@
|
|||
size
|
||||
(or override-theme (quo2.theme/get-theme))
|
||||
label
|
||||
blur?])))
|
||||
blur?
|
||||
no-icon?])))
|
||||
|
|
|
@ -0,0 +1,43 @@
|
|||
(ns status-im2.contexts.syncing.style
|
||||
(:require [quo2.foundations.colors :as colors]))
|
||||
|
||||
(def container-main
|
||||
{:background-color colors/neutral-95
|
||||
:padding-top 44
|
||||
:flex 1})
|
||||
|
||||
(def page-container {:margin-horizontal 20})
|
||||
|
||||
(def title-container
|
||||
{:flex-direction :row
|
||||
:align-items :center
|
||||
:justify-content :space-between})
|
||||
|
||||
(def devices-container
|
||||
{:flex 1})
|
||||
|
||||
(def device-container
|
||||
{:display :flex
|
||||
:padding-top 12
|
||||
:padding-horizontal 12
|
||||
:padding-bottom 16
|
||||
|
||||
:flex-direction :row
|
||||
:border-color colors/white-opa-5
|
||||
:border-radius 16
|
||||
:border-width 1
|
||||
:height 100
|
||||
:margin-top 24})
|
||||
|
||||
(def device-details
|
||||
{:height 200})
|
||||
|
||||
(def navigation-bar
|
||||
{:height 56})
|
||||
|
||||
(def icon-container
|
||||
{:height 20
|
||||
:margin-right 12})
|
||||
|
||||
(def tag-container
|
||||
{:margin-top 8})
|
|
@ -1,24 +0,0 @@
|
|||
(ns status-im2.contexts.syncing.styles
|
||||
(:require [quo2.foundations.colors :as colors]))
|
||||
|
||||
(def container-main
|
||||
{:margin 16})
|
||||
|
||||
(def devices-container
|
||||
{:border-color colors/neutral-20
|
||||
:border-radius 16
|
||||
:border-width 1
|
||||
:margin-top 12})
|
||||
|
||||
(def device-row
|
||||
{:flex-direction :row
|
||||
:padding-vertical 10
|
||||
:padding-left 10})
|
||||
|
||||
(def device-column
|
||||
{:flex-direction :column
|
||||
:margin-left 10
|
||||
:align-self :center})
|
||||
|
||||
(def sync-device-container
|
||||
{:padding 10})
|
|
@ -4,51 +4,75 @@
|
|||
[quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
[status-im2.contexts.syncing.sheets.sync-device-notice.view :as sync-device-notice]
|
||||
[status-im2.contexts.syncing.styles :as styles]
|
||||
[status-im2.contexts.syncing.style :as style]
|
||||
[status-im2.common.not-implemented :as not-implemented]
|
||||
[utils.re-frame :as rf]))
|
||||
|
||||
(defn render-device
|
||||
[device-name device-status]
|
||||
[:<>
|
||||
[rn/view {:style styles/device-row}
|
||||
[quo/icon-avatar
|
||||
{:size :medium
|
||||
:icon :i/placeholder
|
||||
:color :primary
|
||||
:style {:margin-vertical 10}}]
|
||||
[rn/view {:style styles/device-column}
|
||||
[quo/text
|
||||
{:accessibility-label :device-name
|
||||
:weight :medium
|
||||
:size :paragraph-1
|
||||
:style {:color colors/neutral-100}} device-name]
|
||||
|
||||
[quo/text
|
||||
{:accessibility-label :device-status
|
||||
:weight :regular
|
||||
:size :paragraph-2
|
||||
:style {:color colors/neutral-50}} device-status]]]])
|
||||
|
||||
(defn views
|
||||
;;TODO remove mock data (#https://github.com/status-im/status-mobile/issues/15142)
|
||||
(defn navigation-bar
|
||||
[]
|
||||
[rn/view {:style styles/container-main}
|
||||
[quo/text
|
||||
{:accessibility-label :synced-devices-title
|
||||
:weight :medium
|
||||
:size :paragraph-2
|
||||
:style {:color colors/neutral-50}} (i18n/label :t/synced-devices)]
|
||||
[rn/view {:style styles/devices-container}
|
||||
[render-device "iPhone 11" (i18n/label :t/this-device)] ;; note : the device name is hardcoded for
|
||||
;; now
|
||||
[rn/view {:style styles/sync-device-container}
|
||||
[rn/view {:style style/navigation-bar}
|
||||
[quo/page-nav
|
||||
{:align-mid? true
|
||||
:mid-section {:type :text-only :main-text ""}
|
||||
:left-section {:type :blur-bg
|
||||
:icon :i/arrow-left
|
||||
:icon-override-theme :dark
|
||||
:on-press #(rf/dispatch [:navigate-back])}}]])
|
||||
|
||||
(defn render-device
|
||||
[{:keys [device
|
||||
this-device?
|
||||
type]}]
|
||||
[rn/view {:style style/device-container}
|
||||
[rn/view {:style style/icon-container}
|
||||
[quo/icon
|
||||
(if (= type :mobile) :i/mobile :i/desktop)
|
||||
{:color colors/white}]]
|
||||
[rn/view {:style style/device-details}
|
||||
[quo/text
|
||||
{:accessibility-label :device-name
|
||||
:weight :medium
|
||||
:size :paragraph-1
|
||||
:style {:color colors/white}}
|
||||
device]
|
||||
[not-implemented/not-implemented
|
||||
[quo/text
|
||||
{:accessibility-label :next-back-up
|
||||
:size :paragraph-2
|
||||
:style {:color colors/white-opa-40}}
|
||||
"Next backup in 04:36:12"]]
|
||||
(when this-device?
|
||||
[rn/view {:style style/tag-container}
|
||||
[quo/status-tag
|
||||
{:size :small
|
||||
:status {:type :positive}
|
||||
:no-icon? true
|
||||
:label (i18n/label :t/this-device)
|
||||
:override-theme :dark}]])]])
|
||||
|
||||
(defn view
|
||||
[]
|
||||
[rn/view {:style style/container-main}
|
||||
[navigation-bar]
|
||||
[rn/view {:style style/page-container}
|
||||
[rn/view {:style style/title-container}
|
||||
[quo/text
|
||||
{:size :heading-1
|
||||
:weight :semi-bold
|
||||
:style {:color colors/white}} (i18n/label :t/syncing)]
|
||||
[quo/button
|
||||
{:label :primary
|
||||
:size 40
|
||||
:before :i/placeholder
|
||||
{:size 32
|
||||
:icon true
|
||||
:on-press (fn []
|
||||
(rf/dispatch [:bottom-sheet/hide])
|
||||
(rf/dispatch [:bottom-sheet/show-sheet
|
||||
{:show-handle? false
|
||||
:content (fn []
|
||||
[sync-device-notice/sheet])}]))}
|
||||
(i18n/label :t/sync-new-device)]]]])
|
||||
:i/add]]
|
||||
[rn/view {:style style/devices-container}
|
||||
[render-device
|
||||
{:device "iPhone 11"
|
||||
:this-device? true
|
||||
:type :mobile}]]]])
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
(ns status-im2.navigation.screens
|
||||
(:require
|
||||
[utils.i18n :as i18n] ;; TODO remove when not used anymore
|
||||
[quo2.foundations.colors :as colors]
|
||||
[react-native.platform :as platform]
|
||||
[status-im.ui.screens.screens :as old-screens]
|
||||
|
@ -120,9 +119,10 @@
|
|||
:component communities.overview/overview}
|
||||
|
||||
{:name :settings-syncing
|
||||
:insets {:bottom true}
|
||||
:options {:topBar {:title {:text (i18n/label :t/syncing)}}}
|
||||
:component settings-syncing/views}
|
||||
:insets {:top false}
|
||||
:options {:statusBar {:style :light}
|
||||
:topBar {:visible false}}
|
||||
:component settings-syncing/view}
|
||||
|
||||
;; Onboarding
|
||||
{:name :profiles
|
||||
|
|
Loading…
Reference in New Issue