Merge pull request #37 from status-im/icons_resolution

Fix Icons resolution #25

src/syng_im/components/chat.cljs

@@ -116,8 +116,10 @@
            "Chat name")]
       (if group?
         [view {:style {:flexDirection "row"}}
-         [image {:source res/icon-group
-                 :style  {:marginTop 4}}]
+         [image {:source {:uri "icon_group"}
+                 :style  {:marginTop 4
+                          :width     14
+                          :height    9}}]
          [text {:style {:marginTop  -0.5
                         :marginLeft 4
                         :fontFamily font
@@ -168,7 +170,7 @@
                        :backgroundColor chat-background}}
          (when android?
            ;; TODO add IOS version
-           [toolbar-android {:navIcon       res/icon-back
+           [toolbar-android {:navIcon       {:uri "icon_back"}
                              :style         {:backgroundColor color-white
                                              :height          56
                                              :elevation       2}

src/syng_im/components/chat/chat_message.cljs

@@ -156,7 +156,9 @@
          [image {:source (:icon command)
                  :style {:position "absolute"
                          :top      4
-                         :right    0}}]
+                         :right    0
+                         :width    12
+                         :height   13}}]
          [text {:style {:marginTop        5
                         :marginHorizontal 0
                         :fontSize         14
@@ -200,7 +202,9 @@
            [image {:source (:request-icon command)
                    :style  {:position "absolute"
                             :top      9
-                            :left     10}}]]
+                            :left     10
+                            :width    12
+                            :height   13}}]]
           [text {:style {:marginTop  2
                          :fontFamily font
                          :fontSize   12
@@ -248,11 +252,13 @@
                  :marginTop     2
                  :marginBottom  8}}
    [image {:source (case delivery-status
-                     :delivered res/icon-ok-small
-                     :seen res/icon-ok-small
-                     :seen-by-everyone res/icon-ok-small
-                     :failed res/delivery-failed-icon)
-           :style  {:marginTop 6}}]
+                     :delivered        {:uri "icon_ok_small"}
+                     :seen             {:uri "icon_ok_small"}
+                     :seen-by-everyone {:uri "icon_ok_small"}
+                     :failed           res/delivery-failed-icon)
+           :style  {:marginTop 6
+                    :width     9
+                    :height    7}}]
    [text {:style {:fontFamily font
                   :fontSize   12
                   :color      text2-color

src/syng_im/components/chat/input/simple_command.cljs

@@ -76,7 +76,7 @@
                            :height          36
                            :borderRadius    50
                            :backgroundColor color-blue}}
-             [image {:source res/icon-send
+             [image {:source {:uri "icon_send"}
                      :style  {:marginTop   10.5
                               :marginLeft  12
                               :width       15

src/syng_im/components/chat/plain_message_input.cljs

@@ -40,7 +40,7 @@
          [view {:style {:flexDirection     "row"
                         :height            56
                         :backgroundColor   color-white}}
-          [image {:source res/icon-list
+          [image {:source {:uri "icon_list"}
                   :style  {:marginTop    22
                            :marginRight  6
                            :marginBottom 6
@@ -62,7 +62,7 @@
                        :onSubmitEditing       (fn [e]
                                                 (send @chat input-message))}
            input-message]
-          [image {:source res/icon-smile
+          [image {:source {:uri "icon_smile"}
                   :style  {:marginTop   18
                            :marginRight 18
                            :width       20
@@ -78,7 +78,7 @@
                             :height          36
                             :borderRadius    50
                             :backgroundColor color-blue}}
-              [image {:source res/icon-send
+              [image {:source {:uri "icon_send"}
                       :style  {:marginTop   10.5
                                :marginLeft  12
                                :width       15

src/syng_im/components/chats/chat_list_item_inner.cljs

@@ -71,9 +71,11 @@
                     :fontFamily title-font}} name]
 ;;; group size
      (when group-chat
-       [image {:source res/icon-group
-               :style  {:marginTop 4
-                        :marginLeft 8}}])
+       [image {:source {:uri "icon_group"}
+               :style  {:marginTop  4
+                        :marginLeft 8
+                        :width      14
+                        :height     9}}])
      (when group-chat
        [text {:style {:marginTop  -0.5
                       :marginLeft 4
@@ -100,9 +102,11 @@
                    :right         0}}
      (when delivery-status
        [image {:source (if (= (keyword delivery-status) :seen)
-                         res/icon-ok-small
-                         res/icon-ok-small)
-               :style  {:marginTop 6}}])
+                         {:uri "icon_ok_small"}
+                         {:uri "icon_ok_small"})
+               :style  {:marginTop 6
+                        :width     9
+                        :height    7}}])
 ;;; datetime
      [text {:style {:fontFamily font
                     :fontSize   12

src/syng_im/components/chats/chats_list.cljs

@@ -35,15 +35,15 @@
                        :backgroundColor "white"}}
          (when android?
            ;; TODO add IOS version
-           [toolbar-android {:navIcon       res/icon-hamburger
+           [toolbar-android {:navIcon       {:uri "icon_hamburger"}
                              :style         {:backgroundColor color-white
                                              :height          56
                                              :elevation       2}
                              :onIconClicked (fn []
                                               (nav-pop navigator))
                              :actions [{:title "Search"
-                                        :icon res/icon-search
-                                        :show "always"}]}
+                                        :icon  {:uri "icon_search"}
+                                        :show  "always"}]}
             [view {:style {:flex 1
                            :alignItems "center"
                            :justifyContent "center"

src/syng_im/components/chats/new_group.cljs

@@ -29,7 +29,7 @@
                        :backgroundColor color-white}}
          (when android?
            ;; TODO add IOS version
-           [toolbar-android {:navIcon          res/icon-back
+           [toolbar-android {:navIcon          {:uri "icon_back"}
                              :style            {:backgroundColor color-white
                                                 :height          56
                                                 :elevation       2}
@@ -85,9 +85,11 @@
                                 :underlay-color :transparent}
            [view {:style {:flexDirection "row"
                           :marginBottom  16}}
-            [image {:style {:marginVertical   19
-                            :marginHorizontal 3}
-                    :source res/icon-add-gray}]
+            [image {:source {:uri "icon_add_gray"}
+                    :style  {:marginVertical   19
+                             :marginHorizontal 3
+                             :width            17
+                             :height           17}}]
             [text {:style {:marginTop    18
                            :marginLeft   32
                            :color        text2-color

src/syng_im/models/commands.cljs

@@ -17,8 +17,8 @@
                 :text "!money"
                 :description "Send money"
                 :color color-dark-mint
-                :request-icon res/icon-lock-white
-                :icon res/icon-lock-gray
+                :request-icon {:uri "icon_lock_white"}
+                :icon {:uri "icon_lock_gray"}
                 :suggestion true}
                {:command :location
                 :text "!location"
@@ -35,8 +35,8 @@
                 :description "Send confirmation code"
                 :request-text "Confirmation code request"
                 :color color-blue
-                :request-icon res/icon-lock-white
-                :icon res/icon-lock-gray
+                :request-icon {:uri "icon_lock_white"}
+                :icon {:uri "icon_lock_gray"}
                 :suggestion true}
                {:command :send
                 :text "!send"
@@ -52,8 +52,8 @@
                 :text "!keypairPassword"
                 :description ""
                 :color color-blue
-                :request-icon res/icon-lock-white
-                :icon res/icon-lock-gray
+                :request-icon {:uri "icon_lock_white"}
+                :icon {:uri "icon_lock_gray"}
                 :suggestion false}
                {:command :help
                 :text "!help"

src/syng_im/resources.cljs

@@ -17,19 +17,4 @@
 (def trash-icon (js/require "./images/trash.png"))
 (def leave-icon (js/require "./images/leave.png"))
 
-(def icon-back (js/require "./images/icon_back.png"))
-(def icon-dollar (js/require "./images/icon_dollar.png"))
-(def icon-list (js/require "./images/icon_list.png"))
-(def icon-lock-gray (js/require "./images/icon_lock_gray.png"))
-(def icon-lock-white (js/require "./images/icon_lock_white.png"))
-(def icon-ok-small (js/require "./images/icon_ok_small.png"))
-(def icon-smile (js/require "./images/icon_smile.png"))
-
-(def icon-add (js/require "./images/icon_add.png"))
-(def icon-add-gray (js/require "./images/icon_add_gray.png"))
-(def icon-group (js/require "./images/icon_group.png"))
-(def icon-hamburger (js/require "./images/icon_hamburger.png"))
-(def icon-search (js/require "./images/icon_search.png"))
-(def icon-send (js/require "./images/icon_send.png"))
 (def icon-close-gray (js/require "./images/icon_close_gray.png"))
-(def icon-ok (js/require "./images/icon_ok.png"))