diff --git a/src/quo2/components/drawers/drawer_buttons/style.cljs b/src/quo2/components/drawers/drawer_buttons/style.cljs index 8b3158f76b..4d272604de 100644 --- a/src/quo2/components/drawers/drawer_buttons/style.cljs +++ b/src/quo2/components/drawers/drawer_buttons/style.cljs @@ -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] diff --git a/src/quo2/components/drawers/drawer_buttons/view.cljs b/src/quo2/components/drawers/drawer_buttons/view.cljs index 074ae4b274..04b7b5453f 100644 --- a/src/quo2/components/drawers/drawer_buttons/view.cljs +++ b/src/quo2/components/drawers/drawer_buttons/view.cljs @@ -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 diff --git a/src/quo2/components/inputs/profile_input/view.cljs b/src/quo2/components/inputs/profile_input/view.cljs index f92f61a373..9d61b1dd5e 100644 --- a/src/quo2/components/inputs/profile_input/view.cljs +++ b/src/quo2/components/inputs/profile_input/view.cljs @@ -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})]]])) diff --git a/src/quo2/components/inputs/title_input/style.cljs b/src/quo2/components/inputs/title_input/style.cljs index 0209098625..77e8cde141 100644 --- a/src/quo2/components/inputs/title_input/style.cljs +++ b/src/quo2/components/inputs/title_input/style.cljs @@ -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 diff --git a/src/quo2/components/inputs/title_input/view.cljs b/src/quo2/components/inputs/title_input/view.cljs index 930cde3a92..2c9bf9196f 100644 --- a/src/quo2/components/inputs/title_input/view.cljs +++ b/src/quo2/components/inputs/title_input/view.cljs @@ -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 diff --git a/src/quo2/components/navigation/page_nav.cljs b/src/quo2/components/navigation/page_nav.cljs index b67a21bfe2..75c7b04aeb 100644 --- a/src/quo2/components/navigation/page_nav.cljs +++ b/src/quo2/components/navigation/page_nav.cljs @@ -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 diff --git a/src/quo2/foundations/colors.cljs b/src/quo2/foundations/colors.cljs index 480eea9c94..a11af0893a 100644 --- a/src/quo2/foundations/colors.cljs +++ b/src/quo2/foundations/colors.cljs @@ -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)) diff --git a/src/react_native/blur.cljs b/src/react_native/blur.cljs index 710b5868ff..02ebae0a77 100644 --- a/src/react_native/blur.cljs +++ b/src/react_native/blur.cljs @@ -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)) diff --git a/src/status_im2/contexts/onboarding/create_profile/style.cljs b/src/status_im2/contexts/onboarding/create_profile/style.cljs index ceb643d09f..d50f11daf0 100644 --- a/src/status_im2/contexts/onboarding/create_profile/style.cljs +++ b/src/status_im2/contexts/onboarding/create_profile/style.cljs @@ -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}) diff --git a/src/status_im2/contexts/onboarding/create_profile/view.cljs b/src/status_im2/contexts/onboarding/create_profile/view.cljs index 36ca26827d..18cd0c5d30 100644 --- a/src/status_im2/contexts/onboarding/create_profile/view.cljs +++ b/src/status_im2/contexts/onboarding/create_profile/view.cljs @@ -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]])) diff --git a/src/status_im2/contexts/onboarding/intro/style.cljs b/src/status_im2/contexts/onboarding/intro/style.cljs index 15fe499eab..da79b44d3b 100644 --- a/src/status_im2/contexts/onboarding/intro/style.cljs +++ b/src/status_im2/contexts/onboarding/intro/style.cljs @@ -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 diff --git a/src/status_im2/contexts/onboarding/profiles/view.cljs b/src/status_im2/contexts/onboarding/profiles/view.cljs index cd48f19b6c..7e02fe3884 100644 --- a/src/status_im2/contexts/onboarding/profiles/view.cljs +++ b/src/status_im2/contexts/onboarding/profiles/view.cljs @@ -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] diff --git a/translations/en.json b/translations/en.json index dcc1eaf912..6d4b47a4f7 100644 --- a/translations/en.json +++ b/translations/en.json @@ -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!",