diff --git a/src/status_im/android/platform.cljs b/src/status_im/android/platform.cljs index 8a2129d009..8e61ee2ed2 100644 --- a/src/status_im/android/platform.cljs +++ b/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 diff --git a/src/status_im/components/toolbar_new/styles.cljs b/src/status_im/components/toolbar_new/styles.cljs index f56874efdb..1db1d1bec7 100644 --- a/src/status_im/components/toolbar_new/styles.cljs +++ b/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] - (let [center? (get-in p/platform-specific [:component-styles :toolbar-title-center?])] - (merge {:flex-direction :row} - (when center? - {:width (when (and actions (pos? (count actions))) - (-> (+ toolbar-icon-width toolbar-icon-spacing) - (* (count actions))))})))) +(defnstyles toolbar-nav-actions-container + [actions] + {:flex-direction :row + :ios {:width (when (and actions (pos? (count actions))) + (-> (+ toolbar-icon-width toolbar-icon-spacing) + (* (count actions))))}}) (def toolbar-title-container (merge (get-in p/platform-specific [:component-styles :toolbar-title-container]) diff --git a/src/status_im/contacts/styles.cljs b/src/status_im/contacts/styles.cljs index 6138cc7941..7ffbfd52db 100644 --- a/src/status_im/contacts/styles.cljs +++ b/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 - (merge (get-in p/platform-specific [:component-styles :main-tab-list]) - {:flex 1})) +(defstyles contacts-list-container + {: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}) \ No newline at end of file + {:color color-light-red}) diff --git a/src/status_im/ios/platform.cljs b/src/status_im/ios/platform.cljs index 6b82603f05..89f94dfa66 100644 --- a/src/status_im/ios/platform.cljs +++ b/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 diff --git a/src/status_im/utils/styles.clj b/src/status_im/utils/styles.clj new file mode 100644 index 0000000000..46ac5179f7 --- /dev/null +++ b/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)))