diff --git a/src/mocks/js_dependencies.cljs b/src/mocks/js_dependencies.cljs index b1add6311a..c5741efc0e 100644 --- a/src/mocks/js_dependencies.cljs +++ b/src/mocks/js_dependencies.cljs @@ -153,8 +153,8 @@ :Text #js {} :Extrapolate #js {:CLAMP nil} :Code #js {}} - :Easing #js {:bezier identity - :linear identity} + :Easing #js {:bezier nil + :linear nil} :clockRunning nil}) (def react-native-gesture-handler #js {:default #js {} :State #js {:BEGAN nil @@ -203,5 +203,6 @@ "react-native-mail" react-native-mail "react-native-image-resizer" image-resizer "react-native-haptic-feedback" react-native-haptic-feedback + "reanimated-bottom-sheet" reanimated-bottom-sheet "./fleets.js" default-fleets nil)) diff --git a/src/quo/components/text.cljs b/src/quo/components/text.cljs index 3a5ea9ccfb..234260c22b 100644 --- a/src/quo/components/text.cljs +++ b/src/quo/components/text.cljs @@ -5,18 +5,15 @@ [quo.react-native :as rn] [reagent.core :as reagent])) -(defn text-style [{:keys [size align weight monospace color style]}] +(defn text-style [{:keys [size align weight color style]}] ;; NOTE(Ferossgo): or in destructoring will keep nil as a value - (merge (if monospace - ;; TODO(Ferossgp): Add all weights for monospace - typography/monospace - (case (or weight :regular) - :regular typography/font-regular - :medium typography/font-medium - :semi-bold typography/font-semi-bold - :bold typography/font-bold - :monospace typography/monospace ; DEPRECATED - :inherit nil)) + (merge (case (or weight :regular) + :regular typography/font-regular + :medium typography/font-medium + :semi-bold typography/font-semi-bold + :bold typography/font-bold + :monospace typography/monospace + :inherit nil) (case (or color :main) :main {:color (:text-01 @colors/theme)} :secondary {:color (:text-02 @colors/theme)} diff --git a/src/quo/components/text_input.cljs b/src/quo/components/text_input.cljs index 92d042e9c0..93dc152e50 100644 --- a/src/quo/components/text_input.cljs +++ b/src/quo/components/text_input.cljs @@ -5,36 +5,30 @@ [quo.react-native :as rn] ;; TODO(Ferossgp): Move icon component to lib [status-im.ui.components.icons.vector-icons :as icons] + ;; TODO(Ferossgp): Move tooltip into lib [quo.components.tooltip :as tooltip] + [quo.react :as react] [quo.platform :as platform] [quo.design-system.typography :as typography] [quo.design-system.spacing :as spacing] [quo.design-system.colors :as colors] [quo.components.text :as text])) -;; NOTE(Ferossgp): Refactor with hooks when available -;; We track all currently mounted text input refs -;; in a ref-to-defaultValue map -;; so that we can clear them (restore their default values) -;; when global react-navigation's onWillBlur event is invoked -(defonce text-input-refs (atom {})) - (s/def ::multiline boolean?) (s/def ::secure-text-entry boolean?) (s/def ::show-cancel boolean?) -(s/def ::label (s/nilable (s/or :string string? :component vector?))) +(s/def ::label (s/nilable string?)) (s/def ::cancel-label (s/nilable string?)) (s/def ::default-value (s/nilable string?)) (s/def ::placeholder (s/nilable string?)) -(s/def ::keyboard-type (s/nilable (s/or :string string? :keyword keyword?))) ; TODO: make set +(s/def ::keyboard-type #{}) (s/def ::accessibility-label (s/nilable (s/or :string string? :keyword keyword?))) (s/def ::on-focus fn?) (s/def ::on-blur fn?) (s/def ::on-press fn?) -(s/def ::accessory (s/keys :opt-un [::on-press - ::icon - ::component])) +(s/def ::accessory (s/keys :req-un [::icon] + :opt-un [::on-press])) (s/def ::after (s/nilable ::accessory)) (s/def ::before (s/nilable ::accessory)) @@ -66,13 +60,15 @@ false))) ;; TODO(Ferossgp): Check performance for android layout animations -;; (when (and platform/android? -;; (aget rn/ui-manager "setLayoutAnimationEnabledExperimental")) -;; (ocall rn/ui-manager "setLayoutAnimationEnabledExperimental" true)) +(when (and platform/android? + (aget rn/ui-manager "setLayoutAnimationEnabledExperimental")) + (ocall rn/ui-manager "setLayoutAnimationEnabledExperimental" true)) (def height 44) ; 22 line-height + 11*2 vertical padding (def multiline-height 88) ; 3 * 22 three line-height + 11* vertical padding +(defn container-style []) + (defn label-style [] {:margin-bottom (:tiny spacing/spacing)}) @@ -88,10 +84,8 @@ :background-color (:ui-01 @colors/theme)} style)) -(defn text-input-style [multiline input-style monospace before after] - (merge (if monospace - typography/monospace - typography/font-regular) +(defn text-input-style [multiline input-style before after] + (merge typography/font-regular {:padding-top 11 :padding-bottom 11 :font-size 15 @@ -121,7 +115,7 @@ {:flex 1 :justify-content :center})) -(defn accessory-element [{:keys [icon component icon-opts style accessibility-label on-press]}] +(defn accessory-element [{:keys [icon icon-opts style accessibility-label on-press]}] (let [el (if on-press rn/touchable-opacity rn/view)] @@ -132,29 +126,21 @@ style)} (when accessibility-label {:accessibility-label accessibility-label})) - (cond - icon - [icons/icon icon (merge {:color (:icon-01 @colors/theme)} - icon-opts)] - component - component + [icons/icon icon (merge {:color (:icon-01 @colors/theme)} + icon-opts)]]])) - :else - nil)]])) - -(defn text-input-raw [] - (let [focused (reagent/atom nil) - visible (reagent/atom false) - ref (atom nil) - blur (fn [] - (some-> @ref (ocall "blur")))] +(defn text-input [] + (let [focused (reagent/atom nil) + visible (reagent/atom false) + ref (react/create-ref) + on-cancel (fn [] + (some-> (react/current-ref ref) (ocall "blur")))] (fn [{:keys [label multiline error style input-style keyboard-type before after cancel-label on-focus on-blur show-cancel accessibility-label - bottom-value secure-text-entry container-style get-ref on-cancel - monospace] - :or {cancel-label "Cancel" - show-cancel true} - :as props}] + bottom-value secure-text-entry container-style] + :or {cancel-label "Cancel" + show-cancel true} + :as props}] {:pre [(check-spec ::text-input props)]} (let [after (cond (and secure-text-entry @visible) @@ -166,11 +152,7 @@ :on-press #(reset! visible true)} :else after) - secure (and secure-text-entry (not @visible)) - on-cancel (fn [] - (when on-cancel - (on-cancel)) - (blur))] + secure (and secure-text-entry (not @visible))] [rn/view {:style container-style} (when label [text/text {:style (label-style)} @@ -180,23 +162,19 @@ (when before [accessory-element before]) [rn/text-input - (merge {:style (text-input-style multiline input-style monospace before after) - :ref (fn [r] - (reset! ref r) - (when get-ref (get-ref r))) + (merge {:style (text-input-style multiline input-style before after) + :ref ref :placeholder-text-color (:text-02 @colors/theme) :underline-color-android :transparent :auto-capitalize :none :secure-text-entry secure :on-focus (fn [evt] (when on-focus (on-focus evt)) - (when (and platform/ios? show-cancel) - (rn/configure-next (:ease-in-ease-out rn/layout-animation-presets))) + (rn/configure-next (:ease-in-ease-out rn/layout-animation-presets)) (reset! focused true)) :on-blur (fn [evt] (when on-blur (on-blur evt)) - (when (and platform/ios? show-cancel) - (rn/configure-next (:ease-in-ease-out rn/layout-animation-presets))) + (rn/configure-next (:ease-in-ease-out rn/layout-animation-presets)) (reset! focused false))} (when (and platform/ios? (not after)) {:clear-button-mode :while-editing}) @@ -205,7 +183,7 @@ {:keyboard-type keyboard-type}) (dissoc props :style :keyboard-type :on-focus :on-blur - :secure-text-entry :ref :get-ref))] + :secure-text-entry :ref))] (when after [accessory-element after])] (when (and platform/ios? @@ -214,36 +192,13 @@ @focused) [rn/touchable-opacity {:style (cancel-style) :on-press on-cancel} - [text/text {:color :link} cancel-label]]) - (when error - [tooltip/tooltip (merge {:bottom-value (cond bottom-value bottom-value - label 30 ; 22 line height 8 margin - )} - (when accessibility-label - {:accessibility-label (str (name accessibility-label) "-error")})) - [text/text {:color :negative - :align :center - :size :small} - error]])]])))) - -;; TODO(Ferossgp): Refactor me when hooks available -(defn text-input [{:keys [preserve-input?] - :as props}] - (if preserve-input? - [text-input-raw props] - (let [ref (atom nil)] - (reagent/create-class - {:component-will-unmount - (fn [] - (when @ref - (swap! text-input-refs dissoc @ref))) - :reagent-render - (fn [{:keys [get-ref default-value] - :as props}] - [text-input-raw (merge props - {:get-ref (fn [r] - ;; Store input and its defaultValue - ;; one we receive a non-nil ref - (when (and r (nil? @ref)) - (swap! text-input-refs assoc r default-value)) - (when get-ref (get-ref)))})])})))) + [text/text {:color :link} cancel-label]])] + (when error + [tooltip/tooltip (merge {:bottom-value (cond bottom-value bottom-value + label 30 ; 22 line height 8 margin + )} + (when accessibility-label + {:accessibility-label (str (name accessibility-label) "-error")})) + [text/text {:color :negative + :size :small} + error]])])))) diff --git a/src/quo/components/tooltip.cljs b/src/quo/components/tooltip.cljs index fd03422097..19b94f8c1c 100644 --- a/src/quo/components/tooltip.cljs +++ b/src/quo/components/tooltip.cljs @@ -5,7 +5,6 @@ [quo.react-native :as rn] [quo.design-system.colors :as colors] [quo.design-system.spacing :as spacing] - [quo.platform :as platform] [status-im.ui.components.icons.vector-icons :as vector-icons])) (def ^:private initial-height 22) @@ -49,8 +48,7 @@ :height height})))] (fn [{:keys [bottom-value]} & children] [:<> - [animated/code {:exec (animated/cond* (animated/not* animation-v) - (animated/set animation-v 1))}] + [animated/code {:exec (animated/set animation-v 1)}] [animated/view {:style (tooltip-style {:bottom-value (- (get @layout :height) bottom-value) :animation animation}) @@ -60,10 +58,7 @@ (into [rn/view {:style (content-style) :on-layout on-layout}] children) - - (when platform/ios? - ;; NOTE(Ferossgp): Android does not show elevation for tooltip making it lost on white bg - [vector-icons/icon :icons/tooltip-tip {:width 18 - :height 8 - :container-style {:elevation 3} - :color (:ui-background @colors/theme)}])]]]))) + [vector-icons/icon :icons/tooltip-tip {:width 18 + :height 8 + :container-style {:elevation 3} + :color (:ui-background @colors/theme)}]]]]))) diff --git a/src/status_im/network/ui/edit_network/styles.cljs b/src/status_im/network/ui/edit_network/styles.cljs index 70212ad98e..ad20772333 100644 --- a/src/status_im/network/ui/edit_network/styles.cljs +++ b/src/status_im/network/ui/edit_network/styles.cljs @@ -6,6 +6,13 @@ :margin-horizontal 16 :margin-vertical 15}) +(def input-container + {:margin-bottom 15}) + +(def network-type + {:flex-direction :row + :align-items :center}) + (def bottom-container {:flex-direction :row :margin-horizontal 12 diff --git a/src/status_im/network/ui/edit_network/views.cljs b/src/status_im/network/ui/edit_network/views.cljs index d1c11c4947..cd7a8c15b4 100644 --- a/src/status_im/network/ui/edit_network/views.cljs +++ b/src/status_im/network/ui/edit_network/views.cljs @@ -8,7 +8,7 @@ [status-im.ui.components.list.views :as list] [status-im.ui.components.react :as react] [status-im.ui.components.styles :as components.styles] - [quo.core :as quo] + [status-im.ui.components.text-input.view :as text-input] [status-im.ui.components.topbar :as topbar]) (:require-macros [status-im.utils.views :as views])) @@ -33,31 +33,31 @@ [topbar/topbar {:title :t/add-network}] [react/scroll-view [react/view styles/edit-network-view - [react/view {:padding-vertical 8} - [quo/text-input - {:label (i18n/label :t/name) - :placeholder (i18n/label :t/specify-name) - :default-value (get-in manage-network [:name :value]) - :on-change-text #(re-frame/dispatch [::network/input-changed :name %]) - :auto-focus true}]] - [react/view {:padding-vertical 8} - [quo/text-input - {:label (i18n/label :t/rpc-url) - :placeholder (i18n/label :t/specify-rpc-url) - :default-value (get-in manage-network [:url :value]) - :on-change-text #(re-frame/dispatch [::network/input-changed :url (string/lower-case %)])}]] - [react/view {:padding-vertical 8} - [react/i18n-text {:key :network-chain}] + [text-input/text-input-with-label + {:label (i18n/label :t/name) + :placeholder (i18n/label :t/specify-name) + :container styles/input-container + :default-value (get-in manage-network [:name :value]) + :on-change-text #(re-frame/dispatch [::network/input-changed :name %]) + :auto-focus true}] + [text-input/text-input-with-label + {:label (i18n/label :t/rpc-url) + :placeholder (i18n/label :t/specify-rpc-url) + :container styles/input-container + :default-value (get-in manage-network [:url :value]) + :on-change-text #(re-frame/dispatch [::network/input-changed :url (string/lower-case %)])}] + [react/i18n-text {:key :network-chain}] + [react/view styles/network-type [list/flat-list {:data [:mainnet :testnet :rinkeby :custom] :key-fn (fn [_ i] (str i)) :separator list/base-separator :render-fn #(render-network-type manage-network %)}]] (when custom? - [react/view {:padding-vertical 8} - [quo/text-input - {:label (i18n/label :t/network-id) - :placeholder (i18n/label :t/specify-network-id) - :on-change-text #(re-frame/dispatch [::network/input-changed :network-id %])}]])]] + [text-input/text-input-with-label + {:label (i18n/label :t/network-id) + :container styles/input-container + :placeholder (i18n/label :t/specify-network-id) + :on-change-text #(re-frame/dispatch [::network/input-changed :network-id %])}])]] [react/view styles/bottom-container [react/view components.styles/flex] [components.common/bottom-button diff --git a/src/status_im/ui/components/search_input/styles.cljs b/src/status_im/ui/components/search_input/styles.cljs new file mode 100644 index 0000000000..b7d0e8f411 --- /dev/null +++ b/src/status_im/ui/components/search_input/styles.cljs @@ -0,0 +1,27 @@ +(ns status-im.ui.components.search-input.styles + (:require [status-im.ui.components.colors :as colors] + [status-im.utils.styles :as styles])) + +(styles/def search-input + {:flex 1 + :android {:margin 0 + :padding 0}}) + +(def search-input-height 56) + +(defn search-container [] + {:height search-input-height + :flex-direction :row + :padding-horizontal 16 + :background-color colors/white + :align-items :center + :justify-content :center}) + +(defn search-input-container [] + {:background-color colors/gray-lighter + :flex 1 + :flex-direction :row + :height 36 + :align-items :center + :justify-content :center + :border-radius 8}) \ No newline at end of file diff --git a/src/status_im/ui/components/search_input/view.cljs b/src/status_im/ui/components/search_input/view.cljs index a1568d1e44..26ae5c893e 100644 --- a/src/status_im/ui/components/search_input/view.cljs +++ b/src/status_im/ui/components/search_input/view.cljs @@ -1,34 +1,46 @@ (ns status-im.ui.components.search-input.view (:require [reagent.core :as reagent] [status-im.i18n :as i18n] - [quo.core :as quo] - [quo.design-system.colors :as colors])) + [status-im.ui.components.colors :as colors] + [status-im.ui.components.icons.vector-icons :as icons] + [status-im.ui.components.react :as react] + [status-im.ui.components.search-input.styles :as styles])) (defn search-input [{:keys [search-active?]}] (let [input-ref (atom nil) search-active? (or search-active? (reagent/atom nil))] - (fn [{:keys [on-focus on-change on-cancel search-filter auto-focus]}] - [quo/text-input {:placeholder (i18n/label :t/search) - :blur-on-submit true - :multiline false - :ref #(reset! input-ref %) - :default-value search-filter - :auto-focus auto-focus - :on-cancel on-cancel - :auto-correct false - :auto-capitalize :none - :input-style {:height 36} - :before {:icon :main-icons/search - :style {:padding-horizontal 8} - :on-press #(.focus ^js @input-ref) - :icon-opts {:color (:icon-02 @colors/theme)}} - :on-focus #(do - (when on-focus - (on-focus search-filter)) - (reset! search-active? true)) - :on-blur #(reset! search-active? false) - :on-change (fn [e] - (let [^js native-event (.-nativeEvent ^js e) - text (.-text native-event)] - (when on-change - (on-change text))))}]))) + (fn [{:keys [on-cancel on-focus on-change + search-container-style search-filter auto-focus]}] + [react/view {:style (or search-container-style (styles/search-container))} + [react/view {:style (styles/search-input-container)} + [icons/icon :main-icons/search {:color colors/gray + :container-style {:margin-left 6 + :margin-right 2}}] + [react/text-input {:placeholder (i18n/label :t/search) + :blur-on-submit true + :multiline false + :ref #(reset! input-ref %) + :style styles/search-input + :default-value search-filter + :auto-focus auto-focus + :auto-correct false + :auto-capitalize :none + :on-focus #(do + (when on-focus + (on-focus search-filter)) + (reset! search-active? true)) + :on-change (fn [e] + (let [^js native-event (.-nativeEvent ^js e) + text (.-text native-event)] + (when on-change + (on-change text))))}]] + (when @search-active? + [react/touchable-highlight + {:on-press (fn [] + (.clear ^js @input-ref) + (.blur ^js @input-ref) + (when on-cancel (on-cancel)) + (reset! search-active? false)) + :style {:margin-left 16}} + [react/text {:style {:color colors/blue}} + (i18n/label :t/cancel)]])]))) diff --git a/src/status_im/ui/components/text_input/styles.cljs b/src/status_im/ui/components/text_input/styles.cljs new file mode 100644 index 0000000000..be8b0b3753 --- /dev/null +++ b/src/status_im/ui/components/text_input/styles.cljs @@ -0,0 +1,39 @@ +(ns status-im.ui.components.text-input.styles + (:require [status-im.ui.components.colors :as colors] + [status-im.utils.styles :as styles])) + +(defn label [editable label-style] + (merge + {:margin-vertical 10} + label-style + (when-not editable {:color colors/gray}))) + +(defn input-container [height editable] + (merge + {:justify-content :center + :height (or height 52) + :border-radius 8 + :background-color (when editable colors/gray-lighter)} + (when-not editable + {:border-color colors/gray-lighter + :border-width 1}))) + +(styles/def input + {:padding 16 + :border-radius 8 + :font-size 15 + :line-height 22 + :flex 1 + :text-align-vertical :center + :desktop {:height 52}}) + +(defn error [bottom-value] + {:bottom-value bottom-value + :container-style {:shadow-offset {:width 0 :height 1} + :shadow-radius 6 + :shadow-opacity 1 + :shadow-color (if (colors/dark?) + "rgba(0, 0, 0, 0.75)" + "rgba(0, 34, 51)") + :elevation 2} + :font-size 12}) diff --git a/src/status_im/ui/components/text_input/view.cljs b/src/status_im/ui/components/text_input/view.cljs new file mode 100644 index 0000000000..0ea065752a --- /dev/null +++ b/src/status_im/ui/components/text_input/view.cljs @@ -0,0 +1,49 @@ +(ns status-im.ui.components.text-input.view + (:require [status-im.ui.components.react :as react] + [status-im.ui.components.text-input.styles :as styles] + [status-im.ui.components.colors :as colors] + [status-im.utils.platform :as platform] + [status-im.ui.components.tooltip.views :as tooltip])) + +(defn merge-container-styles + [height container editable] + (let [merged-styles (merge (styles/input-container height editable) container)] + ;; `:background-color` can't be nil; in this case the app will crash. + ;; Nevertheless, we need to be able to remove background if necessary. + (if (nil? (:background-color merged-styles)) + (dissoc merged-styles :background-color) + merged-styles))) + +(defn text-input-with-label + [{:keys [label content error style height container accessibility-label + label-style parent-container bottom-value text editable keyboard-type] + :as props + :or {editable true}}] + [react/view {:style parent-container} + (when label + [react/text {:style (styles/label editable label-style)} + label]) + [react/view {:style (merge-container-styles height container editable)} + [react/text-input + (merge + {:style (merge styles/input style) + :placeholder-text-color colors/gray + :auto-focus true + :auto-capitalize :none} + (cond-> (dissoc props :style :height) + ;; error on ios + (and platform/ios? (= keyboard-type "visible-password")) + (dissoc :keyboard-type)) + ;; Workaround until `value` TextInput field is available on desktop: + ;; https://github.com/status-im/react-native-desktop/issues/320 + (when-not platform/desktop? + {:value text}))] + (when content content)] + (when error + [tooltip/tooltip error + (styles/error + (cond bottom-value bottom-value + label 20 + :else 0)) + (when accessibility-label + (str (name accessibility-label) "-error"))])]) diff --git a/src/status_im/ui/screens/add_new/new_chat/views.cljs b/src/status_im/ui/screens/add_new/new_chat/views.cljs index 1441a95266..71e09a9caf 100644 --- a/src/status_im/ui/screens/add_new/new_chat/views.cljs +++ b/src/status_im/ui/screens/add_new/new_chat/views.cljs @@ -10,8 +10,8 @@ [status-im.ui.components.react :as react] [status-im.ui.components.topbar :as topbar] [status-im.ui.screens.add-new.new-chat.styles :as styles] + [status-im.ui.screens.add-new.styles :as add-new.styles] [status-im.utils.debounce :as debounce] - [quo.core :as quo] [status-im.utils.utils :as utils]) (:require-macros [status-im.utils.views :as views])) @@ -26,11 +26,13 @@ (defn- icon-wrapper [color icon] [react/view - {:style {:width 32 - :height 32 - :border-radius 25 - :align-items :center - :justify-content :center + {:style {:margin-right 16 + :margin-top 11 + :width 32 + :height 32 + :border-radius 25 + :align-items :center + :justify-content :center :background-color color}} icon]) @@ -66,14 +68,12 @@ :modal? true :accessories [{:icon :qr :accessibility-label :scan-contact-code-button - :handler #(re-frame/dispatch [:qr-scanner.ui/scan-qr-code-pressed - {:title (i18n/label :t/new-contact) - :handler :contact/qr-code-scanned}])}]}] - [react/view {:flex-direction :row - :padding 16} - [react/view {:flex 1 - :padding-right 16} - [quo/text-input + :handler #(re-frame/dispatch [:qr-scanner.ui/scan-qr-code-pressed + {:title (i18n/label :t/new-contact) + :handler :contact/qr-code-scanned}])}]}] + [react/view add-new.styles/new-chat-container + [react/view (add-new.styles/new-chat-input-container) + [react/text-input {:on-change-text #(do (re-frame/dispatch [:set-in [:contacts/new-identity :state] :searching]) @@ -82,13 +82,16 @@ #(when (= state :valid) (debounce/dispatch-and-chill [:contact.ui/contact-code-submitted] 3000)) :placeholder (i18n/label :t/enter-contact-code) - :show-cancel false + :style add-new.styles/input + ;; This input is fine to preserve inputs + ;; so its contents will not be erased + ;; in onWillBlur navigation event handler + :preserve-input? true :accessibility-label :enter-contact-code-input - :auto-capitalize :none + :auto-capitalize :none :return-key-type :go}]] - [react/view {:justify-content :center - :align-items :center} - [input-icon state]]] + [react/view {:width 16}] + [input-icon state]] [react/view {:min-height 30 :justify-content :flex-end} [react/text {:style styles/message} (cond (= state :error) diff --git a/src/status_im/ui/screens/add_new/new_public_chat/styles.cljs b/src/status_im/ui/screens/add_new/new_public_chat/styles.cljs index 0ccaaaba7a..a3e1f758c2 100644 --- a/src/status_im/ui/screens/add_new/new_public_chat/styles.cljs +++ b/src/status_im/ui/screens/add_new/new_public_chat/styles.cljs @@ -1,9 +1,28 @@ -(ns status-im.ui.screens.add-new.new-public-chat.styles) +(ns status-im.ui.screens.add-new.new-public-chat.styles + (:require [status-im.ui.components.colors :as colors])) (def group-chat-name-input {:font-size 17 :padding-bottom 0}) +(def topic-hash + (merge group-chat-name-input + {:margin-left 16 + :margin-right 10 + :font-size 24 + :color colors/gray + :font-weight "500"})) + (def group-container {:flex 1 - :flex-direction :column}) \ No newline at end of file + :flex-direction :column}) + +(def input-container + {:padding 0 + :padding-right 16 + :background-color nil}) + +(def tooltip + {:bottom-value 15 + :color colors/red-light + :font-size 12}) diff --git a/src/status_im/ui/screens/add_new/new_public_chat/view.cljs b/src/status_im/ui/screens/add_new/new_public_chat/view.cljs index 0edb09b5d6..22f74f7d96 100644 --- a/src/status_im/ui/screens/add_new/new_public_chat/view.cljs +++ b/src/status_im/ui/screens/add_new/new_public_chat/view.cljs @@ -5,37 +5,39 @@ [status-im.react-native.resources :as resources] [status-im.ui.components.colors :as colors] [status-im.ui.components.react :as react] - [quo.core :as quo] + [status-im.ui.components.styles :as common.styles] + [status-im.ui.components.text-input.view :as text-input.view] + [status-im.ui.components.tooltip.views :as tooltip] [status-im.ui.components.topbar :as topbar] [status-im.ui.screens.add-new.new-public-chat.db :as db] - [status-im.ui.screens.add-new.new-public-chat.styles :as styles]) + [status-im.ui.screens.add-new.new-public-chat.styles :as styles] + [status-im.ui.screens.add-new.styles :as add-new.styles]) (:require-macros [status-im.utils.views :as views])) (defn- start-chat [topic] (re-frame/dispatch [:chat.ui/start-public-chat topic {:navigation-reset? true}]) (re-frame/dispatch [:set :public-group-topic nil])) -(defn- hash-icon [] - [quo/text {:color :secondary - :weight :medium - :size :x-large} - "#"]) - (defn- chat-name-input [topic error] - [quo/text-input - {:on-change-text #(re-frame/dispatch [:set :public-group-topic %]) - :on-submit-editing #(when (db/valid-topic? topic) (start-chat topic)) - :auto-capitalize :none - :auto-focus false - :accessibility-label :chat-name-input - :before {:component [hash-icon]} - ;; Set default-value as otherwise it will - ;; be erased in global `onWillBlur` handler - :default-value topic - :placeholder "chat-name" - :return-key-type :go - :auto-correct false - :error error}]) + [react/view + [react/view (add-new.styles/input-container) + [react/text {:style styles/topic-hash} "#"] + [react/view common.styles/flex + [text-input.view/text-input-with-label + {:container styles/input-container + :on-change-text #(re-frame/dispatch [:set :public-group-topic %]) + :on-submit-editing #(when (db/valid-topic? topic) (start-chat topic)) + :auto-capitalize :none + :auto-focus false + :accessibility-label :chat-name-input + ;; Set default-value as otherwise it will + ;; be erased in global `onWillBlur` handler + :default-value topic + :placeholder "chat-name" + :return-key-type :go + :auto-correct false}]]] + (when error + [tooltip/tooltip error styles/tooltip])]) (defn render-topic [topic] ^{:key topic} diff --git a/src/status_im/ui/screens/add_new/styles.cljs b/src/status_im/ui/screens/add_new/styles.cljs index d743a3446b..88610bd8f1 100644 --- a/src/status_im/ui/screens/add_new/styles.cljs +++ b/src/status_im/ui/screens/add_new/styles.cljs @@ -1,10 +1,30 @@ (ns status-im.ui.screens.add-new.styles (:require [status-im.ui.components.colors :as colors] - [status-im.ui.components.styles :as components.styles])) + [status-im.ui.components.styles :as components.styles] + [status-im.utils.styles :as styles])) + +(def new-chat-container + {:flex-direction :row + :padding-top 16 + :padding-left 16}) (defn input-container [] {:flex-direction :row :align-items :center :margin-bottom 16 :border-radius components.styles/border-radius - :background-color colors/gray-lighter}) \ No newline at end of file + :background-color colors/gray-lighter}) + +(defn new-chat-input-container [] + (merge + (input-container) + {:flex 1})) + +(styles/def input + {:flex 1 + :height 52 + :padding-horizontal 14 + :desktop {:height 30 + :width "100%"} + :android {:padding 0 + :width "100%"}}) diff --git a/src/status_im/ui/screens/bootnodes_settings/edit_bootnode/styles.cljs b/src/status_im/ui/screens/bootnodes_settings/edit_bootnode/styles.cljs index fff6857c79..5b4445ed39 100644 --- a/src/status_im/ui/screens/bootnodes_settings/edit_bootnode/styles.cljs +++ b/src/status_im/ui/screens/bootnodes_settings/edit_bootnode/styles.cljs @@ -3,6 +3,21 @@ [status-im.ui.components.styles :as components.styles] [status-im.utils.styles :as styles])) +(def input-container + {:flex-direction :row + :align-items :center + :justify-content :space-between + :border-radius components.styles/border-radius + :height 52 + :margin-top 15}) + +(styles/def input + {:flex 1 + :android {:padding 0}}) + +(def qr-code + {:margin-right 14}) + (def edit-bootnode-view {:flex 1 :margin-horizontal 16 diff --git a/src/status_im/ui/screens/bootnodes_settings/edit_bootnode/views.cljs b/src/status_im/ui/screens/bootnodes_settings/edit_bootnode/views.cljs index d0623b3030..dbcc555de5 100644 --- a/src/status_im/ui/screens/bootnodes_settings/edit_bootnode/views.cljs +++ b/src/status_im/ui/screens/bootnodes_settings/edit_bootnode/views.cljs @@ -2,14 +2,18 @@ (:require [clojure.string :as string] [re-frame.core :as re-frame] [status-im.i18n :as i18n] + [status-im.ui.components.colors :as colors] [status-im.ui.components.common.common :as components.common] + [status-im.ui.components.icons.vector-icons :as vector-icons] [status-im.ui.components.react :as react] [status-im.ui.components.styles :as components.styles] - [quo.core :as quo] + [status-im.ui.components.text-input.view :as text-input] + [status-im.ui.components.tooltip.views :as tooltip] [status-im.ui.components.topbar :as topbar] [status-im.ui.screens.bootnodes-settings.edit-bootnode.styles :as - styles]) + styles] + [status-im.utils.platform :as platform]) (:require-macros [status-im.utils.views :as views])) (defn delete-button [id] @@ -20,6 +24,14 @@ [react/text {:style styles/button-label} (i18n/label :t/delete)]]]]) +(def qr-code + [react/touchable-highlight {:on-press #(re-frame/dispatch [:qr-scanner.ui/scan-qr-code-pressed + {:title (i18n/label :t/add-bootnode) + :handler :bootnodes.callback/qr-code-scanned}]) + :style styles/qr-code} + [react/view + [vector-icons/icon :main-icons/qr {:color colors/blue}]]]) + (views/defview edit-bootnode [] (views/letsubs [manage-bootnode [:get-manage-bootnode] validation-errors [:manage-bootnode-validation-errors]] @@ -33,33 +45,33 @@ [topbar/topbar {:title (if id :t/bootnode-details :t/add-bootnode)}] [react/scroll-view {:keyboard-should-persist-taps :handled} [react/view styles/edit-bootnode-view - [react/view {:padding-vertical 8} - [quo/text-input - {:label (i18n/label :t/name) - :placeholder (i18n/label :t/specify-name) - :accessibility-label :bootnode-name - :default-value name - :on-change-text #(re-frame/dispatch [:bootnodes.ui/input-changed :name %]) - :auto-focus true}]] + [text-input/text-input-with-label + {:label (i18n/label :t/name) + :placeholder (i18n/label :t/specify-name) + :accessibility-label :bootnode-name + :style styles/input + :container styles/input-container + :default-value name + :on-change-text #(re-frame/dispatch [:bootnodes.ui/input-changed :name %]) + :auto-focus true}] [react/view - {:flex 1 - :padding-vertical 8} - [quo/text-input + {:flex 1} + [text-input/text-input-with-label (merge {:label (i18n/label :t/bootnode-address) :placeholder (i18n/label :t/bootnode-format) + :style styles/input :accessibility-label :bootnode-address + :container styles/input-container :default-value url - :show-cancel false - :on-change-text #(re-frame/dispatch [:bootnodes.ui/input-changed :url %]) - :error (when (and (not (string/blank? url)) invalid-url?) - (i18n/label :t/invalid-format - {:format (i18n/label :t/bootnode-format)})) - :bottom-value 0 - :after {:icon :main-icons/qr - :on-press #(re-frame/dispatch [:qr-scanner.ui/scan-qr-code-pressed - {:title (i18n/label :t/add-bootnode) - :handler :bootnodes.callback/qr-code-scanned}])}})]] + :on-change-text #(re-frame/dispatch [:bootnodes.ui/input-changed :url %])} + (when-not platform/desktop? {:content qr-code}))] + (when (and (not (string/blank? url)) invalid-url?) + [tooltip/tooltip (i18n/label :t/invalid-format + {:format (i18n/label :t/bootnode-format)}) + {:color colors/red-light + :font-size 12 + :bottom-value 25}])] (when id [delete-button id])]] [react/view styles/bottom-container diff --git a/src/status_im/ui/screens/chat/styles/message/message.cljs b/src/status_im/ui/screens/chat/styles/message/message.cljs index d717d138ed..f8af73b15e 100644 --- a/src/status_im/ui/screens/chat/styles/message/message.cljs +++ b/src/status_im/ui/screens/chat/styles/message/message.cljs @@ -115,6 +115,9 @@ {:padding-top 3 :padding-left 3}) +(def message-activity-indicator + {:padding-top 4}) + (defn emoji-message [{:keys [incoming-group]}] {:font-size 28 diff --git a/src/status_im/ui/screens/currency_settings/views.cljs b/src/status_im/ui/screens/currency_settings/views.cljs index 3436ad093b..f32ecdd5d4 100644 --- a/src/status_im/ui/screens/currency_settings/views.cljs +++ b/src/status_im/ui/screens/currency_settings/views.cljs @@ -32,20 +32,18 @@ [react/view {:flex 1} [topbar/topbar {:title :t/main-currency}] [react/view {:flex 1} - [react/view {:padding-horizontal 16 - :padding-vertical 10} - [search-input/search-input - {:search-active? search-active? - :search-filter search-filter - :on-cancel #(re-frame/dispatch [:search/currency-filter-changed nil]) - :on-focus (fn [search-filter] - (when-not search-filter - (re-frame/dispatch [:search/currency-filter-changed ""]))) - :on-change (fn [text] - (re-frame/dispatch [:search/currency-filter-changed text]))}]] - [list/flat-list {:data (->> currencies - vals - (sort #(compare (:code %1) (:code %2)))) - :key-fn :code - :render-fn (render-currency currency-id) + [search-input/search-input + {:search-active? search-active? + :search-filter search-filter + :on-cancel #(re-frame/dispatch [:search/currency-filter-changed nil]) + :on-focus (fn [search-filter] + (when-not search-filter + (re-frame/dispatch [:search/currency-filter-changed ""]))) + :on-change (fn [text] + (re-frame/dispatch [:search/currency-filter-changed text]))}] + [list/flat-list {:data (->> currencies + vals + (sort #(compare (:code %1) (:code %2)))) + :key-fn :code + :render-fn (render-currency currency-id) :keyboardShouldPersistTaps :always}]]])) diff --git a/src/status_im/ui/screens/group/styles.cljs b/src/status_im/ui/screens/group/styles.cljs index b570d511a7..ae65a987cc 100644 --- a/src/status_im/ui/screens/group/styles.cljs +++ b/src/status_im/ui/screens/group/styles.cljs @@ -24,9 +24,7 @@ (defn search-container [] {:border-bottom-color colors/gray-lighter - :border-bottom-width 1 - :padding-horizontal 16 - :padding-vertical 10}) + :border-bottom-width 1}) (defn members-title [] {:color colors/gray diff --git a/src/status_im/ui/screens/group/views.cljs b/src/status_im/ui/screens/group/views.cljs index e62f3577e7..1be0813ee9 100644 --- a/src/status_im/ui/screens/group/views.cljs +++ b/src/status_im/ui/screens/group/views.cljs @@ -21,8 +21,8 @@ [status-im.ui.components.toolbar :as bottom-toolbar] [status-im.ui.components.toolbar.view :as toolbar] [status-im.ui.components.topbar :as topbar] + [status-im.ui.screens.add-new.styles :as add-new.styles] [status-im.ui.screens.group.styles :as styles] - [quo.core :as quo] [status-im.utils.debounce :as debounce] [status-im.utils.platform :as platform]) (:require-macros [status-im.utils.views :as views])) @@ -125,14 +125,16 @@ :max constants/max-group-chat-participants})]]]] [react/view {:style {:padding-top 16 - :flex 1}} + :flex 1}} [react/view {:style {:padding-horizontal 16}} - [quo/text-input - {:auto-focus true - :on-change-text #(re-frame/dispatch [:set :new-chat-name %]) - :default-value group-name - :placeholder (i18n/label :t/set-a-topic) - :accessibility-label :chat-name-input}] + [react/view (add-new.styles/input-container) + [react/text-input + {:auto-focus true + :on-change-text #(re-frame/dispatch [:set :new-chat-name %]) + :default-value group-name + :placeholder (i18n/label :t/set-a-topic) + :style add-new.styles/input + :accessibility-label :chat-name-input}]] [react/text {:style (styles/members-title)} (i18n/label :t/members-title)]] [react/view {:style {:margin-top 8 @@ -240,16 +242,18 @@ [topbar/topbar {:title :t/edit-group :modal? true}] - [react/scroll-view {:style {:padding 16 - :flex 1}} - [quo/text-input - {:on-change-text #(reset! new-group-chat-name %) - :default-value name - :on-submit-editing #(when (seq @new-group-chat-name) - (re-frame/dispatch [:group-chats.ui/name-changed chat-id @new-group-chat-name])) - :placeholder (i18n/label :t/enter-contact-code) - :accessibility-label :new-chat-name - :return-key-type :go}]] + [react/view {:style {:padding 16 + :flex 1}} + [react/view {:style (add-new.styles/input-container)} + [react/text-input + {:on-change-text #(reset! new-group-chat-name %) + :default-value name + :on-submit-editing #(when (seq @new-group-chat-name) + (re-frame/dispatch [:group-chats.ui/name-changed chat-id @new-group-chat-name])) + :placeholder (i18n/label :t/enter-contact-code) + :style add-new.styles/input + :accessibility-label :new-chat-name + :return-key-type :go}]]] [react/view {:style {:flex 1}}] [bottom-toolbar/toolbar {:show-border? true diff --git a/src/status_im/ui/screens/hardwallet/pin/styles.cljs b/src/status_im/ui/screens/hardwallet/pin/styles.cljs index 82bbbc051e..e4cbaa9739 100644 --- a/src/status_im/ui/screens/hardwallet/pin/styles.cljs +++ b/src/status_im/ui/screens/hardwallet/pin/styles.cljs @@ -57,6 +57,10 @@ :height 22 :margin-top 5}) +(def pin-indicator-group-container + {:flex-direction :row + :justify-content :space-between}) + (defn pin-indicator [pressed? error?] {:width 8 :height 8 @@ -77,6 +81,9 @@ :border-radius 50 :margin-horizontal 5}) +(def waiting-indicator-container + {:margin-top 26}) + (def numpad-container {:margin-top 18}) diff --git a/src/status_im/ui/screens/home/views.cljs b/src/status_im/ui/screens/home/views.cljs index b06af69ddd..984fbb9b84 100644 --- a/src/status_im/ui/screens/home/views.cljs +++ b/src/status_im/ui/screens/home/views.cljs @@ -86,17 +86,15 @@ (defonce search-active? (reagent/atom false)) (defn search-input-wrapper [search-filter] - [react/view {:padding-horizontal 16 - :padding-vertical 10} - [search-input/search-input - {:search-active? search-active? - :search-filter search-filter - :on-cancel #(re-frame/dispatch [:search/home-filter-changed nil]) - :on-focus (fn [search-filter] - (when-not search-filter - (re-frame/dispatch [:search/home-filter-changed ""]))) - :on-change (fn [text] - (re-frame/dispatch [:search/home-filter-changed text]))}]]) + [search-input/search-input + {:search-active? search-active? + :search-filter search-filter + :on-cancel #(re-frame/dispatch [:search/home-filter-changed nil]) + :on-focus (fn [search-filter] + (when-not search-filter + (re-frame/dispatch [:search/home-filter-changed ""]))) + :on-change (fn [text] + (re-frame/dispatch [:search/home-filter-changed text]))}]) (views/defview chats-list [] (views/letsubs [loading? [:chats/loading?] diff --git a/src/status_im/ui/screens/intro/views.cljs b/src/status_im/ui/screens/intro/views.cljs index 9055ddf7e9..36c9b6d622 100644 --- a/src/status_im/ui/screens/intro/views.cljs +++ b/src/status_im/ui/screens/intro/views.cljs @@ -11,6 +11,7 @@ [status-im.ui.components.icons.vector-icons :as vector-icons] [status-im.ui.components.radio :as radio] [status-im.ui.components.react :as react] + [status-im.ui.components.text-input.view :as text-input] [status-im.ui.components.topbar :as topbar] [status-im.ui.screens.intro.styles :as styles] [status-im.utils.config :as config] @@ -18,7 +19,6 @@ [status-im.utils.identicon :as identicon] [status-im.utils.platform :as platform] [status-im.utils.security :as security] - [quo.core :as quo] [status-im.utils.utils :as utils]) (:require-macros [status-im.utils.views :refer [defview letsubs]])) @@ -230,23 +230,24 @@ :max-height 16}}] [storage-entry (second storage-types) selected-storage-type]]]])) -(defn password-container [confirm-failure? _] +(defn password-container [confirm-failure? view-width] (let [horizontal-margin 16] - [react/view {:style {:flex 1 - :justify-content :space-between - :margin-horizontal horizontal-margin}} - [react/view + [react/view {:style {:flex 1 + :justify-content :space-between + :align-items :center :margin-horizontal horizontal-margin}} + [react/view {:style {:justify-content :center :flex 1}} [react/text {:style (assoc styles/wizard-text :color colors/red :margin-bottom 16)} - (if confirm-failure? (i18n/label :t/password_error1) " ")]] - [react/view {:padding 16} - [quo/text-input {:secure-text-entry true - :auto-capitalize :none - :auto-focus true - :show-cancel false - :accessibility-label :password-input - :placeholder "" - :on-change-text #(re-frame/dispatch [:intro-wizard/code-symbol-pressed %])}]] + (if confirm-failure? (i18n/label :t/password_error1) " ")] + + [react/text-input {:secure-text-entry true + :auto-capitalize :none + :auto-focus true + :accessibility-label :password-input + :text-align :center + :placeholder "" + :style (styles/password-text-input (- view-width (* 2 horizontal-margin))) + :on-change-text #(re-frame/dispatch [:intro-wizard/code-symbol-pressed %])}]] [react/text {:style (assoc styles/wizard-text :margin-bottom 16)} (i18n/label :t/password-description)]])) (defn create-code [{:keys [confirm-failure? view-width]}] @@ -361,45 +362,69 @@ next-button-disabled? passphrase-error]}] [react/keyboard-avoiding-view {:flex 1 + :justify-content :flex-start :background-color colors/white} - [react/view {:background-color colors/white - :flex 1 - :justify-content :center - :padding-horizontal 16} - [quo/text-input - {:on-change-text #(re-frame/dispatch [:multiaccounts.recover/enter-phrase-input-changed (security/mask-data %)]) - :auto-focus true - :error (when passphrase-error (i18n/label passphrase-error)) - :accessibility-label :passphrase-input - :placeholder (i18n/label :t/seed-phrase-placeholder) - :show-cancel false - :bottom-value 40 - :multiline true - :auto-correct false - :monospace true}] - [react/view {:align-items :flex-end} - [react/view {:flex-direction :row - :align-items :center - :padding-vertical 8 - :opacity (if passphrase-word-count 1 0)} - [quo/text {:color (if next-button-disabled? :secondary :main) - :size :small} - (when-not next-button-disabled? - "✓ ") - (i18n/label-pluralize passphrase-word-count :t/words-n)]]]] + [text-input/text-input-with-label + {:on-change-text #(re-frame/dispatch [:multiaccounts.recover/enter-phrase-input-changed (security/mask-data %)]) + :auto-focus true + :error (when passphrase-error (i18n/label passphrase-error)) + :accessibility-label :passphrase-input + :placeholder nil + :bottom-value 40 + :multiline true + :auto-correct false + :keyboard-type "visible-password" + :parent-container {:flex 1 + :justify-content :center} + :container (merge {:background-color colors/white + :flex 1 + :justify-content :center + :min-height 90} + (when platform/ios? + {:max-height 150})) + :style {:background-color colors/white + :text-align :center + :text-align-vertical :center + :min-width 40 + :font-size 16 + :font-weight "700"}}] [react/view {:align-items :center} + (if passphrase-word-count + [react/view {:flex-direction :row + :margin-bottom 4 + :min-height 24 + :max-height 24 + :align-items :center} + [react/nested-text {:style {:font-size 14 + :padding-right 4 + :text-align :center + :color colors/gray}} + (str (i18n/label :t/word-count) ": ") + [{:style {:font-weight "500" + :color colors/black}} + (i18n/label-pluralize passphrase-word-count :t/words-n)]] + (when-not next-button-disabled? + [react/view {:style {:background-color colors/green-transparent-10 + :border-radius 12 + :width 24 + :justify-content :center + :align-items :center + :height 24}} + [vector-icons/tiny-icon :tiny-icons/tiny-check {:color colors/green}]])] + [react/view {:align-self :stretch :margin-bottom 4 + :max-height 24 :min-height 24}]) [react/text {:style {:color colors/gray :font-size 14 :margin-bottom 8 :text-align :center}} - (i18n/label :t/multiaccounts-recover-enter-phrase-text)] - (when processing? - [react/view {:flex 1 :align-items :center} - [react/activity-indicator {:size :large - :animating true}] - [react/text {:style {:color colors/gray - :margin-top 8}} - (i18n/label :t/processing)]])]]) + (i18n/label :t/multiaccounts-recover-enter-phrase-text)]] + (when processing? + [react/view {:flex 1 :align-items :center} + [react/activity-indicator {:size :large + :animating true}] + [react/text {:style {:color colors/gray + :margin-top 8}} + (i18n/label :t/processing)]])]) (defn recovery-success [pubkey name photo-path] [react/view {:flex 1 diff --git a/src/status_im/ui/screens/keycard/onboarding/views.cljs b/src/status_im/ui/screens/keycard/onboarding/views.cljs index 2833b75adb..cd757cae17 100644 --- a/src/status_im/ui/screens/keycard/onboarding/views.cljs +++ b/src/status_im/ui/screens/keycard/onboarding/views.cljs @@ -8,12 +8,12 @@ [status-im.ui.components.icons.vector-icons :as vector-icons] [status-im.ui.components.react :as react] [status-im.ui.components.styles :as components.styles] + [status-im.ui.components.text-input.view :as text-input] [status-im.ui.components.toolbar.view :as toolbar] [status-im.ui.components.tooltip.views :as tooltip] [status-im.ui.components.topbar :as topbar] [status-im.ui.screens.hardwallet.pin.views :as pin.views] [status-im.ui.screens.keycard.styles :as styles] - [quo.core :as quo] [status-im.constants :as constants]) (:require-macros [status-im.utils.views :refer [defview letsubs]])) @@ -324,9 +324,9 @@ [toolbar/toolbar {:transparent? true} [toolbar/nav-text - {:handler #(re-frame/dispatch [::hardwallet.onboarding/cancel-pressed]) + {:handler #(re-frame/dispatch [::hardwallet.onboarding/cancel-pressed]) :accessibility-label :cancel-keycard-setup - :style {:padding-left 21}} + :style {:padding-left 21}} (i18n/label :t/cancel)] [react/text {:style {:color colors/gray}} (i18n/label :t/step-i-of-n {:step 3 :number 3})]] @@ -348,17 +348,20 @@ :accessibility-label :word-number} (i18n/label :t/word-n {:number (inc idx)})]]] - [react/view {:flex 1 - :padding 16 - :justify-content :center} - [quo/text-input + [react/view + [text-input/text-input-with-label {:on-change-text #(re-frame/dispatch [:keycard.onboarding.recovery-phrase-confirm-word.ui/input-changed %]) :auto-focus true :on-submit-editing #(re-frame/dispatch [:keycard.onboarding.recovery-phrase-confirm-word.ui/input-submitted]) - :placeholder (i18n/label :t/word-n {:number (inc idx)}) + :placeholder nil :auto-correct false + :keyboard-type "visible-password" :accessibility-label :enter-word - :monospace true}] + :container {:background-color colors/white} + :style {:background-color colors/white + :text-align :center + :height 52 + :typography :header}}] [react/view {:margin-top 5 :width 250} [tooltip/tooltip error]]] @@ -377,5 +380,5 @@ {:on-press #(re-frame/dispatch [:keycard.onboarding.recovery-phrase-confirm-word.ui/next-pressed]) :label (i18n/label :t/next) :accessibility-label :next - :disabled? (empty? input-word) - :forward? true}]]]]]))) + :disabled? (empty? input-word) + :forward? true}]]]]]))) diff --git a/src/status_im/ui/screens/keycard/recovery/views.cljs b/src/status_im/ui/screens/keycard/recovery/views.cljs index 27c0d71ea7..fe0e5db246 100644 --- a/src/status_im/ui/screens/keycard/recovery/views.cljs +++ b/src/status_im/ui/screens/keycard/recovery/views.cljs @@ -7,6 +7,7 @@ [status-im.ui.components.common.common :as components.common] [status-im.ui.components.icons.vector-icons :as vector-icons] [status-im.ui.components.react :as react] + [status-im.ui.components.text-input.view :as text-input] [status-im.ui.components.toolbar.view :as toolbar] [status-im.ui.components.tooltip.views :as tooltip] [status-im.ui.components.topbar :as topbar] @@ -15,7 +16,6 @@ [status-im.utils.core :as utils.core] [status-im.utils.gfycat.core :as gfy] [status-im.constants :as constants] - [quo.core :as quo] [status-im.ui.screens.keycard.views :as keycard.views] [status-im.utils.identicon :as identicon]) (:require-macros [status-im.utils.views :refer [defview letsubs]])) @@ -147,15 +147,16 @@ :color (if (> 3 free-pairing-slots) colors/red colors/gray)}} (i18n/label :t/keycard-free-pairing-slots {:n free-pairing-slots})]])] [react/view - [react/view {:flex 1 - :padding 16 - :justify-content :center} - [quo/text-input - {:on-change-text #(re-frame/dispatch [:keycard.onboarding.pair.ui/input-changed %]) - :auto-focus true - :on-submit-editing #(re-frame/dispatch [:keycard.onboarding.pair.ui/input-submitted]) - :placeholder (i18n/label :t/pair-code-placeholder) - :monospace true}]] + [text-input/text-input-with-label + {:on-change-text #(re-frame/dispatch [:keycard.onboarding.pair.ui/input-changed %]) + :auto-focus true + :on-submit-editing #(re-frame/dispatch [:keycard.onboarding.pair.ui/input-submitted]) + :placeholder nil + :text-align :center + :container {:background-color colors/white} + :style {:background-color colors/white + :height 24 + :typography :header}}] [react/view {:margin-top 5 :width 250} [tooltip/tooltip error]]] diff --git a/src/status_im/ui/screens/multiaccounts/login/views.cljs b/src/status_im/ui/screens/multiaccounts/login/views.cljs index a5a649b0e7..31ec9ec3b2 100644 --- a/src/status_im/ui/screens/multiaccounts/login/views.cljs +++ b/src/status_im/ui/screens/multiaccounts/login/views.cljs @@ -6,13 +6,13 @@ [status-im.ui.components.colors :as colors] [status-im.ui.components.common.common :as components.common] [status-im.ui.components.react :as react] + [status-im.ui.components.text-input.view :as text-input] [status-im.ui.screens.chat.photos :as photos] [status-im.ui.screens.multiaccounts.login.styles :as styles] [status-im.ui.screens.multiaccounts.styles :as ast] [status-im.utils.platform :as platform] [status-im.utils.security :as security] [status-im.utils.utils :as utils] - [quo.core :as quo] [status-im.ui.components.icons.vector-icons :as icons] [status-im.ui.components.topbar :as topbar]) (:require-macros [status-im.utils.views :refer [defview letsubs]])) @@ -53,12 +53,11 @@ :important-for-accessibility :no-hide-descendants} [react/view {:flex-direction :row :align-items :center} [react/view {:flex 1} - [quo/text-input + [text-input/text-input-with-label {:placeholder (i18n/label :t/enter-your-password) - :get-ref #(reset! password-text-input %) + :ref #(reset! password-text-input %) :auto-focus (= view-id :login) :accessibility-label :password-input - :show-cancel false :on-submit-editing (when sign-in-enabled? #(login-multiaccount @password-text-input)) :on-change-text #(do diff --git a/src/status_im/ui/screens/offline_messaging_settings/edit_mailserver/styles.cljs b/src/status_im/ui/screens/offline_messaging_settings/edit_mailserver/styles.cljs index 68793d4655..ff74854a59 100644 --- a/src/status_im/ui/screens/offline_messaging_settings/edit_mailserver/styles.cljs +++ b/src/status_im/ui/screens/offline_messaging_settings/edit_mailserver/styles.cljs @@ -1,5 +1,6 @@ (ns status-im.ui.screens.offline-messaging-settings.edit-mailserver.styles - (:require [status-im.ui.components.colors :as colors] + (:require [status-im.ui.components.styles :as components.styles] + [status-im.ui.components.colors :as colors] [status-im.utils.styles :as styles])) (def edit-mailserver-view @@ -7,6 +8,14 @@ :margin-horizontal 16 :margin-vertical 15}) +(def input-container + {:flex-direction :row + :align-items :center + :justify-content :space-between + :border-radius components.styles/border-radius + :height 52 + :margin-bottom 15}) + (def qr-code {:padding 16}) diff --git a/src/status_im/ui/screens/offline_messaging_settings/edit_mailserver/views.cljs b/src/status_im/ui/screens/offline_messaging_settings/edit_mailserver/views.cljs index 81a3a267ca..8cbc54f24b 100644 --- a/src/status_im/ui/screens/offline_messaging_settings/edit_mailserver/views.cljs +++ b/src/status_im/ui/screens/offline_messaging_settings/edit_mailserver/views.cljs @@ -8,9 +8,10 @@ [status-im.ui.components.icons.vector-icons :as vector-icons] [status-im.ui.components.styles :as components.styles] [status-im.ui.components.common.common :as components.common] + [status-im.ui.components.text-input.view :as text-input] [status-im.ui.screens.offline-messaging-settings.edit-mailserver.styles :as styles] + [status-im.ui.components.tooltip.views :as tooltip] [clojure.string :as string] - [quo.core :as quo] [status-im.ui.components.topbar :as topbar])) (defn connect-button [id] @@ -53,26 +54,29 @@ [topbar/topbar {:title (if id :t/mailserver-details :t/add-mailserver)}] [react/scroll-view {:keyboard-should-persist-taps :handled} [react/view styles/edit-mailserver-view - [react/view {:padding-vertical 8} - [quo/text-input - {:label (i18n/label :t/name) - :placeholder (i18n/label :t/specify-name) - :default-value name - :on-change-text #(re-frame/dispatch [:mailserver.ui/input-changed :name %]) - :auto-focus true}]] - [react/view {:flex 1 - :padding-vertical 8} - [quo/text-input + [text-input/text-input-with-label + {:label (i18n/label :t/name) + :placeholder (i18n/label :t/specify-name) + :container styles/input-container + :default-value name + :on-change-text #(re-frame/dispatch [:mailserver.ui/input-changed :name %]) + :auto-focus true}] + [react/view + {:flex 1} + [text-input/text-input-with-label {:label (i18n/label :t/mailserver-address) :placeholder (i18n/label :t/mailserver-format) :content qr-code + :container styles/input-container :default-value url - :on-change-text #(re-frame/dispatch [:mailserver.ui/input-changed :url %]) - :bottom-value 0 - :error (when (and (not (string/blank? url)) - invalid-url?) - (i18n/label :t/invalid-format - {:format (i18n/label :t/mailserver-format)}))}]] + :on-change-text #(re-frame/dispatch [:mailserver.ui/input-changed :url %])}] + (when (and (not (string/blank? url)) + invalid-url?) + [tooltip/tooltip (i18n/label :t/invalid-format + {:format (i18n/label :t/mailserver-format)}) + {:color colors/red-light + :font-size 12 + :bottom-value 25}])] (when (and id (not connected?)) [react/view diff --git a/src/status_im/ui/screens/pairing/styles.cljs b/src/status_im/ui/screens/pairing/styles.cljs index f87037d5cd..de2cd3970a 100644 --- a/src/status_im/ui/screens/pairing/styles.cljs +++ b/src/status_im/ui/screens/pairing/styles.cljs @@ -1,5 +1,6 @@ (ns status-im.ui.screens.pairing.styles (:require [status-im.ui.components.colors :as colors] + [status-im.ui.components.styles :as components.styles] [status-im.utils.styles :as styles])) (def wrapper @@ -75,4 +76,16 @@ (def bottom-container {:flex-direction :row :margin-horizontal 12 - :margin-vertical 15}) \ No newline at end of file + :margin-vertical 15}) + +(def input-container + {:flex-direction :row + :align-items :center + :justify-content :space-between + :border-radius components.styles/border-radius + :height 52 + :margin-top 15}) + +(styles/def input + {:flex 1 + :android {:padding 0}}) diff --git a/src/status_im/ui/screens/pairing/views.cljs b/src/status_im/ui/screens/pairing/views.cljs index 53789ace0d..b43247ad90 100644 --- a/src/status_im/ui/screens/pairing/views.cljs +++ b/src/status_im/ui/screens/pairing/views.cljs @@ -12,7 +12,7 @@ [status-im.ui.components.checkbox.view :as checkbox.views] [status-im.ui.components.list.views :as list] [status-im.ui.components.react :as react] - [quo.core :as quo] + [status-im.ui.components.text-input.view :as text-input] [status-im.ui.screens.pairing.styles :as styles] [status-im.ui.components.topbar :as topbar])) @@ -138,13 +138,15 @@ [react/keyboard-avoiding-view styles/edit-installation [react/scroll-view {:keyboard-should-persist-taps :handled} [react/view - [quo/text-input - {:placeholder (i18n/label :t/specify-name) - :label (i18n/label :t/pairing-please-set-a-name) - :accessibility-label :device-name - :default-value @installation-name - :on-change-text #(reset! installation-name %) - :auto-focus true}]]] + [react/text (i18n/label :t/pairing-please-set-a-name)]] + [text-input/text-input-with-label + {:placeholder (i18n/label :t/specify-name) + :style styles/input + :accessibility-label :device-name + :container styles/input-container + :default-value @installation-name + :on-change-text #(reset! installation-name %) + :auto-focus true}]] [react/view styles/bottom-container [react/view components.styles/flex] [components.common/bottom-button diff --git a/src/status_im/ui/screens/profile/components/styles.cljs b/src/status_im/ui/screens/profile/components/styles.cljs index 553dae2154..643d7b9f1c 100644 --- a/src/status_im/ui/screens/profile/components/styles.cljs +++ b/src/status_im/ui/screens/profile/components/styles.cljs @@ -3,6 +3,38 @@ ;; profile header elements +(def profile-header-display + {:flex-direction :row + :justify-content :flex-start + :align-items :center}) + +(def profile-name-text + {:typography :header + :line-height 28 + :text-align :left}) + +(def profile-name-text-with-subtitle + {:margin-vertical 5 + :typography :header + :line-height 28 + :text-align :left}) + +(def profile-three-words + {:color colors/gray}) + +(def profile-header-name-container + {:flex 1 + :justify-content :center + :align-items :flex-start + :margin-left 16}) + +(def profile-header-name-container-with-subtitle + {:flex 1 + :justify-content :flex-start + :align-items :flex-start + :align-self :stretch + :margin-left 16}) + ;; settings items elements (def settings-item diff --git a/src/status_im/ui/screens/profile/seed/styles.cljs b/src/status_im/ui/screens/profile/seed/styles.cljs index 132ea2297a..89f08a09ea 100644 --- a/src/status_im/ui/screens/profile/seed/styles.cljs +++ b/src/status_im/ui/screens/profile/seed/styles.cljs @@ -71,6 +71,17 @@ {:flex 1 :padding 16}) +(def enter-word-row + {:flex-direction :row}) + +(def enter-word-label + {:font-size 14}) + +(def enter-word-n + {:margin-left 8 + :font-size 14 + :color colors/gray}) + (def enter-word-n-description {:font-size 14 :color colors/gray}) diff --git a/src/status_im/ui/screens/profile/seed/views.cljs b/src/status_im/ui/screens/profile/seed/views.cljs index 8ba7e457e3..0374a67fd8 100644 --- a/src/status_im/ui/screens/profile/seed/views.cljs +++ b/src/status_im/ui/screens/profile/seed/views.cljs @@ -7,13 +7,13 @@ [status-im.ui.components.common.common :as components.common] [re-frame.core :as re-frame] [reagent.core :as reagent] + [status-im.ui.components.text-input.view :as text-input] [status-im.ui.components.icons.vector-icons :as icons] [status-im.ui.components.common.styles :as components.common.styles] [clojure.string :as string] [status-im.utils.utils :as utils] [status-im.ui.screens.profile.seed.styles :as styles] [status-im.i18n :as i18n] - [quo.core :as quo] [status-im.utils.platform :as platform])) (def steps-numbers @@ -77,15 +77,10 @@ {:forward? true :on-press #(re-frame/dispatch [:my-profile/enter-two-random-words])}]]])) -(defview input [error next-handler idx] +(defview input [error next-handler] (letsubs [ref (reagent/atom nil)] - [quo/text-input + [text-input/text-input-with-label {:placeholder (i18n/label :t/enter-word) - :label [:<> - (i18n/label :t/check-your-recovery-phrase) - " " - [quo/text {:color :secondary} - (i18n/label :t/word-n {:number (inc idx)})]] :ref (partial reset! ref) :auto-focus true :auto-correct false @@ -111,8 +106,12 @@ (defn enter-word [step [idx word] error entered-word] ^{:key word} [react/view {:style styles/enter-word-container} - [react/view {:padding-bottom 8} - [input error (next-handler word entered-word step) idx]] + [react/view {:style styles/enter-word-row} + [react/text {:style styles/enter-word-label} + (i18n/label :t/check-your-recovery-phrase)] + [react/text {:style styles/enter-word-n} + (i18n/label :t/word-n {:number (inc idx)})]] + [input error (next-handler word entered-word step)] [react/text {:style styles/enter-word-n-description} (i18n/label :t/word-n-description {:number (inc idx)})] [react/view styles/twelve-words-spacer] diff --git a/src/status_im/ui/screens/routing/core.cljs b/src/status_im/ui/screens/routing/core.cljs index c7c7e6effb..7e8e2abfd2 100644 --- a/src/status_im/ui/screens/routing/core.cljs +++ b/src/status_im/ui/screens/routing/core.cljs @@ -10,8 +10,6 @@ [taoensso.timbre :as log] [status-im.utils.platform :as platform] [status-im.ui.components.react :as react] - ;; NOTE(Ferossgp): This is temporary to mimic the behaviour of old input - [quo.components.text-input :as quo] [oops.core :refer [ocall oget]])) (def navigation-container (reagent/adapt-react-class NavigationContainer)) @@ -59,8 +57,6 @@ (fn [] ;; Reset currently mounted text inputs to their default values ;; on navigating away; this is a privacy measure - (doseq [[^js text-input default-value] @quo/text-input-refs] - (.setNativeProps text-input (clj->js {:text default-value}))) (doseq [[^js text-input default-value] @react/text-input-refs] (.setNativeProps text-input (clj->js {:text default-value})))))) #js [navigation])) diff --git a/src/status_im/ui/screens/signing/sheets.cljs b/src/status_im/ui/screens/signing/sheets.cljs index 2a095b3016..fb31666c79 100644 --- a/src/status_im/ui/screens/signing/sheets.cljs +++ b/src/status_im/ui/screens/signing/sheets.cljs @@ -2,7 +2,7 @@ (:require-macros [status-im.utils.views :as views]) (:require [status-im.ui.components.react :as react] [re-frame.core :as re-frame] - [quo.core :as quo] + [status-im.ui.components.text-input.view :as text-input] [status-im.i18n :as i18n] [status-im.ui.components.button :as button] [status-im.ui.components.colors :as colors])) @@ -12,11 +12,9 @@ [react/view [react/view {:style {:margin-horizontal 16 :margin-top 8}} [react/text {:style {:typography :title-bold}} (i18n/label :t/network-fee)] - [react/view {:style {:flex-direction :row - :margin-top 8 - :align-items :flex-end}} + [react/view {:style {:flex-direction :row :margin-top 8}} [react/view {:flex 1} - [quo/text-input + [text-input/text-input-with-label {:on-change-text #(re-frame/dispatch [:signing.edit-fee.ui/edit-value :gas %]) :label (i18n/label :t/gas-limit) :error (:error gas-edit) @@ -24,11 +22,9 @@ :keyboard-type :numeric :auto-capitalize :none :placeholder "0" - :show-cancel false :auto-focus false}]] - [react/view {:flex 1 - :padding-left 16} - [quo/text-input + [react/view {:flex 1 :margin-left 33} + [text-input/text-input-with-label {:label (i18n/label :t/gas-price) :on-change-text #(re-frame/dispatch [:signing.edit-fee.ui/edit-value :gasPrice %]) :error (:error gas-price-edit) @@ -36,12 +32,9 @@ :keyboard-type :numeric :auto-capitalize :none :placeholder "0.000" - :show-cancel false :auto-focus false}]] - [react/view {:padding-left 8 - :padding-bottom 12} + [react/view {:margin-top 58 :margin-left 10} [react/text (i18n/label :t/gwei)]]] - [react/view {:margin-vertical 16 :align-items :center} [react/text {:style {:color colors/gray}} (i18n/label :t/wallet-transaction-total-fee)] [react/view {:height 8}] @@ -58,4 +51,4 @@ {:type :secondary :on-press #(re-frame/dispatch [:signing.edit-fee.ui/submit]) :disabled? (or (:error gas-edit) (:error gas-price-edit)) - :label :t/update}]]])) + :label :t/update}]]])) \ No newline at end of file diff --git a/src/status_im/ui/screens/signing/styles.cljs b/src/status_im/ui/screens/signing/styles.cljs index 55d27e7193..c88e9fb414 100644 --- a/src/status_im/ui/screens/signing/styles.cljs +++ b/src/status_im/ui/screens/signing/styles.cljs @@ -57,4 +57,23 @@ :padding-left 16 :color (if disabled? colors/black colors/white-persist) :padding-horizontal 16 - :padding-vertical 10}) \ No newline at end of file + :padding-vertical 10}) + +(defn sheet-title [small-screen?] + {:font-weight "500" + :font-size (if small-screen? 16 19) + :margin-top 16}) + +(defn sheet-subtitle [small-screen?] + {:font-size (if small-screen? 16 19) + :text-align :center + :margin-bottom 12 + :color colors/gray}) + +(defn sheet-icon [bg-color] + {:height 64 + :width 64 + :border-radius 32 + :justify-content :center + :align-items :center + :background-color bg-color}) diff --git a/src/status_im/ui/screens/signing/views.cljs b/src/status_im/ui/screens/signing/views.cljs index 7bf14199f5..49031bdf59 100644 --- a/src/status_im/ui/screens/signing/views.cljs +++ b/src/status_im/ui/screens/signing/views.cljs @@ -13,7 +13,7 @@ [status-im.ui.screens.keycard.keycard-interaction :as keycard-sheet] [status-im.ui.components.chat-icon.screen :as chat-icon] [status-im.ui.components.icons.vector-icons :as icons] - [quo.core :as quo] + [status-im.ui.components.text-input.view :as text-input] [status-im.i18n :as i18n] [status-im.utils.security :as security] [status-im.ui.screens.signing.sheets :as sheets] @@ -258,17 +258,15 @@ :password [react/view {:padding-top 8 :padding-bottom 8} [signing-phrase-view phrase] - [react/view {:padding-horizontal 16 - :padding-vertical 12} - [quo/text-input - {:secure-text-entry true - :placeholder (i18n/label :t/enter-password) - :on-change-text #(re-frame/dispatch [:signing.ui/password-is-changed (security/mask-data %)]) - :accessibility-label :enter-password-input - :auto-capitalize :none - :editable (not in-progress?) - :error error - :show-cancel false}]] + [text-input/text-input-with-label + {:secure-text-entry true + :placeholder (i18n/label :t/enter-password) + :on-change-text #(re-frame/dispatch [:signing.ui/password-is-changed (security/mask-data %)]) + :accessibility-label :enter-password-input + :auto-capitalize :none + :editable (not in-progress?) + :error error + :container {:margin-top 12 :margin-bottom 12 :margin-horizontal 16}}] [react/view {:align-items :center :height 60} (if in-progress? [react/activity-indicator {:animating true diff --git a/src/status_im/ui/screens/wallet/account_settings/views.cljs b/src/status_im/ui/screens/wallet/account_settings/views.cljs index c4a26b6196..30afbf3ea6 100644 --- a/src/status_im/ui/screens/wallet/account_settings/views.cljs +++ b/src/status_im/ui/screens/wallet/account_settings/views.cljs @@ -1,6 +1,7 @@ (ns status-im.ui.screens.wallet.account-settings.views (:require-macros [status-im.utils.views :refer [defview letsubs]]) (:require [status-im.ui.components.react :as react] + [status-im.ui.components.text-input.view :as text-input] [re-frame.core :as re-frame] [status-im.i18n :as i18n] [status-im.ui.components.icons.vector-icons :as icons] @@ -8,7 +9,6 @@ [status-im.ui.components.toolbar :as toolbar] [status-im.ui.components.copyable-text :as copyable-text] [reagent.core :as reagent] - [quo.core :as quo] [status-im.ui.components.list-item.views :as list-item] [status-im.ui.components.topbar :as topbar])) @@ -57,13 +57,14 @@ :style {:flex 1}} [react/view {:padding-bottom 28 :padding-top 10} [react/view {:margin-horizontal 16} - [quo/text-input + [text-input/text-input-with-label {:label (i18n/label :t/account-name) + :label-style {:color colors/gray} :auto-focus false :default-value (:name account) :accessibility-label :enter-account-name :on-change-text #(swap! new-account assoc :name %)}] - [react/text {:style {:margin-top 16 :color colors/gray}} (i18n/label :t/account-color)] + [react/text {:style {:margin-top 30 :color colors/gray}} (i18n/label :t/account-color)] [react/touchable-highlight {:on-press #(re-frame/dispatch [:show-popover {:view [colors-popover color diff --git a/src/status_im/ui/screens/wallet/add_new/views.cljs b/src/status_im/ui/screens/wallet/add_new/views.cljs index 8ccfa80bd4..4d020337dd 100644 --- a/src/status_im/ui/screens/wallet/add_new/views.cljs +++ b/src/status_im/ui/screens/wallet/add_new/views.cljs @@ -11,12 +11,13 @@ [status-im.ui.components.toolbar :as toolbar] [status-im.ui.components.topbar :as topbar] [status-im.utils.utils :as utils.utils] + [status-im.ui.components.text-input.view :as text-input] [status-im.ui.components.icons.vector-icons :as icons] [status-im.ui.screens.wallet.account-settings.views :as account-settings] [status-im.ethereum.core :as ethereum] [status-im.utils.security :as security] [clojure.string :as string] - [quo.core :as quo] + [status-im.utils.platform :as platform] [status-im.ui.components.bottom-panel.views :as bottom-panel])) (defn- request-camera-permissions [] @@ -47,8 +48,8 @@ :handler #(request-camera-permissions)}]}))])) (defn common-settings [account] - [react/view {:margin-horizontal 16} - [quo/text-input + [react/view {:margin-horizontal 16 :margin-top 30} + [text-input/text-input-with-label {:label (i18n/label :t/account-name) :auto-focus false :default-value (:name account) @@ -64,25 +65,24 @@ (re-frame/dispatch [:set-in [:add-account :account :color] new-color]) (re-frame/dispatch [:hide-popover]))] :style {:max-height "60%"}}])} - [react/view {:height 52 :margin-top 12 :background-color (:color account) :border-radius 8 - :align-items :flex-end :justify-content :center :padding-right 12} + [react/view {:height 52 :margin-top 12 :background-color (:color account) :border-radius 8 + :align-items :flex-end :justify-content :center :padding-right 12} [icons/icon :main-icons/dropdown {:color colors/white}]]]]) (defn settings [{:keys [type scanned-address password-error account-error]} entered-password] - [react/view {:padding-horizontal 16 - :padding-vertical 16} + [react/view {:margin-horizontal 16} (if (= type :watch) - [quo/text-input + [text-input/text-input-with-label {:label (i18n/label :t/wallet-key-title) :auto-focus false :default-value scanned-address :placeholder (i18n/label :t/enter-address) :accessibility-label :add-account-enter-watch-address :on-change-text #(re-frame/dispatch [:set-in [:add-account :address] %])}] - [quo/text-input + [text-input/text-input-with-label {:label (i18n/label :t/password) - :show-cancel false + :parent-container {:margin-top 30} :auto-focus false :placeholder (i18n/label :t/enter-your-password) :secure-text-entry true @@ -93,37 +93,39 @@ (re-frame/dispatch [:set-in [:add-account :password-error] nil]) (reset! entered-password %))}]) (when (= type :seed) - [react/view {:padding-top 16} - [quo/text-input - {:label (i18n/label :t/recovery-phrase) - :auto-focus false - :placeholder (i18n/label :t/multiaccounts-recover-enter-phrase-title) - :auto-correct false - :keyboard-type "visible-password" - :multiline true - :height 95 - :error account-error - :accessibility-label :add-account-enter-seed - :on-change-text - #(do - (re-frame/dispatch [:set-in [:add-account :account-error] nil]) - (re-frame/dispatch [:set-in [:add-account :seed] (security/mask-data (string/lower-case %))]))}]]) + [text-input/text-input-with-label + {:parent-container {:margin-top 30} + :label (i18n/label :t/recovery-phrase) + :auto-focus false + :placeholder (i18n/label :t/multiaccounts-recover-enter-phrase-title) + :auto-correct false + :keyboard-type "visible-password" + :multiline true + :style (when platform/android? + {:flex 1}) + :height 95 + :error account-error + :accessibility-label :add-account-enter-seed + :on-change-text + #(do + (re-frame/dispatch [:set-in [:add-account :account-error] nil]) + (re-frame/dispatch [:set-in [:add-account :seed] (security/mask-data (string/lower-case %))]))}]) (when (= type :key) - [react/view {:margin-top 30} - [quo/text-input - {:label (i18n/label :t/private-key) - :auto-focus false - :placeholder (i18n/label :t/enter-a-private-key) - :auto-correct false - :keyboard-type "visible-password" - :error account-error - :secure-text-entry true - :accessibility-label :add-account-enter-private-key - :text-content-type :none - :on-change-text - #(do - (re-frame/dispatch [:set-in [:add-account :account-error] nil]) - (re-frame/dispatch [:set-in [:add-account :private-key] (security/mask-data %)]))}]])]) + [text-input/text-input-with-label + {:parent-container {:margin-top 30} + :label (i18n/label :t/private-key) + :auto-focus false + :placeholder (i18n/label :t/enter-a-private-key) + :auto-correct false + :keyboard-type "visible-password" + :error account-error + :secure-text-entry true + :accessibility-label :add-account-enter-private-key + :text-content-type :none + :on-change-text + #(do + (re-frame/dispatch [:set-in [:add-account :account-error] nil]) + (re-frame/dispatch [:set-in [:add-account :private-key] (security/mask-data %)]))}])]) (defview pin [] (letsubs [pin [:hardwallet/pin] diff --git a/src/status_im/ui/screens/wallet/components/views.cljs b/src/status_im/ui/screens/wallet/components/views.cljs index bea761d857..368b4cecf8 100644 --- a/src/status_im/ui/screens/wallet/components/views.cljs +++ b/src/status_im/ui/screens/wallet/components/views.cljs @@ -6,7 +6,7 @@ [status-im.ui.components.react :as react] [status-im.ui.components.toolbar.view :as topbar] [status-im.ui.screens.wallet.components.styles :as styles] - [quo.core :as quo] + [status-im.ui.components.text-input.view :as text-input] [status-im.ui.components.colors :as colors] [status-im.utils.debounce :as debounce]) (:require-macros [status-im.utils.views :as views])) @@ -37,9 +37,10 @@ [react/view {:padding-horizontal 16 :padding-vertical 24 :flex 1} - [quo/text-input + [text-input/text-input-with-label {:multiline true - :height 98 + :container {:height 98 + :padding-vertical 8} :placeholder (i18n/label :t/recipient-code-placeholder) :text-align-vertical :top :on-change-text #(reset! content %) diff --git a/src/status_im/ui/screens/wallet/custom_tokens/views.cljs b/src/status_im/ui/screens/wallet/custom_tokens/views.cljs index e335247033..d5c4598dd9 100644 --- a/src/status_im/ui/screens/wallet/custom_tokens/views.cljs +++ b/src/status_im/ui/screens/wallet/custom_tokens/views.cljs @@ -3,10 +3,10 @@ (:require [re-frame.core :as re-frame] [status-im.ui.components.colors :as colors] [status-im.ui.components.react :as react] + [status-im.ui.components.text-input.view :as text-input] [status-im.ui.components.common.common :as components.common] [clojure.string :as string] [status-im.i18n :as i18n] - [quo.core :as quo] [status-im.ui.components.list-item.views :as list-item] [status-im.ui.components.topbar :as topbar])) @@ -25,66 +25,58 @@ [:wallet/custom-token-screen]] [react/keyboard-avoiding-view {:flex 1 :background-color colors/white} [topbar/topbar {:title :t/add-custom-token}] - [react/scroll-view {:keyboard-should-persist-taps :handled - :style {:flex 1 - :padding-horizontal 16}} - [react/view {:padding-vertical 8} - [react/view {:style {:flex-direction :row - :justify-content :space-between - :padding-vertical 10}} - [react/text (i18n/label :t/contract-address)] - (when in-progress? - [react/view {:flex-direction :row :justify-content :center} - [react/view {:height 20} - [react/activity-indicator {:width 24 :height 24 :animating true}]] - [react/text {:style {:color colors/gray :margin-left 5}} - (i18n/label :t/processing)]])] - (when-not in-progress? - ;;tooltip covers button - [react/view {:position :absolute :z-index 1000 :right 0 :top 10} - [react/touchable-highlight {:on-press #(re-frame/dispatch [:wallet.custom-token.ui/contract-address-paste])} - [react/text {:style {:color colors/blue}} - (i18n/label :t/paste)]]]) - [quo/text-input - {:on-change-text #(debounce-and-save :contract %) - :error error - :default-value contract - :multiline true - :height 78 - :auto-focus false - :placeholder (i18n/label :t/specify-address)}]] - [react/view {:padding-vertical 8} - [quo/text-input - {:on-change-text #(debounce-and-save :name %) - :label (i18n/label :t/name) - :default-value name - :error error-name - :auto-focus false - :placeholder (i18n/label :t/name-of-token)}]] - [react/view {:padding-vertical 8} - [react/view {:style {:flex-direction :row}} - [react/view {:flex 1 - :padding-right 8} - [quo/text-input - {:on-change-text #(debounce-and-save :symbol %) - :label (i18n/label :t/symbol) - :error error-symbol - :default-value symbol - :auto-focus false - :show-cancel false - :placeholder "ABC"}]] - [react/view {:flex 1 - :padding-left 8} - [quo/text-input - {:label (i18n/label :t/decimals) - :on-change-text #(debounce-and-save :decimals %) - :default-value decimals - :keyboard-type :number-pad - :max-length 2 - :auto-focus false - :show-cancel false - :placeholder "18"}]]]] - #_[quo/text-input + [react/scroll-view {:keyboard-should-persist-taps :handled :style {:flex 1 :margin-top 8 :padding-horizontal 16}} + [react/view {:style {:flex-direction :row :justify-content :space-between :padding-vertical 10}} + [react/text (i18n/label :t/contract-address)] + (when in-progress? + [react/view {:flex-direction :row :justify-content :center} + [react/view {:height 20} + [react/activity-indicator {:width 24 :height 24 :animating true}]] + [react/text {:style {:color colors/gray :margin-left 5}} + (i18n/label :t/processing)]])] + (when-not in-progress? + ;;tooltip covers button + [react/view {:position :absolute :z-index 1000 :right 0 :top 10} + [react/touchable-highlight {:on-press #(re-frame/dispatch [:wallet.custom-token.ui/contract-address-paste])} + [react/text {:style {:color colors/blue}} + (i18n/label :t/paste)]]]) + [text-input/text-input-with-label + {:on-change-text #(debounce-and-save :contract %) + :error error + :default-value contract + :multiline true + :height 78 + :auto-focus false + :placeholder (i18n/label :t/specify-address)}] + [react/view {:height 16}] + [text-input/text-input-with-label + {:on-change-text #(debounce-and-save :name %) + :label (i18n/label :t/name) + :default-value name + :error error-name + :auto-focus false + :placeholder (i18n/label :t/name-of-token)}] + [react/view {:height 16}] + [react/view {:style {:flex-direction :row}} + [react/view {:flex 1} + [text-input/text-input-with-label + {:on-change-text #(debounce-and-save :symbol %) + :label (i18n/label :t/symbol) + :error error-symbol + :default-value symbol + :auto-focus false + :placeholder "ABC"}]] + [react/view {:flex 1 :margin-left 33} + [text-input/text-input-with-label + {:label (i18n/label :t/decimals) + :on-change-text #(debounce-and-save :decimals %) + :default-value decimals + :keyboard-type :number-pad + :max-length 2 + :auto-focus false + :placeholder "18"}]]] + [react/view {:height 16}] + #_[text-input/text-input-with-label {:label (i18n/label :t/balance) :default-value (when (and balance decimals) (wallet.utils/format-amount balance decimals)) @@ -113,39 +105,35 @@ [react/keyboard-avoiding-view {:flex 1 :background-color colors/white} [topbar/topbar {:title name}] [react/scroll-view {:keyboard-should-persist-taps :handled - :style {:flex 1}} + :style {:flex 1 :margin-top 8}} [react/view {:padding-horizontal 16} - [react/view {:padding-vertical 8} - [quo/text-input - {:label (i18n/label :t/contract-address) - :default-value address - :multiline true - :height 78 - :editable false}]] - [react/view {:padding-vertical 8} - [quo/text-input - {:label (i18n/label :t/name) - :default-value name - :editable false}]] - [react/view {:padding-vertical 8} - [react/view {:style {:flex-direction :row}} - [react/view {:flex 1 - :padding-right 8} - [quo/text-input - {:label (i18n/label :t/symbol) - :editable false - :show-cancel false - :default-value symbol}]] - [react/view {:flex 1 :padding-left 8} - [quo/text-input - {:label (i18n/label :t/decimals) - :show-cancel false - :default-value (str decimals) - :editable false}]]]]] + [text-input/text-input-with-label + {:label (i18n/label :t/contract-address) + :default-value address + :multiline true + :height 78 + :editable false}] + [react/view {:height 16}] + [text-input/text-input-with-label + {:label (i18n/label :t/name) + :default-value name + :editable false}] + [react/view {:height 16}] + [react/view {:style {:flex-direction :row}} + [react/view {:flex 1} + [text-input/text-input-with-label + {:label (i18n/label :t/symbol) + :editable false + :default-value symbol}]] + [react/view {:flex 1 :margin-left 33} + [text-input/text-input-with-label + {:label (i18n/label :t/decimals) + :default-value (str decimals) + :editable false}]]]] [react/view {:height 24}] (when custom? [list-item/list-item - {:theme :action-destructive - :title :t/remove-token - :icon :main-icons/delete - :on-press #(re-frame/dispatch [:wallet.custom-token.ui/remove-pressed token true])}])]])) + {:theme :action-destructive + :title :t/remove-token + :icon :main-icons/delete + :on-press #(re-frame/dispatch [:wallet.custom-token.ui/remove-pressed token true])}])]])) diff --git a/src/status_im/ui/screens/wallet/settings/views.cljs b/src/status_im/ui/screens/wallet/settings/views.cljs index 32dc85141d..6bca226420 100644 --- a/src/status_im/ui/screens/wallet/settings/views.cljs +++ b/src/status_im/ui/screens/wallet/settings/views.cljs @@ -74,7 +74,7 @@ [render-token token]) (defview manage-assets [] - (letsubs [{search-filter :search-filter + (letsubs [{search-filter :search-filter {custom-tokens true default-tokens nil} :tokens} [:wallet/filtered-grouped-chain-tokens]] {:component-will-unmount #(do (re-frame/dispatch [:search/token-filter-changed nil]) @@ -82,35 +82,33 @@ [react/view (merge components.styles/flex {:background-color colors/white}) [toolbar] [react/view {:style components.styles/flex} - [react/view {:padding-horizontal 16 - :padding-vertical 10} - [search-input/search-input - {:search-active? search-active? - :search-filter search-filter - :on-cancel #(re-frame/dispatch [:search/token-filter-changed nil]) - :on-focus (fn [search-filter] - (when-not search-filter - (re-frame/dispatch [:search/token-filter-changed ""]))) - :on-change (fn [text] - (re-frame/dispatch [:search/token-filter-changed text]))}]] + [search-input/search-input + {:search-active? search-active? + :search-filter search-filter + :on-cancel #(re-frame/dispatch [:search/token-filter-changed nil]) + :on-focus (fn [search-filter] + (when-not search-filter + (re-frame/dispatch [:search/token-filter-changed ""]))) + :on-change (fn [text] + (re-frame/dispatch [:search/token-filter-changed text]))}] [list/section-list {:header [react/view {:margin-top 16} [list-item/list-item - {:theme :action - :title :t/add-custom-token - :icon :main-icons/add + {:theme :action + :title :t/add-custom-token + :icon :main-icons/add :on-press #(re-frame/dispatch [:navigate-to :wallet-add-custom-token])}]] - :sections (concat - (when (seq custom-tokens) - [{:title (i18n/label :t/custom) - :data custom-tokens}]) - [{:title (i18n/label :t/default) - :data default-tokens}]) - :key-fn :address + :sections (concat + (when (seq custom-tokens) + [{:title (i18n/label :t/custom) + :data custom-tokens}]) + [{:title (i18n/label :t/default) + :data default-tokens}]) + :key-fn :address :stickySectionHeadersEnabled false :render-section-header-fn (fn [{:keys [title]}] [list-item/list-item {:type :section-header :title title}]) - :render-fn render-token-wrapper}]]])) + :render-fn render-token-wrapper}]]])) diff --git a/translations/en.json b/translations/en.json index efe07cb434..afa1b20d6b 100644 --- a/translations/en.json +++ b/translations/en.json @@ -414,7 +414,6 @@ "enter-address": "Enter address", "enter-contact-code": "Enter ENS username or chat key", "enter-pair-code": "Enter your pairing code", - "pair-code-placeholder": "Pair code...", "enter-pair-code-description": "Pairing code was displayed to you during the Keycard setup", "enter-password": "Enter password", "enter-pin": "Enter 6-digit passcode", @@ -1082,7 +1081,6 @@ "welcome-to-status": "Welcome to Status!", "welcome-to-status-description": "Set up your crypto wallet, invite friends to chat and browse decentralized apps", "welcome-blank-message": "Your chats will appear here. To start new chats press the ⊕ button", - "seed-phrase-placeholder": "Seed phrase...", "word-count": "Word count", "word-n": "Word #{{number}}", "word-n-description": "In order to check if you have backed up your seed phrase correctly, enter the word #{{number}} above.",