improved new chat UI

src/status_im/ui/screens/add_new/new_chat/views.cljs

@@ -24,25 +24,27 @@
     [react/keyboard-avoiding-view open-dapp.styles/main-container
      [status-bar/status-bar]
      [toolbar.view/simple-toolbar (i18n/label :t/new-chat)]
-     [react/view add-new.styles/input-container
-      [react/text-input {:on-change-text      #(re-frame/dispatch [:set :contacts/new-identity %])
-                         :on-submit-editing   #(when-not error-message
-                                                 (re-frame/dispatch [:add-contact-handler]))
-                         :placeholder         (i18n/label :t/enter-contact-code)
-                         :style               add-new.styles/input
-                         :accessibility-label :enter-contact-code-input
-                         :return-key-type     :go}]
+     [react/view add-new.styles/new-chat-container
+      [react/view add-new.styles/new-chat-input-container
+       [react/text-input {:on-change-text      #(re-frame/dispatch [:set :contacts/new-identity %])
+                          :on-submit-editing   #(when-not error-message
+                                                  (re-frame/dispatch [:add-contact-handler]))
+                          :placeholder         (i18n/label :t/enter-contact-code)
+                          :style               add-new.styles/input
+                          :accessibility-label :enter-contact-code-input
+                          :return-key-type     :go}]]
       [react/touchable-highlight {:on-press            #(re-frame/dispatch [:scan-qr-code
                                                                             {:toolbar-title (i18n/label :t/new-contact)}
                                                                             :set-contact-identity-from-qr])
-                                  :style               {:margin-right 14}
+                                  :style               add-new.styles/button-container
                                   :accessibility-label :scan-contact-code-button}
        [react/view
         [vector-icons/icon :icons/qr {:color colors/blue}]]]]
      [react/text {:style styles/error-message}
       error-message]
-     [react/text {:style open-dapp.styles/list-title}
-      (i18n/label :t/contacts)]
+     (when (seq contacts)
+       [react/text {:style open-dapp.styles/list-title}
+        (i18n/label :t/contacts)])
      [list/flat-list {:data                      contacts
                       :key-fn                    :address
                       :render-fn                 render-row

src/status_im/ui/screens/add_new/new_public_chat/styles.cljs

@@ -42,7 +42,8 @@
    :color     colors/white})
 
 (def input-container
-  {:padding-left     0
+  {:padding          0
+   :padding-right    16
    :background-color nil})
 
 (def tooltip

src/status_im/ui/screens/add_new/styles.cljs

@@ -3,6 +3,10 @@
   (:require [status-im.ui.components.colors :as colors]
             [status-im.ui.components.styles :as styles]))
 
+(def new-chat-container
+  {:flex-direction :row
+   :align-items    :center})
+
 (def input-container
   {:flex-direction    :row
    :align-items       :center
@@ -12,6 +16,23 @@
    :margin-horizontal 14
    :margin-top        24})
 
+(def new-chat-input-container
+  (merge
+   input-container
+   {:flex              1
+    :margin-horizontal 0
+    :margin-left       14}))
+
+(def button-container
+  {:justify-content    :center
+   :border-radius      styles/border-radius
+   :height             52
+   :background-color   colors/gray-lighter
+   :padding-horizontal 15
+   :margin-right       14
+   :margin-left        3
+   :margin-top         24})
+
 (defstyle input
   {:flex               1
    :font-size          15