Merge pull request #396 from status-im/feature/#391

Wallet & Requests icons

Former-commit-id: d9de8a8154

ios/StatusIm/Images.xcassets/icon_location.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "icon_location.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "icon_location-1.png",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "icon_location-2.png",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

ios/StatusIm/Images.xcassets/icon_money_white.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "icon_money_white.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "icon_money_white-1.png",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "icon_money_white-2.png",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

ios/StatusIm/Images.xcassets/icon_phone_white.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "icon_phone_white.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "icon_phone_white-1.png",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "icon_phone_white-2.png",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

ios/StatusIm/Images.xcassets/icon_wallet_avatar.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "wallet_avatar.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "wallet_avatar-1.png",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "wallet_avatar-2.png",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

resources/commands.js

@@ -1,7 +1,8 @@
 status.command({
     name: "location",
+    icon: "location",
     description: "Send location",
-    color: "#9a5dcf",
+    color: "#a187d5",
     preview: function (params) {
         var text = status.components.text(
             {
@@ -118,6 +119,7 @@ function sendTransaction(params, context) {
 
 status.command({
     name: "send",
+    icon: "money_white",
     color: "#5fc48d",
     description: "Send transaction",
     params: [{

resources/console.js

@@ -99,8 +99,9 @@ function phoneSuggestions(params) {
 
 var phoneConfig = {
     name: "phone",
+    icon: "phone_white",
     description: "Send phone number",
-    color: "#5fc48d",
+    color: "#5bb2a2",
     params: [{
         name: "phone",
         type: status.types.PHONE,

src/status_im/chat/handlers/wallet_chat.cljs

@@ -7,7 +7,8 @@
 (def dapp-contact
   {:whisper-identity wallet-chat-id
    :name             (s/capitalize wallet-chat-id)
-   :dapp?            true})
+   :dapp?            true
+   :photo-path       :icon_wallet_avatar})
 
 
 (register-handler :init-wallet-chat

src/status_im/components/chat_icon/screen.cljs

@@ -16,9 +16,13 @@
    [text {:style (:default-chat-icon-text styles)}
     (first name)]])
 
-(defn chat-icon [photo-path styles]
-  [image {:source {:uri photo-path}
-          :style  (:chat-icon styles)}])
+(defn chat-icon [photo-path {:keys [size border]}]
+  [view
+   (merge st/default-border-style
+          border
+          (st/border-style size))
+   [image {:source {:uri photo-path}
+           :style  (st/image-style size)}]])
 
 (defn dapp-badge [styles]
   [view st/online-view-wrapper
@@ -54,6 +58,7 @@
     :online-view            st/online-view
     :online-dot-left        st/online-dot-left
     :online-dot-right       st/online-dot-right
+    :size                   40
     :chat-icon              st/chat-icon-chat-list
     :default-chat-icon      (st/default-chat-icon-chat-list color)
     :default-chat-icon-text st/default-chat-icon-text}])
@@ -64,6 +69,7 @@
     :online-view            st/online-view
     :online-dot-left        st/online-dot-left
     :online-dot-right       st/online-dot-right
+    :size                   36
     :chat-icon              st/chat-icon-view-action
     :default-chat-icon      (st/default-chat-icon-view-action color)
     :default-chat-icon-text st/default-chat-icon-text}])
@@ -74,6 +80,7 @@
     :online-view            st/online-view-menu-item
     :online-dot-left        st/online-dot-left-menu-item
     :online-dot-right       st/online-dot-right-menu-item
+    :size                   24
     :chat-icon              st/chat-icon-menu-item
     :default-chat-icon      (st/default-chat-icon-menu-item color)
     :default-chat-icon-text st/default-chat-icon-text}])
@@ -84,6 +91,8 @@
     :online-view            st/online-view
     :online-dot-left        st/online-dot-left
     :online-dot-right       st/online-dot-right
+    :size                   64
+    :border                 {}
     :chat-icon              st/chat-icon-message-status
     :default-chat-icon      (st/default-chat-icon-message-status color)
     :default-chat-icon-text st/message-status-icon-text}])
@@ -104,6 +113,7 @@
     :online-view            st/online-view
     :online-dot-left        st/online-dot-left
     :online-dot-right       st/online-dot-right
+    :size                   40
     :chat-icon              st/chat-icon-chat-list
     :default-chat-icon      (st/default-chat-icon-chat-list default-chat-color)
     :default-chat-icon-text st/default-chat-icon-text}])
@@ -113,6 +123,7 @@
                 :online-view            st/online-view-profile
                 :online-dot-left        st/online-dot-left-profile
                 :online-dot-right       st/online-dot-right-profile
+                :size                   64
                 :chat-icon              st/chat-icon-profile
                 :default-chat-icon      (st/default-chat-icon-profile color)
                 :default-chat-icon-text st/default-chat-icon-text}]
@@ -125,8 +136,8 @@
 (defview profile-icon []
   [contact [:contact]]
   (let [;; TODO: stub
-        type    :online
-        color   default-chat-color]
+        type  :online
+        color default-chat-color]
     [profile-icon-view (:photo-path @contact) (:name @contact) color type]))
 
 (defn my-profile-icon [{{:keys [photo-path name]} :account

src/status_im/components/chat_icon/styles.cljs

@@ -48,9 +48,9 @@
    :lineHeight 20})
 
 (def message-status-icon-text
-  {:marginTop  -2
-   :color      color-white
-   :fontSize   24})
+  {:marginTop -2
+   :color     color-white
+   :fontSize  24})
 
 (def chat-icon
   {:margin        4
@@ -61,13 +61,13 @@
 (def chat-icon-chat-list
   (merge chat-icon
          {:width  40
-          :height 40}))
+          :height 40
+          :margin 0}))
 
 (def chat-icon-menu-item
-  (merge chat-icon
-         {:width         24
-          :height        24
-          :border-radius 12}))
+  {:width         24
+   :height        24
+   :border-radius 12})
 
 (def chat-icon-profile
   (merge chat-icon
@@ -79,7 +79,8 @@
   (merge chat-icon
          {:width         36
           :height        36
-          :border-radius 18}))
+          :border-radius 18
+          :margin        0}))
 
 (def chat-icon-message-status
   {:border-radius 32
@@ -171,3 +172,19 @@
 
 (def container-message-status
   {:margin-top 20})
+
+(def default-border-style
+  {:margin 4})
+
+(defn border-style [size]
+  {:width            size
+   :height           size
+   :border-radius    (/ size 2)
+   :background-color :#b9c8d6
+   :padding          0.5})
+
+(defn image-style [size]
+  (let [image-size (dec size)]
+    {:width         image-size
+     :height        image-size
+     :border-radius (/ image-size 2)}))

src/status_im/components/drawer/view.cljs

@@ -19,7 +19,8 @@
             [status-im.i18n :refer [label]]
             [status-im.components.react :refer [dismiss-keyboard!]]
             [clojure.string :as str]
-            [cljs.spec :as s]))
+            [cljs.spec :as s]
+            [status-im.components.chat-icon.screen :as ci]))
 
 (defonce drawer-atom (atom))
 
@@ -29,12 +30,6 @@
 (defn close-drawer []
   (.closeDrawer @drawer-atom))
 
-(defn user-photo [{:keys [photo-path]}]
-  [image {:source (if (str/blank? photo-path)
-                    res/user-no-photo
-                    {:uri photo-path})
-          :style  st/user-photo}])
-
 (defn menu-item [{:keys [name handler]}]
   [touchable-opacity {:style   st/menu-item-touchable
                       :onPress (fn []
@@ -58,7 +53,7 @@
           [view st/drawer-menu
            [touchable-opacity {:on-press #(dispatch [:navigate-to :my-profile])}
             [view st/user-photo-container
-             [user-photo {:photo-path photo-path}]]]
+             [ci/chat-icon photo-path {:size 64}]]]
            [view st/name-container
             [text-field
              {:line-color       :white

src/status_im/discovery/views/discovery_list_item.cljs

@@ -6,7 +6,8 @@
             [status-im.discovery.styles :as st]
             [status-im.utils.gfycat.core :refer [generate-gfy]]
             [status-im.utils.identicon :refer [identicon]]
-            [status-im.i18n :refer [label]]))
+            [status-im.i18n :refer [label]]
+            [status-im.components.chat-icon.screen :as ci]))
 
 (defview discovery-list-item [{:keys [name photo-path status whisper-id]}]
   [{contact-name       :name
@@ -25,8 +26,8 @@
            :number-of-lines 2}
      status]]
    [view st/popular-list-item-avatar-container
-    [image {:style  st/popular-list-item-avatar
-            :source {:uri (cond
-                            (not (str/blank? contact-photo-path)) contact-photo-path
-                            (not (str/blank? photo-path)) photo-path
-                            :else (identicon whisper-id))}}]]])
+    [ci/chat-icon (cond
+                    (not (str/blank? contact-photo-path)) contact-photo-path
+                    (not (str/blank? photo-path)) photo-path
+                    :else (identicon whisper-id))
+     {:size 36}]]])