From 7e8f1fac8a8393a9deecae16d1af4b7e66ace5a7 Mon Sep 17 00:00:00 2001 From: Ajay Sivan Date: Fri, 19 May 2023 05:17:03 -0700 Subject: [PATCH] app locked screen design review changes (#15927) --- resources/images/icons2/16x16/unlocked@2x.png | Bin 685 -> 788 bytes resources/images/icons2/16x16/unlocked@3x.png | Bin 1078 -> 1116 bytes resources/images/icons2/20x20/unlocked@2x.png | Bin 801 -> 868 bytes resources/images/icons2/20x20/unlocked@3x.png | Bin 1124 -> 1282 bytes src/quo2/components/buttons/button.cljs | 264 +++++++++--------- src/quo2/components/inputs/input/view.cljs | 4 +- .../inputs/recovery_phrase/view.cljs | 4 +- .../components/inputs/search_input/view.cljs | 4 +- .../components/inputs/title_input/view.cljs | 4 +- src/quo2/theme.cljs | 10 +- .../contexts/chat/composer/view.cljs | 4 +- .../contexts/onboarding/profiles/style.cljs | 16 +- .../contexts/onboarding/profiles/view.cljs | 45 +-- .../contexts/quo_preview/preview.cljs | 26 +- 14 files changed, 204 insertions(+), 177 deletions(-) diff --git a/resources/images/icons2/16x16/unlocked@2x.png b/resources/images/icons2/16x16/unlocked@2x.png index bc7f3ce5e0ea8aab86e731dd36689f6cc33a0dfe..89c6725543f2f7872d36709ac7cd2d6c50158574 100644 GIT binary patch delta 714 zcmV;*0yX`u1(XJmR)48UL_t(|0mWBMZqq;%{>FBTQz|sDLLx=(37Q);oPe-nhd2S{ z1WivswydBhpxJfT^akk(2x_`!R3YjT+rxYDI89sI@i>w4NtS1EzGe8GsxB?P- zL@+Nz!+leAHyl{t{^a`ejku}79Taf78Hf2; zHTVd4k}^(1?)+u}Pi3=*b$}*6V*y)or_wQar~yek!S4uBkQ(tu{8rP8C&)XNP-O|+ah)thXj&yQ{7*;S1cM+i>Uw@+8e@e|ZJugum?>GHtn1t8o zWu($LuqB&^w4Sb^Dk7gy^t+&dGfJSosVzVwRx^`Rn-v9wG$3o|-FC+ITy7|e`yOS+xo&j< zZUK22Ofab~fZT880%C~j0w}-dZu>HD3yv~ZKuo~{E5-&ka&6`&BcBA^nzjoOfHPvc!GRt(i&NP)vi3|IbSA8W4M?Q5Z`~asje5+V)KW zVgnwdXIWAAVJl!0UN1Wa&TKX!vTT_3H8xI)xTTkfiV@0U$(OlLWXL&pkqjRj5;B6I z6t4H^+I6x}PVJ*mjk~BLfWcKTkq%J{<;4hNVM9q4h1Ubme{oE!X0ha<RAqbvQ)D#*d;0N4LUs2<)`=N?(<{O;V-YP z<Pr8PBG^$;oF_1!-yp0YnH!f2E6xpq=@p!kkq099@9`5(ILiW&^Y!2BU7-VE_ix z_obDKdJiqyc7L`v0F%ow#3NQEMm91MtDop9qg~o6Xc&|?peroFbX0*(K*G(wS*~BFa6LOaM>;pEW9LtK7#kX_*M^Ybv=DI8oXMgdS8i|k$jJ-mB>CUk>bDYwA zN5KJ*^DB5s1hwW{YftDRo4hsji@N(Qq#f;Fk|7uhp06trjZzn_<9n*9n<$rJI3?4k*UWzj- z#pWzok6ULmI+#`~*w<#{*^UKm$IHEL$Bl1BD+)VFyH~U-qhho&7Ie@=v1+_eF~7J` wKV_3+%NG+NsF--{JQ*d@To+18Jn>lg2me3VZa>e1ga7~l07*qoM6N<$f;QP300000 diff --git a/resources/images/icons2/16x16/unlocked@3x.png b/resources/images/icons2/16x16/unlocked@3x.png index a49480d872f19048af1444c94c80f4f7c22c3e41..d329e965683a12c0f111f8be2d2742f90e636780 100644 GIT binary patch delta 1045 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 JPDHLkV1no9Uzz{_ diff --git a/resources/images/icons2/20x20/unlocked@3x.png b/resources/images/icons2/20x20/unlocked@3x.png index b9ce42e7c4b6035e9c54ada3ee833c9c905a9ba0..70d025f3849da3d96df2bb0f31eee237b9d79de0 100644 GIT binary patch delta 1213 zcmV;u1Va1d2!aZbReuDRNklexQ9cL_>7okm*K~APE=wJ&6=ubVZD`r$fRV}gGoHzdJ+&mbwfVp}St z{7O>IU{L3{%xG#~dlFUc6=P->G?PAB3m)gV$-gMYzAbP-$;U%mcV}(Vl+e!w`eRfT z14DX}d4Dw{%hSNZ_od@mp3LA=YM80?kY~W=bZL}s@PHn)`fM8(Sj}+2H&mJCdGSJQ zK;rhBPTadZ-0C8IOdHy6@f-PsQcUBp)k?66bM={_&59}%Zc8&24_Qz?y#_;!{jl1N zi)P3MuEi?UJxYZF9^_*&!&q=iYe+w)HTO4Kf`69GKtJ|NV_5{7NJ|g-#Ho1aB*?E~ zyg#t>-8n0cWg#pCGp%fc*2JFQy%=V0!4M09t5)yXxrkJTaW$8-};FOj<7dqDphH zl1Zz=Jq$1sJm1u2zo2DgDS`P=kZHLq8KyWvW3`>3h+sivsHeH@fx=79WTSO04=q;~0!ZM)R^)x$UzaT1^WL*{nG#;&4PQ2%{$%lVT!hJUDg z!;;3{E>P}C^?EMp>l!j$8hE94<2I(+uufkPSA}~TEcZ+0-HS-k5%kbR+|VmZOO`BI ba_#vBPO_>5dqi4Z00000NkvXXu0mjf!p2Yu delta 1054 zcmV+(1mXLF3gifoReuBdNkl%kdkz;Ss3>P=6UH{j?I zp8&jhqnsRX^yo==0(t_?Kiq`{YMm!rSPc$wDwqO@_4qZ@M#}^bWzB%e z6*$E4lrA;n7Pk+!2TM2)d9sB$UBj99;ffzrrxC56@_+UwQZVZ;$@sN$VQ@rlv9t|Y z3eF_(_?NkJg2$dJDlib3Uz-A}_JPM_RjaYvD}yt((V|sY=5Sdw6v1~o&bgz3uany;o)Rrf~jb) ztylA$*=9;71e+R(EEuO|T}IC6Zlsg5;j<9T0ysbpwq4@XF*fE^k=v3U-Z{a>6oPL% zh2Yzcg#ez?zF>;kZBdq*xvWKTDed!*HwKuQ@W^&0m4Ai#w1{Xm~-#>>qj zTYq8)@#`MCIhAIwBM@o%FLN)LV&E`-T{bv|loc#d?7t9kVESE~^ia=#H}WdpjUZmr zqG#*1V2H6`50z$e>agG(^IOOnRXNpbYaRa6cnik(6ps*GOnVEnNS?HLN^R(hqtD0~ zHJh0C;0?Wf9dD;nQzH^bEyLT`7vkv`{(nO2Su+}gLcFSTsnU`GGqKDJwB&($b1qB5K1s9I_ Y4I|NyAS}AVC;$Ke07*qoM6N<$f`%gc_y7O^ diff --git a/src/quo2/components/buttons/button.cljs b/src/quo2/components/buttons/button.cljs index 81d8fc9a98..6ea075c234 100644 --- a/src/quo2/components/buttons/button.cljs +++ b/src/quo2/components/buttons/button.cljs @@ -8,134 +8,142 @@ (defn themes [customization-color] - {:light {:primary {:icon-color colors/white - :label-color colors/white - :background-color {:default (colors/custom-color customization-color 50) - :pressed (colors/custom-color customization-color 60) - :disabled (colors/custom-color customization-color 50)}} - :secondary {:icon-color colors/primary-50 - :label-color colors/primary-50 - :background-color {:default colors/primary-50-opa-20 - :pressed colors/primary-50-opa-40 - :disabled colors/primary-50-opa-20}} - :grey {:icon-color colors/neutral-100 - :icon-secondary-color colors/neutral-50 - :label-color colors/neutral-100 - :background-color {:default colors/neutral-10 - :pressed colors/neutral-20 - :disabled colors/neutral-10}} - :dark-grey {:icon-color colors/neutral-100 - :icon-secondary-color colors/neutral-50 - :label-color colors/neutral-100 - :background-color {:default colors/neutral-20 - :pressed colors/neutral-30 - :disabled colors/neutral-20}} - :outline {:icon-color colors/neutral-50 - :icon-secondary-color colors/neutral-50 - :label-color colors/neutral-100 - :border-color {:default colors/neutral-30 - :pressed colors/neutral-40 - :disabled colors/neutral-30}} - :ghost {:icon-color colors/neutral-50 - :icon-secondary-color colors/neutral-50 - :label-color colors/neutral-100 - :background-color {:pressed colors/neutral-10}} - :danger {:icon-color colors/white - :label-color colors/white - :background-color {:default colors/danger-50 - :pressed colors/danger-60 - :disabled colors/danger-50}} - :positive {:icon-color colors/white - :label-color colors/white - :background-color {:default colors/success-50 - :pressed colors/success-60 - :disabled colors/success-50-opa-30}} - :photo-bg {:icon-color colors/neutral-100 - :icon-secondary-color colors/neutral-80-opa-40 - :label-color colors/neutral-100 - :background-color {:default colors/white-opa-40 - :pressed colors/white-opa-50 - :disabled colors/white-opa-40}} - :blur-bg {:icon-color colors/neutral-100 - :icon-secondary-color colors/neutral-80-opa-40 - :label-color colors/neutral-100 - :background-color {:default colors/neutral-80-opa-5 - :pressed colors/neutral-80-opa-10 - :disabled colors/neutral-80-opa-5}} - :blur-bg-outline {:icon-color colors/neutral-100 - :icon-secondary-color colors/neutral-80-opa-40 - :label-color colors/neutral-100 - :border-color {:default colors/neutral-80-opa-10 - :pressed colors/neutral-80-opa-20 - :disabled colors/neutral-80-opa-10}} - :shell {:icon-color colors/white - :label-color colors/white - :background-color {:default colors/neutral-95 - :pressed colors/neutral-95 - :disabled colors/neutral-95}}} - :dark {:primary {:icon-color colors/white - :label-color colors/white - :background-color {:default (colors/custom-color customization-color 60) - :pressed (colors/custom-color customization-color 50) - :disabled (colors/custom-color customization-color 60)}} - :secondary {:icon-color colors/primary-50 - :label-color colors/primary-50 - :background-color {:default colors/primary-50-opa-20 - :pressed colors/primary-50-opa-30 - :disabled colors/primary-50-opa-20}} - :grey {:icon-color colors/white - :icon-secondary-color colors/neutral-40 - :label-color colors/white - :background-color {:default colors/neutral-80 - :pressed colors/neutral-60 - :disabled colors/neutral-80}} - :dark-grey {:icon-color colors/white - :icon-secondary-color colors/neutral-40 - :label-color colors/white - :background-color {:default colors/neutral-70 - :pressed colors/neutral-60 - :disabled colors/neutral-70}} - :outline {:icon-color colors/neutral-40 - :icon-secondary-color colors/neutral-40 - :label-color colors/white - :border-color {:default colors/neutral-70 - :pressed colors/neutral-60 - :disabled colors/neutral-70}} - :ghost {:icon-color colors/neutral-40 - :icon-secondary-color colors/neutral-40 - :label-color colors/white - :background-color {:pressed colors/neutral-80}} - :danger {:icon-color colors/white - :label-color colors/white - :background-color {:default colors/danger-60 - :pressed colors/danger-50 - :disabled colors/danger-60}} - :positive {:icon-color colors/white - :label-color colors/white - :background-color {:default colors/success-60 - :pressed colors/success-50 - :disabled colors/success-60-opa-30}} - :photo-bg {:icon-color colors/white - :icon-secondary-color colors/neutral-30 - :label-color colors/white - :background-color {:default colors/neutral-80-opa-40 - :pressed colors/neutral-80-opa-50 - :disabled colors/neutral-80-opa-40}} - :blur-bg {:icon-color colors/white - :icon-secondary-color colors/white-opa-40 - :label-color colors/white - :background-color {:default colors/white-opa-5 - :pressed colors/white-opa-10 - :disabled colors/white-opa-5}} - :blur-bg-outline {:icon-color colors/white - :icon-secondary-color colors/white-opa-40 - :label-color colors/white - :border-color {:default colors/white-opa-10 - :pressed colors/white-opa-20 - :disabled colors/white-opa-5}} - :shell {:icon-color colors/white - :label-color colors/white - :background-color {:default colors/neutral-95}}}}) + {:light + {:primary {:icon-color colors/white + :icon-secondary-color colors/white-opa-70 + :label-color colors/white + :background-color {:default (colors/custom-color customization-color 50) + :pressed (colors/custom-color customization-color 60) + :disabled (colors/custom-color customization-color 50)}} + :secondary {:icon-color colors/primary-50 + :label-color colors/primary-50 + :background-color {:default colors/primary-50-opa-20 + :pressed colors/primary-50-opa-40 + :disabled colors/primary-50-opa-20}} + :grey {:icon-color colors/neutral-100 + :icon-secondary-color colors/neutral-50 + :label-color colors/neutral-100 + :background-color {:default colors/neutral-10 + :pressed colors/neutral-20 + :disabled colors/neutral-10}} + :dark-grey {:icon-color colors/neutral-100 + :icon-secondary-color colors/neutral-50 + :label-color colors/neutral-100 + :background-color {:default colors/neutral-20 + :pressed colors/neutral-30 + :disabled colors/neutral-20}} + :outline {:icon-color colors/neutral-50 + :icon-secondary-color colors/neutral-50 + :label-color colors/neutral-100 + :border-color {:default colors/neutral-30 + :pressed colors/neutral-40 + :disabled colors/neutral-30}} + :ghost {:icon-color colors/neutral-50 + :icon-secondary-color colors/neutral-50 + :label-color colors/neutral-100 + :background-color {:pressed colors/neutral-10}} + :danger {:icon-color colors/white + :icon-secondary-color colors/white-opa-70 + :label-color colors/white + :background-color {:default colors/danger-50 + :pressed colors/danger-60 + :disabled colors/danger-50}} + :positive {:icon-color colors/white + :icon-secondary-color colors/white-opa-70 + :label-color colors/white + :background-color {:default colors/success-50 + :pressed colors/success-60 + :disabled colors/success-50-opa-30}} + :photo-bg {:icon-color colors/neutral-100 + :icon-secondary-color colors/neutral-80-opa-40 + :label-color colors/neutral-100 + :background-color {:default colors/white-opa-40 + :pressed colors/white-opa-50 + :disabled colors/white-opa-40}} + :blur-bg {:icon-color colors/neutral-100 + :icon-secondary-color colors/neutral-80-opa-40 + :label-color colors/neutral-100 + :background-color {:default colors/neutral-80-opa-5 + :pressed colors/neutral-80-opa-10 + :disabled colors/neutral-80-opa-5}} + :blur-bg-outline {:icon-color colors/neutral-100 + :icon-secondary-color colors/neutral-80-opa-40 + :label-color colors/neutral-100 + :border-color {:default colors/neutral-80-opa-10 + :pressed colors/neutral-80-opa-20 + :disabled colors/neutral-80-opa-10}} + :shell {:icon-color colors/white + :label-color colors/white + :background-color {:default colors/neutral-95 + :pressed colors/neutral-95 + :disabled colors/neutral-95}}} + :dark + {:primary {:icon-color colors/white + :icon-secondary-color colors/white-opa-70 + :label-color colors/white + :background-color {:default (colors/custom-color customization-color 60) + :pressed (colors/custom-color customization-color 50) + :disabled (colors/custom-color customization-color 60)}} + :secondary {:icon-color colors/primary-50 + :label-color colors/primary-50 + :background-color {:default colors/primary-50-opa-20 + :pressed colors/primary-50-opa-30 + :disabled colors/primary-50-opa-20}} + :grey {:icon-color colors/white + :icon-secondary-color colors/neutral-40 + :label-color colors/white + :background-color {:default colors/neutral-80 + :pressed colors/neutral-60 + :disabled colors/neutral-80}} + :dark-grey {:icon-color colors/white + :icon-secondary-color colors/neutral-40 + :label-color colors/white + :background-color {:default colors/neutral-70 + :pressed colors/neutral-60 + :disabled colors/neutral-70}} + :outline {:icon-color colors/neutral-40 + :icon-secondary-color colors/neutral-40 + :label-color colors/white + :border-color {:default colors/neutral-70 + :pressed colors/neutral-60 + :disabled colors/neutral-70}} + :ghost {:icon-color colors/neutral-40 + :icon-secondary-color colors/neutral-40 + :label-color colors/white + :background-color {:pressed colors/neutral-80}} + :danger {:icon-color colors/white + :icon-secondary-color colors/white-opa-70 + :label-color colors/white + :background-color {:default colors/danger-60 + :pressed colors/danger-50 + :disabled colors/danger-60}} + :positive {:icon-color colors/white + :icon-secondary-color colors/white-opa-70 + :label-color colors/white + :background-color {:default colors/success-60 + :pressed colors/success-50 + :disabled colors/success-60-opa-30}} + :photo-bg {:icon-color colors/white + :icon-secondary-color colors/neutral-30 + :label-color colors/white + :background-color {:default colors/neutral-80-opa-40 + :pressed colors/neutral-80-opa-50 + :disabled colors/neutral-80-opa-40}} + :blur-bg {:icon-color colors/white + :icon-secondary-color colors/white-opa-40 + :label-color colors/white + :background-color {:default colors/white-opa-5 + :pressed colors/white-opa-10 + :disabled colors/white-opa-5}} + :blur-bg-outline {:icon-color colors/white + :icon-secondary-color colors/white-opa-40 + :label-color colors/white + :border-color {:default colors/white-opa-10 + :pressed colors/white-opa-20 + :disabled colors/white-opa-5}} + :shell {:icon-color colors/white + :label-color colors/white + :background-color {:default colors/neutral-95}}}}) (defn shape-style-container [type icon size] diff --git a/src/quo2/components/inputs/input/view.cljs b/src/quo2/components/inputs/input/view.cljs index 3764441d62..6fbdbdfd42 100644 --- a/src/quo2/components/inputs/input/view.cljs +++ b/src/quo2/components/inputs/input/view.cljs @@ -4,7 +4,8 @@ [quo2.components.inputs.input.style :as style] [quo2.components.markdown.text :as text] [react-native.core :as rn] - [reagent.core :as reagent])) + [reagent.core :as reagent] + [quo2.theme :as theme])) (defn- label-&-counter [{:keys [label current-chars char-limit variant-colors]}] @@ -100,6 +101,7 @@ (cond-> {:style (style/input colors-by-status small? @multiple-lines?) :accessibility-label :input :placeholder-text-color (:placeholder colors-by-status) + :keyboard-appearance (theme/theme-value :light :dark override-theme) :cursor-color (:cursor variant-colors) :editable (not disabled?) :on-focus (fn [] diff --git a/src/quo2/components/inputs/recovery_phrase/view.cljs b/src/quo2/components/inputs/recovery_phrase/view.cljs index 4ab02fc637..c98a14f1c6 100644 --- a/src/quo2/components/inputs/recovery_phrase/view.cljs +++ b/src/quo2/components/inputs/recovery_phrase/view.cljs @@ -2,7 +2,8 @@ (:require [clojure.string :as string] [quo2.components.inputs.recovery-phrase.style :as style] [react-native.core :as rn] - [reagent.core :as reagent])) + [reagent.core :as reagent] + [quo2.theme :as theme])) (def ^:private custom-props [:customization-color :override-theme :blur? :cursor-color :multiline :on-focus :on-blur @@ -42,6 +43,7 @@ :style (style/input) :placeholder-text-color (style/placeholder-color @state override-theme blur?) :cursor-color (style/cursor-color customization-color override-theme) + :keyboard-appearance (theme/theme-value :light :dark override-theme) :multiline true :on-focus (fn [] (set-focused) diff --git a/src/quo2/components/inputs/search_input/view.cljs b/src/quo2/components/inputs/search_input/view.cljs index 60ee99172d..02e4b94202 100644 --- a/src/quo2/components/inputs/search_input/view.cljs +++ b/src/quo2/components/inputs/search_input/view.cljs @@ -3,7 +3,8 @@ [quo2.components.icon :as icon] [quo2.components.inputs.search-input.style :as style] [react-native.core :as rn] - [reagent.core :as reagent])) + [reagent.core :as reagent] + [quo2.foundations.colors :as colors])) (def ^:private tag-separator [rn/view {:style style/tag-separator}]) @@ -68,6 +69,7 @@ :placeholder-text-color (style/placeholder-color @state blur? override-theme) :editable (not disabled?) :on-key-press #(handle-backspace % @scroll-view-ref) + :keyboard-appearance (colors/theme-colors :light :dark override-theme) :on-change-text (fn [new-text] (when on-change-text (on-change-text new-text)) diff --git a/src/quo2/components/inputs/title_input/view.cljs b/src/quo2/components/inputs/title_input/view.cljs index 2c9bf9196f..2bb3af936a 100644 --- a/src/quo2/components/inputs/title_input/view.cljs +++ b/src/quo2/components/inputs/title_input/view.cljs @@ -3,7 +3,8 @@ [quo2.components.inputs.title-input.style :as style] [quo2.components.markdown.text :as text] [reagent.core :as reagent] - [react-native.core :as rn])) + [react-native.core :as rn] + [quo2.theme :as theme])) (defn- pad-0 [value] @@ -38,6 +39,7 @@ :style (style/title-text disabled? blur? override-theme)}) :default-value default-value :accessibility-label :profile-title-input + :keyboard-appearance (theme/theme-value :light :dark override-theme) :on-focus #(swap! focused? (fn [] true)) :on-blur #(swap! focused? (fn [] false)) :input-mode :text diff --git a/src/quo2/theme.cljs b/src/quo2/theme.cljs index e1109e7169..7a14581cad 100644 --- a/src/quo2/theme.cljs +++ b/src/quo2/theme.cljs @@ -13,4 +13,12 @@ (defn set-theme [value] - (reset! theme value)) \ No newline at end of file + (reset! theme value)) + +(defn theme-value + "Returns a value based on the current/override-theme theme." + ([light-value dark-value] + (theme-value light-value dark-value nil)) + ([light-value dark-value override-theme] + (let [theme (or override-theme (get-theme))] + (if (= theme :light) light-value dark-value)))) diff --git a/src/status_im2/contexts/chat/composer/view.cljs b/src/status_im2/contexts/chat/composer/view.cljs index fb3f4450e1..cbf61a9a67 100644 --- a/src/status_im2/contexts/chat/composer/view.cljs +++ b/src/status_im2/contexts/chat/composer/view.cljs @@ -21,7 +21,8 @@ [status-im2.contexts.chat.composer.gesture :as drag-gesture] [status-im2.contexts.chat.composer.handlers :as handler] [status-im2.contexts.chat.composer.gradients.view :as gradients] - [status-im2.contexts.chat.composer.selection :as selection])) + [status-im2.contexts.chat.composer.selection :as selection] + [quo2.theme :as theme])) (defn sheet-component [{:keys [insets window-height blur-height opacity background-y]} props state] @@ -99,6 +100,7 @@ :on-change-text #(handler/change-text % props state) :on-selection-change #(handler/selection-change % props state) :on-selection #(selection/on-selection % props state) + :keyboard-appearance (theme/theme-value :light :dark) :max-height max-height :max-font-size-multiplier 1 :multiline true diff --git a/src/status_im2/contexts/onboarding/profiles/style.cljs b/src/status_im2/contexts/onboarding/profiles/style.cljs index 458d46185a..90e08ee1bf 100644 --- a/src/status_im2/contexts/onboarding/profiles/style.cljs +++ b/src/status_im2/contexts/onboarding/profiles/style.cljs @@ -1,6 +1,5 @@ (ns status-im2.contexts.onboarding.profiles.style - (:require [quo2.foundations.colors :as colors] - [react-native.platform :as platform])) + (:require [quo2.foundations.colors :as colors])) ;; Profiles Section @@ -48,15 +47,10 @@ (def login-profile-card {:margin-bottom 20}) -(def info-message - {:margin-top 8}) - -(def forget-password-button - {:margin-vertical 8}) - -(defn login-button - [] - {:margin-bottom (if platform/android? 20 46)}) +(def error-message + {:margin-top 8 + :flex-direction :row + :align-items :center}) (def forget-password-doc-container {:margin-right 16}) (def forget-password-step-container {:flex-direction :row :margin-top 14}) diff --git a/src/status_im2/contexts/onboarding/profiles/view.cljs b/src/status_im2/contexts/onboarding/profiles/view.cljs index 43413c7954..e46dc1693b 100644 --- a/src/status_im2/contexts/onboarding/profiles/view.cljs +++ b/src/status_im2/contexts/onboarding/profiles/view.cljs @@ -10,7 +10,9 @@ [utils.i18n :as i18n] [utils.re-frame :as rf] [utils.security.core :as security] - [utils.transforms :as types])) + [utils.transforms :as types] + [quo2.foundations.colors :as colors] + [react-native.safe-area :as safe-area])) (defn login-multiaccount [] @@ -178,7 +180,8 @@ sign-in-enabled? (rf/sub [:sign-in-enabled?]) profile-picture (:uri (first (:images multiaccount)))] [rn/keyboard-avoiding-view - {:style style/login-container} + {:style style/login-container + :keyboardVerticalOffset (- (safe-area/get-bottom))} [quo/button {:size 32 :type :blur-bg @@ -213,23 +216,25 @@ :default-value (security/safe-unmask-data password) :on-submit-editing (when sign-in-enabled? login-multiaccount)}] (when (seq error) - [quo/info-message - {:type :error - :size :default - :icon :i/info - :style style/info-message} - error])] - [quo/button - {:size 40 - :type :ghost - :before :i/info - :disabled processing - :accessibility-label :forget-password-button - :override-theme :dark - :style style/forget-password-button - :on-press #(rf/dispatch [:show-bottom-sheet - {:content forget-password-doc :shell? true}])} - (i18n/label :t/forgot-password)] + [rn/view {:style style/error-message} + [quo/info-message + {:type :error + :size :default + :icon :i/info} + error] + [rn/touchable-opacity + {:hit-slop {:top 6 :bottom 20 :left 0 :right 0} + :style {:margin-left -4} + :disabled processing + :active-opacity 1 + :on-press #(rf/dispatch [:show-bottom-sheet + {:content forget-password-doc :shell? true}])} + [rn/text + {:style {:text-decoration-line :underline + :color colors/danger-60} + :size :paragraph-2 + :suppress-highlighting true} + (i18n/label :t/forgot-password)]]])] [quo/button {:size 40 :type :primary @@ -239,7 +244,7 @@ :before :i/unlocked :disabled (or (not sign-in-enabled?) processing) :on-press login-multiaccount - :style (style/login-button)} + :style {:margin-bottom (+ (safe-area/get-bottom) 12)}} (i18n/label :t/log-in)]])) (defn views diff --git a/src/status_im2/contexts/quo_preview/preview.cljs b/src/status_im2/contexts/quo_preview/preview.cljs index 6d8fa47b65..e22f1865e5 100644 --- a/src/status_im2/contexts/quo_preview/preview.cljs +++ b/src/status_im2/contexts/quo_preview/preview.cljs @@ -4,7 +4,8 @@ [react-native.blur :as blur] [react-native.core :as rn] [reagent.core :as reagent] - [status-im2.common.resources :as resources]) + [status-im2.common.resources :as resources] + [quo2.theme :as theme]) (:require-macros status-im2.contexts.quo-preview.preview)) (def container @@ -106,17 +107,18 @@ [rn/view {:style {:flex 0.6}} [rn/text-input (merge - {:value @state* - :show-cancel false - :style {:border-radius 4 - :border-width 1 - :color (colors/theme-colors colors/neutral-100 colors/white) - :border-color (colors/theme-colors colors/neutral-100 colors/white)} - :on-change-text #(do - (reset! state* (if (and suffix (> (count %) (count @state*))) - (str (string/replace % suffix "") suffix) - %)) - (reagent/flush))} + {:value @state* + :show-cancel false + :style {:border-radius 4 + :border-width 1 + :color (colors/theme-colors colors/neutral-100 colors/white) + :border-color (colors/theme-colors colors/neutral-100 colors/white)} + :keyboard-appearance (theme/theme-value :light :dark) + :on-change-text #(do + (reset! state* (if (and suffix (> (count %) (count @state*))) + (str (string/replace % suffix "") suffix) + %)) + (reagent/flush))} (when limit {:max-length limit}))]]]))