validation messages styles

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)))

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))

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])]))

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

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"))

src/status_im/translations/en.cljs

@@ -136,4 +136,6 @@
    ;users
    :add-account                           "Add account"
 
+   ;validation
+   :invalid-phone                         "Invalid phone number"
    })