Design review: create profile password (#18607)

* Design review: create profile password

* Fixes

* Fixes

* Fixes

* Fixes

* Code style fix

* Fixes

src/quo/components/dividers/strength_divider/style.cljs

@@ -3,7 +3,7 @@
 (def container
   {:height             40
    :flex-direction     :row
-   :padding-horizontal 20
+   :padding-horizontal 16
    :align-items        :center})
 
 (defn text

src/quo/components/dividers/strength_divider/view.cljs

@@ -30,7 +30,7 @@
 
 (defn circular-progress
   [{:keys [color percentage]}]
-  (let [strength-indicator-radius        6.5
+  (let [strength-indicator-radius        7.5
         strength-indicator-circumference (* 2 Math/PI strength-indicator-radius)]
     [svg/svg
      {:view-box  "0 0 16 16"
@@ -63,7 +63,10 @@
       :alert [icon/icon :i/alert
               {:color color
                :size  16}]
-      [circular-progress {:color color :percentage percentage}])))
+      [rn/view
+       {:padding-left  4
+        :padding-right 2}
+       [circular-progress {:color color :percentage percentage}]])))
 
 (defn view
   "Options

src/status_im/contexts/onboarding/create_password/style.cljs

@@ -8,30 +8,8 @@
 (def heading-subtitle {:color colors/white})
 (def heading-title (assoc heading-subtitle :margin-bottom 8))
 
-(def label-container
+(def info-message
-  {:margin-top     8
+  {:margin-top 8})
-   :flex-direction :row
-   :align-items    :center
-   :height         16})
-
-(def label-icon
-  {:width        16
-   :height       18
-   :margin-right 4})
-
-(defn label-icon-color
-  [status]
-  (get {:neutral colors/neutral-40
-        :success colors/success-60
-        :danger  colors/danger-60}
-       status))
-
-(defn label-color
-  [status]
-  (let [colors {:neutral colors/white-opa-70
-                :success colors/success-60
-                :danger  colors/danger-60}]
-    {:color (get colors status)}))
 
 (def space-between-inputs {:height 16})
 

src/status_im/contexts/onboarding/create_password/view.cljs

@@ -2,6 +2,7 @@
   (:require
     [oops.core :refer [ocall]]
     [quo.core :as quo]
+    [quo.foundations.colors :as colors]
     [react-native.core :as rn]
     [react-native.safe-area :as safe-area]
     [reagent.core :as reagent]
@@ -33,24 +34,25 @@
         (dissoc :hint)
         (assoc :type  :password
                :blur? true))]
-   [rn/view {:style style/label-container}
+   [rn/view {:style style/info-message}
     (when shown
-      [:<>
+      [quo/info-message
-       [quo/icon (if (= status :success) :i/check-circle :i/info)
+       {:type       status
-        {:container-style style/label-icon
+        :size       :default
-         :color           (style/label-icon-color status)
+        :icon       (if (= status :success) :i/positive-state :i/info)
-         :size            16}]
+        :text-color (when (= status :default)
-       [quo/text
+                      colors/white-70-blur)
-        {:style (style/label-color status)
+        :icon-color (when (= status :default)
-         :size  :paragraph-2}
+                      colors/white-70-blur)
-        text]])]])
+        :style      {}}
+       text])]])
 
 (defn password-inputs
   [{:keys [passwords-match? on-change-password on-change-repeat-password on-input-focus
            password-long-enough? empty-password? show-password-validation?
            on-blur-repeat-password]}]
-  (let [hint-1-status (if password-long-enough? :success :neutral)
+  (let [hint-1-status (if password-long-enough? :success :default)
-        hint-2-status (if passwords-match? :success :danger)
+        hint-2-status (if passwords-match? :success :error)
         hint-2-text   (if passwords-match?
                         (i18n/label :t/password-creation-match)
                         (i18n/label :t/password-creation-dont-match))

translations/en.json

@@ -1138,9 +1138,9 @@
     "password-creation-hint": "Minimum 10 characters",
     "password-creation-placeholder-1": "Type password",
     "password-creation-placeholder-2": "Repeat password",
-    "password-creation-tips-title": "Tips to improve password",
+    "password-creation-tips-title": "Tips to improve",
     "password-creation-tips-1": "Lower case",
-    "password-creation-tips-2": "Upper-case",
+    "password-creation-tips-2": "Upper case",
     "password-creation-tips-3": "Numbers",
     "password-creation-tips-4": "Symbols",
     "password-creation-disclaimer": "I understand my password can't be recovered",