defstyle and defnstyle macro

src/status_im/android/platform.cljs

@@ -23,7 +23,6 @@
                            :padding-left   16
                            :padding-right  16}
    :toolbar-title-container {:padding-left   30}
-   :toolbar-title-center? false
    :toolbar-with-search-content {:padding-left   30}
    :sized-text            {:margin-top        0
                            :additional-height 0}
@@ -127,7 +126,6 @@
    :bottom-gradient       {:height 3}
    :input-label           {:left 4}
    :input-error-text      {:margin-left 4}
-   :main-tab-list         {:margin-bottom 20}
    :toolbar-nav-action    {:width           56
                            :height          56
                            :align-items     :center

src/status_im/components/toolbar_new/styles.cljs

@@ -1,4 +1,5 @@
 (ns status-im.components.toolbar-new.styles
+  (:require-macros [status-im.utils.styles :refer [defnstyles]])
   (:require [status-im.components.styles :refer [text1-color
                                                  color-white
                                                  color-light-gray
@@ -24,13 +25,12 @@
   (merge {:flex-direction :row}
          (get-in p/platform-specific [:component-styles :toolbar-new])))
 
-(defn toolbar-nav-actions-container [actions]
+(defnstyles toolbar-nav-actions-container
-  (let [center? (get-in p/platform-specific [:component-styles :toolbar-title-center?])]
+  [actions]
-    (merge {:flex-direction :row}
+  {:flex-direction :row
-           (when center?
+   :ios            {:width (when (and actions (pos? (count actions)))
-             {:width          (when (and actions (pos? (count actions)))
+                             (-> (+ toolbar-icon-width toolbar-icon-spacing)
-                                (-> (+ toolbar-icon-width toolbar-icon-spacing)
+                                 (* (count actions))))}})
-                                    (* (count actions))))}))))
 
 (def toolbar-title-container
   (merge (get-in p/platform-specific [:component-styles :toolbar-title-container])

src/status_im/contacts/styles.cljs

@@ -1,4 +1,5 @@
 (ns status-im.contacts.styles
+  (:require-macros [status-im.utils.styles :refer [defstyles]])
   (:require [status-im.components.styles :refer [text1-color
                                                  text2-color
                                                  text3-color
@@ -21,9 +22,10 @@
   {:flex             1
    :background-color toolbar-background2})
 
-(def contacts-list-container
+(defstyles contacts-list-container
-  (merge (get-in p/platform-specific [:component-styles :main-tab-list])
+  {:flex    1
-         {:flex 1}))
+   :android {:margin-bottom 20}
+   :ios     {:margin-bottom 72}})
 
 (def contacts-list
   {:background-color color-white})
@@ -218,4 +220,4 @@
    :justify-content  :center})
 
 (def delete-contact-text
-  {:color color-light-red})
+  {:color color-light-red})

src/status_im/ios/platform.cljs

@@ -22,7 +22,6 @@
                            :padding-left        16
                            :padding-right       16}
    :toolbar-title-container {:align-items    :center}
-   :toolbar-title-center? true
    :toolbar-with-search-content {:align-items  :center}
    :sized-text            {:margin-top        -5
                            :additional-height 5}
@@ -148,7 +147,6 @@
    :bottom-gradient       {:height 1}
    :input-label           {:left 0}
    :input-error-text      {:margin-left 0}
-   :main-tab-list         {:margin-bottom 72}
    :toolbar-search-input  {:padding-left 10}
    :toolbar-nav-action    {:width           46
                            :height          56

src/status_im/utils/styles.clj

@@ -0,0 +1,51 @@
+(ns status-im.utils.styles)
+
+(defn body [styles]
+  `(let [styles#            ~styles
+         common#            (dissoc styles# :android :ios)
+         platform#          (keyword status-im.utils.platform/platform)
+         platform-specific# (get styles# platform#)]
+     (if platform-specific#
+       (merge common# platform-specific#)
+       common#)))
+
+(defmacro defstyles
+  "Defines styles symbol.
+   Styles parameter may contain plaform specific styles:
+   {:width   100
+    :height  125
+    :ios     {:height 20}
+    :android {:margin-top 3}}
+
+    Reuslting styles for Android:
+    {:width 100
+     :height 125
+     :margin-top 3}
+
+    Resulting styles for iOS:
+    {:width  100
+     :height 20}"
+  [style-name styles]
+  `(def ~style-name
+     ~(body styles)))
+
+(defmacro defnstyles
+  "Defines styles function.
+   Styles parameter may contain plaform specific styles:
+   {:width   100
+    :height  (* a 2)
+    :ios     {:height (/ a 2)}
+    :android {:margin-top 3}}
+
+    Resulting styles for Android (with (= a 10)):
+    {:width 100
+     :height 20
+     :margin-top 3}
+
+    Resulting styles for iOS (with (= a 10)):
+    {:width  100
+     :height 5}"
+  [style-name params styles]
+  `(defn ~style-name
+     [~@params]
+     ~(body styles)))