From 1aadffd3009e757ccb36600469cadad1f5e5b6db Mon Sep 17 00:00:00 2001 From: Omar Basem Date: Mon, 25 Sep 2023 08:32:04 +0400 Subject: [PATCH] Quo2: keypair blur (#17294) * quo2: keypair blur --- ios/Podfile.lock | 8 ++ src/quo2/components/wallet/keypair/style.cljs | 17 ++- src/quo2/components/wallet/keypair/view.cljs | 121 ++++++++++-------- .../contexts/quo_preview/wallet/keypair.cljs | 25 +++- 4 files changed, 102 insertions(+), 69 deletions(-) diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 74d395bf13..7dbce71163 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -772,7 +772,15 @@ SPEC CHECKSUMS: RNLanguages: 962e562af0d34ab1958d89bcfdb64fafc37c513e RNPermissions: ad71dd4f767ec254f2cd57592fbee02afee75467 RNReactNativeHapticFeedback: 2566b468cc8d0e7bb2f84b23adc0f4614594d071 +<<<<<<< HEAD +<<<<<<< HEAD RNReanimated: 43adb0307a62c1ce9694f36f124ca3b51a15272a +======= + RNReanimated: 06a228c5a245ef7b5b03f0efc29d76ce4db9031c +>>>>>>> c50db2fd2 (lint) +======= + RNReanimated: d0db0ee059c33381bca787a2193c27e52750ccaf +>>>>>>> a52fda25e (lint) RNShare: d82e10f6b7677f4b0048c23709bd04098d5aee6c RNStaticSafeAreaInsets: 055ddbf5e476321720457cdaeec0ff2ba40ec1b8 RNSVG: 80584470ff1ffc7994923ea135a3e5ad825546b9 diff --git a/src/quo2/components/wallet/keypair/style.cljs b/src/quo2/components/wallet/keypair/style.cljs index b87bd76e97..f3a204f954 100644 --- a/src/quo2/components/wallet/keypair/style.cljs +++ b/src/quo2/components/wallet/keypair/style.cljs @@ -2,14 +2,19 @@ (:require [quo2.foundations.colors :as colors])) (defn container - [selected? customization-color theme] - {:border-radius 20 + [{:keys [blur? customization-color theme selected?]}] + {:flex 1 + :border-radius 20 :border-width 1 :border-color (if selected? - (colors/theme-colors (colors/custom-color customization-color 50) - (colors/custom-color customization-color 60) - theme) - (colors/theme-colors colors/neutral-10 colors/neutral-80 theme)) + (if blur? + colors/white + (colors/theme-colors (colors/custom-color customization-color 50) + (colors/custom-color customization-color 60) + theme)) + (if blur? + colors/white-opa-5 + (colors/theme-colors colors/neutral-10 colors/neutral-80 theme))) :padding-bottom 8}) (def header-container diff --git a/src/quo2/components/wallet/keypair/view.cljs b/src/quo2/components/wallet/keypair/view.cljs index b62d0f0aed..0d8795ca36 100644 --- a/src/quo2/components/wallet/keypair/view.cljs +++ b/src/quo2/components/wallet/keypair/view.cljs @@ -25,69 +25,78 @@ (if (= stored :on-device) (i18n/label :t/on-device) (i18n/label :t/on-keycard)))) (defn avatar - [type full-name customization-color] - (if (= type :default-keypair) - [user-avatar/user-avatar - {:full-name full-name - :ring? true - :size :small - :customization-color customization-color}] - [icon-avatar/icon-avatar - {:size :size/s-32 - :icon :i/placeholder - :border? true}])) + [{:keys [type details customization-color]}] + (let [{:keys [full-name]} details] + (if (= type :default-keypair) + [user-avatar/user-avatar + {:full-name full-name + :ring? true + :size :small + :customization-color customization-color}] + [icon-avatar/icon-avatar + {:size :size-32 + :icon :i/placeholder + :border? true}]))) (defn title-view - [full-name action selected? type customization-color on-options-press theme] - [rn/view - {:style style/title-container - :accessibility-label :title} - [text/text {:weight :semi-bold} - (if (= type :default-keypair) (keypair-string full-name) full-name)] - (if (= action :selector) - [selectors/radio - {:checked? selected? - :customization-color customization-color}] - [rn/pressable {:on-press on-options-press} - [icon/icon :i/options - {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme) - :accessibility-label :options-button}]])]) + [{:keys [details action selected? type blur? customization-color on-options-press theme]}] + (let [{:keys [full-name]} details] + [rn/view + {:style style/title-container + :accessibility-label :title} + [text/text {:weight :semi-bold} + (if (= type :default-keypair) (keypair-string full-name) full-name)] + (if (= action :selector) + [selectors/radio + {:checked? selected? + :blur? blur? + :customization-color customization-color}] + [rn/pressable {:on-press on-options-press} + [icon/icon :i/options + {:color (if blur? + colors/white-opa-70 + (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)) + :accessibility-label :options-button}]])])) (defn details-view - [address stored theme] - [rn/view - {:style {:flex-direction :row - :align-items :center}} - [text/text - {:size :paragraph-2 - :accessibility-label :details - :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}} - (details-string address stored)] - (when (= stored :on-keycard) - [rn/view {:style {:margin-left 4}} - [icon/icon :i/keycard-card - {:size 16 - :color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}]])]) + [{:keys [details stored blur? theme]}] + (let [{:keys [address]} details] + [rn/view + {:style {:flex-direction :row + :align-items :center}} + [text/text + {:size :paragraph-2 + :accessibility-label :details + :style {:color (if blur? + colors/white-opa-40 + (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}} + (details-string address stored)] + (when (= stored :on-keycard) + [rn/view {:style {:margin-left 4}} + [icon/icon :i/keycard-card + {:size 16 + :color (if blur? + colors/white-opa-40 + (colors/theme-colors colors/neutral-50 colors/neutral-40))}]])])) (defn- view-internal [] (let [selected? (reagent/atom true)] - (fn [{:keys [theme accounts customization-color type details stored action on-options-press]}] - (let [{:keys [address full-name]} details] - [rn/pressable - {:style (style/container @selected? customization-color theme) - :on-press #(when (= action :selector) (reset! selected? (not @selected?)))} - [rn/view {:style style/header-container} - [avatar type full-name customization-color] - [rn/view - {:style {:margin-left 8 - :flex 1}} - [title-view full-name action @selected? type customization-color on-options-press theme] - [details-view address stored theme]]] - [rn/flat-list - {:data accounts - :render-fn account-list-card/view - :separator [rn/view {:style {:height 8}}] - :style {:padding-horizontal 8}}]])))) + (fn [{:keys [accounts action] :as props}] + [rn/pressable + {:style (style/container (merge props {:selected? @selected?})) + :on-press #(when (= action :selector) (reset! selected? (not @selected?)))} + [rn/view {:style style/header-container} + [avatar props] + [rn/view + {:style {:margin-left 8 + :flex 1}} + [title-view (assoc props :selected? @selected?)] + [details-view props]]] + [rn/flat-list + {:data accounts + :render-fn account-list-card/view + :separator [rn/view {:style {:height 8}}] + :style {:padding-horizontal 8}}]]))) (def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im2/contexts/quo_preview/wallet/keypair.cljs b/src/status_im2/contexts/quo_preview/wallet/keypair.cljs index 49b898195b..64983fce8d 100644 --- a/src/status_im2/contexts/quo_preview/wallet/keypair.cljs +++ b/src/status_im2/contexts/quo_preview/wallet/keypair.cljs @@ -52,6 +52,10 @@ :state :default :action :none}]) +(defn get-accounts + [blur?] + (map (fn [account] (assoc account :blur? blur?)) accounts)) + (def descriptor [{:label "Stored:" :key :stored @@ -74,7 +78,9 @@ :value "Default keypair"} {:key :other :value "Other"}]} - (preview/customization-color-option)]) + (preview/customization-color-option) + {:key :blur? + :type :boolean}]) (def default-details {:full-name "John Doe" @@ -84,16 +90,20 @@ (defn preview [] - (let [state (reagent/atom {:accounts accounts - :customization-color :blue + (let [state (reagent/atom {:customization-color :blue :type :default-keypair :stored :on-device :on-options-press #(js/alert "Options pressed") - :action :selector})] + :action :selector + :blur? false})] (fn [] [preview/preview-container - {:state state - :descriptor descriptor} + {:state state + :descriptor descriptor + :blur? (:blur? @state) + :show-blur-background? true + :blur-dark-only? true + :blur-height 400} [rn/view {:style {:padding-vertical 30 :flex-direction :row @@ -101,4 +111,5 @@ [quo/keypair (merge @state - {:details (if (= (:type @state) :default-keypair) default-details other-details)})]]]))) + {:details (if (= (:type @state) :default-keypair) default-details other-details) + :accounts (get-accounts (:blur? @state))})]]])))