status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

chore: update to new ui on intro screen of syncing (#15450)

This commit is contained in:
Jamie Caprani 2023-03-31 10:49:36 +01:00 committed by GitHub
parent 6417d90e1c
commit 2ab491f12b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 131 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/quo2/components/tags/status_tags.cljs
View File

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

43
src/status_im2/contexts/syncing/style.cljs Normal file
View File

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

24
src/status_im2/contexts/syncing/styles.cljs
View File

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

100
src/status_im2/contexts/syncing/view.cljs
View File

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

8
src/status_im2/navigation/screens.cljs
View File

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