From c41727c1b316065cff4d0dfae75239d89f4cad92 Mon Sep 17 00:00:00 2001 From: Gheorghe Pinzaru Date: Mon, 6 Apr 2020 17:13:55 +0300 Subject: [PATCH] Add minor improvments to text input Set font-size and line-height for text-input Add min height to seed phrase Min 3 lines for phrase fixes #10121 Increase touchable area for text-input Fix wrong styles on mailserver inputs Fix wallet wrong styling on text input Make seed phrase centred on ios Signed-off-by: Gheorghe Pinzaru --- .../ui/components/text_input/styles.cljs | 9 ++- src/status_im/ui/screens/intro/views.cljs | 66 +++++++++---------- .../edit_mailserver/styles.cljs | 18 ++--- .../edit_mailserver/views.cljs | 2 - .../ui/screens/wallet/components/views.cljs | 11 ++-- 5 files changed, 52 insertions(+), 54 deletions(-) diff --git a/src/status_im/ui/components/text_input/styles.cljs b/src/status_im/ui/components/text_input/styles.cljs index 128772e31e..be8b0b3753 100644 --- a/src/status_im/ui/components/text_input/styles.cljs +++ b/src/status_im/ui/components/text_input/styles.cljs @@ -10,8 +10,7 @@ (defn input-container [height editable] (merge - {:padding 16 - :justify-content :center + {:justify-content :center :height (or height 52) :border-radius 8 :background-color (when editable colors/gray-lighter)} @@ -20,7 +19,11 @@ :border-width 1}))) (styles/def input - {:padding 0 + {:padding 16 + :border-radius 8 + :font-size 15 + :line-height 22 + :flex 1 :text-align-vertical :center :desktop {:height 52}}) diff --git a/src/status_im/ui/screens/intro/views.cljs b/src/status_im/ui/screens/intro/views.cljs index e97b3d9fb0..4fa6cd9d3e 100644 --- a/src/status_im/ui/screens/intro/views.cljs +++ b/src/status_im/ui/screens/intro/views.cljs @@ -345,7 +345,7 @@ (defn enter-phrase [{:keys [processing? passphrase-word-count next-button-disabled? - passphrase-error] :as wizard-state}] + passphrase-error]}] [react/keyboard-avoiding-view {:flex 1 :justify-content :flex-start :background-color colors/white} @@ -359,51 +359,49 @@ :multiline true :auto-correct false :keyboard-type "visible-password" - :parent-container {:flex 1 - :align-self :stretch - :justify-content :center - :align-items :center} - :container {:background-color colors/white - :flex 1 - :justify-content :center - :align-items :center} - :style (merge {:background-color colors/white - :text-align :center - :text-align-vertical :center - :min-width 40 - :font-size 16 - :font-weight "700"} - (when platform/android? - {:flex 1}))}] + :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 + :margin-bottom 4 + :min-height 24 + :max-height 24 :align-items :center} - [react/nested-text {:style {:font-size 14 + [react/nested-text {:style {:font-size 14 :padding-right 4 - :text-align :center - :color colors/gray}} + :text-align :center + :color colors/gray}} (str (i18n/label :t/word-count) ": ") - [{:style {:font-weight "500" - :color colors/black}} + [{: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}} + :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 + :max-height 24 :min-height 24}]) + [react/text {:style {:color colors/gray + :font-size 14 :margin-bottom 8 - :text-align :center}} + :text-align :center}} (i18n/label :t/multiaccounts-recover-enter-phrase-text)]] (when processing? [react/view {:flex 1 :align-items :center} 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 a2992dbe4a..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 @@ -9,19 +9,15 @@ :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}}) + {:flex-direction :row + :align-items :center + :justify-content :space-between + :border-radius components.styles/border-radius + :height 52 + :margin-bottom 15}) (def qr-code - {:margin-right 14}) + {:padding 16}) (def bottom-container {:flex-direction :row 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 e94260704d..74de6bce1d 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 @@ -60,7 +60,6 @@ [text-input/text-input-with-label {:label (i18n/label :t/name) :placeholder (i18n/label :t/specify-name) - :style styles/input :container styles/input-container :default-value name :on-change-text #(re-frame/dispatch [:mailserver.ui/input-changed :name %]) @@ -71,7 +70,6 @@ {:label (i18n/label :t/mailserver-address) :placeholder (i18n/label :t/mailserver-format) :content qr-code - :style styles/input :container styles/input-container :default-value url :on-change-text #(re-frame/dispatch [:mailserver.ui/input-changed :url %])}] diff --git a/src/status_im/ui/screens/wallet/components/views.cljs b/src/status_im/ui/screens/wallet/components/views.cljs index 99a39cbcd3..4af384ee66 100644 --- a/src/status_im/ui/screens/wallet/components/views.cljs +++ b/src/status_im/ui/screens/wallet/components/views.cljs @@ -34,13 +34,16 @@ (views/letsubs [content (reagent/atom nil)] [react/view {:flex 1} [recipient-topbar @content] - [react/view + [react/view {:padding-horizontal 16 + :padding-vertical 24 + :flex 1} [text-input/text-input-with-label {:multiline true - :container {:margin 16 :padding-vertical 16 :height 72} - :style {:text-align-vertical :top :height 42} + :container {:height 98 + :padding-vertical 8} :placeholder (i18n/label :t/recipient-code-placeholder) :on-change-text #(reset! content %) :accessibility-label :recipient-address-input}] - [react/text {:style {:color colors/gray :margin-horizontal 16}} + [react/text {:style {:color colors/gray + :margin-vertical 16}} (i18n/label :t/enter-recipient-address-or-username)]]]))