More fixes

status-im · Sep 12, 2019 · 3a8ca4b · 3a8ca4b
1 parent 4597020
commit 3a8ca4b
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 30 deletions.
diff --git a/src/status_im/ui/components/text_input/styles.cljs b/src/status_im/ui/components/text_input/styles.cljs
@@ -21,11 +21,11 @@
 
 (defstyle input
   {:padding             0
-   :text-align-vertical :top
+   :text-align-vertical :center
    :desktop             {:height 52}})
 
-(defn error [label?]
-  {:bottom-value (if label? 20 0)
+(defn error [bottom-value]
+  {:bottom-value bottom-value
    :container-style {:shadow-offset    {:width 0 :height 1}
                      :shadow-radius    6
                      :shadow-opacity   1

diff --git a/src/status_im/ui/components/text_input/view.cljs b/src/status_im/ui/components/text_input/view.cljs
@@ -14,8 +14,11 @@
       (dissoc merged-styles :background-color)
       merged-styles)))
 
-(defn text-input-with-label [{:keys [label content error style height container text editable] :as props :or {editable true}}]
-  [react/view
+(defn text-input-with-label [{:keys [label content error style height container
+                                     bottom-value
+                                     parent-container text editable] :as props :or {editable true}}]
+  [react/view (when parent-container
+                parent-container)
    (when label
      [react/text {:style (styles/label editable)}
       label])
@@ -33,4 +36,7 @@
         {:value text}))]
     (when content content)]
    (when error
-     [tooltip/tooltip error (styles/error label)])])
+     [tooltip/tooltip error (styles/error
+                             (cond bottom-value bottom-value
+                                   label 20
+                                   :else 0))])])
diff --git a/src/status_im/ui/screens/multiaccounts/recover/views.cljs b/src/status_im/ui/screens/multiaccounts/recover/views.cljs
@@ -66,37 +66,55 @@
        [react/text {:style {:typography :header
                             :text-align :center}}
         (i18n/label :t/multiaccounts-recover-enter-phrase-title)]]
-      [react/view {:style {:flex 1 :justify-content :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
-         :on-submit-editing #(re-frame/dispatch [::multiaccounts.recover/enter-phrase-input-submitted])
-         :error             (when passphrase-error (i18n/label passphrase-error))
-         :placeholder       nil
-        ;:height            120
-         :multiline         true
-         :auto-correct      false
-         :keyboard-type     "visible-password"
-         :container         {:background-color :white}
-         :style             {:background-color :white
-                             :text-align       :center
-                             :flex 1
-                             :align-self :stretch
-                             :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
+        :on-submit-editing #(re-frame/dispatch [::multiaccounts.recover/enter-phrase-input-submitted])
+        :error             (when passphrase-error (i18n/label passphrase-error))
+        :placeholder       nil
+         ;:height            120
+        :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"}}]]
      [react/view {:align-items :center}
       (when words-count
         [react/view {:flex-direction :row
                      :height         11
                      :align-items    :center}
-         (when-not next-button-disabled?
-           [vector-icons/tiny-icon :tiny-icons/tiny-check])
          [react/text {:style {:font-size    14
-                              :padding-left 4
-                              :font-weight "500"
                               :text-align   :center
-                              :color        colors/black}}
-          (i18n/label-pluralize words-count :t/words-n)]])
+                              :color        colors/gray}}
+          (str (i18n/label  :t/word-count) ":")]
+         [react/text {:style {:font-size          14
+                              :padding-horizontal 4
+                              :font-weight       "500"
+                              :text-align         :center
+                              :color              colors/black}}
+          (i18n/label-pluralize words-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}}
+            [vector-icons/tiny-icon :tiny-icons/tiny-check {:color colors/green}]])])
       (when next-button-disabled?
         [react/text {:style {:color      colors/gray
                              :font-size  14

diff --git a/translations/en.json b/translations/en.json
@@ -1289,6 +1289,7 @@
     "recover-with-keycard": "Recover with Keycard",
     "multiaccounts-recover-enter-phrase-title": "Enter your seed phrase",
     "multiaccounts-recover-enter-phrase-text": "Enter 12, 15, 18, 21 or 24 words.\nSeparate words by a single space.",
+    "word-count": "Word count",
     "words-n": {
         "one": "1 word",
         "other": "{{count}} words"