fixes https://github.com/status-im/status-react/issues/994

src/status_im/android/platform.cljs

@@ -18,12 +18,6 @@
                            :modal       {:height    0
                                          :bar-style "light-content"
                                          :color     styles/color-black}}
-   :toolbar-new           {:height         55
-                           :padding-top    15
-                           :padding-left   16
-                           :padding-right  16}
-   :toolbar-title-container {:padding-left   30}
-   :toolbar-with-search-content {:padding-left   30}
    :sized-text            {:margin-top        0
                            :additional-height 0}
    :chat-list             {:list-container               {:background-color styles/color-light-gray}
@@ -101,5 +95,4 @@
    :group-block-shadows?         true
    :discover                     {:uppercase-subtitles? false}
    :public-group-icon-container  {:margin-top 4}
-   :private-group-icon-container {:margin-top 6}
+   :private-group-icon-container {:margin-top 6}})
-   :public-group-chat-hash-style {:top 10 :left 4}})

src/status_im/chat/screen.cljs

@@ -18,7 +18,7 @@
             [status-im.utils.datetime :as time]
             [status-im.utils.platform :refer [platform-specific]]
             [status-im.components.invertible-scroll-view :refer [invertible-scroll-view]]
-            [status-im.components.toolbar.view :refer [toolbar]]
+            [status-im.components.toolbar-new.view :refer [toolbar]]
             [status-im.chat.views.toolbar-content :refer [toolbar-content-view]]
             [status-im.chat.views.message.message :refer [chat-message]]
             [status-im.chat.views.message.datemark :refer [chat-datemark]]
@@ -116,7 +116,6 @@
    [status-bar]
    [toolbar {:hide-nav?      (or (empty? accounts) show-actions? creating?)
              :custom-content [toolbar-content-view]
-             :style          (get-in platform-specific [:component-styles :toolbar])
              :custom-action  [toolbar-action]}]
    [add-contact-bar]])
 

src/status_im/chat/styles/screen.cljs

@@ -46,10 +46,12 @@
 
 (defnstyle chat-name-view [show-actions]
   {:flex            1
-   :margin-left     (if show-actions 16 0)
    :justify-content :center
-   :android         {:align-items :flex-start}
+   :android         {:align-items    :flex-start
-   :ios             {:align-items :center}})
+                     :margin-left    (if show-actions 56 32)
+                     :padding-bottom 6}
+   :ios             {:align-items :center
+                     :margin-left (if show-actions 40 16)}})
 
 (def chat-name-text
   {:color      color-gray6

src/status_im/chats_list/screen.cljs

@@ -53,7 +53,8 @@
 
 (defn toolbar-edit []
   [toolbar {:nav-action (act/back #(dispatch [:set-in [:chat-list-ui-props :edit?] false]))
-            :title      (label :t/edit-chats)}])
+            :title      (label :t/edit-chats)
+            :actions    [{:image :blank}]}])
 
 (defview toolbar-search []
   [search-text [:get-in [:toolbar-search :text]]]

src/status_im/components/chat_icon/screen.cljs

@@ -52,14 +52,14 @@
      [view pending-outer-circle
       [view pending-inner-circle]]]))
 
-(defview chat-icon-view [chat-id group-chat name online styles]
+(defview chat-icon-view [chat-id group-chat name online styles & [hide-dapp?]]
   [photo-path [:chat-photo chat-id]
    dapp? [:get-in [:contacts chat-id :dapp?]]]
   [view (:container styles)
    (if-not (s/blank? photo-path)
      [chat-icon photo-path styles]
      [default-chat-icon name styles])
-   (when dapp?
+   (when (and dapp? (not hide-dapp?))
      [dapp-badge styles])
    [pending-contact-badge chat-id styles]])
 
@@ -81,17 +81,14 @@
 (defn chat-icon-view-action [chat-id group-chat name color online]
   ^{:key chat-id}
   [chat-icon-view chat-id group-chat name online
-   {:container              st/container
+   {:container              st/container-chat-list
     :online-view-wrapper    st/online-view-wrapper
     :online-view            st/online-view
     :online-dot-left        st/online-dot-left
     :online-dot-right       st/online-dot-right
-    :pending-wrapper        st/pending-wrapper
+    :size                   40
-    :pending-outer-circle   st/pending-outer-circle
+    :chat-icon              st/chat-icon-chat-list
-    :pending-inner-circle   st/pending-inner-circle
+    :default-chat-icon      (st/default-chat-icon-chat-list default-chat-color)
-    :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}])
 
 (defn chat-icon-view-menu-item [chat-id group-chat name color online]
@@ -108,7 +105,8 @@
     :size                   24
     :chat-icon              st/chat-icon-menu-item
     :default-chat-icon      (st/default-chat-icon-view-action color)
-    :default-chat-icon-text st/default-chat-icon-text}])
+    :default-chat-icon-text st/default-chat-icon-text}
+   true])
 
 (defn chat-icon-message-status [chat-id group-chat name color online]
   ^{:key chat-id}

src/status_im/components/chat_icon/styles.cljs

@@ -177,8 +177,8 @@
    :height 40})
 
 (def container-menu-item
-  {:width  32
+  {:width  24
-   :height 32})
+   :height 24})
 
 (def container-profile
   {:width  72

src/status_im/components/toolbar_new/styles.cljs

@@ -22,27 +22,29 @@
   {:backgroundColor (or background-color toolbar-background1)
    :elevation       2})
 
-(def toolbar
+(defstyle toolbar
-  (merge {:flex-direction :row}
+  {:flex-direction     :row
-         (get-in p/platform-specific [:component-styles :toolbar-new])))
+   :align-items        :center
+   :android            {:height 55}
+   :ios                {:height 56}})
 
 (defnstyle toolbar-nav-actions-container
   [actions]
   {:flex-direction :row
+   :margin-left    16
    :ios            {:width (when (and actions (pos? (count actions)))
                              (-> (+ toolbar-icon-width toolbar-icon-spacing)
                                  (* (count actions))))}})
 
-(def toolbar-title-container
+(defstyle toolbar-title-container
-  (merge (get-in p/platform-specific [:component-styles :toolbar-title-container])
+  {:flex       1
-         {:flex           1
+   :android    {:padding-left 30}
-          :align-self     :stretch}))
+   :ios        {:align-items  :center}})
 
 (defstyle toolbar-title-text
   {:color          text1-color
    :letter-spacing -0.2
-   :font-size      17
+   :font-size      17})
-   :ios            {:padding-top 2}})
 
 (def toolbar-border-container
   (get-in p/platform-specific [:component-styles :toolbar-border-container]))
@@ -52,6 +54,7 @@
 
 (defn toolbar-actions-container [actions-count custom]
   (merge {:flex-direction :row}
+         (when-not custom {:margin-right 16})
          (when (and (zero? actions-count) (not custom))
            {:width (+ toolbar-icon-width toolbar-icon-spacing)})))
 
@@ -65,21 +68,23 @@
 (def toolbar-with-search
   {:background-color toolbar-background1})
 
-(def toolbar-with-search-content
+(defstyle toolbar-with-search-content
-  (merge (get-in p/platform-specific [:component-styles :toolbar-with-search-content])
+  {:flex    1
-         {:flex 1}))
+   :android {:padding-left 30}
-
+   :ios     {:align-items :center}})
-(def toolbar-search-input
-  (merge {:line-height         24
-          :height              24
-          :font-size           17
-          :padding-top         0
-          :padding-left        0
-          :padding-bottom      0
-          :text-align-vertical :center
-          :color               color-black}
-         (get-in p/platform-specific [:component-styles :toolbar-search-input])))
 
+(defstyle toolbar-search-input
+  {:line-height         24
+   :height              24
+   :font-size           17
+   :padding-top         0
+   :padding-left        0
+   :padding-bottom      0
+   :text-align-vertical :center
+   :color               color-black
+   :ios                 {:padding-left   8
+                         :padding-top    2
+                         :letter-spacing -0.2}})
 
 (def action-default
   {:width  24

src/status_im/ios/platform.cljs

@@ -16,14 +16,6 @@
                            :modal       {:height    20
                                          :bar-style "light-content"
                                          :color     "#2f3031"}}
-   :toolbar               {:border-bottom-color styles/color-gray3
-                           :border-bottom-width 0.5}
-   :toolbar-new           {:height              56
-                           :padding-top         18
-                           :padding-left        16
-                           :padding-right       16}
-   :toolbar-title-container {:align-items    :center}
-   :toolbar-with-search-content {:align-items  :center}
    :sized-text            {:margin-top        -5
                            :additional-height 5}
    :actions-list-view     {:border-bottom-color styles/color-gray3
@@ -65,9 +57,6 @@
    :bottom-gradient       {:height 1}
    :input-label           {:left 0}
    :input-error-text      {:margin-left 0}
-   :toolbar-search-input  {:padding-left   8
-                           :padding-top    2
-                           :letter-spacing -0.2}
    :toolbar-nav-action    {:width           46
                            :height          56
                            :align-items     :center
@@ -120,5 +109,4 @@
    :group-block-shadows?         false
    :discover                     {:uppercase-subtitles? true}
    :public-group-icon-container  {:margin-top 2}
-   :private-group-icon-container {:margin-top 2}
+   :private-group-icon-container {:margin-top 2}})
-   :public-group-chat-hash-style {:top 6 :left 3}})

src/status_im/new_group/styles.cljs

@@ -33,7 +33,11 @@
    :android {:padding-top 16}})
 
 (def chat-name-container
-  {:margin-top  10})
+  {:padding-left 16
+   :margin-top   10})
+
+(def group-name-container
+  {:margin-top 10})
 
 (def add-button-container
   {:margin-left 16})
@@ -44,20 +48,22 @@
    :letter-spacing -0.2
    :color          text1-color})
 
-(def group-chat-topic-input
+(defstyle group-chat-topic-input
-  {:font-size    14
+  {:font-size      14
-   :color        text1-color
+   :line-height    16
-   :padding-left 13})
+   :color          text1-color
+   :padding-left   13
+   :ios            {:padding-bottom 0}})
+
+(defstyle topic-hash-style
+  {:width    10
+   :position :absolute
+   :android  {:top 8 :left 3}
+   :ios      {:top 6 :left 3}})
 
 (def topic-hash
   (merge group-chat-name-input
-         {:width    10
+         topic-hash-style))
-          :height   16
-          :position :absolute}
-         (get-in platform-specific [:public-group-chat-hash-style])))
-
-(def group-chat-focus-line-height
-  (get-in platform-specific [:component-styles :text-field-focus-line-height]))
 
 (def group-chat-name-wrapper
   {:padding-top    0

src/status_im/new_group/views/group.cljs

@@ -30,7 +30,7 @@
 
 (defview group-name-view []
   [new-group-name [:get :new-chat-name]]
-  [view st/chat-name-container
+  [view st/group-name-container
    [text-input-with-label
     {:auto-focus        true
      :label             (label :t/name)

src/status_im/profile/qr_code/screen.cljs

@@ -3,6 +3,7 @@
   (:require [status-im.components.react :refer [view
                                                 text
                                                 image
+                                                icon
                                                 touchable-highlight
                                                 get-dimensions]]
             [status-im.components.status-bar :refer [status-bar]]
@@ -31,8 +32,7 @@
      [view st/online-container
       [touchable-highlight {:onPress #(dispatch [:navigate-back])}
        [view st/online-image-container
-        [image {:source {:uri :icon_close_white}
+        [icon :close_white]]]]]]
-                :style  icon-close}]]]]]]
    [view {:style     st/qr-code
           :on-layout #(let [layout (.. % -nativeEvent -layout)]
                         (dispatch [:set-in [:qr-modal :dimensions] {:width  (.-width layout)

src/status_im/transactions/styles/screens.cljs

@@ -12,11 +12,9 @@
 (defstyle toolbar-title-container
   {:flex           1
    :flex-direction :row
-   :align-self     :stretch
    :padding-left   30
    :ios            {:align-items     :center
-                    :justify-content :center
+                    :justify-content :center}})
-                    :padding-bottom  16}})
 
 (def toolbar-title-text
   {:color     common/color-white