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:
parent
966b6e5a33
commit
c41727c1b3
|
@ -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}})
|
||||||
|
|
||||||
|
|
|
@ -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}
|
||||||
|
@ -360,21 +360,19 @@
|
||||||
: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}
|
|
||||||
:container {:background-color colors/white
|
|
||||||
:flex 1
|
:flex 1
|
||||||
:justify-content :center
|
:justify-content :center
|
||||||
:align-items :center}
|
:min-height 90}
|
||||||
:style (merge {:background-color colors/white
|
(when platform/ios?
|
||||||
|
{:max-height 150}))
|
||||||
|
: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
|
||||||
|
|
|
@ -14,14 +14,10 @@
|
||||||
: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
|
||||||
|
|
|
@ -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 %])}]
|
||||||
|
|
|
@ -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)]]]))
|
||||||
|
|
Loading…
Reference in New Issue