From 4e5838391c21832046894d06f7dcca1939434ba5 Mon Sep 17 00:00:00 2001
From: Roman Volosovskyi <rasom@ukr.net>
Date: Fri, 8 Jul 2016 11:30:42 +0300
Subject: [PATCH] validation messages styles

---
 src/status_im/chat/handlers/commands.cljs     |  7 +++---
 .../chat/styles/command_validation.cljs       | 17 ++++++++++++-
 .../chat/views/command_validation.cljs        | 25 ++++++++++---------
 src/status_im/chat/views/message_input.cljs   |  2 +-
 src/status_im/components/react.cljs           |  6 ++++-
 src/status_im/translations/en.cljs            |  2 ++
 6 files changed, 41 insertions(+), 18 deletions(-)

diff --git a/src/status_im/chat/handlers/commands.cljs b/src/status_im/chat/handlers/commands.cljs
index 64f5128a9e..5c0caf390f 100644
--- a/src/status_im/chat/handlers/commands.cljs
+++ b/src/status_im/chat/handlers/commands.cljs
@@ -5,7 +5,8 @@
             [status-im.models.commands :as commands]
             [clojure.string :as str]
             [status-im.commands.utils :as cu]
-            [status-im.utils.phone-number :as pn]))
+            [status-im.utils.phone-number :as pn]
+            [status-im.i18n :as i18n]))
 
 (def command-prefix "c ")
 
@@ -168,8 +169,8 @@
               (dispatch [::finish-command-staging chat-id])
               (dispatch [::set-validation-error
                          chat-id
-                         {:title       "Phobe number"
-                          :description "Wrong phone number"}])))})
+                         {:title       (i18n/label :t/phone-number)
+                          :description (i18n/label :t/invalid-phone)}])))})
 
 (defn validator [name]
   (validation-handlers (keyword name)))
diff --git a/src/status_im/chat/styles/command_validation.cljs b/src/status_im/chat/styles/command_validation.cljs
index b38e8cc820..fc4f75b999 100644
--- a/src/status_im/chat/styles/command_validation.cljs
+++ b/src/status_im/chat/styles/command_validation.cljs
@@ -1 +1,16 @@
-(ns status-im.chat.styles.command-validation)
+(ns status-im.chat.styles.command-validation
+  (:require [status-im.components.styles :as st]))
+
+(def messages-container
+  {:background-color :red
+   :height           61
+   :padding-left     16
+   :padding-top      14})
+
+(def title
+  {:color       :white
+   :font-size   12
+   :font-family st/font})
+
+(def description
+  (assoc title :opacity 0.69))
diff --git a/src/status_im/chat/views/command_validation.cljs b/src/status_im/chat/views/command_validation.cljs
index 4294e61ce2..1c36b91ceb 100644
--- a/src/status_im/chat/views/command_validation.cljs
+++ b/src/status_im/chat/views/command_validation.cljs
@@ -4,27 +4,28 @@
             [status-im.chat.styles.command-validation :as st]
             [status-im.utils.listview :as lw]))
 
-(defn error [{:keys [title description]}]
+(defn message [{:keys [title description]}]
   (c/list-item
     [c/view
-     [c/text title]
-     [c/text description]]))
+     [c/text st/title title]
+     [c/text st/description description]]))
 
-(defn errors-list [errors]
-  [c/list-view {:renderRow                 error
+(defn messages-list [errors]
+  [c/list-view {:renderRow                 message
                 :keyboardShouldPersistTaps true
-                :dataSource                (lw/to-datasource errors)}])
+                :dataSource                (lw/to-datasource errors)
+                :style                     st/messages-container}])
 
-(defview errors []
-  [errors [:validation-errors]
+(defview validation-messages []
+  [validation-messages [:validation-errors]
    custom-errors [:custom-validation-errors]
    command? [:command?]]
   (when (and command?
-             (or (seq errors)
+             (or (seq validation-messages)
                  (seq custom-errors)))
-    [c/scroll-view {:background-color :red}
+    [c/scroll-view
      (cond (seq custom-errors)
            (vec (concat [c/view] custom-errors))
 
-           (seq errors)
-           [errors-list errors])]))
+           (seq validation-messages)
+           [messages-list validation-messages])]))
diff --git a/src/status_im/chat/views/message_input.cljs b/src/status_im/chat/views/message_input.cljs
index e45349b28f..87f08c5ad2 100644
--- a/src/status_im/chat/views/message_input.cljs
+++ b/src/status_im/chat/views/message_input.cljs
@@ -56,7 +56,7 @@
    input-command [:get-chat-command-content]
    valid-plain-message? [:valid-plain-message?]]
   [view st/input-container
-   [cv/errors]
+   [cv/validation-messages]
    [view st/input-view
     [plain-message/commands-button]
     [message-input-container
diff --git a/src/status_im/components/react.cljs b/src/status_im/components/react.cljs
index f180f463c2..ff9f87ef6a 100644
--- a/src/status_im/components/react.cljs
+++ b/src/status_im/components/react.cljs
@@ -17,7 +17,11 @@
 
 (def app-registry (get-react-property "AppRegistry"))
 (def navigator (get-class "Navigator"))
-(def text (get-class "Text"))
+(def text-class (get-class "Text"))
+(defn text
+  ([s] [text-class s])
+  ([{:keys [style] :as opts} s]
+   [text-class (if style opts {:style opts}) s]))
 (def view (get-class "View"))
 (def image (get-class "Image"))
 (def touchable-highlight-class (get-class "TouchableHighlight"))
diff --git a/src/status_im/translations/en.cljs b/src/status_im/translations/en.cljs
index c667275426..e86d4fbc9b 100644
--- a/src/status_im/translations/en.cljs
+++ b/src/status_im/translations/en.cljs
@@ -136,4 +136,6 @@
    ;users
    :add-account                           "Add account"
 
+   ;validation
+   :invalid-phone                         "Invalid phone number"
    })