Merge pull request #306 from status-im/bug/console-cosmetic

Console chat cosmetic changes. Fixes #281, #284, #285, #287

Former-commit-id: 09e711eef6

ios/StatusIm.xcodeproj/project.pbxproj

@@ -44,6 +44,9 @@
 		82E689BAF9FB43C8AC6FF1CA /* EvilIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = CEB0E2659D1A4F5FA842057A /* EvilIcons.ttf */; };
 		832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832341B51AAA6A8300B99B32 /* libRCTText.a */; };
 		9E3AB6D01D87DB2B008846B4 /* libReact-Native-Webview-Bridge.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 9E3AB6C61D87DA2B008846B4 /* libReact-Native-Webview-Bridge.a */; };
+		9ED2F45E1D9D535A00B36508 /* SF-UI-Text-Regular.otf in Resources */ = {isa = PBXBuildFile; fileRef = 9ED2F45D1D9D52DD00B36508 /* SF-UI-Text-Regular.otf */; };
+		9ED2F45F1D9D535A00B36508 /* SF-UI-Text-Medium.otf in Resources */ = {isa = PBXBuildFile; fileRef = 9ED2F45C1D9D52C100B36508 /* SF-UI-Text-Medium.otf */; };
+		9ED2F4611D9D579900B36508 /* SF-UI-Text-Bold.otf in Resources */ = {isa = PBXBuildFile; fileRef = 9ED2F4601D9D577B00B36508 /* SF-UI-Text-Bold.otf */; };
 		A39C8FE8BF9E45CF896017A7 /* libRCTCamera.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 0A50F58D6FC94DE696FC3EB5 /* libRCTCamera.a */; };
 		A6AF670051B842249D520C7B /* Foundation.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 7ED174A34D7D42358313368B /* Foundation.ttf */; };
 		AD5063BC2B2A4C52ACE0A0B4 /* libUdpSockets.a in Frameworks */ = {isa = PBXBuildFile; fileRef = A96279092BEC4C4B93914F48 /* libUdpSockets.a */; };
@@ -324,6 +327,9 @@
 		8AE71EE8751F4652B13BFE83 /* RNVectorIcons.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = RNVectorIcons.xcodeproj; path = "../node_modules/react-native-vector-icons/RNVectorIcons.xcodeproj"; sourceTree = "<group>"; };
 		8B9A886A2CB448B1ABA0EB62 /* libc++.tbd */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "sourcecode.text-based-dylib-definition"; name = "libc++.tbd"; path = "usr/lib/libc++.tbd"; sourceTree = SDKROOT; };
 		9E3AB6B21D87DA2A008846B4 /* React-Native-Webview-Bridge.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = "React-Native-Webview-Bridge.xcodeproj"; path = "../node_modules/react-native-webview-bridge/ios/React-Native-Webview-Bridge.xcodeproj"; sourceTree = "<group>"; };
+		9ED2F45C1D9D52C100B36508 /* SF-UI-Text-Medium.otf */ = {isa = PBXFileReference; lastKnownFileType = file; path = "SF-UI-Text-Medium.otf"; sourceTree = "<group>"; };
+		9ED2F45D1D9D52DD00B36508 /* SF-UI-Text-Regular.otf */ = {isa = PBXFileReference; lastKnownFileType = file; path = "SF-UI-Text-Regular.otf"; sourceTree = "<group>"; };
+		9ED2F4601D9D577B00B36508 /* SF-UI-Text-Bold.otf */ = {isa = PBXFileReference; lastKnownFileType = file; path = "SF-UI-Text-Bold.otf"; sourceTree = "<group>"; };
 		9F1854E6D9654226B1FC8308 /* RCTCamera.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = RCTCamera.xcodeproj; path = "../node_modules/react-native-camera/ios/RCTCamera.xcodeproj"; sourceTree = "<group>"; };
 		A96279092BEC4C4B93914F48 /* libUdpSockets.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libUdpSockets.a; sourceTree = "<group>"; };
 		B3B19223008342D096AA356E /* Octicons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = Octicons.ttf; path = "../node_modules/react-native-vector-icons/Fonts/Octicons.ttf"; sourceTree = "<group>"; };
@@ -521,6 +527,9 @@
 		2028E0111D4275BD00227DCD /* SF */ = {
 			isa = PBXGroup;
 			children = (
+				9ED2F4601D9D577B00B36508 /* SF-UI-Text-Bold.otf */,
+				9ED2F45D1D9D52DD00B36508 /* SF-UI-Text-Regular.otf */,
+				9ED2F45C1D9D52C100B36508 /* SF-UI-Text-Medium.otf */,
 				2028DFF51D4275B600227DCD /* SF-UI-Display-Medium.otf */,
 				2028DFF61D4275B600227DCD /* SF-UI-Display-Regular.otf */,
 				2028DFF71D4275B600227DCD /* SF-UI-Display-Semibold.otf */,
@@ -1087,6 +1096,9 @@
 			isa = PBXResourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				9ED2F4611D9D579900B36508 /* SF-UI-Text-Bold.otf in Resources */,
+				9ED2F45E1D9D535A00B36508 /* SF-UI-Text-Regular.otf in Resources */,
+				9ED2F45F1D9D535A00B36508 /* SF-UI-Text-Medium.otf in Resources */,
 				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
 				13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */,
 				2028DFFA1D4275B600227DCD /* SF-UI-Display-Regular.otf in Resources */,

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

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

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

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

ios/StatusIm/Info.plist

@@ -62,6 +62,9 @@
 	</dict>
 	<key>UIAppFonts</key>
 	<array>
+		<string>SF-UI-Text-Bold.otf</string>
+		<string>SF-UI-Text-Regular.otf</string>
+		<string>SF-UI-Text-Medium.otf</string>
 		<string>SF-UI-Display-Medium.otf</string>
 		<string>SF-UI-Display-Regular.otf</string>
 		<string>SF-UI-Display-Semibold.otf</string>

resources/console.js

@@ -171,13 +171,14 @@ status.response({
 });
 
 status.response({
-    name: "keypair",
+    name: "password",
     color: "#7099e6",
-    description: "Keypair password",
+    description: "Password Request",
     icon: "icon_lock_white",
     params: [{
         name: "password",
-        type: status.types.PASSWORD
+        type: status.types.PASSWORD,
+        placeholder: "Type your password"
     }],
     handler: function (params) {
         return {
@@ -198,15 +199,20 @@ status.response({
         }
     },
     preview: function (params) {
-        return status.components.text(
+        var style = {
-            {
+            marginTop: 5,
-                style: {
+            marginHorizontal: 0,
-                    marginTop: 5,
+            fontSize: 14,
-                    marginHorizontal: 0,
+            color: "black"
-                    fontSize: 14,
+        };
-                    fontFamily: "font",
+
-                    color: "black"
+        if(params.platform == "ios"){
-                }
+            style.fontSize = 8;
-            }, "*****");
+            style.marginTop = 10;
+            style.marginBottom = 2;
+            style.letterSpacing = 1;
+        }
+
+        return status.components.text({style: style}, "●●●●●●●●●●");
     }
 });

src/status_im/chat/constants.cljs

@@ -1,6 +1,6 @@
 (ns status-im.chat.constants)
 
-(def input-height 54)
+(def input-height 56)
 (def max-input-height 66)
 (def min-input-height 22)
 (def input-spacing-top 16)

src/status_im/chat/handlers.cljs

@@ -7,6 +7,7 @@
             [status-im.chat.suggestions :as suggestions]
             [status-im.protocol.core :as protocol]
             [status-im.models.chats :as chats]
+            [status-im.models.contacts :as contacts]
             [status-im.models.messages :as messages]
             [status-im.models.pending-messages :as pending-messages]
             [status-im.constants :refer [text-content-type
@@ -178,7 +179,8 @@
       db
       (do
         (chats/create-chat new-chat)
-        (sign-up-service/intro existing-account?)
+        (contacts/save-contacts [sign-up-service/console-contact])
+        (sign-up-service/intro)
         (when existing-account?
           (sign-up-service/start-signup))
         (-> db
@@ -192,8 +194,8 @@
     (init-console-chat db false)))
 
 (register-handler :save-password
-  (fn [db [_ password mnemonic]]
+  (fn [db [_ _ mnemonic]]
-    (sign-up-service/save-password password mnemonic)
+    (sign-up-service/passpharse-messages mnemonic)
     (assoc db :password-saved true)))
 
 (register-handler :sign-up

src/status_im/chat/handlers/commands.cljs

@@ -2,14 +2,14 @@
   (:require [re-frame.core :refer [enrich after dispatch]]
             [status-im.utils.handlers :refer [register-handler] :as u]
             [status-im.components.status :as status]
-            [status-im.components.react :as r]
             [status-im.models.commands :as commands]
             [clojure.string :as str]
             [status-im.commands.utils :as cu]
             [status-im.utils.phone-number :as pn]
             [status-im.i18n :as i18n]
             [status-im.utils.datetime :as time]
-            [status-im.utils.random :as random]))
+            [status-im.utils.random :as random]
+            [status-im.utils.platform :as platform]))
 
 (def command-prefix "c ")
 
@@ -68,7 +68,8 @@
         path [(if (= :command type) :commands :responses)
               name
               :preview]
-        params {:value content}]
+        params {:value content
+                :platform platform/platform}]
     (status/call-jail chat-id
                       path
                       params

src/status_im/chat/screen.cljs

@@ -75,7 +75,11 @@
       (list-item [chat-message message]))))
 
 (defn online-text [contact chat-id]
-  (if contact
+  (cond
+    (= chat-id console-chat-id)
+    (label :t/available)
+
+    contact
     (let [last-online      (get contact :last-online)
           last-online-date (time/to-date last-online)
           now-date         (t/now)]
@@ -83,9 +87,8 @@
                (<= last-online-date now-date))
         (time/time-ago last-online-date)
         (label :t/active-unknown)))
-    (if (= chat-id console-chat-id)
+
-      (label :t/active-online)
+    :else (label :t/active-unknown)))
-      (label :t/active-unknown))))
 
 (defn toolbar-content []
   (let [{:keys [group-chat name contacts chat-id]} (subscribe [:chat-properties [:group-chat :name :contacts :chat-id]])
@@ -94,8 +97,7 @@
     (fn []
       [view (st/chat-name-view @show-actions)
        [text {:style           st/chat-name-text
-              :number-of-lines 1
+              :number-of-lines 1}
-              :font            :medium}
         (if (str/blank? @name)
           (label :t/user-anonymous)
           (or @name (label :t/chat-name)))]

src/status_im/chat/sign_up.cljs

@@ -11,7 +11,8 @@
                                          content-type-command
                                          content-type-command-request
                                          content-type-status]]
-            [status-im.i18n :refer [label]]))
+            [status-im.i18n :refer [label]]
+            [clojure.string :as s]))
 
 (defn send-console-message [text]
   {:message-id   (random/id)
@@ -100,24 +101,7 @@
                 :to           "me"}])))
 
 ;; -- Saving password ----------------------------------------
-(defn save-password [password mnemonic]
+(defn passpharse-messages [mnemonic]
-  ;; TODO validate and save password
-  (dispatch [:received-message
-             {:message-id   (random/id)
-              :content      (label :t/password-saved)
-              :content-type text-content-type
-              :outgoing     false
-              :from         console-chat-id
-              :to           "me"
-              :new?         false}])
-  (dispatch [:received-message
-             {:message-id   (random/id)
-              :content      (label :t/generate-passphrase)
-              :content-type text-content-type
-              :outgoing     false
-              :from         console-chat-id
-              :to           "me"
-              :new?         false}])
   (dispatch [:received-message
              {:message-id   (random/id)
               :content      (label :t/here-is-your-passphrase)
@@ -134,59 +118,35 @@
               :from         console-chat-id
               :to           "me"
               :new?         false}])
-  (dispatch [:received-message
-             {:message-id   "8"
-              :content      (label :t/written-down)
-              :content-type text-content-type
-              :outgoing     false
-              :from         console-chat-id
-              :to           "me"
-              :new?         false}])
   ;; TODO highlight '!phone'
   (start-signup))
 
 
 
 (def intro-status
-  {:message-id      "intro-status"
+  {:message-id   "intro-status"
-   :content         (label :t/intro-status)
+   :content      (label :t/intro-status)
-   :from            console-chat-id
+   :from         console-chat-id
-   :chat-id         console-chat-id
+   :chat-id      console-chat-id
-   :content-type    content-type-status
+   :content-type content-type-status
-   :outgoing        false
+   :outgoing     false
-   :to              "me"})
+   :to           "me"})
 
-(defn intro [logged-in?]
+(defn intro []
   (dispatch [:received-message intro-status])
   (dispatch [:received-message
              {:message-id   "intro-message1"
-              :content      (label :t/intro-message1)
+              :content      (command-content
-              :content-type text-content-type
+                              :password
+                              (label :t/intro-message1))
+              :content-type content-type-command-request
               :outgoing     false
               :from         console-chat-id
-              :to           "me"}])
+              :to           "me"}]))
-  (when-not logged-in?
-    (dispatch [:received-message
-               {:message-id   "intro-message2"
-                :content      (label :t/intro-message2)
-                :content-type text-content-type
-                :outgoing     false
-                :from         console-chat-id
-                :to           "me"}])
-
-    (dispatch [:received-message
-               {:message-id   "intro-message3"
-                :content      (command-content
-                                :keypair
-                                (label :t/keypair-generated))
-                :content-type content-type-command-request
-                :outgoing     false
-                :from         console-chat-id
-                :to           "me"}])))
 
 (def console-chat
   {:chat-id    console-chat-id
-   :name       console-chat-id
+   :name       (s/capitalize console-chat-id)
    ; todo remove/change dapp config fot console
    :dapp-url   "http://localhost:8185/resources"
    :dapp-hash  858845357
@@ -194,6 +154,13 @@
    :group-chat false
    :is-active  true
    :timestamp  (.getTime (js/Date.))
+   :photo-path console-chat-id
    :contacts   [{:identity         console-chat-id
                  :text-color       "#FFFFFF"
                  :background-color "#AB7967"}]})
+
+(def console-contact
+  {:whisper-identity console-chat-id
+   :name             (s/capitalize console-chat-id)
+   :photo-path       console-chat-id
+   :dapp?            true})

src/status_im/chat/styles/command_pill.cljs

@@ -0,0 +1,16 @@
+(ns status-im.chat.styles.command-pill
+  (:require  [status-im.utils.platform :as p]
+             [status-im.components.styles :refer [color-white]]))
+
+(defn pill [command]
+  {:backgroundColor   (:color command)
+   :height            24
+   :min-width         120
+   :borderRadius      50
+   :padding-top       (if p/ios? 4 3)
+   :paddingHorizontal 12
+   :text-align        :left})
+
+(def pill-text
+  {:fontSize    12
+   :color       color-white})

src/status_im/chat/styles/input.cljs

@@ -16,9 +16,9 @@
    :elevation       4})
 
 (def command-container
-  {:left 0
+  {:left            0
    :backgroundColor :white
-   :position :absolute})
+   :position        :absolute})
 
 (defn command-text-container
   [{:keys [color]}]
@@ -80,34 +80,23 @@
 (def staged-command-background
   {:flexDirection   :column
    :margin          16
-   :padding         12
+   :padding-bottom  12
+   :padding-left    12
    :backgroundColor chat-background
    :borderRadius    14})
 
 (def staged-command-info-container
-  {:flexDirection :row})
+  {:flexDirection :row
-
+   :margin-top    12})
-(defn staged-command-text-container
-  [{:keys [color]}]
-  {:backgroundColor   color
-   :height            24
-   :borderRadius      50
-   :marginRight       32
-   :paddingTop        3
-   :paddingHorizontal 12})
-
-(def staged-command-text
-  {:fontSize   12
-   :color      color-white})
 
 (def staged-command-cancel
-  {:position :absolute
+  {:padding-left  12
-   :top      7
+   :padding-top   16
-   :right    4})
+   :padding-right 12})
 
 (def staged-command-cancel-icon
-  {:width  10
+  {:width  16
-   :height 10})
+   :height 16})
 
 (def staged-command-content
   {:marginTop        5

src/status_im/chat/styles/message.cljs

@@ -7,6 +7,7 @@
                                                  online-color
                                                  text1-color
                                                  text2-color]]
+            [status-im.utils.platform :as p]
             [status-im.constants :refer [text-content-type
                                          content-type-command]]))
 
@@ -175,17 +176,6 @@
   {:flexDirection :row
    :marginRight   32})
 
-(defn command-view [command]
-  {:backgroundColor   (:color command)
-   :height            24
-   :borderRadius      50
-   :paddingTop        3
-   :paddingHorizontal 12})
-
-(def command-name
-  {:fontSize   12
-   :color      color-white})
-
 (def command-image
   {:margin-top 5
    :width      12
@@ -293,9 +283,9 @@
   {:borderRadius 32})
 
 (def contact-photo
-  {:borderRadius 32
+  {:border-radius 32
-   :width        64
+   :width         64
-   :height       64})
+   :height        64})
 
 (def message-date-container
   {:backgroundColor   color-light-blue-transparent

src/status_im/chat/styles/message_input.cljs

@@ -4,27 +4,26 @@
             [status-im.chat.constants :refer [max-input-height
                                               min-input-height
                                               input-spacing-top
-                                              input-spacing-bottom]]))
+                                              input-spacing-bottom]]
+            [status-im.utils.platform :as p]))
 
 (def input-container
   {:flex-direction :column})
 
-(defn input-view [content-height]
+(def input-view
   {:flex-direction   :row
    :align-items      :center
    :justify-content  :center
-   :height           (+ (min (max min-input-height content-height) max-input-height)
+   :height           56
-                        input-spacing-top
-                        input-spacing-bottom)
    :background-color color-white})
 
-(defn message-input-container [content-height]
+(def message-input-container
-  {:height           (min (max min-input-height content-height) max-input-height)
+  {:height         16.5
-   :margin-top       input-spacing-top
+   :margin-top     20
-   :margin-bottom    input-spacing-bottom
+   :margin-bottom  19.5
-   :flex             1
+   :flex           1
-   :flex-direction   "column"
+   :flex-direction :column
-   :margin-right     0})
+   :margin-right   0})
 
 (def send-wrapper
   {:margin-bottom   8

src/status_im/chat/styles/plain_message.cljs

@@ -1,34 +1,45 @@
 (ns status-im.chat.styles.plain-message
   (:require [status-im.components.styles :refer [text1-color]]
             [status-im.chat.constants :refer [max-input-height
-                                              min-input-height]]))
+                                              min-input-height]]
+            [status-im.utils.platform :as p]))
 
 (defn message-input-button-touchable [width content-height]
-  {:width            width
+  {:width width
-   :flex             1
+   :flex  1})
-   :margin-bottom    14
-   :align-items      :center
-   :justify-content  :flex-end})
 
-(defn message-input-button [scale]
+(defn message-input-button [scale margin-top]
-  {:transform       [{:scale scale}]
+  {:transform        [{:scale scale}]
-   :width           24
+   :width            24
-   :height          24
+   :height           24
-   :align-items     :center
+   :margin-top       margin-top
-   :justify-content :center})
+   :margin-left      16
+   :align-items      :center
+   :justify-content  :center})
 
 (def list-icon
-  {:width  20
+  {:margin-left   4
-   :height 16})
+   :margin-top    5.5
+   :margin-bottom 5.5
+   :margin-right  4
+   :width         16
+   :height        13})
+
+(def requests-icon-container
+  {:width            12
+   :height           12
+   :border-radius    12
+   :left             -1
+   :top              -1
+   :background-color :white
+   :position         :absolute})
 
 (def requests-icon
   {:background-color :#7099e6
+   :margin           2
    :width            8
    :height           8
-   :border-radius    8
+   :border-radius    8})
-   :left             0
-   :top              0
-   :position         :absolute})
 
 (def close-icon
   {:width  12
@@ -39,7 +50,8 @@
    :padding     0
    :font-size   14
    :line-height 20
-   :color       text1-color})
+   :color       text1-color
+   :padding-top (when p/ios? -6)})
 
 (def smile-icon
   {:width  20

src/status_im/chat/styles/response.cljs

@@ -85,7 +85,6 @@
   {:flex        1
    :marginRight 16
    :margin-left (- ml 5)
-   :margin-top  4
    :padding     0
    :fontSize    14
    :color       (if disable? color-white text1-color)})

src/status_im/chat/views/message.cljs

@@ -12,6 +12,7 @@
             [status-im.components.animation :as anim]
             [status-im.chat.views.request-message :refer [message-content-command-request]]
             [status-im.chat.styles.message :as st]
+            [status-im.chat.styles.command-pill :as pill-st]
             [status-im.models.chats :refer [chat-by-id]]
             [status-im.models.commands :refer [parse-command-message-content
                                                parse-command-request]]
@@ -31,7 +32,7 @@
            :font  :default}
      (time/to-short-str timestamp)]]])
 
-(defn contact-photo [{:keys [photo-path]}]
+(defn contact-photo [photo-path]
   [view st/contact-photo-container
    [image {:source (if (s/blank? photo-path)
                      res/user-no-photo
@@ -44,14 +45,17 @@
      [view st/online-dot-left]
      [view st/online-dot-right]]))
 
-(defn message-content-status [{:keys [from content]}]
+(defview message-content-status
+  [{:keys [from content]}]
+  [{chat-name :name} [:get-chat-by-id from]
+   photo-path [:chat-photo from]]
   [view st/status-container
    [view st/status-image-view
-    [contact-photo {}]
+    [contact-photo photo-path]
     [contact-online {:online true}]]
    [text {:style st/status-from
           :font  :default}
-    from]
+    (or chat-name from)]
    [text {:style st/status-text
           :font  :default}
     content]])
@@ -74,10 +78,10 @@
         {:keys [name icon type]} command]
     [view st/content-command-view
      [view st/command-container
-      [view (st/command-view command)
+      [view (pill-st/pill command)
-       [text {:style st/command-name
+       [text {:style pill-st/pill-text
               :font  :default}
-        (str (if (= :command type) "!" "") name)]]]
+        (str (if (= :command type) "!" "?") name)]]]
      (when icon
        [view st/command-image-view
         [image {:source {:uri icon}
@@ -106,12 +110,31 @@
   [wrapper message]
   [wrapper message [message-content-command-request message]])
 
+;; todo rewrite this, naive implementation
+(defn- parse-text [string]
+  (if (string? string)
+    (let [regx         #"\*[^*]+\*"
+          general-text (s/split string regx)
+          bold-text    (vec (map-indexed
+                              (fn [idx string]
+                                [text
+                                 {:key   (str idx "_" string)
+                                  :style {:font-weight :bold}}
+                                 (subs string 1 (- (count string) 1))])
+                              (re-seq regx string)))
+          bold-text'   (if (> (count general-text)
+                              (count bold-text))
+                         (conj bold-text nil)
+                         bold-text)]
+      (mapcat vector general-text bold-text'))
+    (str string)))
+
 (defn text-message
   [{:keys [content] :as message}]
   [message-view message
    [text {:style (st/text-message message)
           :font  :default}
-    (str content)]])
+    (parse-text content)]])
 
 (defmethod message-content text-content-type
   [wrapper message]
@@ -241,12 +264,12 @@
 (defn message-container [message & children]
   (if (:new? message)
     (let [layout-height (r/atom 0)
-          anim-value (anim/create-value 1)
+          anim-value    (anim/create-value 1)
           anim-callback #(dispatch [:set-message-shown message])
-          context {:to-value layout-height
+          context       {:to-value layout-height
-                   :val      anim-value
+                         :val      anim-value
-                   :callback anim-callback}
+                         :callback anim-callback}
-          on-update (message-container-animation-logic context)]
+          on-update     (message-container-animation-logic context)]
       (r/create-class
         {:component-did-update
          on-update

src/status_im/chat/views/message_input.cljs

@@ -44,18 +44,19 @@
    disable? [:get :disable-input]]
   [text-input (merge
                 (plain-input-options disable?)
-                {:auto-focus          false
+                {:placeholder-text-color :#c0c5c9
-                 :blur-on-submit      true
+                 :auto-focus             false
-                 :multiline           true
+                 :blur-on-submit         true
-                 :on-change           #(let [size (-> (.-nativeEvent %)
+                 :multiline              true
-                                                      (.-contentSize)
+                 :on-change              #(let [size (-> (.-nativeEvent %)
-                                                      (.-height))]
+                                                         (.-contentSize)
-                                        (set-layout-size size))
+                                                         (.-height))]
-                 :accessibility-label :input
+                                           (set-layout-size size))
-                 :on-focus            #(dispatch [:set :focused true])
+                 :accessibility-label    :input
-                 :on-blur             #(do (dispatch [:set :focused false])
+                 :on-focus               #(dispatch [:set :focused true])
-                                           (set-layout-size 0))
+                 :on-blur                #(do (dispatch [:set :focused false])
-                 :default-value       (or input-message "")}
+                                              (set-layout-size 0))
+                 :default-value          (or input-message "")}
                 input-options)])
 
 (defview command-input [input-options command]
@@ -93,9 +94,9 @@
        (fn [{:keys [input-options]}]
          (let [{:keys [height]} (r/state component)]
            [view st/input-container
-            [view (st/input-view height)
+            [view st/input-view
              [plain-message/commands-button height #(set-layout-size 0)]
-             [view (st/message-input-container height)
+             [view st/message-input-container
               (if @command?
                 [command-input input-options @command]
                 [message-input input-options set-layout-size])]

src/status_im/chat/views/plain_message.cljs

@@ -31,43 +31,46 @@
 (defn list-container [min]
   (fn [{:keys [command? width]}]
     (let [n-width (if @command? min 56)
-          delay (if @command? 100 0)]
+          delay   (if @command? 100 0)]
       (anim/start (anim/timing width {:toValue  n-width
                                       :duration response-input-hiding-duration
                                       :delay    delay})
                   #(dispatch [:set :disable-input false])))))
 
 (defn commands-button [height on-press]
-  (let [command? (subscribe [:command?])
+  (let [command?        (subscribe [:command?])
-        requests (subscribe [:get-requests])
+        requests        (subscribe [:get-requests])
-        suggestions (subscribe [:get-suggestions])
+        suggestions     (subscribe [:get-suggestions])
-        buttons-scale (anim/create-value (if @command? 1 0))
+        buttons-scale   (anim/create-value (if @command? 1 0))
         container-width (anim/create-value (if @command? 20 56))
-        context {:command? command?
+        context         {:command? command?
-                 :val      buttons-scale
+                         :val      buttons-scale
-                 :width    container-width}
+                         :width    container-width}
-        on-update (fn [_]
+        on-update       (fn [_]
-                    ((button-animation-logic context))
+                          ((button-animation-logic context))
-                    ((list-container 20) context))]
+                          ((list-container 20) context))]
     (r/create-class
       {:component-did-mount
        on-update
        :component-did-update
        on-update
        :reagent-render
-       (fn [on-press]
+       (fn [height on-press]
          [touchable-highlight {:on-press #(do (dispatch [:switch-command-suggestions!])
                                               (on-press))
                                :disabled @command?}
           [animated-view {:style (st/message-input-button-touchable container-width height)}
            (when-not @command?
-             [animated-view {:style (st/message-input-button buttons-scale)}
+             [animated-view {:style (st/message-input-button
+                                      buttons-scale
+                                      (if (seq @suggestions) 16 17))}
               (if (seq @suggestions)
                 [icon :close_gray st/close-icon]
                 [icon :input_list st/list-icon])
               (when (and (seq @requests)
                          (not (seq @suggestions)))
-                [view st/requests-icon])])]])})))
+                [view st/requests-icon-container
+                 [view st/requests-icon]])])]])})))
 
 (defn smile-animation-logic [{:keys [command? val width]}]
   (fn [_]
@@ -80,13 +83,13 @@
                       (anim/set-value width 0.1)))))))
 
 (defn smile-button [height]
-  (let [command? (subscribe [:command?])
+  (let [command?        (subscribe [:command?])
-        buttons-scale (anim/create-value (if @command? 1 0))
+        buttons-scale   (anim/create-value (if @command? 1 0))
         container-width (anim/create-value (if @command? 0.1 56))
-        context {:command? command?
+        context         {:command? command?
-                 :val      buttons-scale
+                         :val      buttons-scale
-                 :width    container-width}
+                         :width    container-width}
-        on-update (smile-animation-logic context)]
+        on-update       (smile-animation-logic context)]
     (r/create-class
       {:component-did-mount
        on-update
@@ -99,5 +102,5 @@
                                            )
                                :disabled @command?}
           [animated-view {:style (st/message-input-button-touchable container-width height)}
-           [animated-view {:style (st/message-input-button buttons-scale)}
+           [animated-view {:style (st/message-input-button buttons-scale 15)}
             [icon :smile st/smile-icon]]]])})))

src/status_im/chat/views/staged_command.cljs

@@ -2,10 +2,12 @@
   (:require [re-frame.core :refer [subscribe dispatch]]
             [status-im.components.react :refer [view
                                                 image
+                                                icon
                                                 text
                                                 touchable-highlight]]
             [status-im.resources :as res]
-            [status-im.chat.styles.input :as st]))
+            [status-im.chat.styles.input :as st]
+            [status-im.chat.styles.command-pill :as pill-st]))
 
 (defn cancel-command-input [staged-command]
   (dispatch [:unstage-command staged-command]))
@@ -14,16 +16,17 @@
   (let [{:keys [type name] :as command} (:command staged-command)]
     [view st/staged-command-container
      [view st/staged-command-background
-      [view st/staged-command-info-container
+      [view {:flex-direction :row}
-       [view (st/staged-command-text-container command)
+       [view st/staged-command-info-container
-        [text {:style st/staged-command-text}
+        [view (pill-st/pill command)
-         (if (= :command type)
+         [text {:style pill-st/pill-text}
-           (str "!" name)
+          (str
-           name)]]
+            (if (= :command type) "!" "?")
+            name)]]]
        [touchable-highlight {:style   st/staged-command-cancel
                              :onPress #(cancel-command-input staged-command)}
-        [image {:source res/icon-close-gray
+        [view [icon :close_small_gray
-                :style  st/staged-command-cancel-icon}]]]
+          st/staged-command-cancel-icon]]]]
       (if-let [preview (:preview staged-command)]
         preview
         [text {:style st/staged-command-content}

src/status_im/components/chat_icon/screen.cljs

@@ -20,6 +20,12 @@
   [image {:source {:uri photo-path}
           :style  (:chat-icon styles)}])
 
+(defn dapp-badge [styles]
+  [view (:online-view styles)
+   [view
+    [view (:online-dot-left styles)]
+    [view (:online-dot-right styles)]]])
+
 (defn contact-badge [type styles]
   (when (= type :edit)
     [view (:online-view styles)
@@ -32,13 +38,14 @@
                          :style st/photo-pencil}]])]))
 
 (defview chat-icon-view [chat-id group-chat name online styles]
-  [photo-path [:chat-photo chat-id]]
+  [photo-path [:chat-photo chat-id]
+   dapp-url [:chat :dapp-url]]
   [view (:container styles)
-   (if-not (or (s/blank? photo-path) (= chat-id console-chat-id))
+   (if-not (s/blank? photo-path)
      [chat-icon photo-path styles]
      [default-chat-icon name styles])
-   (when-not group-chat
+   (when dapp-url
-     [contact-badge (if online :online :blank) styles])])
+     [dapp-badge styles])])
 
 (defn chat-icon-view-chat-list [chat-id group-chat name color online]
   [chat-icon-view chat-id group-chat name online

src/status_im/components/react.cljs

@@ -66,14 +66,15 @@
   ([t]
    (r/as-element [text-class t]))
   ([{:keys [style font] :as opts
-     :or   {font :default}} t]
+     :or   {font :default}} t & other]
    (r/as-element
      (let [font (get-in platform-specific [:fonts font])]
-       [text-class
+       (vec (concat
-        (-> opts
+              [text-class
-            (dissoc :font)
+               (-> opts
-            (assoc :style (merge style font)))
+                   (dissoc :font)
-        t]))))
+                   (assoc :style (merge style font)))]
+              (conj other t)))))))
 
 (defn text-input [props text]
   [text-input-class (merge

src/status_im/contacts/subs.cljs

@@ -90,6 +90,12 @@
           (if (:group-chat @chat)
             ;; TODO return group chat icon
             nil
-            (if (pos? (count @contacts))
+            (cond
+              (:photo-path @chat)
+              (:photo-path @chat)
+
+              (pos? (count @contacts))
               (:photo-path (first @contacts))
+
+              :else
               (identicon chat-id))))))))

src/status_im/ios/platform.cljs

@@ -23,9 +23,9 @@
    :input-error-text  {:margin-left 0}})
 
 (def fonts
-  {:default {:font-family "SFUIDisplay-Regular"}
+  {:default {:font-family "SFUIText-Regular"}
-   :medium  {:font-family "SFUIDisplay-Medium"}})
+   :medium  {:font-family "SFUIText-Medium"}
-
+   :bold    {:font-family "SFUIText-Bold"}})
 
 ;; Dialogs
 

src/status_im/models/chats.cljs

@@ -26,18 +26,6 @@
 (defn chat-exists? [chat-id]
   (r/exists? :account :chat {:chat-id chat-id}))
 
-(defn add-status-message [chat-id]
-  ;; TODO Get real status
-  (save-message chat-id
-                {:from         "Status"
-                 :to           nil
-                 :message-id   (random/id)
-                 :content      (str "The brash businessman’s braggadocio "
-                                    "and public exchange with candidates "
-                                    "in the US presidential election")
-                 :content-type content-type-status
-                 :outgoing     false}))
-
 (defn chat-contacts [chat-id]
   (-> (r/get-by-field :account :chat :chat-id chat-id)
       (r/single)

src/status_im/persistence/realm/schemas.cljs

@@ -35,7 +35,9 @@
                                             :public-key       {:type     :string
                                                                :optional true}
                                             :private-key      {:type     :string
-                                                               :optional true}}}
+                                                               :optional true}
+                                            :dapp?            {:type    :bool
+                                                               :default false}}}
                               {:name       :request
                                :properties {:message-id :string
                                             :chat-id    :string

src/status_im/translations/en.cljs

@@ -22,6 +22,7 @@
                                            :zero  "no members"}
    :active-online                         "online"
    :active-unknown                        "unknown"
+   :available                             "available"
 
    ;messages
    :status-sending                        "Sending"
@@ -75,19 +76,11 @@
                                                "it's me the Console nice to meet you!")
    :generate-passphrase                   (str "I'll generate a passphrase for you so you can restore your "
                                                "access or log in from another device")
-   :here-is-your-passphrase               "Here's your passphrase:"
+   :here-is-your-passphrase               "Here is your passphrase, *write this down and keep this safe!* You will need it to recover your account."
    :written-down                          "Make sure you had securely written it down"
-   :phone-number-required                 (str "Your phone number is also required to use the app. Type the "
+   :phone-number-required                 "Tap here to enter your phone number & I'll find your friends"
-                                               "exclamation mark or hit the icon to open the command list "
+   :intro-status                          "Chat with me to setup your account and change your settings!"
-                                               "and choose the !phone command")
+   :intro-message1                        "Welcome to Status\nTap this message to set your password & get started!"
-   :intro-status                          (str "The brash businessman’s braggadocio "
-                                               "and public exchange with candidates "
-                                               "in the US presidential election")
-   :intro-message1                        "Hello there! It's Status a Dapp browser in your phone."
-   :intro-message2                        (str "Status uses  a highly secure key-pair authentication type "
-                                               "to provide you a reliable way to access your account")
-   :keypair-generated                     (str "A key pair has been generated and saved to your device. "
-                                               "Create a password to secure your key")
 
    ;chats
    :chats                                 "Chats"