correct styles for new group chat screen (#253 and #266), better chat screen UI

src/status_im/components/text_field/view.cljs

@@ -145,15 +145,17 @@
                 line-width
                 current-value
                 max-line-width] :as state} (r/state component)
-        {:keys [wrapper-style input-style line-color focus-line-color secure-text-entry
+        {:keys [wrapper-style input-style label-hidden? line-color focus-line-color secure-text-entry
                 label-color error-color error label value on-focus on-blur
                 on-change-text on-change editable] :as props} (merge default-props (r/props component))
         line-color       (if error error-color line-color)
         focus-line-color (if error error-color focus-line-color)
         label-color      (if (and error (not float-label?)) error-color label-color)
-        label            (if error (str label " *") label)]
+        label            (when-not label-hidden?
+                           (if error (str label " *") label))]
     [view (merge st/text-field-container wrapper-style)
-     [animated-text {:style (st/label label-top label-font-size label-color)} label]
+     (when-not label-hidden?
+       [animated-text {:style (st/label label-top label-font-size label-color)} label])
      [text-input {:style             (merge st/text-input input-style)
                   :placeholder       ""
                   :editable          editable

src/status_im/db.cljs

@@ -45,7 +45,6 @@
              :current-tag            nil
              :qr-codes               {}
              :keyboard-height        0
-             :disable-group-creation false
              :animations             {;; todo clear this
                                       :tabs-bar-value (anim/create-value 0)}
              :loading-allowed        true})

src/status_im/new_group/handlers.cljs

@@ -83,29 +83,12 @@
                   :private private-key}
        :callback #(dispatch [:incoming-message %1 %2])})))
 
-(defn enable-create-button
-  [db _]
-  (assoc db :disable-group-creation false))
-
 (register-handler :create-new-group
   (-> prepare-chat
       ((enrich add-chat))
       ((after create-chat!))
       ((after show-chat!))
-      ((after start-listen-group!))
+      ((after start-listen-group!))))
-      ((enrich enable-create-button))))
-
-(defn disable-create-button
-  [db _]
-  (assoc db :disable-group-creation true))
-
-(defn dispatch-create-group
-  [_ [_ group-name]]
-  (dispatch [:create-new-group group-name]))
-
-(register-handler :init-group-creation
-  (after dispatch-create-group)
-  disable-create-button)
 
 (register-handler :group-chat-invite-received
   (u/side-effect!

src/status_im/new_group/screen.cljs

@@ -10,21 +10,20 @@
                                                 touchable-highlight
                                                 list-view
                                                 list-item]]
+            [status-im.components.text-field.view :refer [text-field]]
             [status-im.components.styles :refer [color-purple]]
             [status-im.components.status-bar :refer [status-bar]]
             [status-im.components.toolbar :refer [toolbar]]
             [status-im.utils.listview :refer [to-datasource]]
             [status-im.new-group.views.contact :refer [new-group-contact]]
             [status-im.new-group.styles :as st]
+            [status-im.new-group.validations :as v]
             [status-im.i18n :refer [label]]
-            [status-im.components.styles :as cst]))
+            [cljs.spec :as s]))
-
 
 (defview new-group-toolbar []
-  [group-name [:get :new-chat-name]
+  [new-chat-name [:get :new-chat-name]]
-   creation-disabled? [:get :disable-group-creation]
+  (let [create-btn-enabled? (s/valid? ::v/name new-chat-name)]
-   valid? [:new-chat-name-valid?]]
-  (let [create-btn-enabled? (and valid? (not creation-disabled?))]
     [view
      [status-bar]
      [toolbar
@@ -32,31 +31,39 @@
        :action {:image   {:source res/v                     ;; {:uri "icon_search"}
                           :style  (st/toolbar-icon create-btn-enabled?)}
                 :handler (when create-btn-enabled?
-                           #(dispatch [:init-group-creation group-name]))}}]]))
+                           #(dispatch [:create-new-group new-chat-name]))}}]]))
 
 (defview group-name-input []
-  [group-name [:get :new-chat-name]
+  [new-chat-name [:get :new-chat-name]]
-   validation-messages [:new-chat-name-validation-messages]]
   [view
-   [text-input
+   [text-field
-    {:underlineColorAndroid color-purple
+    {:error          (cond
-     :style                 st/group-name-input
+                       (not (s/valid? ::v/not-empty-string new-chat-name))
-     :autoFocus             true
+                       (label :t/empty-group-chat-name)
-     :placeholder           (label :t/group-name)
+                       (not (s/valid? ::v/not-illegal-name new-chat-name))
-     :onChangeText          #(dispatch [:set :new-chat-name %])}
+                       (label :t/illegal-group-chat-name))
-    group-name]
+     :wrapper-style  st/group-chat-name-wrapper
-   (when (pos? (count validation-messages))
+     :error-color    "#7099e6"
-     [text {:style st/group-name-validation-message} (first validation-messages)])])
+     :line-color     "#0000001f"
+     :label-hidden?  true
+     :input-style    st/group-chat-name-input
+     :auto-focus     true
+     :on-change-text #(dispatch [:set :new-chat-name %])
+     :value          new-chat-name}]])
 
 (defview new-group []
   [contacts [:all-added-contacts]]
   [view st/new-group-container
    [new-group-toolbar]
    [view st/chat-name-container
-    [text {:style st/chat-name-text} (label :t/chat-name)]
+    [text {:style st/members-text
+           :font  :medium}
+     (label :t/group-chat-name)]
     [group-name-input]
-    [text {:style st/members-text} (label :t/members-title)]
+    [text {:style st/members-text
-    [touchable-highlight {:on-press (fn [])}
+           :font  :medium}
+     (label :t/members-title)]
+    #_[touchable-highlight {:on-press (fn [])}
      [view st/add-container
       [icon :add_gray st/add-icon]
       [text {:style st/add-text} (label :t/add-members)]]]

src/status_im/new_group/styles.cljs

@@ -1,6 +1,6 @@
 (ns status-im.new-group.styles
   (:require [status-im.components.styles :refer [color-white
-                                                 color-purple
+                                                 color-blue
                                                  text1-color
                                                  text2-color
                                                  toolbar-background1]]))
@@ -12,54 +12,55 @@
 
 (def new-group-container
   {:flex             1
-   :flexDirection   :column
+   :flex-direction   :column
-   :backgroundColor color-white})
+   :background-color color-white})
 
 (def chat-name-container
-  {:marginHorizontal 16})
+  {:margin-left 16})
 
-(def chat-name-text
+(def group-chat-name-input
-  {:marginTop    24
+  {:font-size  14
-   :marginBottom 16
-   :color        text2-color
-   :fontSize     14
-   :lineHeight   20})
-
-(def group-name-input
-  {:marginLeft -4
-   :fontSize   14
    :color      text1-color})
 
-(def group-name-validation-message
+(def group-chat-name-wrapper
-  {:color :red})
+  {:padding-top 0})
 
 (def members-text
-  {:marginTop    24
+  {:margin-top    24
-   :marginBottom 16
+   :margin-bottom 8
    :color         text2-color
-   :fontSize     14
+   :font-size     14
-   :lineHeight   20})
+   :line-height   20})
 
 (def add-container
-  {:flexDirection :row
+  {:flex-direction :row
-   :marginBottom  16})
+   :margin-bottom  16})
 
 (def add-icon
-  {:marginVertical   19
+  {:margin-vertical   18
-   :marginHorizontal 3
+   :margin-horizontal 3
    :width             17
    :height            17})
 
 (def add-text
-  {:marginTop  18
+  {:margin-top  16
-   :marginLeft 32
+   :margin-left 32
    :color       text2-color
-   :fontSize   14
+   :font-size   14
-   :lineHeight 20})
+   :line-height 20})
 
 (def contacts-list
-  {:backgroundColor :white})
+  {:background-color :white})
 
 (def contact-container
-  {:flexDirection :row
+  {:flex-direction :row
+   :justify-content :center
+   :align-items :center
    :height         56})
+
+(def contact-item-checkbox
+  {:outer-size  20
+   :filter-size 16
+   :inner-size  12
+   :outer-color color-blue
+   :inner-color color-blue})

src/status_im/new_group/validations.cljs

@@ -0,0 +1,18 @@
+(ns status-im.new-group.validations
+  (:require [cljs.spec :as s]
+            [status-im.utils.phone-number :refer [valid-mobile-number?]]
+            [status-im.constants :refer [console-chat-id wallet-chat-id]]
+            [clojure.string :as str]))
+
+(def homoglyph-finder (js/require "homoglyph-finder"))
+
+(defn not-illegal-name? [username]
+  (let [username (some-> username (str/trim))]
+    (and (not (.isMatches homoglyph-finder username console-chat-id))
+         (not (.isMatches homoglyph-finder username wallet-chat-id)))))
+
+(s/def ::not-empty-string (s/and string? not-empty))
+(s/def ::not-illegal-name not-illegal-name?)
+
+(s/def ::name (s/and ::not-empty-string
+                     ::not-illegal-name))

src/status_im/new_group/views/contact.cljs

@@ -14,8 +14,7 @@
 (defview new-group-contact [{:keys [whisper-identity] :as contact}]
   [checked [:is-contact-selected? whisper-identity]]
   [view st/contact-container
-   [item-checkbox
+   [item-checkbox (merge {:on-toggle   (on-toggle whisper-identity)
-    {:onToggle (on-toggle whisper-identity)
+                          :checked     checked}
-     :checked  checked
+                         st/contact-item-checkbox)]
-     :size     30}]
    [contact-inner-view contact]])

src/status_im/translations/en.cljs

@@ -56,7 +56,7 @@
    :email                                 "Email"
    :profile-no-status                     "No status"
    :add-to-contacts                       "Add to contacts"
-   :error-incorrect-name                  "Please, select another name"
+   :error-incorrect-name                  "Please select another name"
    :error-incorrect-email                 "Incorrect e-mail"
 
    ;;make_photo
@@ -139,7 +139,9 @@
    :help-command-description              "Help"
 
    ;new-group
-   :group-name                            "Group Name"
+   :group-chat-name                       "Chat name"
+   :empty-group-chat-name                 "Please enter a name"
+   :illegal-group-chat-name               "Please select another name"
 
    ;participants
    :add-participants                      "Add Participants"