Toolbar for contacts view

src/syng_im/components/chat.cljs

@@ -17,7 +17,8 @@
                                                selected-message-color
                                                separator-color
                                                text1-color
-                                               text2-color]]
+                                               text2-color
+                                               toolbar-background1]]
             [syng-im.utils.logging :as log]
             [syng-im.navigation :refer [nav-pop]]
             [syng-im.resources :as res]
@@ -153,7 +154,7 @@
                          :icon-style {:width  20
                                       :height 13}
                          :handler    (fn [] )}])]
-    [view {:style {:backgroundColor color-white
+    [view {:style {:backgroundColor toolbar-background1
                    :elevation       2
                    :position        "absolute"
                    :top             56
@@ -186,7 +187,7 @@
 (defn toolbar [navigator chat show-actions]
   [view {:style {:flexDirection   "row"
                  :height          56
-                 :backgroundColor color-white
+                 :backgroundColor toolbar-background1
                  :elevation       2}}
    (when (not show-actions)
      [touchable-highlight {:on-press (fn []

src/syng_im/components/chats/chats_list.cljs

@@ -21,12 +21,13 @@
                                                color-black
                                                color-blue
                                                text1-color
-                                               text2-color]]
+                                               text2-color
+                                               toolbar-background1]]
             [syng-im.components.icons.ionicons :refer [icon]]))
 
 (defn toolbar []
   [view {:style {:flexDirection   "row"
-                 :backgroundColor color-white
+                 :backgroundColor toolbar-background1
                  :height          56
                  :elevation       2}}
    [touchable-highlight {:on-press (fn []

src/syng_im/components/contact_list/contact_list.cljs

@@ -4,9 +4,18 @@
    [natal-shell.core :refer [with-error-view]])
   (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
             [syng-im.components.react :refer [view text image touchable-highlight
-                                              navigator list-view toolbar-android
+                                              navigator list-view
                                               list-item]]
             [syng-im.components.contact-list.contact :refer [contact-view]]
+            [syng-im.components.styles :refer [font
+                                               title-font
+                                               color-white
+                                               color-black
+                                               color-blue
+                                               text1-color
+                                               text2-color
+                                               toolbar-background2]]
+            [syng-im.navigation :refer [nav-pop]]
             [syng-im.resources :as res]
             [syng-im.utils.logging :as log]))
 
@@ -19,18 +28,46 @@
                                                   (not= row1 row2))})
                    contacts))
 
+(defn toolbar [navigator]
+  [view {:style {:flexDirection   "row"
+                 :backgroundColor toolbar-background2
+                 :height          56
+                 :elevation       2}}
+   [touchable-highlight {:on-press (fn []
+                                     (nav-pop navigator))
+                         :underlay-color :transparent}
+    [view {:width  56
+           :height 56}
+     [image {:source {:uri "icon_back"}
+             :style  {:marginTop  21
+                      :marginLeft 23
+                      :width      8
+                      :height     14}}]]]
+   [view {:style {:flex 1
+                  :alignItems "center"
+                  :justifyContent "center"}}
+    [text {:style {:marginTop  -2.5
+                   :color      text1-color
+                   :fontSize   16
+                   :fontFamily font}}
+     "Contacts"]]
+   [touchable-highlight {:on-press (fn []
+                                     )
+                         :underlay-color :transparent}
+    [view {:width  56
+           :height 56}
+     [image {:source {:uri "icon_search"}
+             :style  {:margin 19.5
+                      :width  17
+                      :height 17}}]]]])
+
 (defn contact-list [{:keys [navigator]}]
   (let [contacts (subscribe [:get-contacts])]
     (fn []
       (let [contacts-ds (get-data-source @contacts)]
         [view {:style {:flex            1
                        :backgroundColor "white"}}
-         [toolbar-android {:logo       res/logo-icon
-                           :title      "Contacts"
-                           :titleColor "#4A5258"
-                           :style      {:backgroundColor "white"
-                                        :height          56
-                                        :elevation       2}}]
+         [toolbar navigator]
          (when contacts-ds
            [list-view {:dataSource contacts-ds
                        :renderRow  (partial render-row navigator)

src/syng_im/components/styles.cljs

@@ -12,11 +12,14 @@
 (def color-light-blue "#bbc4cb")
 (def color-light-blue-transparent "#bbc4cb32")
 (def color-dark-mint "#5fc48d")
+(def color-light-gray "#EEF2F5")
 
 (def text1-color color-black)
 (def text2-color color-gray)
 (def online-color color-blue)
 (def new-messages-count-color "#7099e632")
-(def chat-background "#EBF0F4")
+(def chat-background color-light-gray)
 (def selected-message-color "#E4E9ED")
 (def separator-color "#0000001f")
+(def toolbar-background1 color-white)
+(def toolbar-background2 color-light-gray)