Style fixes; Emoji in Display name is cut on Chats, View Profile and Contacts (#945)

.re-natal

@@ -1,7 +1,7 @@
 {
   "name": "StatusIm",
   "interface": "reagent",
-  "androidHost": "10.0.2.2",
+  "androidHost": "10.0.3.2",
   "modules": [
     "react-native-contacts",
     "react-native-invertible-scroll-view",

env/dev/env/android/main.cljs

@@ -15,7 +15,7 @@
   (re-frame.core/dispatch [:load-commands!]))
 
 (figwheel/watch-and-reload
-  :websocket-url "ws://10.0.2.2:3449/figwheel-ws"
+  :websocket-url "ws://10.0.3.2:3449/figwheel-ws"
   :heads-up-display false
   :jsload-callback callback)
 

src/status_im/android/platform.cljs

@@ -24,19 +24,6 @@
                                          :color     styles/color-black}}
    :sized-text            {:margin-top        0
                            :additional-height 0}
-   :chat-list             {:list-container               {:background-color styles/color-light-gray}
-                           :chat-container               {:height 76}
-                           :chat-icon-container          {:height 76}
-                           :chat-info-container          {:margin-top 16}
-                           :chat-options-container       {:margin-top 16}
-                           :item-lower-container         {:margin-top 4}
-                           :chat-name                    {:height 24}
-                           :last-message                 {:font-size  14
-                                                          :height     24}
-                           :last-message-timestamp       {:font-size 14}
-                           :unread-count                 {:top 2}
-                           :public-group-icon-container  {:margin-top 4}
-                           :private-group-icon-container {:margin-top 4}}
    :chat                  {:new-message {:border-top-color styles/color-transparent
                                          :border-top-width 0.5}}
    :discover              {:subtitle {:color     styles/color-gray2

src/status_im/chats_list/styles.cljs

@@ -1,5 +1,5 @@
 (ns status-im.chats-list.styles
-  (:require-macros [status-im.utils.styles :refer [defnstyle]])
+  (:require-macros [status-im.utils.styles :refer [defstyle defnstyle]])
   (:require [status-im.components.styles :refer [color-white
                                                  color-light-gray
                                                  color-blue
@@ -22,40 +22,45 @@
   {:border-bottom-width 1
    :border-bottom-color color-gray5})
 
-(def chat-container
+(defstyle chat-container
-  (merge {:flex-direction   :row
+  {:flex-direction   :row
-          :background-color color-white}
+   :background-color color-white
-         (get-in p/platform-specific [:component-styles :chat-list :chat-container])))
+   :android          {:height 76}
+   :ios              {:height 74}})
 
-(def chat-icon-container
+(defstyle chat-icon-container
-  (merge {:padding-top    18
+  {:padding-top    18
-          :padding-bottom 18
+   :padding-bottom 18
-          :padding-left   12
+   :padding-left   12
-          :padding-right  20
+   :padding-right  20
-          :width          72}
+   :width          72
-         (get-in p/platform-specific [:component-styles :chat-list :chat-icon-container])))
+   :android        {:height 76}
+   :ios            {:height 74}})
 
-(def chat-info-container
+(defstyle chat-info-container
-  (merge {:margin-bottom   13
+  {:margin-bottom   13
-          :justify-content :space-between
+   :justify-content :space-between
-          :flex            1
+   :flex            1
-          :flex-direction  :column}
+   :flex-direction  :column
-         (get-in p/platform-specific [:component-styles :chat-list :chat-info-container])))
+   :android         {:margin-top 16}
+   :ios             {:margin-top 14}})
 
-(def chat-options-container
+(defstyle chat-options-container
-  (merge {:margin-right 16
+  {:margin-right 16
-          :padding-top  10}
+   :padding-top  10
-         (get-in p/platform-specific [:component-styles :chat-list :chat-options-container])))
+   :android      {:margin-top 16}
+   :ios          {:margin-top 14}})
 
 (def item-upper-container
   {:flex            1
    :flex-direction  :row})
 
-(def item-lower-container
+(defstyle item-lower-container
-  (merge {:flex            1
+  {:flex            1
-          :flex-direction  :row
+   :flex-direction  :row
-          :justify-content :space-between}
+   :justify-content :space-between
-         (get-in p/platform-specific [:component-styles :chat-list :item-lower-container])))
+   :android         {:margin-top 4}
+   :ios             {:margin-top 6}})
 
 (def message-status-container
   {:flex-direction :row
@@ -67,25 +72,26 @@
    :margin-right   4})
 
 (def name-text
-  (merge {:color     text1-color
+  {:color     text1-color
-          :font-size 16}
+   :font-size 16})
-         (get-in p/platform-specific [:component-styles :chat-list :chat-name])))
 
-(def private-group-icon-container
+(defstyle private-group-icon-container
-  (merge {:width        16
+  {:width        16
-          :height       12
+   :height       12
-          :margin-right 6}
+   :margin-right 6
-         (get-in p/platform-specific [:component-styles :chat-list :private-group-icon-container])))
+   :android      {:margin-top 4}
+   :ios          {:margin-top 2}})
 
 (def private-group-icon
   {:width  16
    :height 16})
 
-(def public-group-icon-container
+(defstyle public-group-icon-container
-  (merge {:width        16
+  {:width        16
-          :height       12
+   :height       12
-          :margin-right 6}
+   :margin-right 6
-         (get-in p/platform-specific [:component-styles :chat-list :public-group-icon-container])))
+   :android      {:margin-top 4}
+   :ios          {:margin-top 2}})
 
 (def public-group-icon
   {:width  16
@@ -94,9 +100,12 @@
 (def last-message-container
   {:flex-shrink 1})
 
-(def last-message-text
+(defstyle last-message-text
-  (merge {:color text4-color}
+  {:color   text4-color
-         (get-in p/platform-specific [:component-styles :chat-list :last-message])))
+   :android {:font-size 14
+             :height    24}
+   :ios     {:font-size 15
+             :height    24}})
 
 (def status-container
   {:flex-direction :row
@@ -109,23 +118,25 @@
    :width        16
    :height       16})
 
-(def datetime-text
+(defstyle datetime-text
-  (merge {:color text4-color}
+  {:color   text4-color
-         (get-in p/platform-specific [:component-styles :chat-list :last-message-timestamp])))
+   :android {:font-size 14}
+   :ios     {:font-size 15}})
 
 (def new-messages-container
-  {:width           22
+  {:width            22
-   :height          22
+   :height           22
-   :margin-left     15
+   :margin-left      15
-   :backgroundColor new-messages-count-color
+   :background-color new-messages-count-color
-   :borderRadius    50})
+   :border-radius    50})
 
 (def new-messages-text
-  (merge {:left      0
+  {:left       0
-          :fontSize  12
+   :fontSize   12
-          :color     color-blue
+   :color      color-blue
-          :textAlign :center}
+   :text-align :center
-         (get-in p/platform-specific [:component-styles :chat-list :unread-count])))
+   :android    {:top 2}
+   :ios        {:top 3}})
 
 (def chats-container
   {:flex 1})
@@ -142,10 +153,10 @@
    :padding-right  14})
 
 (def opts-btn
-  {:width          24
+  {:width           24
-   :height         24
+   :height          24
-   :alignItems     :center
+   :align-items     :center
-   :justifyContent :center})
+   :justify-content :center})
 
 (def create-icon
   {:fontSize 20

src/status_im/components/contact/styles.cljs

@@ -4,13 +4,13 @@
             [status-im.utils.platform]))
 
 (defstyle contact-inner-container
-  {:flex            1
+  {:flex             1
-   :flexDirection   :row
+   :flex-direction   :row
-   :align-items     :center
+   :align-items      :center
-   :padding-left    16
+   :padding-left     16
-   :backgroundColor common/color-white
+   :background-color common/color-white
-   :android         {:height 56}
+   :android          {:height 56}
-   :ios             {:height 63}})
+   :ios              {:height 63}})
 
 (def info-container
   {:flex            1
@@ -21,10 +21,8 @@
 
 (defstyle name-text
   {:color   common/text1-color
-   :android {:fontSize       16
+   :android {:font-size      16}
-             :line-height    24}
+   :ios     {:font-size      17
-   :ios     {:fontSize       17
-             :line-height    20
              :letter-spacing -0.2}})
 
 (def info-text

src/status_im/contacts/styles.cljs

@@ -50,10 +50,10 @@
    :ios             {:height       64}})
 
 (defstyle show-all-text
-  {:android {:fontSize       14
+  {:android {:font-size      14
              :color          common/color-blue
              :letter-spacing 0.5}
-   :ios     {:fontSize       16
+   :ios     {:font-size      16
              :color          common/color-gray4
              :letter-spacing -0.2}})
 

src/status_im/ios/platform.cljs

@@ -23,19 +23,6 @@
                            :additional-height 5}
    :actions-list-view     {:border-bottom-color styles/color-gray3
                            :border-bottom-width 0.5}
-   :chat-list             {:list-container               {:background-color styles/color-white}
-                           :chat-container               {:height 74}
-                           :chat-icon-container          {:height 74}
-                           :chat-info-container          {:margin-top 14}
-                           :chat-options-container       {:margin-top 14}
-                           :item-lower-container         {:margin-top 6}
-                           :chat-name                    {:height 20}
-                           :last-message                 {:font-size  15
-                                                          :height     24}
-                           :last-message-timestamp       {:font-size 15}
-                           :unread-count                 {:top 3}
-                           :public-group-icon-container  {:margin-top 2}
-                           :private-group-icon-container {:margin-top 2}}
    :chat                  {:new-message {:border-top-color styles/color-gray3
                                          :border-top-width 0.5}}
    :discover             {:subtitle  {:color          styles/color-steel

src/status_im/profile/screen.cljs

@@ -51,11 +51,11 @@
       (time/time-ago last-online-date)
       (label :t/active-unknown))))
 
-(defn profile-bage [{:keys [name last-online] :as contact}]
+(defn profile-badge [{:keys [name last-online] :as contact}]
   [view st/profile-bage
    [my-profile-icon {:account contact
                      :edit?   false}]
-   [view st/profile-bage-name-container
+   [view st/profile-badge-name-container
     [text {:style st/profile-name-text
            :number-of-lines 1}
       name]
@@ -192,7 +192,7 @@
    [status-bar]
    [my-profile-toolbar]
    [view st/profile-form
-    [profile-bage current-account]
+    [profile-badge current-account]
     [profile-status status true]]
    [form-spacer]
    [view actions-list
@@ -215,7 +215,7 @@
    [profile-toolbar contact]
    [scroll-view
     [view st/profile-form
-     [profile-bage contact]
+     [profile-badge contact]
      (when (and (not (nil? status)) (not (str/blank? status)))
        [profile-status status])]
     [form-spacer]

src/status_im/profile/styles.cljs

@@ -70,14 +70,12 @@
    :android {:font-size 12}})
 
 (defstyle profile-name-text
-  {:ios      {:font-size      17
+  {:ios     {:font-size      17
-              :line-height    20
+             :letter-spacing -0.2}
-              :letter-spacing -0.2}
+   :android {:color     color-black
-   :android  {:color       color-black
+             :font-size 16}})
-              :font-size   16
-              :line-height 24}})
 
-(def profile-bage-name-container
+(def profile-badge-name-container
   {:flex            1
    :justify-content :center
    :padding-left    16})