From 2dad2b67e88604aea4e82d1d3702950d54c8cf19 Mon Sep 17 00:00:00 2001 From: Icaro Motta Date: Thu, 2 Feb 2023 07:23:06 -0300 Subject: [PATCH] Update style namespaces (#14941) Update certain `style.cljs` files to more strictly follow our guidelines. Except for animations and theme colors, *style* functions should be pure. It turns out `style` namespaces are well behaved and are almost perfectly following guidelines :rocket: The motivation for the PR came from this thread https://github.com/status-im/status-mobile/pull/14925#discussion_r1090485454 --- doc/new-guidelines.md | 25 ++++++++----------- .../contexts/add_new_contact/style.cljs | 7 ++---- .../contexts/add_new_contact/views.cljs | 15 ++++++----- src/status_im2/contexts/shell/home_stack.cljs | 2 +- src/status_im2/contexts/shell/style.cljs | 5 ++-- 5 files changed, 25 insertions(+), 29 deletions(-) diff --git a/doc/new-guidelines.md b/doc/new-guidelines.md index d9e76398ae..5675f69c17 100644 --- a/doc/new-guidelines.md +++ b/doc/new-guidelines.md @@ -38,32 +38,29 @@ Pay special attention to: ### Component styles -Prefer to define styles in separate files named `style.cljs`, usually colocated -with the source file using it. For a real example, see -[src/status_im/ui2/screens/chat/messages/style.cljs](../src/status_im/ui2/screens/chat/messages/style.cljs). +Prefer to define styles in a separate file named `style.cljs`, colocated with +the source file. For a real example, see +[src/quo2/components/record_audio/record_audio/style.cljs](../src/quo2/components/record_audio/record_audio/style.cljs). ```clojure ;; bad -(defn animated-checkbox-view [{:keys [size]}] - [animated/view +(defn checkbox-view + [{:keys [size]}] + [rn/view {:style {:width size :height size :border-radius 4 :justify-content :center :align-items :center}} - [animated/view - (do-something)]]) + [rn/view (do-something)]]) ;; good -(defn animated-checkbox-view [{:keys [size]}] - [animated/view - {:style (style/animated-checkbox-style size)} - [animated/view - (do-something)]]) +(defn checkbox-view + [{:keys [size]}] + [rn/view {:style (style/checkbox size)} + [rn/view (do-something)]]) ``` - - ### Don't use percents to define width/height We shouldn't use percentage: diff --git a/src/status_im2/contexts/add_new_contact/style.cljs b/src/status_im2/contexts/add_new_contact/style.cljs index 8a76c6bbb4..5ace1b6593 100644 --- a/src/status_im2/contexts/add_new_contact/style.cljs +++ b/src/status_im2/contexts/add_new_contact/style.cljs @@ -1,6 +1,5 @@ (ns status-im2.contexts.add-new-contact.style (:require [quo2.foundations.colors :as colors] - [status-im.react-native.resources :as resources] [react-native.platform :as platform] [quo2.foundations.typography :as typography])) @@ -13,10 +12,8 @@ {:style {:flex 1 :flex-direction :row}}) -(defn image - [file] - {:source (resources/get-image file) - :style {:flex 1}}) +(def image + {:flex 1}) (defn container-outer [] diff --git a/src/status_im2/contexts/add_new_contact/views.cljs b/src/status_im2/contexts/add_new_contact/views.cljs index cd2ada7cfb..fa8e53ee02 100644 --- a/src/status_im2/contexts/add_new_contact/views.cljs +++ b/src/status_im2/contexts/add_new_contact/views.cljs @@ -1,10 +1,11 @@ (ns status-im2.contexts.add-new-contact.views - (:require [status-im2.contexts.add-new-contact.style :as style] - [utils.i18n :as i18n] - [utils.debounce :as debounce] - [utils.re-frame :as rf] + (:require [quo2.core :as quo] [react-native.core :as rn] - [quo2.core :as quo])) + [status-im.react-native.resources :as resources] + [status-im2.contexts.add-new-contact.style :as style] + [utils.debounce :as debounce] + [utils.i18n :as i18n] + [utils.re-frame :as rf])) (defn new-contact [] @@ -14,7 +15,9 @@ (= error :uncompressed-key))] [rn/keyboard-avoiding-view (style/container-kbd) [rn/view style/container-image - [rn/image (style/image :add-new-contact)] + [rn/image + {:source (resources/get-image :add-new-contact) + :style style/image}] [quo/button (merge (style/button-close) {:on-press diff --git a/src/status_im2/contexts/shell/home_stack.cljs b/src/status_im2/contexts/shell/home_stack.cljs index e9ff8b9472..ad32fa0be3 100644 --- a/src/status_im2/contexts/shell/home_stack.cljs +++ b/src/status_im2/contexts/shell/home_stack.cljs @@ -48,7 +48,7 @@ [:f> (fn [] (let [shared-values @animation/shared-values-atom - home-stack-original-style (styles/home-stack) + home-stack-original-style (styles/home-stack @animation/screen-height) home-stack-animated-style (reanimated/apply-animations-to-style {:top (:home-stack-top shared-values) :left (:home-stack-left shared-values) diff --git a/src/status_im2/contexts/shell/style.cljs b/src/status_im2/contexts/shell/style.cljs index 49c0d042f5..4589308130 100644 --- a/src/status_im2/contexts/shell/style.cljs +++ b/src/status_im2/contexts/shell/style.cljs @@ -1,7 +1,6 @@ (ns status-im2.contexts.shell.style (:require [quo2.foundations.colors :as colors] [react-native.platform :as platform] - [status-im2.contexts.shell.animation :as animation] [status-im2.contexts.shell.constants :as shell.constants])) ;; Bottom Tabs @@ -36,9 +35,9 @@ ;; Home Stack (defn home-stack - [] + [screen-height] (let [{:keys [width height]} (shell.constants/dimensions) - height (or @animation/screen-height height)] + height (or screen-height height)] {:border-bottom-left-radius 20 :border-bottom-right-radius 20 :background-color (colors/theme-colors colors/neutral-5 colors/neutral-95)