diff --git a/src/syng_im/components/chat.cljs b/src/syng_im/components/chat.cljs index a9065d4456..f83ad7898f 100644 --- a/src/syng_im/components/chat.cljs +++ b/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 [] diff --git a/src/syng_im/components/chats/chats_list.cljs b/src/syng_im/components/chats/chats_list.cljs index c9331ca66f..0d885d4026 100644 --- a/src/syng_im/components/chats/chats_list.cljs +++ b/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 [] diff --git a/src/syng_im/components/contact_list/contact_list.cljs b/src/syng_im/components/contact_list/contact_list.cljs index d2aeb9b321..91fd1919f4 100644 --- a/src/syng_im/components/contact_list/contact_list.cljs +++ b/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) diff --git a/src/syng_im/components/styles.cljs b/src/syng_im/components/styles.cljs index 1023539554..5f55404a35 100644 --- a/src/syng_im/components/styles.cljs +++ b/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)