Fix password input cutting

status-im · Jul 8, 2019 · 73dae1b · 73dae1b
1 parent bca9e9c
commit 73dae1b
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 24 deletions.
diff --git a/src/status_im/ui/screens/intro/styles.cljs b/src/status_im/ui/screens/intro/styles.cljs
@@ -77,8 +77,9 @@
 (def intro-logo
   {:size 111})
 
-(def password-text-input
-  {:typography :header})
+(defn password-text-input [width]
+  {:typography :header
+   :width      width})
 
 (def buttons-container
   {:align-items :center

diff --git a/src/status_im/ui/screens/intro/views.cljs b/src/status_im/ui/screens/intro/views.cljs
@@ -169,28 +169,29 @@
      [react/view {:style {:min-height 16 :max-height 16}}]
      [storage-entry (second storage-types) selected-storage-type]]))
 
-(defn password-container [confirm-failure?]
-  [react/view {:style {:flex 1
-                       :justify-content :space-between
-                       :align-items :center :margin-horizontal 16}}
-   [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) " ")]
+(defn password-container [confirm-failure? view-width]
+  (let [horizontal-margin 16]
+    [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/text-input {:secure-text-entry true
-                       :auto-focus true
-                       :text-align :center
-                       :placeholder ""
-                       :style styles/password-text-input
-                       :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)]])
+      [react/text-input {:secure-text-entry true
+                         :auto-focus true
+                         :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?] :as wizard-state}]
-  [password-container confirm-failure?])
+(defn create-code [{:keys [confirm-failure?] :as wizard-state} view-width]
+  [password-container confirm-failure? view-width])
 
-(defn confirm-code [{:keys [confirm-failure?] :as wizard-state}]
-  [password-container confirm-failure?])
+(defn confirm-code [{:keys [confirm-failure?] :as wizard-state} view-width]
+  [password-container confirm-failure? view-width])
 
 (defn enable-fingerprint []
   [vector-icons/icon :main-icons/fingerprint
@@ -272,7 +273,7 @@
 
 (defview wizard []
   (letsubs [{:keys [step generating-keys?] :as wizard-state} [:intro-wizard]
-            {view-height :height} [:dimensions/window]]
+            {view-height :height view-width :width} [:dimensions/window]]
     [react/keyboard-avoiding-view {:style {:flex 1}}
      [toolbar/toolbar
       {:style {:border-bottom-width 0
@@ -289,8 +290,8 @@
         :generate-key [generate-key]
         :choose-key [choose-key wizard-state view-height]
         :select-key-storage [select-key-storage wizard-state view-height]
-        :create-code [create-code wizard-state]
-        :confirm-code [confirm-code wizard-state]
+        :create-code [create-code wizard-state view-width]
+        :confirm-code [confirm-code wizard-state view-width]
         :enable-fingerprint [enable-fingerprint]
         :enable-notifications [enable-notifications]
         nil nil)