chore: clean up ui for onboarding screens (#15470)

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]

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

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

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-80-opa-20 colors/white-opa-20 override-theme)
-    (colors/theme-colors colors/neutral-30 colors/neutral-60)))
+    (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-80-opa-40 colors/white-opa-30 override-theme)
-    (colors/theme-colors colors/neutral-40 colors/neutral-50)))
+    (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-80-opa-40 colors/white-opa-30)
-    (colors/theme-colors colors/neutral-40 colors/neutral-50)))
+    (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-80-opa-40 colors/white-opa-40)
-    (colors/theme-colors colors/neutral-40 colors/neutral-50)))
+    (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/theme-colors colors/neutral-100 colors/white override-theme)
-    (colors/custom-color customization-color (if colors/dark? 60 50))))
+    (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?]
+  [blur? override-theme]
-  {:color (get-char-count-color blur?)})
+  {:color (get-char-count-color blur? override-theme)})
 
 (def container
   {:flex-direction  :row

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-focused-placeholder-color blur? override-theme)
-                                    (style/get-placeholder-color blur?))}]]
+                                    (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

src/quo2/components/navigation/page_nav.cljs

@@ -203,8 +203,8 @@
       }
    }
   "
-  [{:keys [one-icon-align-left? horizontal-description? align-mid?
+  [{:keys [container-style one-icon-align-left? horizontal-description?
-           page-nav-color page-nav-background-uri
+           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
+     {:style (cond-> (merge {:display            :flex
-                      :flex-direction     :row
+                             :flex-direction     :row
-                      ;;  iPhone 11 Pro's height in Figma divided by Component height 56/1125
+                             ;;  iPhone 11 Pro's height in Figma divided by Component height 56/1125
-                      :align-items        :center
+                             :align-items        :center
-                      :padding-horizontal 20
+                             :padding-horizontal 20
-                      :height             56
+                             :height             56
-                      :justify-content    :space-between}
+                             :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

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

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

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]
+  (:require [react-native.platform :as platform]
-            [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
+   :padding-left  20
-   :margin-bottom 72
+   :padding-right 20
-   :margin-left   :auto
+   :padding-top   (if platform/android? 0 12)
-   :margin-right  :auto
+   :align-self    :flex-end
-   :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
-   :position         :absolute
+   :top      0
-   :top              0
+   :bottom   0
-   :bottom           0
+   :left     0
-   :left             0
+   :right    0})
-   :right            0
-   :background-color colors/neutral-80-opa-80-blur})
 
 (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})

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
+    {:container-style {:padding-horizontal 0}
-     :mid-section  {:type :text-only :main-text ""}
+     :align-mid?      true
-     :left-section {:type                :blur-bg
+     :mid-section     {:type :text-only :main-text ""}
-                    :icon                :i/arrow-left
+     :left-section    {:type                :blur-bg
-                    :icon-override-theme :dark
+                       :icon                :i/arrow-left
-                    :on-press            #(rf/dispatch [:navigate-back])}}]])
+                       :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)
+  [:f>
-        validation-msg        (reagent/atom (validation-message @full-name))
+   (fn []
-        on-change-text        (fn [s]
+     (let [full-name             (reagent/atom display-name)
-                                (reset! validation-msg (validation-message s))
+           keyboard-shown?       (reagent/atom false)
-
+           validation-msg        (reagent/atom (validation-message @full-name))
-                                (reset! full-name s))
+           on-change-text        (fn [s]
-        custom-color          (reagent/atom (or color c/profile-default-color))
+                                   (reset! validation-msg (validation-message s))
-        profile-pic           (reagent/atom image-path)
+                                   (reset! full-name s))
-        on-change-profile-pic #(reset! profile-pic %)
+           custom-color          (reagent/atom (or color c/profile-default-color))
-        on-change             #(reset! custom-color %)]
+           profile-pic           (reagent/atom image-path)
-    (fn []
+           on-change-profile-pic #(reset! profile-pic %)
-      [rn/view {:style style/page-container}
+           on-change             #(reset! custom-color %)]
-       [navigation-bar]
+       (fn []
-       [rn/view
+         (rn/use-effect
-        {:style {:flex               1
+          (let [will-show-listener (oops/ocall rn/keyboard
-                 :padding-horizontal 20}}
+                                               "addListener"
-        [quo/text
+                                               "keyboardWillShow"
-         {:size   :heading-1
+                                               #(swap! keyboard-shown? (fn [] true)))
-          :weight :semi-bold
+                will-hide-listener (oops/ocall rn/keyboard
-          :style  {:color         colors/white
+                                               "addListener"
-                   :margin-top    12
+                                               "keyboardWillHide"
-                   :margin-bottom 20}} (i18n/label :t/create-profile)]
+                                               #(swap! keyboard-shown? (fn [] false)))]
-        [rn/view
+            (fn []
-         {:flex        1
+              (fn []
-          :align-items :flex-start}
+                (oops/ocall will-show-listener "remove")
-
+                (oops/ocall will-hide-listener "remove"))))
-         [rn/view
+          [])
-          {:flex-direction  :row
+         [rn/view {:style style/page-container}
-           :justify-content :center}
+          [rn/scroll-view
-          [quo/profile-input
+           {:keyboard-should-persist-taps :always
-           {:customization-color @custom-color
+            :content-container-style      {:flex-grow 1}}
-            :placeholder         (i18n/label :t/your-name)
+           [rn/view {:style style/page-container}
-            :on-press            #(rf/dispatch
+            [rn/view
-                                   [:bottom-sheet/show-sheet
+             {:style style/content-container}
-                                    {:override-theme :dark
+             [navigation-bar]
-                                     :content
+             [quo/text
-                                     (fn []
+              {:size   :heading-1
-                                       [method-menu/view on-change-profile-pic])}])
+               :weight :semi-bold
-            :image-picker-props  {:profile-picture @profile-pic
+               :style  style/title} (i18n/label :t/create-profile)]
-                                  :full-name       @full-name}
+             [rn/view
-            :title-input-props   {:max-length     c/profile-name-max-length
+              {:style style/input-container}
-                                  :on-change-text on-change-text}}]]
+              [rn/view
-         (when @validation-msg
+               {:style style/profile-input-container}
-           [quo/info-message
+               [quo/profile-input
-            {:type  :error
+                {:customization-color @custom-color
-             :size  :default
+                 :placeholder         (i18n/label :t/your-name)
-             :icon  :i/info
+                 :on-press            #(rf/dispatch
-             :style style/info-message}
+                                        [:bottom-sheet/show-sheet
-            @validation-msg])
+                                         {:override-theme :dark
-         [quo/text
+                                          :content
-          {:size  :paragraph-2
+                                          (fn []
-           :style {:color         colors/white-70-blur
+                                            [method-menu/view on-change-profile-pic])}])
-                   :margin-top    20
+                 :image-picker-props  {:profile-picture @profile-pic
-                   :margin-bottom 16}} (i18n/label :t/accent-colour)]
+                                       :full-name       @full-name}
-         [quo/color-picker
+                 :title-input-props   {:default-value  @full-name
-          {:blur?             true
+                                       :max-length     c/profile-name-max-length
-           :default-selected? :blue
+                                       :on-change-text on-change-text}}]]
-           :selected          @custom-color
+              (when @validation-msg
-           :on-change         on-change}]]
+                [quo/info-message
-        [quo/button
+                 {:type  :error
-         {:accessibility-label       :submit-create-profile-button
+                  :size  :default
-          :type                      :primary
+                  :icon  :i/info
-          :override-background-color (colors/custom-color @custom-color 60)
+                  :style style/info-message}
-          :on-press                  #(rf/dispatch [:onboarding-2/profile-data-set
+                 @validation-msg])
-                                                    {:image-path   @profile-pic
+              [quo/text
-                                                     :display-name @full-name
+               {:size  :paragraph-2
-                                                     :color        @custom-color}])
+                :style style/color-title}
-          :style                     style/continue-button
+               (i18n/label :t/accent-colour)]
-          :disabled                  (and (not (seq @full-name)) (not @validation-msg))}
+              [quo/color-picker
-         (i18n/label :t/continue)]]])))
+               {: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]]))

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
+  {:position     :absolute
-   :background-color colors/neutral-100
+   :top          0
-   :top              0
+   :bottom       0
-   :bottom           0
+   :left         0
-   :left             0
+   :right        0
-   :right            0
+   :width        "100%"
-   :width            "100%"
+   :aspect-ratio 1})
-   :aspect-ratio     1})
 
 (def text-container
   {:flex      1

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]

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!",