Default user icon in contacts view

Former-commit-id: 5c3009ca03

src/status_im/components/chat_icon/screen.cljs

@@ -6,7 +6,7 @@
                                                 image
                                                 icon]]
             [status-im.components.chat-icon.styles :as st]
-            [status-im.components.styles :refer [color-purple]]
+            [status-im.components.styles :refer [default-chat-color]]
             [clojure.string :as s]))
 
 (defn default-chat-icon [name styles]
@@ -63,6 +63,27 @@
     :default-chat-icon      (st/default-chat-icon-menu-item color)
     :default-chat-icon-text st/default-chat-icon-text}])
 
+(defview contact-icon-view [identity styles]
+  [contact [:contact-by-identity identity]]
+  (let [photo-path (:photo-path contact)
+        ;; TODO stub data
+        online true]
+    [view (:container styles)
+     (if-not (s/blank? photo-path)
+       [chat-icon photo-path styles]
+       [default-chat-icon (:name contact) styles])
+     [contact-online online styles]]))
+
+(defn contact-icon-contacts-tab [identity]
+  [contact-icon-view identity
+   {:container              st/container-chat-list
+    :online-view            st/online-view
+    :online-dot-left        st/online-dot-left
+    :online-dot-right       st/online-dot-right
+    :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}])
+
 (defn profile-icon-view [photo-path name color online]
   (let [styles {:container              st/container-profile
                 :online-view            st/online-view-profile
@@ -81,7 +102,7 @@
   [contact [:contact]]
   (let [;; TODO stub data
         online true
-        color  color-purple]
+        color  default-chat-color]
     [profile-icon-view (:photo-path contact) (:name contact) color online]))
 
 (defview my-profile-icon []
@@ -89,5 +110,5 @@
    photo-path [:get :photo-path]]
   (let [;; TODO stub data
         online true
-        color  color-purple]
+        color  default-chat-color]
     [profile-icon-view photo-path name color online]))

src/status_im/contacts/styles.cljs

@@ -16,7 +16,8 @@
   {:backgroundColor :white})
 
 (def contact-photo-container
-  {:borderRadius 50})
+  {:marginTop  4
+   :marginLeft 12})
 
 (def photo-image
   {:borderRadius 50
@@ -34,20 +35,6 @@
    :borderWidth     2
    :borderColor     color-white})
 
-(def online-dot
-  {:position        :absolute
-   :top             6
-   :width           4
-   :height          4
-   :borderRadius    50
-   :backgroundColor color-white})
-
-(def online-dot-left
-  (assoc online-dot :left 3))
-
-(def online-dot-right
-  (assoc online-dot :left 9))
-
 (def contact-container
   {:flexDirection :row
    :height        56})
@@ -59,11 +46,11 @@
    :height     44})
 
 (def name-container
-  {:justifyContent :center})
+  {:marginLeft 12
+   :justifyContent :center})
 
 (def name-text
-  {:marginLeft 16
-   :fontSize   16
+  {:fontSize   16
    :fontFamily font
    :color      text1-color})
 

src/status_im/contacts/subs.cljs

@@ -33,6 +33,10 @@
     (let [identity (:contact-identity @db)]
       (reaction (get-in @db [:contacts identity])))))
 
+(register-sub :contact-by-identity
+  (fn [db [_ identity]]
+    (reaction (get-in @db [:contacts identity]))))
+
 (register-sub :all-new-contacts
   (fn [db _]
     (contacts-by-current-chat remove db)))

src/status_im/contacts/views/contact_inner.cljs

@@ -1,28 +1,17 @@
 (ns status-im.contacts.views.contact-inner
   (:require [clojure.string :as s]
             [status-im.components.react :refer [view image text]]
-            [status-im.resources :as res]
+            [status-im.components.chat-icon.screen :refer [contact-icon-contacts-tab]]
             [status-im.contacts.styles :as st]
             [status-im.i18n :refer [label]]))
 
-(defn contact-photo [{:keys [photo-path]}]
+(defn contact-photo [{:keys [whisper-identity]}]
   [view st/contact-photo-container
-   [image {:source (if (s/blank? photo-path)
-                     res/user-no-photo
-                     {:uri photo-path})
-           :style  st/photo-image}]])
+   [contact-icon-contacts-tab whisper-identity]])
 
-(defn contact-online [{:keys [online]}]
-  (when online
-    [view st/online-container
-     [view st/online-dot-left]
-     [view st/online-dot-right]]))
-
-(defn contact-inner-view [{:keys [name photo-path online]}]
+(defn contact-inner-view [{:keys [name] :as contact}]
   [view st/contact-container
-   [view st/photo-container
-    [contact-photo {:photo-path photo-path}]
-    [contact-online {:online online}]]
+   [contact-photo contact]
    [view st/name-container
     [text {:style st/name-text}
      (if (pos? (count name))