From 834c0a38009d35852e88143cd7733eb8a3bab725 Mon Sep 17 00:00:00 2001 From: Alexander Date: Thu, 15 Feb 2024 10:42:54 +0100 Subject: [PATCH] Design review: create profile password (#18607) * Design review: create profile password * Fixes * Fixes * Fixes * Fixes * Code style fix * Fixes --- .../dividers/strength_divider/style.cljs | 2 +- .../dividers/strength_divider/view.cljs | 7 +++-- .../onboarding/create_password/style.cljs | 26 ++----------------- .../onboarding/create_password/view.cljs | 26 ++++++++++--------- translations/en.json | 4 +-- 5 files changed, 24 insertions(+), 41 deletions(-) diff --git a/src/quo/components/dividers/strength_divider/style.cljs b/src/quo/components/dividers/strength_divider/style.cljs index e59381a0b5..c328006c8e 100644 --- a/src/quo/components/dividers/strength_divider/style.cljs +++ b/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 diff --git a/src/quo/components/dividers/strength_divider/view.cljs b/src/quo/components/dividers/strength_divider/view.cljs index b98d93ccdd..f18c1fccf6 100644 --- a/src/quo/components/dividers/strength_divider/view.cljs +++ b/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 diff --git a/src/status_im/contexts/onboarding/create_password/style.cljs b/src/status_im/contexts/onboarding/create_password/style.cljs index 98dd4bf864..5d7fe1afd5 100644 --- a/src/status_im/contexts/onboarding/create_password/style.cljs +++ b/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 - {: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 info-message + {:margin-top 8}) (def space-between-inputs {:height 16}) diff --git a/src/status_im/contexts/onboarding/create_password/view.cljs b/src/status_im/contexts/onboarding/create_password/view.cljs index 7a2df8afef..1c67b24241 100644 --- a/src/status_im/contexts/onboarding/create_password/view.cljs +++ b/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/icon (if (= status :success) :i/check-circle :i/info) - {:container-style style/label-icon - :color (style/label-icon-color status) - :size 16}] - [quo/text - {:style (style/label-color status) - :size :paragraph-2} - text]])]]) + [quo/info-message + {:type status + :size :default + :icon (if (= status :success) :i/positive-state :i/info) + :text-color (when (= status :default) + colors/white-70-blur) + :icon-color (when (= status :default) + colors/white-70-blur) + :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) - hint-2-status (if passwords-match? :success :danger) + (let [hint-1-status (if password-long-enough? :success :default) + 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)) diff --git a/translations/en.json b/translations/en.json index 663f70a5f4..9c266a783a 100644 --- a/translations/en.json +++ b/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",