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: clean up ui for onboarding screens (#15470)

This commit is contained in:
Jamie Caprani 2023-03-30 12:05:42 +01:00 committed by GitHub
parent a10425e318
commit 7ad5e2181d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 229 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/quo2/components/drawers/drawer_buttons/style.cljs
View File

@ -1,7 +1,10 @@
(ns quo2.components.drawers.drawer-buttons.style
(:require [quo2.foundations.colors :as colors]))
(:require [quo2.foundations.colors :as colors]
[react-native.platform :as platform]))
(def outer-container {:height 216})
(def outer-container
{:height 216
:border-radius 20})
(def top-card
{:flex 1
@ -9,7 +12,9 @@
:padding-horizontal 20
:border-top-left-radius 20
:border-top-right-radius 20
:background-color colors/neutral-80})
:background-color (if platform/ios?
colors/neutral-80-opa-80-blur
colors/neutral-80)})
(def bottom-card
{:position :absolute
@ -21,7 +26,7 @@
:padding-horizontal 20
:border-top-left-radius 20
:border-top-right-radius 20
:background-color (colors/alpha colors/white 0.05)})
:background-color colors/white-opa-5})
(def bottom-container
{:flex-direction :row
@ -35,14 +40,14 @@
:width 28
:justify-content :center
:align-items :center
:border-color (colors/alpha colors/white 0.05)})
:border-color colors/white-opa-5})
(def bottom-text
{:flex 1
:color (colors/alpha colors/white 0.7)})
:color colors/white-70-blur})
(def top-text
{:color (colors/alpha colors/white 0.7)})
{:color colors/white-70-blur})
(defn heading-text
[gap]

3
src/quo2/components/drawers/drawer_buttons/view.cljs
View File

@ -3,6 +3,7 @@
[quo2.components.icon :as icon]
[quo2.components.markdown.text :as text]
[quo2.foundations.colors :as colors]
[react-native.blur :as blur]
[quo2.components.drawers.drawer-buttons.style :as style]))
(defn render-bottom
@ -70,7 +71,7 @@
child-2 string, keyword or hiccup
"
[{:keys [container-style top-card bottom-card]} child-1 child-2]
[rn/view
[blur/ios-view
{:style (merge container-style style/outer-container)}
[card
(merge {:gap 4

3
src/quo2/components/inputs/profile_input/view.cljs
View File

@ -47,6 +47,7 @@
[rn/view {:style style/input-container}
[title-input/title-input
(merge title-input-props
{:override-theme :dark
{:blur? true
:override-theme :dark
:placeholder placeholder
:customization-color customization-color})]]]))

37
src/quo2/components/inputs/title_input/style.cljs
View File

@ -2,34 +2,35 @@
(:require [quo2.foundations.colors :as colors]))
(defn get-focused-placeholder-color
[blur?]
[blur? override-theme]
(if blur?
(colors/theme-colors colors/neutral-80-opa-20 (colors/alpha colors/white 0.2))
(colors/theme-colors colors/neutral-30 colors/neutral-60)))
(colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 override-theme)
(colors/theme-colors colors/neutral-30 colors/neutral-60 override-theme))
)
(defn get-placeholder-color
[blur?]
[blur? override-theme]
(if blur?
(colors/theme-colors colors/neutral-80-opa-40 (colors/alpha colors/white 0.3))
(colors/theme-colors colors/neutral-40 colors/neutral-50)))
(colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-30 override-theme)
(colors/theme-colors colors/neutral-40 colors/neutral-50 override-theme)))
(defn- get-disabled-color
[blur?]
[blur? override-theme]
(if blur?
(colors/theme-colors colors/neutral-80-opa-40 (colors/alpha colors/white 0.3))
(colors/theme-colors colors/neutral-40 colors/neutral-50)))
(colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-30)
(colors/theme-colors colors/neutral-40 colors/neutral-50 override-theme)))
(defn- get-char-count-color
[blur?]
[blur? override-theme]
(if blur?
(colors/theme-colors colors/neutral-80-opa-40 (colors/alpha colors/white 0.4))
(colors/theme-colors colors/neutral-40 colors/neutral-50)))
(colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40)
(colors/theme-colors colors/neutral-40 colors/neutral-50 override-theme)))
(defn get-selection-color
[customization-color blur?]
[customization-color blur? override-theme]
(if blur?
(colors/theme-colors colors/neutral-100 colors/white)
(colors/custom-color customization-color (if colors/dark? 60 50))))
(colors/theme-colors colors/neutral-100 colors/white override-theme)
(colors/custom-color customization-color (if (or (= :dark override-theme) colors/dark?) 60 50))))
(def text-input-container {:flex 1})
@ -37,12 +38,12 @@
[disabled? blur? override-theme]
{:text-align-vertical :bottom
:color (if disabled?
(get-disabled-color blur?)
(get-disabled-color blur? override-theme)
(colors/theme-colors colors/neutral-100 colors/white override-theme))})
(defn char-count
[blur?]
{:color (get-char-count-color blur?)})
[blur? override-theme]
{:color (get-char-count-color blur? override-theme)})
(def container
{:flex-direction :row

10
src/quo2/components/inputs/title_input/view.cljs
View File

@ -45,21 +45,21 @@
:editable (not disabled?)
:max-length max-length
:placeholder placeholder
:selection-color (style/get-selection-color customization-color blur?)
:selection-color (style/get-selection-color customization-color blur? override-theme)
:placeholder-text-color (if @focused?
(style/get-focused-placeholder-color blur?)
(style/get-placeholder-color blur?))}]]
(style/get-focused-placeholder-color blur? override-theme)
(style/get-placeholder-color blur? override-theme))}]]
[rn/view
{:style style/counter-container}
[text/text
[text/text
{:style (style/char-count blur?)
{:style (style/char-count blur? override-theme)
:size :paragraph-2}
(pad-0
(str
(count @value)))]
[text/text
{:style (style/char-count blur?)
{:style (style/char-count blur? override-theme)
:size :paragraph-2}
(str "/"
(pad-0

19
src/quo2/components/navigation/page_nav.cljs
View File

@ -203,8 +203,8 @@
}
}
"
[{:keys [one-icon-align-left? horizontal-description? align-mid?
page-nav-color page-nav-background-uri
[{:keys [container-style one-icon-align-left? horizontal-description?
align-mid? page-nav-color page-nav-background-uri
mid-section
left-section
right-section-buttons]}]
@ -222,13 +222,14 @@
:left-icon (:left-icon mid-section)
:avatar (:avatar mid-section)}]
[rn/view
{:style (cond-> {:display :flex
:flex-direction :row
;; iPhone 11 Pro's height in Figma divided by Component height 56/1125
:align-items :center
:padding-horizontal 20
:height 56
:justify-content :space-between}
{:style (cond-> (merge {:display :flex
:flex-direction :row
;; iPhone 11 Pro's height in Figma divided by Component height 56/1125
:align-items :center
:padding-horizontal 20
:height 56
:justify-content :space-between}
container-style)
page-nav-background-uri (assoc :background-color page-nav-color)
page-nav-color (assoc :background page-nav-background-uri))}
[rn/view

1
src/quo2/foundations/colors.cljs
View File

@ -117,6 +117,7 @@
;;;;Blur
(def white-70-blur (alpha white 0.7))
(def neutral-80-opa-1-blur (alpha "#192438" 0.1))
(def neutral-5-opa-70-blur (alpha neutral-5 0.7))
(def neutral-80-opa-80-blur (alpha "#192438" 0.8))
(def neutral-90-opa-70-blur (alpha neutral-90 0.7))

7
src/react_native/blur.cljs
View File

@ -1,5 +1,10 @@
(ns react-native.blur
(:require ["@react-native-community/blur" :as blur]
[reagent.core :as reagent]))
[react-native.platform :as platform]
[reagent.core :as reagent]
[react-native.core :as rn]))
(def view (reagent/adapt-react-class (.-BlurView blur)))
;; blur view is currently not working correctly on Android.
(def ios-view (if platform/ios? view rn/view))

62
src/status_im2/contexts/onboarding/create_profile/style.cljs
View File

@ -1,25 +1,59 @@
(ns status-im2.contexts.onboarding.create-profile.style
(:require [quo2.foundations.colors :as colors]
[react-native.platform :as platform]))
(:require [react-native.platform :as platform]
[quo2.foundations.colors :as colors]))
(def continue-button
{:width "100%"
:margin-left :auto
:margin-top (if platform/android? :auto 0)
:margin-right :auto})
(def button-container
{:width "100%"
:margin-top :auto
:margin-bottom 72
:margin-left :auto
:margin-right :auto
:align-self :flex-end})
:padding-left 20
:padding-right 20
:padding-top (if platform/android? 0 12)
:align-self :flex-end
:height 64})
(def blur-button-container
(merge button-container
{:background-color colors/neutral-80-opa-1-blur}))
(def view-button-container
(merge button-container {:margin-bottom 24}))
(def page-container
{:padding-top (if platform/ios? 44 0)
:position :absolute
:top 0
:bottom 0
:left 0
:right 0
:background-color colors/neutral-80-opa-80-blur})
{:position :absolute
:top 0
:bottom 0
:left 0
:right 0})
(def navigation-bar {:height 56})
(def info-message
{:margin-top 8})
(def title
{:color colors/white
:margin-top 12
:margin-bottom 20})
(def color-title
{:color colors/white-70-blur
:margin-top 20
:margin-bottom 16})
(def content-container
{:flex 1
:padding-horizontal 20})
(def input-container
{:flex 1
:align-items :flex-start
:margin-bottom 24})
(def profile-input-container
{:flex-direction :row
:justify-content :center})

193
src/status_im2/contexts/onboarding/create_profile/view.cljs
View File

@ -9,18 +9,21 @@
[status-im2.contexts.onboarding.common.background.view :as background]
[status-im2.contexts.onboarding.select-photo.method-menu.view :as method-menu]
[utils.re-frame :as rf]
[oops.core :as oops]
[react-native.blur :as blur]
[status-im2.constants :as c]))
(defn navigation-bar
[]
[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])}}]])
{:container-style {:padding-horizontal 0}
: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])}}]])
(def emoji-regex
(new
@ -30,96 +33,124 @@
(defn has-emojis [s] (re-find emoji-regex s))
(def common-names ["Ethereum" "Bitcoin"])
(defn has-common-names [s] (pos? (count (filter #(string/includes? s %) common-names))))
(def special-characters-regex (new js/RegExp #"[^a-zA-Z\d\s-]" "i"))
(def special-characters-regex (new js/RegExp #"[^a-zA-Z\d\s-._]" "i"))
(defn has-special-characters [s] (re-find special-characters-regex s))
(defn validation-message
[s]
(cond
(or (= s nil) (= s "")) nil
(has-emojis s) (i18n/label :t/are-not-allowed {:check (i18n/label :t/emojis)})
(has-special-characters s) (i18n/label :t/are-not-allowed
{:check (i18n/label :t/special-characters)})
(string/ends-with? s "-eth") (i18n/label :t/ending-not-allowed {:ending "-eth"})
(string/ends-with? s "_eth") (i18n/label :t/ending-not-allowed {:ending "_eth"})
(string/ends-with? s ".eth") (i18n/label :t/ending-not-allowed {:ending ".eth"})
(has-common-names s) (i18n/label :t/are-not-allowed {:check (i18n/label :t/common-names)})
(has-emojis s) (i18n/label :t/are-not-allowed {:check (i18n/label :t/emojis)})
:else nil))
(defn button-container
[keyboard-shown? children]
(if keyboard-shown?
[blur/ios-view
{:style style/blur-button-container}
children]
[rn/view {:style style/view-button-container}
children]))
(defn page
[{:keys [image-path display-name color]}]
(let [full-name (reagent/atom display-name)
validation-msg (reagent/atom (validation-message @full-name))
on-change-text (fn [s]
(reset! validation-msg (validation-message s))
(reset! full-name s))
custom-color (reagent/atom (or color c/profile-default-color))
profile-pic (reagent/atom image-path)
on-change-profile-pic #(reset! profile-pic %)
on-change #(reset! custom-color %)]
(fn []
[rn/view {:style style/page-container}
[navigation-bar]
[rn/view
{:style {:flex 1
:padding-horizontal 20}}
[quo/text
{:size :heading-1
:weight :semi-bold
:style {:color colors/white
:margin-top 12
:margin-bottom 20}} (i18n/label :t/create-profile)]
[rn/view
{:flex 1
:align-items :flex-start}
[rn/view
{:flex-direction :row
:justify-content :center}
[quo/profile-input
{:customization-color @custom-color
:placeholder (i18n/label :t/your-name)
:on-press #(rf/dispatch
[:bottom-sheet/show-sheet
{:override-theme :dark
:content
(fn []
[method-menu/view on-change-profile-pic])}])
:image-picker-props {:profile-picture @profile-pic
:full-name @full-name}
:title-input-props {:max-length c/profile-name-max-length
:on-change-text on-change-text}}]]
(when @validation-msg
[quo/info-message
{:type :error
:size :default
:icon :i/info
:style style/info-message}
@validation-msg])
[quo/text
{:size :paragraph-2
:style {:color colors/white-70-blur
:margin-top 20
:margin-bottom 16}} (i18n/label :t/accent-colour)]
[quo/color-picker
{:blur? true
:default-selected? :blue
:selected @custom-color
:on-change on-change}]]
[quo/button
{:accessibility-label :submit-create-profile-button
:type :primary
:override-background-color (colors/custom-color @custom-color 60)
:on-press #(rf/dispatch [:onboarding-2/profile-data-set
{:image-path @profile-pic
:display-name @full-name
:color @custom-color}])
:style style/continue-button
:disabled (and (not (seq @full-name)) (not @validation-msg))}
(i18n/label :t/continue)]]])))
[:f>
(fn []
(let [full-name (reagent/atom display-name)
keyboard-shown? (reagent/atom false)
validation-msg (reagent/atom (validation-message @full-name))
on-change-text (fn [s]
(reset! validation-msg (validation-message s))
(reset! full-name s))
custom-color (reagent/atom (or color c/profile-default-color))
profile-pic (reagent/atom image-path)
on-change-profile-pic #(reset! profile-pic %)
on-change #(reset! custom-color %)]
(fn []
(rn/use-effect
(let [will-show-listener (oops/ocall rn/keyboard
"addListener"
"keyboardWillShow"
#(swap! keyboard-shown? (fn [] true)))
will-hide-listener (oops/ocall rn/keyboard
"addListener"
"keyboardWillHide"
#(swap! keyboard-shown? (fn [] false)))]
(fn []
(fn []
(oops/ocall will-show-listener "remove")
(oops/ocall will-hide-listener "remove"))))
[])
[rn/view {:style style/page-container}
[rn/scroll-view
{:keyboard-should-persist-taps :always
:content-container-style {:flex-grow 1}}
[rn/view {:style style/page-container}
[rn/view
{:style style/content-container}
[navigation-bar]
[quo/text
{:size :heading-1
:weight :semi-bold
:style style/title} (i18n/label :t/create-profile)]
[rn/view
{:style style/input-container}
[rn/view
{:style style/profile-input-container}
[quo/profile-input
{:customization-color @custom-color
:placeholder (i18n/label :t/your-name)
:on-press #(rf/dispatch
[:bottom-sheet/show-sheet
{:override-theme :dark
:content
(fn []
[method-menu/view on-change-profile-pic])}])
:image-picker-props {:profile-picture @profile-pic
:full-name @full-name}
:title-input-props {:default-value @full-name
:max-length c/profile-name-max-length
:on-change-text on-change-text}}]]
(when @validation-msg
[quo/info-message
{:type :error
:size :default
:icon :i/info
:style style/info-message}
@validation-msg])
[quo/text
{:size :paragraph-2
:style style/color-title}
(i18n/label :t/accent-colour)]
[quo/color-picker
{:blur? true
:default-selected? :blue
:selected @custom-color
:on-change on-change}]]]]]
[rn/keyboard-avoiding-view {}
[button-container @keyboard-shown?
[quo/button
{:accessibility-label :submit-create-profile-button
:type :primary
:override-background-color (colors/custom-color @custom-color 60)
:on-press (fn []
(rf/dispatch [:onboarding-2/profile-data-set
{:image-path @profile-pic
:display-name @full-name
:color @custom-color}]))
:style style/continue-button
:disabled (or (not (seq @full-name)) @validation-msg)}
(i18n/label :t/continue)]]]])))])
(defn create-profile
[]
[rn/view {:style {:flex 1}}
(let [onboarding-profile-data (rf/sub [:onboarding-2/profile])]
(let [onboarding-profile-data (rf/sub [:onboarding-2/profile])]
[:<>
[background/view true]
[page onboarding-profile-data])])
[page onboarding-profile-data]]))

21
src/status_im2/contexts/onboarding/intro/style.cljs
View File

@ -4,7 +4,7 @@
[quo2.foundations.colors :as colors]))
(def progress-bar-container
{:background-color colors/neutral-100
{:background-color :transparent
:flex-direction :row
:margin-vertical 16})
@ -26,12 +26,12 @@
:left 0
:right 0
:z-index 2
:background-color colors/neutral-100
:background-color :transparent
:padding-vertical 12
:padding-horizontal 20})
(def carousel-text
{:background-color colors/neutral-100
{:background-color :transparent
:color colors/white})
(def page-container
@ -39,14 +39,13 @@
:justify-content :flex-end})
(def page-image
{:position :absolute
:background-color colors/neutral-100
:top 0
:bottom 0
:left 0
:right 0
:width "100%"
:aspect-ratio 1})
{:position :absolute
:top 0
:bottom 0
:left 0
:right 0
:width "100%"
:aspect-ratio 1})
(def text-container
{:flex 1

2
src/status_im2/contexts/onboarding/profiles/view.cljs
View File

@ -5,7 +5,7 @@
[taoensso.timbre :as log]
[reagent.core :as reagent]
[react-native.core :as rn]
[status-im.utils.types :as types]
[utils.transforms :as types]
[utils.security.core :as security]
[status-im.native-module.core :as status]
[status-im2.contexts.onboarding.profiles.style :as style]

2
translations/en.json
View File

@ -2030,7 +2030,7 @@
"logged-in": "Logged in",
"profiles-on-device": "Profiles on device",
"profile-password": "Profile password",
"forget-password": "Forgot password?",
"forgot-password": "Forgot password?",
"log-in": "Log in",
"type-your-password": "Type your password",
"oops-wrong-password": "Oops, wrong password!",