status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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 <feross95@gmail.com>
This commit is contained in:
Gheorghe Pinzaru 2020-04-06 17:13:55 +03:00
parent 966b6e5a33
commit c41727c1b3
No known key found for this signature in database
GPG Key ID: C9A094959935A952
5 changed files with 52 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/status_im/ui/components/text_input/styles.cljs
View File

@ -10,8 +10,7 @@
(defn input-container [height editable] (defn input-container [height editable]
(merge (merge
{:padding 16 {:justify-content :center
:justify-content :center
:height (or height 52) :height (or height 52)
:border-radius 8 :border-radius 8
:background-color (when editable colors/gray-lighter)} :background-color (when editable colors/gray-lighter)}
@ -20,7 +19,11 @@
:border-width 1}))) :border-width 1})))
(styles/def input (styles/def input
{:padding 0 {:padding 16
:border-radius 8
:font-size 15
:line-height 22
:flex 1
:text-align-vertical :center :text-align-vertical :center
:desktop {:height 52}}) :desktop {:height 52}})

66
src/status_im/ui/screens/intro/views.cljs
View File

@ -345,7 +345,7 @@
(defn enter-phrase [{:keys [processing? (defn enter-phrase [{:keys [processing?
passphrase-word-count passphrase-word-count
next-button-disabled? next-button-disabled?
passphrase-error] :as wizard-state}] passphrase-error]}]
[react/keyboard-avoiding-view {:flex 1 [react/keyboard-avoiding-view {:flex 1
:justify-content :flex-start :justify-content :flex-start
:background-color colors/white} :background-color colors/white}
@ -359,51 +359,49 @@
:multiline true :multiline true
:auto-correct false :auto-correct false
:keyboard-type "visible-password" :keyboard-type "visible-password"
:parent-container {:flex 1 :parent-container {:flex 1
:align-self :stretch :justify-content :center}
:justify-content :center :container (merge {:background-color colors/white
:align-items :center} :flex 1
:container {:background-color colors/white :justify-content :center
:flex 1 :min-height 90}
:justify-content :center (when platform/ios?
:align-items :center} {:max-height 150}))
:style (merge {:background-color colors/white :style {:background-color colors/white
:text-align :center :text-align :center
:text-align-vertical :center :text-align-vertical :center
:min-width 40 :min-width 40
:font-size 16 :font-size 16
:font-weight "700"} :font-weight "700"}}]
(when platform/android?
{:flex 1}))}]
[react/view {:align-items :center} [react/view {:align-items :center}
(if passphrase-word-count (if passphrase-word-count
[react/view {:flex-direction :row [react/view {:flex-direction :row
:margin-bottom 4 :margin-bottom 4
:min-height 24 :min-height 24
:max-height 24 :max-height 24
:align-items :center} :align-items :center}
[react/nested-text {:style {:font-size 14 [react/nested-text {:style {:font-size 14
:padding-right 4 :padding-right 4
:text-align :center :text-align :center
:color colors/gray}} :color colors/gray}}
(str (i18n/label :t/word-count) ": ") (str (i18n/label :t/word-count) ": ")
[{:style {:font-weight "500" [{:style {:font-weight "500"
:color colors/black}} :color colors/black}}
(i18n/label-pluralize passphrase-word-count :t/words-n)]] (i18n/label-pluralize passphrase-word-count :t/words-n)]]
(when-not next-button-disabled? (when-not next-button-disabled?
[react/view {:style {:background-color colors/green-transparent-10 [react/view {:style {:background-color colors/green-transparent-10
:border-radius 12 :border-radius 12
:width 24 :width 24
:justify-content :center :justify-content :center
:align-items :center :align-items :center
:height 24}} :height 24}}
[vector-icons/tiny-icon :tiny-icons/tiny-check {:color colors/green}]])] [vector-icons/tiny-icon :tiny-icons/tiny-check {:color colors/green}]])]
[react/view {:align-self :stretch :margin-bottom 4 [react/view {:align-self :stretch :margin-bottom 4
:max-height 24 :min-height 24}]) :max-height 24 :min-height 24}])
[react/text {:style {:color colors/gray [react/text {:style {:color colors/gray
:font-size 14 :font-size 14
:margin-bottom 8 :margin-bottom 8
:text-align :center}} :text-align :center}}
(i18n/label :t/multiaccounts-recover-enter-phrase-text)]] (i18n/label :t/multiaccounts-recover-enter-phrase-text)]]
(when processing? (when processing?
[react/view {:flex 1 :align-items :center} [react/view {:flex 1 :align-items :center}

18
src/status_im/ui/screens/offline_messaging_settings/edit_mailserver/styles.cljs
View File

@ -9,19 +9,15 @@
:margin-vertical 15}) :margin-vertical 15})
(def input-container (def input-container
{:flex-direction :row {:flex-direction :row
:align-items :center :align-items :center
:justify-content :space-between :justify-content :space-between
:border-radius components.styles/border-radius :border-radius components.styles/border-radius
:height 52 :height 52
:margin-top 15}) :margin-bottom 15})
(styles/def input
{:flex 1
:android {:padding 0}})
(def qr-code (def qr-code
{:margin-right 14}) {:padding 16})
(def bottom-container (def bottom-container
{:flex-direction :row {:flex-direction :row

2
src/status_im/ui/screens/offline_messaging_settings/edit_mailserver/views.cljs
View File

@ -60,7 +60,6 @@
[text-input/text-input-with-label [text-input/text-input-with-label
{:label (i18n/label :t/name) {:label (i18n/label :t/name)
:placeholder (i18n/label :t/specify-name) :placeholder (i18n/label :t/specify-name)
:style styles/input
:container styles/input-container :container styles/input-container
:default-value name :default-value name
:on-change-text #(re-frame/dispatch [:mailserver.ui/input-changed :name %]) :on-change-text #(re-frame/dispatch [:mailserver.ui/input-changed :name %])
@ -71,7 +70,6 @@
{:label (i18n/label :t/mailserver-address) {:label (i18n/label :t/mailserver-address)
:placeholder (i18n/label :t/mailserver-format) :placeholder (i18n/label :t/mailserver-format)
:content qr-code :content qr-code
:style styles/input
:container styles/input-container :container styles/input-container
:default-value url :default-value url
:on-change-text #(re-frame/dispatch [:mailserver.ui/input-changed :url %])}] :on-change-text #(re-frame/dispatch [:mailserver.ui/input-changed :url %])}]

11
src/status_im/ui/screens/wallet/components/views.cljs
View File

@ -34,13 +34,16 @@
(views/letsubs [content (reagent/atom nil)] (views/letsubs [content (reagent/atom nil)]
[react/view {:flex 1} [react/view {:flex 1}
[recipient-topbar @content] [recipient-topbar @content]
[react/view [react/view {:padding-horizontal 16
:padding-vertical 24
:flex 1}
[text-input/text-input-with-label [text-input/text-input-with-label
{:multiline true {:multiline true
:container {:margin 16 :padding-vertical 16 :height 72} :container {:height 98
:style {:text-align-vertical :top :height 42} :padding-vertical 8}
:placeholder (i18n/label :t/recipient-code-placeholder) :placeholder (i18n/label :t/recipient-code-placeholder)
:on-change-text #(reset! content %) :on-change-text #(reset! content %)
:accessibility-label :recipient-address-input}] :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)]]])) (i18n/label :t/enter-recipient-address-or-username)]]]))