Fix enter-phrase input layout issues

status-im · Oct 1, 2019 · c3e2afd · c3e2afd
1 parent f9a0853
commit c3e2afd
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 29 deletions.
diff --git a/src/status_im/ui/components/text_input/view.cljs b/src/status_im/ui/components/text_input/view.cljs
@@ -19,7 +19,7 @@
            parent-container bottom-value text editable keyboard-type]
     :as props
     :or {editable true}}]
-  [react/view
+  [react/view {:style parent-container}
    (when label
      [react/text {:style (styles/label editable)}
       label])

diff --git a/src/status_im/ui/screens/intro/views.cljs b/src/status_im/ui/screens/intro/views.cljs
@@ -18,6 +18,7 @@
             [status-im.ui.components.common.common :as components.common]
             [status-im.ui.screens.intro.styles :as styles]
             [status-im.ui.components.toolbar.view :as toolbar]
+            [status-im.utils.platform :as platform]
             [status-im.utils.security :as security]
             [status-im.i18n :as i18n]
             [status-im.ui.components.status-bar.view :as status-bar]
@@ -334,34 +335,31 @@
   [react/keyboard-avoiding-view {:flex             1
                                  :justify-content  :space-between
                                  :background-color colors/white}
-   [react/view {:flex 1
-                :justify-content :center
-                :align-items    :center}
-    [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
-                            :align-self :stretch
-                            :justify-content :center
-                            :align-items :center}
-      :container           {:background-color :white
-                            :flex 1
-                            :justify-content :center
-                            :align-items :center}
-      :style               {:background-color :white
-                            :text-align       :center
-                            ;:height 75
-                            :flex 1
-                            :flex-wrap :wrap
-                            :font-size        16
-                            :font-weight      "700"}}]]
+   [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
+                           :align-self :stretch
+                           :justify-content :center
+                           :align-items :center}
+     :container           {:background-color :white
+                           :flex 1
+                           :justify-content :center
+                           :align-items :center}
+     :style               (merge {:background-color    :white
+                                  :text-align          :center
+                                  :text-align-vertical :center
+                                  :font-size        16
+                                  :font-weight      "700"}
+                                 (when platform/android?
+                                   {:flex 1}))}]
    [react/view {:align-items :center}
     (when passphrase-word-count
       [react/view {:flex-direction :row