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

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-top    :auto
-   :margin-bottom 72
    :margin-left  :auto
-   :margin-right  :auto
+   :margin-top   (if platform/android? :auto 0)
-   :align-self    :flex-end})
+   :margin-right :auto})
+
+(def button-container
+  {:width         "100%"
+   :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
-   :position         :absolute
    :top      0
    :bottom   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,13 +9,16 @@
             [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}
+     :align-mid?      true
      :mid-section     {:type :text-only :main-text ""}
      :left-section    {:type                :blur-bg
                        :icon                :i/arrow-left
@@ -30,51 +33,76 @@
 (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]}]
+  [: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}
-       [navigation-bar]
             [rn/view
-        {:style {:flex               1
+             {:style style/content-container}
-                 :padding-horizontal 20}}
+             [navigation-bar]
              [quo/text
               {:size   :heading-1
                :weight :semi-bold
-          :style  {:color         colors/white
+               :style  style/title} (i18n/label :t/create-profile)]
-                   :margin-top    12
-                   :margin-bottom 20}} (i18n/label :t/create-profile)]
              [rn/view
-         {:flex        1
+              {:style style/input-container}
-          :align-items :flex-start}
-
               [rn/view
-          {:flex-direction  :row
+               {:style style/profile-input-container}
-           :justify-content :center}
                [quo/profile-input
                 {:customization-color @custom-color
                  :placeholder         (i18n/label :t/your-name)
@@ -86,7 +114,8 @@
                                             [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
+                 :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
@@ -97,29 +126,31 @@
                  @validation-msg])
               [quo/text
                {:size  :paragraph-2
-           :style {:color         colors/white-70-blur
+                :style style/color-title}
-                   :margin-top    20
+               (i18n/label :t/accent-colour)]
-                   :margin-bottom 16}} (i18n/label :t/accent-colour)]
               [quo/color-picker
                {:blur?             true
                 :default-selected? :blue
                 :selected          @custom-color
-           :on-change         on-change}]]
+                :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                  #(rf/dispatch [:onboarding-2/profile-data-set
+              :on-press                  (fn []
+                                           (rf/dispatch [:onboarding-2/profile-data-set
                                                          {:image-path   @profile-pic
                                                           :display-name @full-name
-                                                     :color        @custom-color}])
+                                                          :color        @custom-color}]))
               :style                     style/continue-button
-          :disabled                  (and (not (seq @full-name)) (not @validation-msg))}
+              :disabled                  (or (not (seq @full-name)) @validation-msg)}
-         (i18n/label :t/continue)]]])))
+             (i18n/label :t/continue)]]]])))])
 
 (defn create-profile
   []
-  [rn/view {:style {:flex 1}}
   (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
@@ -40,7 +40,6 @@
 
 (def page-image
   {:position     :absolute
-   :background-color colors/neutral-100
    :top          0
    :bottom       0
    :left         0

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