chats-list screen styles

src/syng_im/chats_list/screen.cljs

@@ -22,17 +22,17 @@
                                                text1-color
                                                text2-color]]
             [syng-im.components.toolbar :refer [toolbar]]
-            [syng-im.components.icons.ionicons :refer [icon]]))
+            [syng-im.components.icons.ionicons :refer [icon]]
+            [syng-im.chats-list.styles :as st]))
+
 
 (defn chats-list-toolbar []
-  [toolbar {:nav-action {:image   {:source {:uri "icon_hamburger"}
-                                   :style  {:width  16
-                                            :height 12}}
+  [toolbar {:nav-action {:image   {:source {:uri :icon_hamburger}
+                                   :style st/hamburger-icon }
                          :handler (fn [])}
             :title      "Chats"
-            :action     {:image   {:source {:uri "icon_search"}
-                                   :style  {:width  17
-                                            :height 17}}
+            :action     {:image   {:source {:uri :icon_search}
+                                   :style  st/search-icon}
                          :handler (fn [])}}])
 
 (defn chats-list []
@@ -40,27 +40,22 @@
     (fn []
       (let [chats      @chats
             datasource (to-realm-datasource chats)]
-        [view {:flex            1
-               :backgroundColor :white}
+        [view st/chats-container
          [chats-list-toolbar]
          [list-view {:dataSource datasource
                      :renderRow  (fn [row _ _]
                                    (r/as-element [chat-list-item row]))
-                     :style      {:backgroundColor :white}}]
+                     :style     st/list-container}]
          [action-button {:buttonColor color-blue}
           [action-button-item
            {:title       "New Chat"
             :buttonColor :#9b59b6
             :onPress     #(dispatch [:navigate-to :contact-list])}
            [icon {:name  :android-create
-                  :style {:fontSize 20
-                          :height   22
-                          :color    :white}}]]
+                  :style st/create-icon}]]
           [action-button-item
            {:title       "New Group Chat"
             :buttonColor :#1abc9c
             :onPress     #(dispatch [:show-group-new])}
            [icon {:name  :person-stalker
-                  :style {:fontSize 20
-                          :height   22
-                          :color    :white}}]]]]))))
+                  :style st/person-stalker-icon}]]]]))))

src/syng_im/chats_list/styles.cljs

@@ -120,3 +120,28 @@
    :fontSize   10
    :color      color-blue
    :textAlign  :center})
+
+(def hamburger-icon
+  {:width  16
+   :height 12})
+
+(def search-icon
+  {:width  17
+   :height 17})
+
+(def chats-container
+  {:flex            1
+   :backgroundColor :white})
+
+(def list-container
+  {:backgroundColor :white})
+
+(def create-icon
+  {:fontSize 20
+   :height   22
+   :color    :white})
+
+(def person-stalker-icon
+  {:fontSize 20
+   :height   22
+   :color    :white})