From 0e36190516cacb367447ca02591e0f3aa541e790 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ulises=20Manuel=20C=C3=A1rdenas?= <90291778+ulisesmac@users.noreply.github.com> Date: Thu, 16 Mar 2023 12:59:34 -0600 Subject: [PATCH] Fix input padding & add blur and override-theme properties Add with-let formatting style --- .zprintrc | 1 + src/quo2/components/inputs/input/style.cljs | 143 ++++++++---------- src/quo2/components/inputs/input/view.cljs | 77 +++++----- .../onboarding/common/intro/view.cljs | 71 +++++---- .../contexts/quo_preview/inputs/input.cljs | 66 ++++---- 5 files changed, 166 insertions(+), 192 deletions(-) diff --git a/.zprintrc b/.zprintrc index 2c8e8fbd22..dcf7bbd8f3 100644 --- a/.zprintrc +++ b/.zprintrc @@ -30,6 +30,7 @@ "list-comp" :binding "defview" :arg1-body "letsubs" :binding + "with-let" "let" "testing" :arg1-body "deftest-sub" :arg1-body "wait-for" :arg1-body diff --git a/src/quo2/components/inputs/input/style.cljs b/src/quo2/components/inputs/input/style.cljs index 3fc136a19c..b6d1a6ad7e 100644 --- a/src/quo2/components/inputs/input/style.cljs +++ b/src/quo2/components/inputs/input/style.cljs @@ -2,82 +2,63 @@ (:require [quo2.components.markdown.text :as text] [quo2.foundations.colors :as colors])) -(def variants-colors - "Colors that keep the same across input's status change" - {:light {:label colors/neutral-50 - :icon colors/neutral-50 - :cursor (colors/custom-color :blue 50) - :button-border colors/neutral-30 - :clear-icon colors/neutral-40 - :password-icon colors/neutral-50} - :light-blur {:label colors/neutral-80-opa-40 - :icon colors/neutral-80-opa-70 - :cursor (colors/custom-color :blue 50) - :button-border colors/neutral-80-opa-30 - :password-icon colors/neutral-100 - :clear-icon colors/neutral-80-opa-30} - :dark {:label colors/neutral-40 - :icon colors/neutral-40 - :cursor (colors/custom-color :blue 60) - :button-border colors/neutral-70 - :password-icon colors/white - :clear-icon colors/neutral-60} - :dark-blur {:label colors/white-opa-40 - :icon colors/white-opa-70 - :cursor colors/white - :button-border colors/white-opa-10 - :password-icon colors/white - :clear-icon colors/white-opa-10}}) +(defn variants-colors + [blur? override-theme] + (if blur? + {:label (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 override-theme) + :icon (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 override-theme) + :button-border (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-10 override-theme) + :password-icon (colors/theme-colors colors/neutral-100 colors/white override-theme) + :clear-icon (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-10 override-theme) + :cursor (colors/theme-colors (colors/custom-color :blue 50) + colors/white + override-theme)} + {:label (colors/theme-colors colors/neutral-50 colors/neutral-40 override-theme) + :icon (colors/theme-colors colors/neutral-50 colors/neutral-40 override-theme) + :button-border (colors/theme-colors colors/neutral-30 colors/neutral-70 override-theme) + :clear-icon (colors/theme-colors colors/neutral-40 colors/neutral-60 override-theme) + :password-icon (colors/theme-colors colors/neutral-50 colors/white override-theme) + :cursor (colors/theme-colors (colors/custom-color :blue 50) + (colors/custom-color :blue 60) + override-theme)})) -(def status-colors - {:light {:default {:border-color colors/neutral-20 - :placeholder colors/neutral-40 - :text colors/neutral-100} - :focus {:border-color colors/neutral-40 - :placeholder colors/neutral-30 - :text colors/neutral-100} - :error {:border-color colors/danger-opa-40 - :placeholder colors/neutral-40 - :text colors/neutral-100} - :disabled {:border-color colors/neutral-20 - :placeholder colors/neutral-40 - :text colors/neutral-40}} - :light-blur {:default {:border-color colors/neutral-80-opa-10 - :placeholder colors/neutral-80-opa-40 - :text colors/neutral-100} - :focus {:border-color colors/neutral-80-opa-20 - :placeholder colors/neutral-80-opa-20 - :text colors/neutral-100} - :error {:border-color colors/danger-opa-40 - :placeholder colors/neutral-80-opa-40 - :text colors/neutral-100} - :disabled {:border-color colors/neutral-80-opa-10 - :placeholder colors/neutral-80-opa-30 - :text colors/neutral-80-opa-30}} - :dark {:default {:border-color colors/neutral-80 - :placeholder colors/neutral-50 - :text colors/white} - :focus {:border-color colors/neutral-60 - :placeholder colors/neutral-60 - :text colors/white} - :error {:border-color colors/danger-opa-40 - :placeholder colors/white-opa-40 - :text colors/white} - :disabled {:border-color colors/neutral-80 - :placeholder colors/neutral-40 - :text colors/neutral-40}} - :dark-blur {:default {:border-color colors/white-opa-10 - :placeholder colors/white-opa-40 - :text colors/white} - :focus {:border-color colors/white-opa-40 - :placeholder colors/white-opa-20 - :text colors/white} - :error {:border-color colors/danger-opa-40 - :placeholder colors/white-opa-40 - :text colors/white} - :disabled {:border-color colors/white-opa-10 - :placeholder colors/white-opa-20 - :text colors/white-opa-20}}}) +(defn status-colors + [status blur? override-theme] + (if blur? + (case status + :focus + {:border-color (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-40 override-theme) + :placeholder (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 override-theme) + :text (colors/theme-colors colors/neutral-100 colors/white override-theme)} + :error + {:border-color (colors/theme-colors colors/danger-opa-40 colors/danger-opa-40 override-theme) + :placeholder (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 override-theme) + :text (colors/theme-colors colors/neutral-100 colors/white override-theme)} + :disabled + {:border-color (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 override-theme) + :placeholder (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-20 override-theme) + :text (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-20 override-theme)} + ;; :default + {:border-color (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 override-theme) + :placeholder (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 override-theme) + :text (colors/theme-colors colors/neutral-100 colors/white override-theme)}) + (case status + :focus + {:border-color (colors/theme-colors colors/neutral-40 colors/neutral-60 override-theme) + :placeholder (colors/theme-colors colors/neutral-30 colors/neutral-60 override-theme) + :text (colors/theme-colors colors/neutral-100 colors/white override-theme)} + :error + {:border-color (colors/theme-colors colors/danger-opa-40 colors/danger-opa-40 override-theme) + :placeholder (colors/theme-colors colors/neutral-40 colors/white-opa-40 override-theme) + :text (colors/theme-colors colors/neutral-100 colors/white override-theme)} + :disabled + {:border-color (colors/theme-colors colors/neutral-20 colors/neutral-80 override-theme) + :placeholder (colors/theme-colors colors/neutral-40 colors/neutral-40 override-theme) + :text (colors/theme-colors colors/neutral-40 colors/neutral-40 override-theme)} + ;; :default + {:border-color (colors/theme-colors colors/neutral-20 colors/neutral-80 override-theme) + :placeholder (colors/theme-colors colors/neutral-40 colors/neutral-50 override-theme) + :text (colors/theme-colors colors/neutral-100 colors/white override-theme)}))) (defn input-container [colors-by-status small? disabled?] @@ -90,11 +71,10 @@ (defn left-icon-container [small?] - {:margin-left (if small? 0 4) - :margin-right (if small? 4 8) - :margin-top (if small? 5 9) - :height 20 - :width 20}) + {:margin-left (if small? 0 4) + :margin-top (if small? 5 9) + :height 20 + :width 20}) (defn icon [colors-by-variant] @@ -106,7 +86,8 @@ (merge (text/text-style {:size :paragraph-1 :weight :regular}) {:flex 1 :text-align-vertical :top - :padding-horizontal 0 + :padding-right 0 + :padding-left (if small? 4 8) :padding-vertical (if small? 4 8) :color (:text colors-by-status)} (when-not multiple-lines? diff --git a/src/quo2/components/inputs/input/view.cljs b/src/quo2/components/inputs/input/view.cljs index 15702ccf97..191b3c4bd9 100644 --- a/src/quo2/components/inputs/input/view.cljs +++ b/src/quo2/components/inputs/input/view.cljs @@ -24,31 +24,31 @@ count-text]]])) (defn- left-accessory - [{:keys [variant-colors small icon-name]}] - [rn/view {:style (style/left-icon-container small)} + [{:keys [variant-colors small? icon-name]}] + [rn/view {:style (style/left-icon-container small?)} [icon/icon icon-name (style/icon variant-colors)]]) (defn- right-accessory - [{:keys [variant-colors small disabled on-press icon-style-fn icon-name]}] + [{:keys [variant-colors small? disabled? on-press icon-style-fn icon-name]}] [rn/touchable-opacity - {:style (style/right-icon-touchable-area small) - :disabled disabled + {:style (style/right-icon-touchable-area small?) + :disabled disabled? :on-press on-press} [icon/icon icon-name (icon-style-fn variant-colors)]]) (defn- right-button - [{:keys [variant-colors colors-by-status small disabled on-press text]}] + [{:keys [variant-colors colors-by-status small? disabled? on-press text]}] [rn/touchable-opacity - {:style (style/button variant-colors small) - :disabled disabled + {:style (style/button variant-colors small?) + :disabled disabled? :on-press on-press} [rn/text {:style (style/button-text colors-by-status)} text]]) (def ^:private custom-props "Custom properties that must be removed from properties map passed to InputText." - [:type :variant :error :right-icon :left-icon :disabled :small :button :label - :char-limit :on-char-limit-reach :icon-name]) + [:type :blur? :override-theme :error? :right-icon :left-icon :disabled? :small? :button + :label :char-limit :on-char-limit-reach :icon-name :multiline?]) (defn- base-input [{:keys [on-change-text on-char-limit-reach]}] @@ -67,16 +67,15 @@ (reset! char-count amount-chars) (when (>= amount-chars char-limit) (on-char-limit-reach amount-chars))))] - (fn [{:keys [variant error right-icon left-icon disabled small button label char-limit - multiline clearable] - :or {variant :light} + (fn [{:keys [blur? override-theme error? right-icon left-icon disabled? small? button + label char-limit multiline? clearable?] :as props}] - (let [status-path (cond - disabled :disabled - error :error - :else @status) - colors-by-status (get-in style/status-colors [variant status-path]) - variant-colors (style/variants-colors variant) + (let [status-kw (cond + disabled? :disabled + error? :error + :else @status) + colors-by-status (style/status-colors status-kw blur? override-theme) + variant-colors (style/variants-colors blur? override-theme) clean-props (apply dissoc props custom-props)] [rn/view (when (or label char-limit) @@ -85,38 +84,39 @@ :label label :current-chars @char-count :char-limit char-limit}]) - [rn/view {:style (style/input-container colors-by-status small disabled)} + [rn/view {:style (style/input-container colors-by-status small? disabled?)} (when-let [{:keys [icon-name]} left-icon] [left-accessory {:variant-colors variant-colors - :small small + :small? small? :icon-name icon-name}]) [rn/text-input - (cond-> {:style (style/input colors-by-status small @multiple-lines?) + (cond-> {:style (style/input colors-by-status small? @multiple-lines?) :placeholder-text-color (:placeholder colors-by-status) :cursor-color (:cursor variant-colors) - :editable (not disabled) + :editable (not disabled?) :on-focus on-focus :on-blur on-blur} :always (merge clean-props) - multiline (assoc :on-content-size-change set-multiple-lines!) - char-limit (assoc :on-change-text #(update-char-limit! char-limit %)))] + multiline? (assoc :multiline true + :on-content-size-change set-multiple-lines!) + char-limit (assoc :on-change-text #(update-char-limit! % char-limit)))] (when-let [{:keys [on-press icon-name style-fn]} right-icon] [right-accessory {:variant-colors variant-colors - :small small - :disabled disabled + :small? small? + :disabled? disabled? :icon-style-fn style-fn :icon-name icon-name :on-press (fn [] - (when clearable (reset! char-count 0)) + (when clearable? (reset! char-count 0)) (on-press))}]) (when-let [{:keys [on-press text]} button] [right-button {:colors-by-status colors-by-status :variant-colors variant-colors - :small small - :disabled disabled + :small? small? + :disabled? disabled? :on-press on-press :text text}])]])))) @@ -136,13 +136,14 @@ (defn input "This input supports the following properties: - :type - Can be `:text`(default) or `:password`. - - :variant - :light(default), :light-blur, :dark or :dark-blur. - - :small - Boolean to specify if this input is rendered in its small version. - - :multiline - Boolean to specify if this input support multiple lines. + - :blur? - Boolean to set the blur color variant. + - :override-theme - Can be `light` or `:dark`. + - :small? - Boolean to specify if this input is rendered in its small version. + - :multiline? - Boolean to specify if this input support multiple lines. - :icon-name - The name of an icon to display at the left of the input. - - :error - Boolean to specify it this input marks an error. - - :disabled - Boolean to specify if this input is disabled or not. - - :clearable - Booolean to specify if this input has a clear button at the end. + - :error? - Boolean to specify it this input marks an error. + - :disabled? - Boolean to specify if this input is disabled or not. + - :clearable? - Booolean to specify if this input has a clear button at the end. - :on-clear - Function executed when the clear button is pressed. - :button - Map containing `:on-press` & `:text` keys, if provided renders a button - :label - A label for this input. @@ -155,12 +156,12 @@ - :on-change-text ... " - [{:keys [type clearable on-clear on-change-text icon-name] + [{:keys [type clearable? on-clear on-change-text icon-name] :or {type :text} :as props}] (let [base-props (cond-> props icon-name (assoc-in [:left-icon :icon-name] icon-name) - clearable (assoc :right-icon + clearable? (assoc :right-icon {:style-fn style/clear-icon :icon-name :i/clear :on-press #(when on-clear (on-clear))}) diff --git a/src/status_im2/contexts/onboarding/common/intro/view.cljs b/src/status_im2/contexts/onboarding/common/intro/view.cljs index a15b6a068e..f282986cd5 100644 --- a/src/status_im2/contexts/onboarding/common/intro/view.cljs +++ b/src/status_im2/contexts/onboarding/common/intro/view.cljs @@ -51,41 +51,38 @@ (defn view [] - (reagent/with-let - [carousel-index (reagent/atom 0) - interval-id - (js/setInterval - #(swap! carousel-index set-index) - 1500)] - [rn/view {:style style/page-container} - [carousel @carousel-index] - [rn/image - {:style style/page-image - :source (get-in carousels [@carousel-index :image])}] - [quo/drawer-buttons - {:top-card {:on-press (fn [] - (rf/dispatch [:navigate-to :new-to-status]) - (rf/dispatch [:hide-terms-of-services-opt-in-screen])) - :heading (i18n/label :t/sign-in) - :accessibility-label :already-use-status-button} - :bottom-card {:on-press (fn [] - (rf/dispatch [:navigate-to :new-to-status]) - (rf/dispatch [:hide-terms-of-services-opt-in-screen])) - :heading (i18n/label :t/new-to-status) - :accessibility-label :new-to-status-button}} - (i18n/label :t/you-already-use-status) - [quo/text - {:style style/text-container} + (reagent/with-let [carousel-index (reagent/atom 0) + interval-id (js/setInterval #(swap! carousel-index set-index) + 1500)] + [rn/view {:style style/page-container} + [carousel @carousel-index] + [rn/image + {:style style/page-image + :source (get-in carousels [@carousel-index :image])}] + [quo/drawer-buttons + {:top-card {:on-press (fn [] + (rf/dispatch [:navigate-to :new-to-status]) + (rf/dispatch [:hide-terms-of-services-opt-in-screen])) + :heading (i18n/label :t/sign-in) + :accessibility-label :already-use-status-button} + :bottom-card {:on-press (fn [] + (rf/dispatch [:navigate-to :new-to-status]) + (rf/dispatch [:hide-terms-of-services-opt-in-screen])) + :heading (i18n/label :t/new-to-status) + :accessibility-label :new-to-status-button}} + (i18n/label :t/you-already-use-status) [quo/text - {:size :paragraph-2 - :style style/plain-text - :weight :semi-bold} - (i18n/label :t/by-continuing-you-accept)] - [quo/text - {:on-press #(rf/dispatch [:open-modal :privacy-policy]) - :size :paragraph-2 - :style style/highlighted-text - :weight :semi-bold} - (i18n/label :t/terms-of-service)]]]] - (finally - (js/clearInterval interval-id)))) + {:style style/text-container} + [quo/text + {:size :paragraph-2 + :style style/plain-text + :weight :semi-bold} + (i18n/label :t/by-continuing-you-accept)] + [quo/text + {:on-press #(rf/dispatch [:open-modal :privacy-policy]) + :size :paragraph-2 + :style style/highlighted-text + :weight :semi-bold} + (i18n/label :t/terms-of-service)]]]] + (finally + (js/clearInterval interval-id)))) diff --git a/src/status_im2/contexts/quo_preview/inputs/input.cljs b/src/status_im2/contexts/quo_preview/inputs/input.cljs index 36552bf0cf..84b2f38c96 100644 --- a/src/status_im2/contexts/quo_preview/inputs/input.cljs +++ b/src/status_im2/contexts/quo_preview/inputs/input.cljs @@ -1,11 +1,10 @@ (ns status-im2.contexts.quo-preview.inputs.input - (:require - [clojure.string :as string] - [quo2.core :as quo] - [quo2.foundations.colors :as colors] - [react-native.core :as rn] - [reagent.core :as reagent] - [status-im2.contexts.quo-preview.preview :as preview])) + (:require [clojure.string :as string] + [quo2.core :as quo] + [quo2.foundations.colors :as colors] + [react-native.core :as rn] + [reagent.core :as reagent] + [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor [{:label "Type:" @@ -15,31 +14,30 @@ :value "Text"} {:key :password :value "Password"}]} - {:label "Variant:" - :key :variant + {:label "Blur:" + :key :blur? + :type :boolean} + {:label "Override Theme:" + :key :override-theme :type :select - :options [{:key :light - :value "Light"} - {:key :dark + :options [{:key :dark :value "Dark"} - {:key :light-blur - :value "Light blur"} - {:key :dark-blur - :value "Dark blur"}]} + {:key :light + :value "Light"}]} {:label "Error:" - :key :error + :key :error? :type :boolean} {:label "Icon:" :key :icon-name :type :boolean} {:label "Disabled:" - :key :disabled + :key :disabled? :type :boolean} {:label "Clearable:" - :key :clearable + :key :clearable? :type :boolean} {:label "Small:" - :key :small + :key :small? :type :boolean} {:label "Multiline:" :key :multiline @@ -66,7 +64,8 @@ (defn cool-preview [] (let [state (reagent/atom {:type :text - :variant :light-blur + :blur false + :override-theme nil :placeholder "Type something" :error false :icon-name false @@ -75,29 +74,24 @@ :on-char-limit-reach #(js/alert (str "Char limit reached: " %))})] (fn [] - (let [background-color (case (:variant @state) - :dark-blur "rgb(39, 61, 81)" - :dark colors/neutral-95 - :light-blur "rgb(233,247,247)" - :white) - blank-label? (string/blank? (:label @state)) - icon? (boolean (:icon-name @state)) - button-props {:on-press #(js/alert "Button pressed!") - :text "My button"}] + (let [blank-label? (string/blank? (:label @state)) + icon? (boolean (:icon-name @state)) + button-props {:on-press #(js/alert "Button pressed!") + :text "My button"}] [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [rn/view {:style {:padding-bottom 150}} [rn/view {:style {:flex 1}} [preview/customizer state descriptor]] - [rn/view - {:style {:flex 1 - :align-items :center - :padding-vertical 60 - :background-color background-color}} + [preview/blur-view + {:style {:flex 1 + :align-items :center + :margin-vertical 20} + :show-blur-background? (:blur? @state)} [rn/view {:style {:width 300}} [quo/input (cond-> @state :always (assoc - :on-clear #(swap! state assoc :value "") + :on-clear? #(swap! state assoc :value "") :on-change-text #(swap! state assoc :value %)) (:button @state) (assoc :button button-props) blank-label? (dissoc :label)