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