Group chat initial message (#364)

src/status_im/chat/styles/message.cljs

@@ -261,52 +261,6 @@
    :textAlign  :center
    :color      text2-color})
 
-(def online-container
-  {:position        :absolute
-   :top             44
-   :left            44
-   :width           24
-   :height          24
-   :borderRadius    12
-   :backgroundColor online-color
-   :borderWidth     2
-   :borderColor     color-white})
-
-(def online-dot
-  {:position        :absolute
-   :top             8
-   :width           4
-   :height          4
-   :borderRadius    2
-   :backgroundColor color-white})
-
-(def online-dot-left
-  (assoc online-dot :left 5))
-
-(def online-dot-right
-  (assoc online-dot :left 11))
-
-(def contact-photo-container
-  {:borderRadius 32})
-
-(def contact-photo
-  {:border-radius 32
-   :width         64
-   :height        64})
-
-(def message-date-container
-  {:backgroundColor   color-light-blue-transparent
-   :height            24
-   :borderRadius      12
-   :alignSelf         :center
-   :marginTop         20
-   :marginBottom      20
-   :paddingTop        5
-   :paddingHorizontal 12})
-
-(def message-date-text
-  (assoc style-sub-text :textAlign :center))
-
 (defn message-container [height]
   {:height height})
 

src/status_im/chat/views/message.cljs

@@ -24,22 +24,15 @@
                                          content-type-status
                                          content-type-command
                                          content-type-command-request]]
+            [status-im.components.chat-icon.screen :refer [chat-icon-message-status]]
             [status-im.utils.identicon :refer [identicon]]
             [status-im.utils.gfycat.core :refer [generate-gfy]]
             [status-im.i18n :refer [label]]
             [status-im.chat.utils :as cu]
             [clojure.string :as str]))
 
-(defn contact-photo [photo-path]
+(defn message-content-status [_]
-  [view st/contact-photo-container
+  (let [{:keys [chat-id group-chat name color]} (subscribe [:chat-properties [:chat-id :group-chat :name :color]])
-   [image {:source (if (s/blank? photo-path)
-                     res/user-no-photo
-                     {:uri photo-path})
-           :style  st/contact-photo}]])
-
-(defn message-content-status [{:keys [from]}]
-  (let [chat-photo-path (subscribe [:chat-photo from])
-        {:keys [group-chat name]} (subscribe [:chat-properties [:group-chat :name]])
         members (subscribe [:current-chat-contacts])]
     (fn [{:keys [messages-count content datemark]}]
       (let [{:keys [photo-path
@@ -48,12 +41,9 @@
                                     {:photo-path  nil
                                      :status      nil
                                      :last-online 0}
-                                    (first @members))
+                                    (first @members))]
-            online? (-> (- (time/now-ms) last-online)
-                        (< (* 60 1000)))]
         [view st/status-container
-         [view st/status-image-view
+         [chat-icon-message-status @chat-id @group-chat @name @color false]
-          [contact-photo (or photo-path @chat-photo-path)]]
          [text {:style           st/status-from
                 :font            :default
                 :number-of-lines 1}

src/status_im/components/chat_icon/screen.cljs

@@ -78,6 +78,16 @@
     :default-chat-icon      (st/default-chat-icon-menu-item color)
     :default-chat-icon-text st/default-chat-icon-text}])
 
+(defn chat-icon-message-status [chat-id group-chat name color online]
+  [chat-icon-view chat-id group-chat name online
+   {:container              st/container-message-status
+    :online-view            st/online-view
+    :online-dot-left        st/online-dot-left
+    :online-dot-right       st/online-dot-right
+    :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}])
+
 (defn contact-icon-view [contact styles]
   (let [photo-path (:photo-path contact)
         ;; TODO: stub

src/status_im/components/chat_icon/styles.cljs

@@ -35,12 +35,23 @@
           :height        36
           :border-radius 18}))
 
+(defn default-chat-icon-message-status [color]
+  (merge (default-chat-icon color)
+         {:width         64
+          :height        64
+          :border-radius 32}))
+
 (def default-chat-icon-text
   {:marginTop  -2
    :color      color-white
    :fontSize   16
    :lineHeight 20})
 
+(def message-status-icon-text
+  {:marginTop  -2
+   :color      color-white
+   :fontSize   24})
+
 (def chat-icon
   {:margin        4
    :border-radius 20
@@ -70,6 +81,11 @@
           :height        36
           :border-radius 18}))
 
+(def chat-icon-message-status
+  {:border-radius 32
+   :width         64
+   :height        64})
+
 (def online-view-wrapper
   {:position         :absolute
    :bottom           -1
@@ -152,3 +168,6 @@
 (def container-profile
   {:width  72
    :height 72})
+
+(def container-message-status
+  {:margin-top 20})