replace require-macro for defnstyle and defstyle

- renamed the macros def and defn so that they are now used with aliased
namespace `styles/def` and `styles/defn` to force user to use aliased require
instead of require-macro and refer
- this makes sure the cljs file is required which includes the require for
platform ns needed after macroexpension

TROUBLESHOOTING.md

@@ -12,6 +12,8 @@ The general fix for that type of issue is to have two files for the namespace wh
 
 That way you don't need to use any magical call like `find-ns` or inline `require` with some kind of call only once switch (which was the root cause of another bug in ``defstyle`` macro because the compilation phase at which the evaluation of the switch is done was not properly considered).
 
+You also want to make sure users are using the macro by using a aliased namespace defined in require statement rather than require-macro and refer to the macro directly. Otherwise it won't require the cljs file and the require statement of the namespace in the macroexpension might not be there.
+
 ## Stacktrace
 
 ```

src/status_im/chat/commands/impl/transactions/styles.cljs

@@ -1,5 +1,4 @@
 (ns status-im.chat.commands.impl.transactions.styles
-  (:require-macros [status-im.utils.styles :refer [defstyle defnstyle]])
   (:require [status-im.ui.components.colors :as colors]))
 
 (def asset-container

src/status_im/network/ui/edit_network/styles.cljs

@@ -1,5 +1,4 @@
 (ns status-im.network.ui.edit-network.styles
-  (:require-macros [status-im.utils.styles :refer [defstyle]])
   (:require [status-im.ui.components.colors :as colors]
             [status-im.ui.components.styles :as styles]))
 

src/status_im/network/ui/styles.cljs

@@ -1,7 +1,7 @@
 (ns status-im.network.ui.styles
-  (:require-macros [status-im.utils.styles :refer [defstyle defnstyle]])
   (:require [status-im.ui.components.colors :as colors]
-            [status-im.ui.components.styles :as components.styles]))
+            [status-im.ui.components.styles :as components.styles]
+            [status-im.utils.styles :as styles]))
 
 (def wrapper
   {:flex             1
@@ -10,7 +10,7 @@
 (def badge-name-text
   {:font-size 17})
 
-(defstyle badge-connected-text
+(styles/def badge-connected-text
   {:color   colors/gray
    :ios     {:margin-top 5}})
 
@@ -39,7 +39,7 @@
    :margin-top 8
    :height     20})
 
-(defstyle network-config-container
+(styles/def network-config-container
   {:height            160
    :margin-top        8
    :padding-top       16
@@ -50,7 +50,7 @@
                        :opacity       0.9}
    :android           {:border-radius 4}})
 
-(defstyle network-config-text
+(styles/def network-config-text
   {:font-size   17
    :ios         {:opacity 0.8}
    :android     {:opacity 0.4}})
@@ -60,7 +60,7 @@
    :margin-vertical   16
    :margin-horizontal 16})
 
-(defstyle edit-button
+(styles/def edit-button
   {:height           52
    :align-items      :center
    :justify-content  :center
@@ -93,7 +93,7 @@
    :flex-direction :row
    :align-items    :center})
 
-(defstyle network-item
+(styles/def network-item
   {:flex-direction     :row
    :background-color   :white
    :align-items        :center

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

@@ -1,11 +1,11 @@
 (ns status-im.ui.components.common.styles
-  (:require-macros [status-im.utils.styles :refer [defstyle defnstyle]])
-  (:require [status-im.ui.components.colors :as colors]))
+  (:require [status-im.ui.components.colors :as colors]
+            [status-im.utils.styles :as styles]))
 
 (def separator-wrapper
   {:background-color colors/white})
 
-(defstyle separator
+(styles/def separator
   {:android {:height 0}
    :ios     {:height           1
              :background-color colors/black-transparent

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

@@ -1,9 +1,8 @@
 (ns status-im.ui.components.connectivity.styles
-  (:require-macros [status-im.utils.styles :refer [defnstyle]])
   (:require [status-im.ui.components.colors :as colors]
             [status-im.utils.platform :as platform]))
 
-(defnstyle text-wrapper
+(defn text-wrapper
   [{:keys [window-width height background-color opacity transform]}]
   (cond-> {:flex-direction   :row
            :justify-content  :center

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

@@ -1,6 +1,6 @@
 (ns status-im.ui.components.list.styles
-  (:require-macros [status-im.utils.styles :refer [defstyle]])
-  (:require [status-im.ui.components.colors :as colors]))
+  (:require [status-im.ui.components.colors :as colors]
+            [status-im.utils.styles :as styles]))
 
 (def item
   {:flex-direction     :row
@@ -146,11 +146,11 @@
    base-separator
    {:margin-left 64}))
 
-(defstyle list-header-footer-spacing
+(styles/def list-header-footer-spacing
   {:android {:background-color colors/white
              :height           8}})
 
-(defstyle section-header
+(styles/def section-header
   {:font-size       14
    :color           colors/gray
    :margin-left     16

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

@@ -1,8 +1,7 @@
 (ns status-im.ui.components.status-bar.styles
   (:require [status-im.ui.components.colors :as colors]
-            [status-im.ui.components.styles :as styles]
-            [status-im.utils.platform :as platform])
-  (:require-macros [status-im.utils.styles :refer [defstyle]]))
+            [status-im.utils.platform :as platform]
+            [status-im.utils.styles :as styles]))
 
 (defn- create-status-bar-style [{:keys [background-color bar-style translucent?]
                                  :or   {bar-style "light-content"}}]
@@ -17,13 +16,13 @@
    :height           height})
 
 ;; :main
-(defstyle status-bar-main
+(styles/def status-bar-main
   {:ios     (create-status-bar-style {:background-color colors/white
                                       :bar-style        "default"})
    :android (create-status-bar-style {:translucent?     true
                                       :bar-style        "dark-content"})})
 
-(defstyle status-bar-main-main
+(styles/def status-bar-main-main
   {:ios     (create-status-bar-style {:background-color colors/white
                                       :bar-style        "default"})
    :android (create-status-bar-style {:background-color colors/black
@@ -32,37 +31,37 @@
 (def view-main
   (create-view-style {:background-color colors/white}))
 
-(defstyle view-modal-main
+(styles/def view-modal-main
   {:ios     (create-view-style {:background-color colors/white})
    :android (create-view-style {:background-color colors/black
                                 :height           0})})
 
 ;; :transparent
-(defstyle status-bar-transparent
+(styles/def status-bar-transparent
   {:ios     (create-status-bar-style {:background-color colors/transparent})
    :android (create-status-bar-style {:translucent?     true})})
 
 (def view-transparent
   (create-view-style {:background-color colors/transparent}))
 
 ;; :modal
-(defstyle status-bar-modal
+(styles/def status-bar-modal
   {:ios     (create-status-bar-style {:background-color "#2f3031"})
    :android (create-status-bar-style {:background-color colors/black})})
 
-(defstyle view-modal
+(styles/def view-modal
   {:ios     (create-view-style {:background-color "#2f3031"})
    :android (create-view-style {:background-color colors/black
                                 :height           0})})
 
 ;; :modal-white
-(defstyle status-bar-modal-white
+(styles/def status-bar-modal-white
   {:ios     (create-status-bar-style {:background-color colors/white
                                       :bar-style        "default"})
    :android (create-status-bar-style {:background-color colors/black
                                       :bar-style        "light-content"})})
 
-(defstyle view-modal-white
+(styles/def view-modal-white
   {:ios     (create-view-style {:background-color colors/white})
    :android (create-view-style {:background-color colors/black
                                 :height           0})})
@@ -71,45 +70,45 @@
 (def status-bar-modal-wallet
   (create-status-bar-style {:background-color colors/blue}))
 
-(defstyle view-modal-wallet
+(styles/def view-modal-wallet
   {:ios     (create-view-style {:background-color colors/blue})
    :android (create-view-style {:background-color colors/blue
                                 :height           0})})
 
 ;; :transaction
-(defstyle status-bar-transaction
+(styles/def status-bar-transaction
   {:ios     (create-status-bar-style {:background-color colors/transparent})
    :android (create-status-bar-style {:background-color colors/black})})
 
-(defstyle view-transaction
+(styles/def view-transaction
   {:ios     (create-view-style {:background-color colors/transparent})
    :android (create-view-style {:background-color colors/black
                                 :height           0})})
 
 ;; TODO(jeluard) Fix status-bar mess by removing useless view and introducing 2dn level tab-bar
 
 ;; :wallet HOME
-(defstyle status-bar-wallet-tab
+(styles/def status-bar-wallet-tab
   {:ios     (create-status-bar-style {:background-color colors/blue})
    :android (create-status-bar-style {:translucent?     true})})
 
 (def view-wallet-tab
   (create-view-style {:background-color colors/blue}))
 
 ;; :wallet
-(defstyle status-bar-wallet
+(styles/def status-bar-wallet
   {:ios     (create-status-bar-style {:background-color colors/blue})
    :android (create-status-bar-style {:translucent?     true})})
 
 (def view-wallet
   (create-view-style {:background-color colors/blue}))
 
 ;; :default
-(defstyle status-bar-default
+(styles/def status-bar-default
   {:ios     (create-status-bar-style {:background-color colors/white
                                       :bar-style        "default"})
    :android (create-status-bar-style {:translucent?     true
                                       :bar-style        "dark-content"})})
 
-(defstyle view-default
+(def view-default
   (create-view-style {}))

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

@@ -1,8 +1,8 @@
 (ns status-im.ui.components.tabbar.styles
-  (:require [status-im.ui.components.colors :as colors]
+  (:require [status-im.ui.components.animation :as animation]
+            [status-im.ui.components.colors :as colors]
             [status-im.utils.platform :as platform]
-            [status-im.ui.components.animation :as animation])
-  (:require-macros [status-im.utils.styles :refer [defnstyle defstyle]]))
+            [status-im.utils.styles :as styles]))
 
 (def tabs-height
   (cond
@@ -31,7 +31,7 @@
    :justify-content :center
    :align-items     :center})
 
-(defnstyle tab-title [active?]
+(styles/defn tab-title [active?]
   {:ios        {:font-size 11}
    :android    {:font-size 11}
    :desktop    {:font-size   12
@@ -79,7 +79,7 @@
   {:color     (if active? colors/blue colors/gray)
    :font-size 11})
 
-(defstyle new-tabs-container
+(styles/def new-tabs-container
   {:height     tabs-height
    :align-self :stretch
    :ios        {:background-color :white

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

@@ -1,7 +1,7 @@
 (ns status-im.ui.components.text-input.styles
-  (:require-macros [status-im.utils.styles :refer [defstyle defnstyle]])
   (:require [status-im.ui.components.colors :as colors]
-            [status-im.utils.platform :as p]))
+            [status-im.utils.platform :as p]
+            [status-im.utils.styles :as styles]))
 
 (defn label [editable]
   (merge
@@ -19,7 +19,7 @@
      {:border-color colors/gray-lighter
       :border-width 1})))
 
-(defstyle input
+(styles/def input
   {:padding             0
    :text-align-vertical :top
    :desktop             {:height 52}})

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

@@ -1,5 +1,4 @@
 (ns status-im.ui.components.toolbar.styles
-  (:require-macros [status-im.utils.styles :refer [defstyle defnstyle]])
   (:require [status-im.ui.components.colors :as colors]))
 
 (def toolbar-height 56)
@@ -40,7 +39,7 @@
 (def item-text
   {:color colors/blue})
 
-(defstyle item-text-action
+(def item-text-action
   {:color colors/blue})
 
 (def toolbar-text-action-disabled

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

@@ -1,7 +1,6 @@
 (ns status-im.ui.components.tooltip.styles
-  (:require-macros [status-im.utils.styles :refer [defstyle defnstyle]])
-  (:require [status-im.ui.components.styles :as styles]
-            [status-im.ui.components.colors :as colors]))
+  (:require [status-im.ui.components.colors :as colors]
+            [status-im.utils.styles :as styles]))
 
 (def tooltip-container
   {:position    :absolute
@@ -10,7 +9,7 @@
    :right       0
    :top         0})
 
-(defstyle bottom-tooltip-container
+(styles/def bottom-tooltip-container
   {:position    :absolute
    :align-items :center
    :left        12

src/status_im/ui/screens/add_new/new_public_chat/styles.cljs

@@ -1,5 +1,4 @@
 (ns status-im.ui.screens.add-new.new-public-chat.styles
-  (:require-macros [status-im.utils.styles :refer [defstyle]])
   (:require [status-im.ui.components.colors :as colors]))
 
 (def group-chat-name-input

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

@@ -1,7 +1,7 @@
 (ns status-im.ui.screens.add-new.styles
-  (:require-macros [status-im.utils.styles :refer [defstyle defnstyle]])
   (:require [status-im.ui.components.colors :as colors]
-            [status-im.ui.components.styles :as styles]))
+            [status-im.ui.components.styles :as components.styles]
+            [status-im.utils.styles :as styles]))
 
 (def new-chat-container
   {:flex-direction :row
@@ -10,7 +10,7 @@
 (def input-container
   {:flex-direction    :row
    :align-items       :center
-   :border-radius     styles/border-radius
+   :border-radius     components.styles/border-radius
    :height            52
    :background-color  colors/gray-lighter
    :margin-horizontal 14
@@ -25,15 +25,15 @@
 
 (def button-container
   {:justify-content    :center
-   :border-radius      styles/border-radius
+   :border-radius      components.styles/border-radius
    :height             52
    :background-color   colors/gray-lighter
    :padding-horizontal 15
    :margin-right       14
    :margin-left        3
    :margin-top         24})
 
-(defnstyle input [w]
+(styles/defn input [w]
   {:padding-horizontal 14
    :width              w
    :desktop            {:height 30