Refactor: replace global platform-specific styles with local styles

src/status_im/android/platform.cljs

@@ -1,71 +1,5 @@
 (ns status-im.android.platform
-  (:require [status-im.ui.components.styles :as styles]
+  (:require [status-im.react-native.js-dependencies :as rn-dependencies]))
-            [status-im.react-native.js-dependencies :as rn-dependencies]))
-
-;; DEPRECATION NOTICE
-;;
-;; NOTE(oskarth): These component-styles are legacy and should be removed,
-;; please don't add or modify these styles. Instead, use defstyle macro to
-;; inline platform-specific styles in the appropriate namespace
-
-(def component-styles
-  {:status-bar            {:default     {:height       25
-                                         :bar-style    "dark-content"
-                                         :elevation    2
-                                         :translucent? true
-                                         :color        styles/color-white}
-                           :main        {:height            25
-                                         :bar-style         "dark-content"
-                                         :translucent?      true
-                                         :color             styles/color-white
-                                         :expandable-offset 3}
-                           :transparent {:height       25
-                                         :bar-style    "light-content"
-                                         :translucent? true
-                                         :color        styles/color-transparent}
-                           :modal       {:height       0
-                                         :bar-style    "light-content"
-                                         :color        styles/color-black}
-                           ;;TODO because this bug in RN https://github.com/facebook/react-native/issues/7474
-                           :modal-white {:height       0
-                                         :bar-style    "light-content"
-                                         :color        styles/color-black}
-                           ;;TODO because this bug in RN https://github.com/facebook/react-native/issues/7474
-                           :modal-wallet {:height       0
-                                          :bar-style    "light-content"
-                                          :color        styles/color-black}
-                           :transaction {:height       0
-                                         :bar-style    "light-content"
-                                         :color        styles/color-dark-blue-2}
-                           :wallet      {:height       25
-                                         :bar-style    "light-content"
-                                         :translucent? true
-                                         :color        styles/color-blue5}}
-   :sized-text            {:margin-top        0
-                           :additional-height 0}
-   :chat                  {:new-message {:border-top-color styles/color-transparent
-                                         :border-top-width 0.5}}
-   :discover              {:subtitle {:color     styles/color-gray2
-                                      :font-size 14}
-                           :popular  {:border-radius 4
-                                      :margin-top    2
-                                      :margin-bottom 4
-                                      :margin-right  2}
-                           :tag      {:flex-direction   "column"
-                                      :background-color "#7099e619"
-                                      :border-radius    5
-                                      :padding          4}
-                           :item     {:status-text {:line-height 22
-                                                    :font-size   16}}}
-   :contacts              {:show-all-text-font :medium}
-   :bottom-gradient       {:height 3}
-   :input-label           {:left 4}
-   :input-error-text      {:margin-left 4}
-   :toolbar-nav-action    {:width           56
-                           :height          56
-                           :align-items     :center
-                           :justify-content :center}
-   :text-field-focus-line-height 2})
 
 (def fonts
   {:light         {:font-family "Roboto-Light"}
@@ -88,8 +22,7 @@
 ;; Structure to be exported
 
 (def platform-specific
-  {:component-styles             component-styles
+  {:fonts                        fonts
-   :fonts                        fonts
    :list-selection-fn            show-dialog
    :tabs                         {:tab-shadows? true}
    :chats                        {:action-button?       true
@@ -100,5 +33,4 @@
                                   :new-contact-in-toolbar? false}
    :group-block-shadows?         true
    :discover                     {:uppercase-subtitles? false}
-   :public-group-icon-container  {:margin-top 4}
+   :status-bar-default-height    25})
-   :private-group-icon-container {:margin-top 6}})

src/status_im/chat/new_chat/view.cljs

@@ -8,7 +8,7 @@
             [status-im.ui.components.action-button.styles :refer [actions-list]]
             [status-im.ui.components.react :refer [view text list-view list-item]]
             [status-im.ui.components.contact.contact :refer [contact-view]]
-            [status-im.ui.components.status-bar :refer [status-bar]]
+            [status-im.ui.components.status-bar.view :refer [status-bar]]
             [status-im.ui.components.toolbar.view :refer [toolbar-with-search]]
             [status-im.ui.components.drawer.view :refer [drawer-view]]
             [status-im.chat.new-chat.styles :as styles]

src/status_im/chat/new_public_chat/view.cljs

@@ -5,7 +5,7 @@
             [status-im.ui.components.react :as react :refer [text]]
             [status-im.ui.components.text-field.view :refer [text-field]]
             [status-im.ui.components.styles :as components.styles]
-            [status-im.ui.components.status-bar :refer [status-bar]]
+            [status-im.ui.components.status-bar.view :refer [status-bar]]
             [status-im.ui.components.toolbar.view :as toolbar]
             [status-im.chat.new-public-chat.styles :as styles]
             [status-im.chat.new-public-chat.db :as v]

src/status_im/chat/screen.cljs

@@ -3,7 +3,7 @@
   (:require [re-frame.core :as re-frame]
             [status-im.ui.components.react :as react]
             [status-im.ui.components.icons.vector-icons :as vector-icons]
-            [status-im.ui.components.status-bar :as status-bar]
+            [status-im.ui.components.status-bar.view :as status-bar]
             [status-im.ui.components.chat-icon.screen :as chat-icon-screen]
             [status-im.chat.styles.screen :as style]
             [status-im.utils.listview :as listview]
@@ -16,7 +16,7 @@
             [status-im.chat.views.message.datemark :as message-datemark]
             [status-im.chat.views.input.input :as input]
             [status-im.chat.views.actions :as actions]
-            [status-im.chat.views.bottom-info :as bottom-info] 
+            [status-im.chat.views.bottom-info :as bottom-info]
             [status-im.i18n :as i18n]
             [status-im.ui.components.animation :as anim]
             [status-im.ui.components.sync-state.offline :as offline]
@@ -106,5 +106,4 @@
        [actions/actions-view])
      (when show-bottom-info?
        [bottom-info/bottom-info-view])
-     [offline/offline-view {:top (get-in platform/platform-specific
+     [offline/offline-view {:top (get platform/platform-specific :status-bar-default-height)}]]))
-                                         [:component-styles :status-bar :default :height])}]]))

src/status_im/chat/styles/screen.cljs

@@ -200,3 +200,7 @@
   {:text-align          :center
    :text-align-vertical :center
    :color               :#7099e6})
+
+(defstyle actions-list-view
+  {:ios {:border-bottom-color component.styles/color-gray3
+         :border-bottom-width 0.5}})

src/status_im/chat/views/actions.cljs

@@ -116,13 +116,13 @@
             chat-id           [:chat :chat-id]
             public?           [:chat :public?]
             members           [:current-chat-contacts]
-            status-bar-height (get-in platform/platform-specific [:component-styles :status-bar :default :height])]
+            status-bar-height (get platform/platform-specific :status-bar-default-height)]
     (when-let [actions (if group-chat
                          (group-chat-items members public?)
                          (user-chat-items chat-id))]
       [react/view (merge
                    (styles/actions-wrapper status-bar-height)
-                   (get-in platform/platform-specific [:component-styles :actions-list-view]))
+                   styles/actions-list-view)
        [react/view styles/actions-separator]
        [react/view styles/actions-view
         (for [action actions]

src/status_im/chat/views/input/animations/responder.cljs

@@ -12,7 +12,7 @@
   (> (Math/abs (.-dy gesture)) 10))
 
 (defn on-move [response-height layout-height]
-  (let [margin-top (+ (get-in p/platform-specific [:component-styles :status-bar :main :height])
+  (let [margin-top (+ (get p/platform-specific :status-bar-default-height)
                       (/ (:height toolbar-st/toolbar) 2))]
     (fn [_ gesture]
       (when (enough-dy gesture)

src/status_im/chat/views/input/utils.cljs

@@ -7,13 +7,13 @@
 (def default-height 300)
 
 (defn default-container-area-height [bottom screen-height]
-  (let [status-bar-height (get-in p/platform-specific [:component-styles :status-bar :main :height])]
+  (let [status-bar-height (get p/platform-specific :status-bar-default-height)]
     (if (> (+ bottom default-height status-bar-height) screen-height)
       (- screen-height bottom status-bar-height)
       default-height)))
 
 (defn max-container-area-height [bottom screen-height]
-  (let [status-bar-height (get-in p/platform-specific [:component-styles :status-bar :main :height])
+  (let [status-bar-height (get p/platform-specific :status-bar-default-height)
         toolbar-height (:height toolbar-st/toolbar)
         margin-top (+ status-bar-height (/ toolbar-height 2))]
     (- screen-height bottom margin-top)))

src/status_im/chat/views/toolbar_content.cljs

@@ -52,8 +52,7 @@
     [last-activity {:sync-state sync-state}]
     (if public?
       [view {:flex-direction :row}
-       [text {:style (get-in platform-specific [:component-styles :toolbar-last-activity])}
+       [text (label :t/public-group-status)]]
-        (label :t/public-group-status)]]
       [view {:flex-direction :row}
        [text {:style st/members}
         (if public?

src/status_im/ios/platform.cljs

@@ -1,79 +1,8 @@
 (ns status-im.ios.platform
-  (:require [status-im.ui.components.styles :as styles]
+  (:require [status-im.i18n :refer [label]]
-            [status-im.i18n :refer [label]]
             [status-im.utils.utils :as utils]
             [status-im.react-native.js-dependencies :as rn-dependencies]))
 
-;; DEPRECATION NOTICE
-;;
-;; NOTE(oskarth): These component-styles are legacy and should be removed,
-;; please don't add or modify these styles. Instead, use defstyle macro to
-;; inline platform-specific styles in the appropriate namespace
-
-(def component-styles
-  {:status-bar            {:default     {:height    20
-                                         :bar-style "default"
-                                         :color     styles/color-white}
-                           :main        {:height            20
-                                         :bar-style         "default"
-                                         :color             styles/color-white
-                                         :expandable-offset 8}
-                           :transparent {:height    20
-                                         :bar-style "light-content"
-                                         :color     styles/color-transparent}
-                           :modal       {:height    20
-                                         :bar-style "light-content"
-                                         :color     "#2f3031"}
-                           :modal-white {:height    20
-                                         :bar-style "default"
-                                         :color     styles/color-white}
-                           :transaction {:height    20
-                                         :bar-style "light-content"
-                                         :color     styles/color-transparent}
-                           :modal-wallet {:height    20
-                                          :bar-style "light-content"
-                                          :color     styles/color-blue4}
-                           :wallet      {:height    20
-                                         :bar-style "light-content"
-                                         :color     styles/color-blue4}}
-   :sized-text            {:margin-top        -5
-                           :additional-height 5}
-   :actions-list-view     {:border-bottom-color styles/color-gray3
-                           :border-bottom-width 0.5}
-   :chat                  {:new-message {:border-top-color styles/color-gray3
-                                         :border-top-width 0.5}}
-   :discover             {:subtitle  {:color          styles/color-steel
-                                      :font-size      13
-                                      :letter-spacing 1}
-                           :popular  {:border-radius 3
-                                      :border-width  1
-                                      :border-color  "#D7D7D7"}
-                           :tag      {:flex-direction   "column"
-                                      :background-color "rgb(227, 235, 250)"
-                                      :border-radius    4
-                                      :border-width     1
-                                      :border-color     "rgba(112, 153, 230, 0.31)"
-                                      :padding          6}
-                           :item     {:status-text {:color          styles/color-steel
-                                                    :font-size      14
-                                                    :letter-spacing -0.1}
-                                      :icon        {:padding-top     0
-                                                    :bottom          -4
-                                                    :justify-content :flex-end}}}
-   :contacts              {:show-all-text-font :default}
-   :bottom-gradient       {:height 1}
-   :input-label           {:left 0}
-   :input-error-text      {:margin-left 0}
-   :toolbar-nav-action    {:width           46
-                           :height          56
-                           :align-items     :center
-                           :justify-content :center}
-   :toolbar-border-container {:background-color styles/color-white}
-   :toolbar-border        {:height           1
-                           :background-color styles/color-gray5
-                           :opacity          0.5}
-   :text-field-focus-line-height 1})
-
 (def fonts
   {:light         {:font-family "SFUIText-Light"}
    :default       {:font-family "SFUIText-Regular"}
@@ -101,8 +30,7 @@
 ;; Structure to be exported
 
 (def platform-specific
-  {:component-styles             component-styles
+  {:fonts                        fonts
-   :fonts                        fonts
    :list-selection-fn            show-action-sheet
    :tabs                         {:tab-shadows? false}
    :chats                        {:action-button?       false
@@ -113,5 +41,4 @@
                                   :new-contact-in-toolbar? true}
    :group-block-shadows?         false
    :discover                     {:uppercase-subtitles? true}
-   :public-group-icon-container  {:margin-top 2}
+   :status-bar-default-height    20})
-   :private-group-icon-container {:margin-top 2}})

src/status_im/ui/components/chat_icon/styles.cljs

@@ -1,7 +1,6 @@
 (ns status-im.ui.components.chat-icon.styles
   (:require [status-im.ui.components.styles :refer [color-white
-                                                    online-color]]
+                                                    online-color]]))
-            [status-im.utils.platform :as p]))
 
 (defn default-chat-icon [color]
   {:margin          0
@@ -257,7 +256,5 @@
    :justify-content :center})
 
 (def profile-icon-edit-text
-  (merge (get-in p/platform-specific [:component-styles :profile :profile-icon-edit-text])
+  {:color            :white
-         {:color            :white
+   :background-color :transparent})
-          :background-color :transparent}))
-

src/status_im/ui/components/status_bar.cljs

@@ -1,18 +0,0 @@
-(ns status-im.ui.components.status-bar
-  (:require [status-im.ui.components.react :as ui]
-            [status-im.utils.platform :refer [platform-specific]]))
-
-(defn status-bar [{type :type
-                   :or  {type :default}}]
-  (let [{:keys [height
-                bar-style
-                elevation
-                translucent?
-                color]} (get-in platform-specific [:component-styles :status-bar type])]
-    [ui/view
-     [ui/status-bar {:background-color (if translucent? "transparent" color)
-                     :translucent      translucent?
-                     :bar-style        bar-style}]
-     [ui/view {:style {:height           height
-                       :elevation        elevation
-                       :background-color color}}]]))

src/status_im/ui/components/status_bar/styles.cljs

@@ -0,0 +1,96 @@
+(ns status-im.ui.components.status-bar.styles
+  (:require [status-im.ui.components.styles :as styles]
+            [status-im.utils.platform :as platform])
+  (:require-macros [status-im.utils.styles :refer [defstyle]]))
+
+(defn- create-status-bar-style [{:keys [background-color bar-style translucent?]
+                                 :or   {bar-style "light-content"}}]
+  {:background-color (if translucent? "transparent" background-color)
+   :translucent      translucent?
+   :bar-style        bar-style})
+
+(defn- create-view-style [{:keys [background-color height elevation]
+                           :or   {height (get platform/platform-specific :status-bar-default-height)}}]
+  {:background-color background-color
+   :elevation        elevation
+   :height           height})
+
+;; :main
+(defstyle status-bar-main
+  {:ios     (create-status-bar-style {:background-color styles/color-white
+                                      :bar-style        "default"})
+   :android (create-status-bar-style {:translucent?     true
+                                      :bar-style        "dark-content"})})
+
+(def view-main
+  (create-view-style {:background-color styles/color-white}))
+
+;; :transparent
+(defstyle status-bar-transparent
+  {:ios     (create-status-bar-style {:background-color styles/color-transparent})
+   :android (create-status-bar-style {:translucent?     true})})
+
+(def view-transparent
+  (create-view-style {:background-color styles/color-transparent}))
+
+;; :modal
+(defstyle status-bar-modal
+  {:ios     (create-status-bar-style {:background-color "#2f3031"})
+   :android (create-status-bar-style {:background-color styles/color-black})})
+
+(defstyle view-modal
+  {:ios     (create-view-style {:background-color "#2f3031"})
+   :android (create-view-style {:background-color styles/color-black
+                                :height           0})})
+
+;; :modal-white
+(defstyle status-bar-modal-white
+  {:ios     (create-status-bar-style {:background-color styles/color-white
+                                      :bar-style        "default"})
+   :android (create-status-bar-style {:background-color styles/color-black
+                                      :bar-style        "light-content"})})
+
+(defstyle view-modal-white
+  {:ios     (create-view-style {:background-color styles/color-white})
+   :android (create-view-style {:background-color styles/color-black
+                                :height           0})})
+
+;; :modal-wallet
+(defstyle status-bar-modal-wallet
+  {:ios     (create-status-bar-style {:background-color styles/color-blue4})
+   :android (create-status-bar-style {:background-color styles/color-black})})
+
+(defstyle view-model-wallet
+  {:ios     (create-view-style {:background-color styles/color-blue4})
+   :android (create-view-style {:background-color styles/color-black
+                                :height           0})})
+
+;; :transaction
+(defstyle status-bar-transaction
+  {:ios     (create-status-bar-style {:background-color styles/color-transparent})
+   :android (create-status-bar-style {:background-color styles/color-dark-blue-2})})
+
+(defstyle view-transaction
+  {:ios     (create-view-style {:background-color styles/color-transparent})
+   :android (create-view-style {:background-color styles/color-dark-blue-2
+                                :height           0})})
+
+;; :wallet
+(defstyle status-bar-wallet
+  {:ios     (create-status-bar-style {:background-color styles/color-blue4})
+   :android (create-status-bar-style {:translucent?     true})})
+
+(defstyle view-wallet
+  {:ios     (create-view-style {:background-color styles/color-blue4})
+   :android (create-view-style {:background-color styles/color-blue5})})
+
+;; :default
+(defstyle status-bar-default
+  {:ios     (create-status-bar-style {:background-color styles/color-white
+                                      :bar-style        "default"})
+   :android (create-status-bar-style {:translucent?     true
+                                      :bar-style        "dark-content"})})
+
+(defstyle view-default
+  (create-view-style {:background-color styles/color-white
+                      :elevation        2}))

src/status_im/ui/components/status_bar/view.cljs

@@ -0,0 +1,18 @@
+(ns status-im.ui.components.status-bar.view
+  (:require [status-im.ui.components.react :as ui]
+            [status-im.ui.components.status-bar.styles :as styles]))
+
+(defn status-bar [{type :type}]
+  (let [[status-bar-style view-style]
+        (case type
+          :main         [styles/status-bar-main styles/view-main]
+          :transparent  [styles/status-bar-transparent styles/view-transparent]
+          :modal        [styles/status-bar-modal styles/view-modal]
+          :modal-white  [styles/status-bar-modal-white styles/view-modal-white]
+          :modal-wallet [styles/status-bar-modal-wallet styles/view-model-wallet]
+          :transaction  [styles/status-bar-transaction styles/view-transaction]
+          :wallet       [styles/status-bar-wallet styles/view-wallet]
+          [styles/status-bar-default styles/view-default])]
+    [ui/view
+     [ui/status-bar status-bar-style]
+     [ui/view {:style view-style}]]))

src/status_im/ui/components/text_field/styles.cljs

@@ -1,6 +1,5 @@
 (ns status-im.ui.components.text-field.styles
-  (:require [status-im.utils.platform :refer [platform-specific]]))
+  (:require-macros [status-im.utils.styles :refer [defnstyle]]))
-
 
 (def text-field-container
   {:position       :relative
@@ -15,14 +14,14 @@
    :padding-bottom      5
    :text-align-vertical :top})
 
-(defn label [top font-size color]
+(defnstyle label [top font-size color]
-  (let [input-label-style (get-in platform-specific [:component-styles :input-label])]
+  {:position         :absolute
-    (merge input-label-style
+   :top              top
-           {:position         :absolute
+   :color            color
-            :top              top
+   :font-size        font-size
-            :color            color
+   :background-color :transparent
-            :font-size        font-size
+   :ios              {:left 0}
-            :background-color :transparent})))
+   :android          {:left 4}})
 
 (def label-float
   {})
@@ -36,10 +35,10 @@
    :height           height
    :width            width})
 
-(defn error-text [color]
+(defnstyle error-text [color]
-  (let [input-error-text-style (get-in platform-specific [:component-styles :input-error-text])]
+  {:color            color
-    (merge input-error-text-style
+   :background-color :transparent
-           {:color            color
+   :font-size        12
-            :background-color :transparent
+   :line-height      20
-            :font-size        12
+   :ios              {:margin-left 0}
-            :line-height      20})))
+   :android          {:margin-left 4}})

src/status_im/ui/components/toolbar/styles.cljs

@@ -1,7 +1,6 @@
 (ns status-im.ui.components.toolbar.styles
   (:require-macros [status-im.utils.styles :refer [defstyle defnstyle]])
-  (:require [status-im.ui.components.styles :as styles]
+  (:require [status-im.ui.components.styles :as styles]))
-            [status-im.utils.platform :as p]))
 
 (def toolbar-background1 styles/color-white)
 
@@ -41,11 +40,13 @@
    :font-size      17
    :ios            {:text-align "center"}})
 
-(def toolbar-border-container
+(defstyle toolbar-border-container
-  (get-in p/platform-specific [:component-styles :toolbar-border-container]))
+  {:ios {:background-color styles/color-white}})
 
-(def toolbar-border
+(defstyle toolbar-border
-  (get-in p/platform-specific [:component-styles :toolbar-border]))
+  {:ios {:height           1
+         :background-color styles/color-gray5
+         :opacity          0.5}})
 
 (def toolbar-actions
   {:flex           0

src/status_im/ui/screens/accounts/login/views.cljs

@@ -5,7 +5,7 @@
             [status-im.ui.screens.accounts.styles :as ast]
             [status-im.ui.screens.accounts.views :refer [account-badge]]
             [status-im.ui.components.text-input-with-label.view :refer [text-input-with-label]]
-            [status-im.ui.components.status-bar :refer [status-bar]]
+            [status-im.ui.components.status-bar.view :refer [status-bar]]
             [status-im.ui.components.toolbar.view :as toolbar]
             [status-im.ui.components.toolbar.actions :as act]
             [status-im.ui.screens.accounts.login.styles :as st]

src/status_im/ui/screens/accounts/recover/views.cljs

@@ -8,7 +8,7 @@
                                                    keyboard-avoiding-view
                                                    touchable-highlight]]
             [status-im.ui.components.sticky-button :refer [sticky-button]]
-            [status-im.ui.components.status-bar :refer [status-bar]]
+            [status-im.ui.components.status-bar.view :refer [status-bar]]
             [status-im.ui.components.toolbar.view :as toolbar]
             [status-im.ui.components.toolbar.actions :as act]
             [status-im.i18n :as i18n]

src/status_im/ui/screens/accounts/views.cljs

@@ -1,8 +1,8 @@
 (ns status-im.ui.screens.accounts.views
   (:require-macros [status-im.utils.views :refer [defview]])
   (:require [re-frame.core :refer [dispatch dispatch-sync]]
-            [status-im.ui.screens.accounts.styles :as st] 
+            [status-im.ui.screens.accounts.styles :as st]
-            [status-im.ui.components.status-bar :refer [status-bar]]
+            [status-im.ui.components.status-bar.view :refer [status-bar]]
             [status-im.ui.components.toolbar.actions :as act]
             [status-im.ui.components.common.common :as common]
             [status-im.ui.components.action-button.action-button :refer [action-button]]

src/status_im/ui/screens/chats_list/styles.cljs

@@ -1,12 +1,10 @@
 (ns status-im.ui.screens.chats-list.styles
   (:require-macros [status-im.utils.styles :refer [defstyle defnstyle]])
   (:require [status-im.ui.components.styles :as component.styles]
-            [status-im.ui.components.tabs.styles :as tabs-st]
+            [status-im.ui.components.tabs.styles :as tabs-st]))
-            [status-im.utils.platform :as p]))
 
 (defn toolbar []
-  (merge {:background-color component.styles/color-white}
+  {:background-color component.styles/color-white})
-         (get-in p/platform-specific [:component-styles :toolbar])))
 
 (def chat-separator-item
   {:border-bottom-width 1

src/status_im/ui/screens/chats_list/views.cljs

@@ -7,7 +7,7 @@
             [status-im.ui.components.native-action-button :refer [native-action-button]]
             [status-im.ui.components.drawer.view :as drawer]
             [status-im.ui.components.styles :refer [color-blue]]
-            [status-im.ui.components.status-bar :refer [status-bar]]
+            [status-im.ui.components.status-bar.view :refer [status-bar]]
             [status-im.ui.components.toolbar.view :as toolbar]
             [status-im.ui.components.toolbar.actions :as act]
             [status-im.ui.components.toolbar.styles :as tst]

src/status_im/ui/screens/contacts/contact_list/views.cljs

@@ -5,7 +5,7 @@
             [status-im.ui.components.contact.contact :refer [contact-view]]
             [status-im.ui.screens.contacts.views :refer [contact-options]]
             [status-im.ui.components.react :refer [view list-view list-item]]
-            [status-im.ui.components.status-bar :refer [status-bar]]
+            [status-im.ui.components.status-bar.view :refer [status-bar]]
             [status-im.ui.components.toolbar.view :as toolbar]
             [status-im.ui.components.toolbar.actions :as act]
             [status-im.ui.components.drawer.view :refer [drawer-view]]
@@ -66,4 +66,3 @@
          [contact-list-toolbar-edit group]
          [contact-list-toolbar group])]
       [contacts-list-view group edit?]]]))
-

src/status_im/ui/screens/contacts/contact_list_modal/views.cljs

@@ -8,7 +8,7 @@
             [status-im.ui.components.action-button.action-button :refer [action-button
                                                                          action-separator]]
             [status-im.ui.components.action-button.styles :refer [actions-list]]
-            [status-im.ui.components.status-bar :refer [status-bar]]
+            [status-im.ui.components.status-bar.view :refer [status-bar]]
             [status-im.ui.components.toolbar.view :refer [toolbar-with-search]]
             [status-im.ui.components.drawer.view :refer [drawer-view]]
             [status-im.ui.screens.contacts.styles :as st]

src/status_im/ui/screens/contacts/new_contact/views.cljs

@@ -5,7 +5,7 @@
             [cljs.spec.alpha :as s]
             [status-im.ui.components.react :as react]
             [status-im.ui.components.text-field.view :as text-field]
-            [status-im.ui.components.status-bar :as status-bar]
+            [status-im.ui.components.status-bar.view :as status-bar]
             [status-im.ui.components.toolbar.view :as toolbar]
             [status-im.ui.components.styles :as components.styles :refer [icon-ok button-input-container button-input color-blue]]
             [status-im.ui.components.image-button.view :as scan-button]
@@ -67,7 +67,7 @@
             account [:get-current-account]]
     [react/view st/contact-form-container
      [status-bar/status-bar]
-     [toolbar/toolbar {:style (get-in platform/platform-specific [:component-styles :toolbar])}
+     [toolbar/toolbar {}
       toolbar/default-nav-back
       [toolbar/content-title (i18n/label :t/add-new-contact)]
       [toolbar/actions (toolbar-actions new-contact-identity account error)]]

src/status_im/ui/screens/contacts/views.cljs

@@ -92,7 +92,7 @@
           [view
            [text {:style      st/show-all-text
                   :uppercase? (get-in platform-specific [:uppercase?])
-                  :font       (get-in platform-specific [:component-styles :contacts :show-all-text-font])}
+                  :font       (if ios? :default :medium)}
             (str (- contacts-count contacts-limit) " " (label :t/more))]]]]])
      [common/bottom-shadow]]))
 

src/status_im/ui/screens/group/add_contacts/views.cljs

@@ -4,7 +4,7 @@
             [status-im.ui.components.renderers.renderers :as renderers]
             [status-im.ui.components.react :as react]
             [status-im.ui.components.sticky-button :refer [sticky-button]]
-            [status-im.ui.components.status-bar :refer [status-bar]]
+            [status-im.ui.components.status-bar.view :refer [status-bar]]
             [status-im.ui.components.toolbar.view :refer [toolbar-with-search]]
             [status-im.utils.listview :refer [to-datasource]]
             [status-im.ui.screens.group.styles :as styles]

src/status_im/ui/screens/group/edit_contacts/views.cljs

@@ -4,7 +4,7 @@
             [status-im.ui.components.contact.contact :refer [contact-view]]
             [status-im.ui.components.renderers.renderers :as renderers]
             [status-im.ui.components.react :refer [view list-view list-item]]
-            [status-im.ui.components.status-bar :refer [status-bar]]
+            [status-im.ui.components.status-bar.view :refer [status-bar]]
             [status-im.ui.components.toolbar.view :refer [toolbar-with-search]]
             [status-im.utils.listview :refer [to-datasource]]
             [status-im.ui.screens.group.styles :as styles]

src/status_im/ui/screens/group/reorder/views.cljs

@@ -5,7 +5,7 @@
             [status-im.ui.components.react :refer [view text list-item]]
             [status-im.ui.components.icons.vector-icons :as vi]
             [status-im.ui.components.sticky-button :refer [sticky-button]]
-            [status-im.ui.components.status-bar :refer [status-bar]]
+            [status-im.ui.components.status-bar.view :refer [status-bar]]
             [status-im.ui.components.toolbar.view :as toolbar]
             [status-im.ui.components.sortable-list-view :refer [sortable-list-view sortable-item]]
             [status-im.ui.components.common.common :as common]

src/status_im/ui/screens/group/views.cljs

@@ -8,9 +8,9 @@
                                                    keyboard-avoiding-view list-view list-item]]
             [status-im.ui.components.icons.vector-icons :as vi]
             [status-im.ui.components.text-input-with-label.view :refer [text-input-with-label]]
-            [status-im.ui.components.status-bar :refer [status-bar]]
+            [status-im.ui.components.status-bar.view :refer [status-bar]]
             [status-im.ui.components.toolbar.view :as toolbar]
-            [status-im.utils.platform :refer [platform-specific]]
+            [status-im.utils.platform :refer [platform-specific ios?]]
             [status-im.ui.components.sticky-button :refer [sticky-button]]
             [status-im.utils.listview :refer [to-datasource]]
             [status-im.ui.components.renderers.renderers :as renderers]
@@ -89,7 +89,7 @@
      [view
       [text {:style cstyles/show-all-text
              :uppercase? (get-in platform-specific [:uppercase?])
-             :font (get-in platform-specific [:component-styles :contacts :show-all-text-font])}
+             :font (if ios? :default :medium)}
        (str (- contacts-count contacts-limit) " " (label :t/more))]]]]])
 
 (def ^:const contacts-limit 3)
@@ -168,4 +168,3 @@
                (dispatch [:navigate-to-clean :contact-list]))
             #(dispatch [:create-new-group-chat-and-open group-name]))
           true])])))
-

src/status_im/ui/screens/main_tabs/views.cljs

@@ -2,7 +2,7 @@
   (:require [status-im.ui.components.drawer.view :refer [drawer-view]]
             [status-im.ui.components.icons.vector-icons :as vector-icons]
             [status-im.ui.components.react :as react]
-            [status-im.ui.components.status-bar :refer [status-bar]]
+            [status-im.ui.components.status-bar.view :refer [status-bar]]
             [status-im.ui.components.styles :as styles]
             [status-im.ui.components.tabs.styles :as tabs.styles]
             [status-im.ui.components.tabs.views :as tabs]

src/status_im/ui/screens/network_settings/add_rpc/views.cljs

@@ -1,7 +1,7 @@
 (ns status-im.ui.screens.network-settings.add-rpc.views
   (:require
     [re-frame.core :refer [dispatch]]
-    [status-im.ui.components.status-bar :as status-bar]
+    [status-im.ui.components.status-bar.view :as status-bar]
     [status-im.ui.components.toolbar.view :as toolbar]
     [status-im.ui.components.text-input-with-label.view :refer [text-input-with-label]]
     [status-im.ui.screens.network-settings.views :as network-settings]

src/status_im/ui/screens/network_settings/network_details/views.cljs

@@ -2,7 +2,7 @@
   (:require-macros [status-im.utils.views :as views])
   (:require
     [re-frame.core :as rf]
-    [status-im.ui.components.status-bar :as status-bar]
+    [status-im.ui.components.status-bar.view :as status-bar]
     [status-im.ui.components.toolbar.view :as toolbar]
     [status-im.ui.components.context-menu :as context-menu]
     [status-im.ui.screens.network-settings.views :as network-settings]

src/status_im/ui/screens/network_settings/parse_json/views.cljs

@@ -1,7 +1,7 @@
 (ns status-im.ui.screens.network-settings.parse-json.views
   (:require
     [re-frame.core :refer [dispatch]]
-    [status-im.ui.components.status-bar :refer [status-bar]]
+    [status-im.ui.components.status-bar.view :refer [status-bar]]
     [status-im.ui.components.toolbar.view :as toolbar]
     [status-im.ui.screens.network-settings.views :as network-settings]
     [status-im.ui.components.react :refer [view text text-input]]

src/status_im/ui/screens/network_settings/views.cljs

@@ -3,7 +3,7 @@
   (:require
     [status-im.utils.listview :as lw]
     [re-frame.core :as rf]
-    [status-im.ui.components.status-bar :as status-bar]
+    [status-im.ui.components.status-bar.view :as status-bar]
     [status-im.ui.components.toolbar.view :as toolbar]
     [status-im.ui.components.action-button.action-button :as action-button]
     [status-im.ui.components.action-button.styles :as action-button-styles]

src/status_im/ui/screens/profile/edit/views.cljs

@@ -7,7 +7,7 @@
             [status-im.ui.components.chat-icon.screen :refer [my-profile-icon]]
             [status-im.ui.components.context-menu :refer [context-menu]]
             [status-im.ui.components.react :as react]
-            [status-im.ui.components.status-bar :refer [status-bar]]
+            [status-im.ui.components.status-bar.view :refer [status-bar]]
             [status-im.ui.components.sticky-button :refer [sticky-button]]
             [status-im.ui.components.text-input-with-label.view :refer [text-input-with-label]]
             [status-im.ui.components.toolbar.view :as toolbar]

src/status_im/ui/screens/profile/photo_capture/views.cljs

@@ -4,7 +4,7 @@
             [status-im.ui.components.camera :as camera]
             [status-im.ui.components.icons.custom-icons :as custom-icons]
             [status-im.ui.components.react :as react]
-            [status-im.ui.components.status-bar :as status-bar]
+            [status-im.ui.components.status-bar.view :as status-bar]
             [status-im.ui.components.toolbar.view :as toolbar]
             [status-im.i18n :as i18n]
             [status-im.ui.screens.profile.photo-capture.styles :as styles]

src/status_im/ui/screens/profile/qr_code/views.cljs

@@ -4,7 +4,7 @@
             [status-im.ui.components.qr-code :refer [qr-code]]
             [status-im.ui.components.react :as react]
             [status-im.ui.components.icons.vector-icons :as vi]
-            [status-im.ui.components.status-bar :refer [status-bar]]
+            [status-im.ui.components.status-bar.view :refer [status-bar]]
             [status-im.i18n :refer [label]]
             [status-im.ui.screens.profile.qr-code.styles :as styles]
             [status-im.utils.money :as money]

src/status_im/ui/screens/profile/styles.cljs

@@ -150,9 +150,6 @@
 (def profile-focus-line-color
   color-light-blue)
 
-(def profile-focus-line-height
-  (get-in platform/platform-specific [:component-styles :text-field-focus-line-height]))
-
 (defstyle profile-name-input
   {:color   text1-color
    :ios     {:font-size      17

src/status_im/ui/screens/profile/views.cljs

@@ -11,7 +11,7 @@
             [status-im.ui.components.list-selection :refer [share-options]]
             [status-im.ui.components.react :as react]
             [status-im.ui.components.icons.vector-icons :as vi]
-            [status-im.ui.components.status-bar :refer [status-bar]]
+            [status-im.ui.components.status-bar.view :refer [status-bar]]
             [status-im.ui.components.styles :refer [color-blue]]
             [status-im.ui.components.toolbar.actions :as actions]
             [status-im.ui.components.toolbar.view :as toolbar]

src/status_im/ui/screens/qr_scanner/views.cljs

@@ -4,7 +4,7 @@
             [re-frame.core :as re-frame]
             [status-im.ui.components.react :as react]
             [status-im.ui.components.camera :as camera]
-            [status-im.ui.components.status-bar :as status-bar]
+            [status-im.ui.components.status-bar.view :as status-bar]
             [status-im.ui.components.toolbar.view :as toolbar]
             [status-im.ui.screens.qr-scanner.styles :as styles]))
 

src/status_im/ui/screens/views.cljs

@@ -44,7 +44,7 @@
             [status-im.ui.screens.wallet.send.transaction-sent.views :refer [transaction-sent transaction-sent-modal]]
             [status-im.ui.screens.wallet.assets.views :as wallet-assets]
 
-            [status-im.ui.components.status-bar :as status-bar]
+            [status-im.ui.components.status-bar.view :as status-bar]
 
             [status-im.ui.screens.discover.search-results.views :as discover-search]
             [status-im.ui.screens.discover.recent-statuses.views :as discover-recent]

src/status_im/ui/screens/wallet/assets/views.cljs

@@ -1,7 +1,7 @@
 (ns status-im.ui.screens.wallet.assets.views
   (:require-macros [status-im.utils.views :refer [defview letsubs]])
   (:require [status-im.ui.components.react :as react]
-            [status-im.ui.components.status-bar :as status-bar]
+            [status-im.ui.components.status-bar.view :as status-bar]
             [status-im.ui.components.toolbar.view :as toolbar]
             [status-im.ui.components.button.view :as button]
             [status-im.i18n :as i18n]
@@ -92,4 +92,4 @@
      [tabs/swipable-tabs tabs-list current-tab true
       {:navigation-event     :navigation-replace
        :tab-style            assets.styles/tab
-       :tabs-container-style assets.styles/tabs-container}]]))
+       :tabs-container-style assets.styles/tabs-container}]]))

src/status_im/ui/screens/wallet/choose_recipient/views.cljs

@@ -5,7 +5,7 @@
             [status-im.ui.components.camera :as camera]
             [status-im.ui.components.icons.vector-icons :as vector-icons]
             [status-im.ui.components.react :as react]
-            [status-im.ui.components.status-bar :as status-bar]
+            [status-im.ui.components.status-bar.view :as status-bar]
             [status-im.ui.components.toolbar.view :as toolbar]
             [status-im.ui.components.toolbar.actions :as act]
             [status-im.i18n :as i18n]

src/status_im/ui/screens/wallet/request/views.cljs

@@ -6,7 +6,7 @@
     [status-im.ui.components.qr-code :as components.qr-code]
     [status-im.ui.components.toolbar.actions :as actions]
     [status-im.ui.components.toolbar.view :as toolbar]
-    [status-im.ui.components.status-bar :as status-bar]
+    [status-im.ui.components.status-bar.view :as status-bar]
     [status-im.ui.screens.wallet.styles :as wallet.styles]
     [status-im.ui.components.common.common :as common]
     [status-im.ui.components.icons.vector-icons :as vi]
@@ -71,4 +71,4 @@
       [react/touchable-highlight {:style wallet.styles/button :disabled (not request-enabled?) :on-press send-request}
        [react/view (wallet.styles/button-container request-enabled?)
         [components/button-text (i18n/label :t/send-request)]
-        [vi/icon :icons/forward {:color :white :container-style wallet.styles/forward-icon-container}]]]]]))
+        [vi/icon :icons/forward {:color :white :container-style wallet.styles/forward-icon-container}]]]]]))

src/status_im/ui/screens/wallet/send/transaction_sent/views.cljs

@@ -1,7 +1,7 @@
 (ns status-im.ui.screens.wallet.send.transaction-sent.views
   (:require-macros [status-im.utils.views :refer [defview letsubs]])
   (:require [status-im.ui.components.react :as react]
-            [status-im.ui.components.status-bar :as status-bar]
+            [status-im.ui.components.status-bar.view :as status-bar]
             [status-im.ui.components.icons.vector-icons :as vi]
             [status-im.ui.screens.wallet.styles :as wallet.styles]
             [status-im.ui.screens.wallet.send.transaction-sent.styles :as styles]

src/status_im/ui/screens/wallet/send/views.cljs

@@ -5,7 +5,7 @@
             [status-im.ui.components.common.common :as common]
             [status-im.ui.components.icons.vector-icons :as vector-icons]
             [status-im.ui.components.react :as react]
-            [status-im.ui.components.status-bar :as status-bar]
+            [status-im.ui.components.status-bar.view :as status-bar]
             [status-im.ui.components.styles :as components.styles]
             [status-im.ui.components.toolbar.actions :as act]
             [status-im.ui.components.toolbar.view :as toolbar]

src/status_im/ui/screens/wallet/transactions/views.cljs

@@ -4,7 +4,7 @@
             [status-im.ui.components.checkbox.view :as checkbox]
             [status-im.ui.components.list.views :as list]
             [status-im.ui.components.react :as react]
-            [status-im.ui.components.status-bar :as status-bar]
+            [status-im.ui.components.status-bar.view :as status-bar]
             [status-im.ui.components.styles :as styles]
             [status-im.ui.components.tabs.views :as tabs]
             [status-im.ui.components.toolbar.actions :as actions]
@@ -93,7 +93,7 @@
          [react/text {:style transactions.styles/address-hash
                       :ellipsize-mode "middle"
                       :number-of-lines 1}
-          address]] 
+          address]]
         (when (unsigned? type)
           [action-buttons transaction])]
        [list/item-icon {:icon :icons/forward

src/status_im/ui/screens/wallet/wallet_list/views.cljs

@@ -4,7 +4,7 @@
             [re-frame.core :as re-frame]
             [status-im.ui.components.list.views :as list]
             [status-im.ui.components.react :as react]
-            [status-im.ui.components.status-bar :as status-bar]
+            [status-im.ui.components.status-bar.view :as status-bar]
             [status-im.ui.components.toolbar.view :as toolbar]
             [status-im.ui.components.toolbar.actions :as actions]
             [status-im.i18n :as i18n]