chore: remove colors/dark? method from colors file and update uses

status-im · Sep 6, 2023 · f3d35b2 · f3d35b2
1 parent b2840a7
commit f3d35b2
Show file tree

Hide file tree

Showing 18 changed files with 186 additions and 112 deletions.
diff --git a/src/quo2/components/inputs/title_input/style.cljs b/src/quo2/components/inputs/title_input/style.cljs
@@ -6,8 +6,7 @@
   [blur? theme]
   (if blur?
     (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 theme)
-    (colors/theme-colors colors/neutral-30 colors/neutral-60 theme))
-)
+    (colors/theme-colors colors/neutral-30 colors/neutral-60 theme)))
 
 (defn get-placeholder-color
   [blur? theme]
@@ -32,7 +31,7 @@
   (colors/alpha (if blur?
                   (colors/theme-colors colors/neutral-100 colors/white theme)
                   (colors/custom-color customization-color
-                                       (if (or (= :dark theme) colors/dark?) 60 50)))
+                                       (if (= :dark theme) 60 50)))
                 (if platform/ios? 1 0.2)))
 
 (def text-input-container {:flex 1})

diff --git a/src/quo2/components/keycard/style.cljs b/src/quo2/components/keycard/style.cljs
@@ -5,30 +5,34 @@
 (def keycard-chip-height 28)
 
 (defn card-container
-  [locked?]
+  [locked? theme]
   {:overflow         :hidden
    :height           keycard-height
    :align-items      :flex-start
    :justify-content  :space-between
    :border-width     1
    :border-color     (if locked?
                        colors/white-opa-5
-                       (colors/theme-colors colors/neutral-20 colors/neutral-80))
+                       (colors/theme-colors colors/neutral-20 colors/neutral-80 theme))
    :border-style     :solid
    :border-radius    16
    :padding          16
    :background-color (if locked?
-                       (colors/theme-colors colors/danger colors/danger-opa-40)
-                       (colors/theme-colors colors/neutral-5 colors/neutral-90))})
+                       (colors/theme-colors colors/danger colors/danger-opa-40 theme)
+                       (colors/theme-colors colors/neutral-5 colors/neutral-90 theme))})
 
 (defn keycard-logo
-  [locked?]
-  {:tint-color (if locked? colors/white (colors/theme-colors colors/neutral-100 colors/white))})
+  [locked? theme]
+  {:tint-color (if locked?
+                 colors/white
+                 (colors/theme-colors colors/neutral-100 colors/white theme))})
 
 (defn keycard-watermark
-  [locked?]
+  [locked? theme]
   {:position   :absolute
-   :tint-color (if locked? colors/white-opa-5 (colors/theme-colors colors/neutral-100 colors/white))
+   :tint-color (if locked?
+                 colors/white-opa-5
+                 (colors/theme-colors colors/neutral-100 colors/white theme))
    :align-self :center
    :height     280.48
    :transform  [{:rotate "-30deg"} {:translateY -30}]

diff --git a/src/quo2/components/keycard/view.cljs b/src/quo2/components/keycard/view.cljs
@@ -4,28 +4,30 @@
             [quo2.components.tags.tag :as tag]
             [quo2.foundations.colors :as colors]
             [quo2.foundations.resources :as resources]
-            [utils.i18n :as i18n]))
+            [utils.i18n :as i18n]
+            [quo2.theme :as quo.theme]))
 
-(defn keycard
+(defn- view-internal
   "This component based on the following properties:
   - :holder-name - Can be owner's name. Default is Empty
   - :locked? - Boolean to specify whether the keycard is locked or not
+  - :theme :light/:dark
   "
-  [{:keys [holder-name locked?]}]
+  [{:keys [holder-name locked? theme]}]
   (let [label (if (boolean holder-name)
                 (i18n/label :t/user-keycard {:name holder-name})
                 (i18n/label :t/empty-keycard))]
-    [rn/view {:style (style/card-container locked?)}
+    [rn/view {:style (style/card-container locked? theme)}
      [rn/image
       {:source (resources/get-image :keycard-logo)
-       :style  (style/keycard-logo locked?)}]
+       :style  (style/keycard-logo locked? theme)}]
      [rn/image
       {:source (resources/get-image
-                (if (or locked? (colors/dark?)) :keycard-chip-dark :keycard-chip-light))
+                (if (or locked? (= :dark theme)) :keycard-chip-dark :keycard-chip-light))
        :style  style/keycard-chip}]
      [rn/image
       {:source (resources/get-image :keycard-watermark)
-       :style  (style/keycard-watermark locked?)}]
+       :style  (style/keycard-watermark locked? theme)}]
      [tag/tag
       {:size                32
        :type                (when locked? :icon)
@@ -36,3 +38,5 @@
        :accessibility-label :holder-name
        :icon-color          colors/white-70-blur
        :override-theme      (when locked? :dark)}]]))
+
+(def keycard (quo.theme/with-theme view-internal))
diff --git a/src/quo2/components/reactions/reaction.cljs b/src/quo2/components/reactions/reaction.cljs
@@ -12,20 +12,20 @@
   [rn/touchable-opacity
    {:on-press            on-press
     :accessibility-label :emoji-reaction-add
-    :style               (style/add-reaction)}
+    :style               (style/add-reaction theme)}
    [icons/icon :i/add-reaction
     {:size  20
      :color (colors/theme-colors colors/neutral-50 colors/white theme)}]])
 
-(defn reaction
+(defn- reaction-internal
   "Add your emoji as a param here"
-  [{:keys [emoji clicks neutral? on-press accessibility-label on-long-press]}]
+  [{:keys [emoji clicks neutral? on-press accessibility-label on-long-press theme]}]
   (let [numeric-value (int clicks)]
     [rn/touchable-opacity
      {:on-press            on-press
       :on-long-press       on-long-press
       :accessibility-label accessibility-label
-      :style               (style/reaction neutral?)}
+      :style               (style/reaction neutral? theme)}
      [rn/image
       {:style               {:width 16 :height 16}
        :accessibility-label :emoji
@@ -39,4 +39,6 @@
       (when (pos? numeric-value)
         (str " " numeric-value))]]))
 
+(def reaction (theme/with-theme reaction-internal))
+
 (def add-reaction (theme/with-theme add-reaction-internal))
diff --git a/src/quo2/components/reactions/style.cljs b/src/quo2/components/reactions/style.cljs
@@ -10,25 +10,26 @@
    :height             24})
 
 (defn add-reaction
-  []
+  [theme]
   (merge reaction-styling
          {:padding-horizontal 9
           :border-width       1
-          :border-color       (colors/theme-colors colors/neutral-30 colors/neutral-70)}))
+          :border-color       (colors/theme-colors colors/neutral-30 colors/neutral-70 theme)}))
 
 (defn reaction
-  [neutral?]
+  [neutral? theme]
   (merge reaction-styling
          (cond->
            {:background-color (colors/theme-colors (if neutral?
                                                      colors/neutral-30
                                                      :transparent)
                                                    (if neutral?
                                                      colors/neutral-70
-                                                     :transparent))}
-           (and (colors/dark?) (not neutral?))
+                                                     :transparent)
+                                                   theme)}
+           (and (= :dark theme) (not neutral?))
            (assoc :border-color colors/neutral-70
                   :border-width 1)
-           (and (not (colors/dark?)) (not neutral?))
+           (and (not (= :dark theme)) (not neutral?))
            (assoc :border-color colors/neutral-30
                   :border-width 1))))
diff --git a/src/quo2/components/record_audio/record_audio/buttons/record_button_big.cljs b/src/quo2/components/record_audio/record_audio/buttons/record_button_big.cljs
@@ -28,9 +28,9 @@
          [reanimated/view {:style (style/animated-circle scale opacity color)}]))))))
 
 (defn f-record-button-big
-  [recording? ready-to-send? ready-to-lock? ready-to-delete? record-button-is-animating?
-   record-button-at-initial-position? locked? reviewing-audio? recording-length-ms
-   clear-timeout touch-active? recorder-ref reload-recorder-fn idle? on-send on-cancel]
+  [{:keys [recording? ready-to-send? ready-to-lock? ready-to-delete? record-button-is-animating?
+           record-button-at-initial-position? locked? reviewing-audio? recording-length-ms
+           clear-timeout touch-active? recorder-ref reload-recorder-fn idle? on-send on-cancel theme]}]
   (let [scale (reanimated/use-shared-value 1)
         opacity (reanimated/use-shared-value 0)
         opacity-from (if @ready-to-lock? opacity-from-lock opacity-from-default)
@@ -46,13 +46,14 @@
                     (range 0 5))
         rings-color (cond
                       @ready-to-lock?   (colors/theme-colors colors/neutral-80-opa-5-opaque
-                                                             colors/neutral-80)
+                                                             colors/neutral-80
+                                                             theme)
                       @ready-to-delete? colors/danger-50
                       :else             colors/primary-50)
         translate-y (reanimated/use-shared-value 0)
         translate-x (reanimated/use-shared-value 0)
         button-color colors/primary-50
-        icon-color (if (and (not (colors/dark?)) @ready-to-lock?) colors/black colors/white)
+        icon-color (if (and (not (= :dark theme)) @ready-to-lock?) colors/black colors/white)
         icon-opacity (reanimated/use-shared-value 1)
         red-overlay-opacity (reanimated/use-shared-value 0)
         gray-overlay-opacity (reanimated/use-shared-value 0)

diff --git a/src/quo2/components/record_audio/record_audio/view.cljs b/src/quo2/components/record_audio/record_audio/view.cljs
@@ -17,7 +17,8 @@
             [quo2.components.record-audio.record-audio.buttons.record-button :as record-button]
             [clojure.string :as string]
             [utils.datetime :as datetime]
-            [react-native.platform :as platform]))
+            [react-native.platform :as platform]
+            [quo2.theme :as quo.theme]))
 
 (def ^:private min-audio-duration-ms 1000)
 (def ^:private max-audio-duration-ms (if platform/ios? 120800 120500))
@@ -155,11 +156,11 @@
       (if @playing-audio? :i/pause :i/play)
       {:color (colors/theme-colors colors/neutral-100 colors/white)}]]))
 
-(defn record-audio
+(defn- record-audio-internal
   [{:keys [on-init on-start-recording on-send on-cancel on-reviewing-audio
            record-audio-permission-granted
            on-request-record-audio-permission on-check-audio-permissions
-           audio-file on-lock max-duration-ms]}]
+           audio-file on-lock max-duration-ms theme]}]
   [:f>
    ;; TODO we need to refactor this, and use :f> with defined function, currenly state is reseted each
    ;; time parent component
@@ -574,20 +575,23 @@
            [:f> send-button/f-send-button recording? ready-to-send? reviewing-audio?
             @force-show-controls?]
            [:f> record-button-big/f-record-button-big
-            recording?
-            ready-to-send?
-            ready-to-lock?
-            ready-to-delete?
-            record-button-is-animating?
-            record-button-at-initial-position?
-            locked?
-            reviewing-audio?
-            recording-length-ms
-            clear-timeout
-            touch-active?
-            recorder-ref
-            reload-recorder
-            idle?
-            on-send
-            on-cancel]
+            {:recording?                         recording?
+             :ready-to-send?                     ready-to-send?
+             :ready-to-lock?                     ready-to-lock?
+             :ready-to-delete?                   ready-to-delete?
+             :record-button-is-animating?        record-button-is-animating?
+             :record-button-at-initial-position? record-button-at-initial-position?
+             :locked?                            locked?
+             :reviewing-audio?                   reviewing-audio?
+             :recording-length-ms                recording-length-ms
+             :clear-timeout                      clear-timeout
+             :touch-active?                      touch-active?
+             :recorder-ref                       recorder-ref
+             :reload-recorder-fn                 reload-recorder
+             :idle?                              idle?
+             :on-send                            on-send
+             :on-cancel                          on-cancel
+             :theme                              theme}]
            [:f> record-button/f-record-button recording? reviewing-audio?]]])))])
+
+(def record-audio (quo.theme/with-theme record-audio-internal))
diff --git a/src/quo2/components/record_audio/soundtrack/view.cljs b/src/quo2/components/record_audio/soundtrack/view.cljs
@@ -4,14 +4,17 @@
             [react-native.audio-toolkit :as audio]
             [taoensso.timbre :as log]
             [react-native.platform :as platform]
-            [react-native.slider :as slider]))
+            [react-native.slider :as slider]
+            [quo2.components.record-audio.soundtrack.view :as soundtrack]
+            [quo2.theme :as quo.theme]))
 
 (def ^:private thumb-light (js/require "../resources/images/icons2/12x12/thumb-light.png"))
 (def ^:private thumb-dark (js/require "../resources/images/icons2/12x12/thumb-dark.png"))
 
 (defn f-soundtrack
   [{:keys [audio-current-time-ms player-ref style seeking-audio? max-audio-duration-ms]}]
-  (let [audio-duration-ms (min max-audio-duration-ms (audio/get-player-duration player-ref))]
+  (let [audio-duration-ms (min max-audio-duration-ms (audio/get-player-duration player-ref))
+        theme             (quo.theme/use-theme-value)]
     [:<>
      [slider/slider
       {:test-ID                  "soundtrack"
@@ -31,8 +34,9 @@
                                     #(log/error "[record-audio] on seek - error: " %)))
        :on-value-change          #(when @seeking-audio?
                                     (reset! audio-current-time-ms %))
-       :thumb-image              (if (colors/dark?) thumb-dark thumb-light)
-       :minimum-track-tint-color (colors/theme-colors colors/primary-50 colors/primary-60)
+       :thumb-image              (quo.theme/theme-value thumb-light thumb-dark theme)
+       :minimum-track-tint-color (colors/theme-colors colors/primary-50 colors/primary-60 theme)
        :maximum-track-tint-color (colors/theme-colors
                                   (if platform/ios? colors/neutral-20 colors/neutral-40)
-                                  (if platform/ios? colors/neutral-80 colors/neutral-60))}]]))
+                                  (if platform/ios? colors/neutral-80 colors/neutral-60)
+                                  theme)}]]))
diff --git a/src/quo2/foundations/colors.cljs b/src/quo2/foundations/colors.cljs
@@ -296,10 +296,6 @@
    (let [theme (or override-theme (theme/get-theme))]
      (if (= theme :light) light dark))))
 
-(defn dark?
-  []
-  (theme/dark?))
-
 ;;;; Networks
 
 (def networks

diff --git a/src/quo2/theme.cljs b/src/quo2/theme.cljs
@@ -43,6 +43,10 @@
   []
   (utils.transforms/js->clj (rn/use-context theme-context)))
 
+(defn use-theme-value
+  []
+  (keyword (:theme (use-theme))))
+
 (defn ^:private f-with-theme
   [component props & args]
   (let [theme (-> (use-theme) :theme keyword)]

diff --git a/src/status_im2/common/resources.cljs b/src/status_im2/common/resources.cljs
@@ -1,5 +1,4 @@
-(ns status-im2.common.resources
-  (:require [quo2.foundations.colors :as colors]))
+(ns status-im2.common.resources)
 
 (def ui
   {:add-new-contact               (js/require "../resources/images/ui2/add-contact.png")
@@ -49,6 +48,38 @@
    :no-notifications-light        (js/require "../resources/images/ui2/no-notifications-light.png")
    :no-notifications-dark         (js/require "../resources/images/ui2/no-notifications-dark.png")})
 
+(def ui-themed
+  {:no-messages
+   {:light (js/require "../resources/images/ui2/no-messages-light.png")
+    :dark  (js/require "../resources/images/ui2/no-messages-dark.png")}
+   :no-group-chats
+   {:light (js/require "../resources/images/ui2/no-group-chats-light.png")
+    :dark  (js/require "../resources/images/ui2/no-group-chats-dark.png")}
+   :no-contacts
+   {:light (js/require "../resources/images/ui2/no-contacts-light.png")
+    :dark  (js/require "../resources/images/ui2/no-contacts-dark.png")}
+   :no-sent-requests
+   {:light (js/require "../resources/images/ui2/no-sent-requests-light.png")
+    :dark  (js/require "../resources/images/ui2/no-sent-requests-dark.png")}
+   :no-received-requests
+   {:light (js/require "../resources/images/ui2/no-received-requests-light.png")
+    :dark  (js/require "../resources/images/ui2/no-received-requests-dark.png")}
+   :no-communities
+   {:light (js/require "../resources/images/ui2/no-communities-light.png")
+    :dark  (js/require "../resources/images/ui2/no-communities-dark.png")}
+   :no-pending-communities
+   {:light (js/require "../resources/images/ui2/no-pending-communities-light.png")
+    :dark  (js/require "../resources/images/ui2/no-pending-communities-dark.png")}
+   :no-opened-communities
+   {:light (js/require "../resources/images/ui2/no-opened-communities-light.png")
+    :dark  (js/require "../resources/images/ui2/no-opened-communities-dark.png")}
+   :no-contacts-to-invite
+   {:light (js/require "../resources/images/ui2/no-contacts-to-invite-light.png")
+    :dark  (js/require "../resources/images/ui2/no-contacts-to-invite-dark.png")}
+   :no-notifications
+   {:light (js/require "../resources/images/ui2/no-notifications-light.png")
+    :dark  (js/require "../resources/images/ui2/no-notifications-dark.png")}})
+
 (def mock-images
   {:diamond               (js/require "../resources/images/mock2/diamond.png")
    :coinbase              (js/require "../resources/images/mock2/coinbase.png")
@@ -88,6 +119,8 @@
                    (js/require "../resources/videos2/generating_keys_02.mp4")
                    (js/require "../resources/videos2/generating_keys_03.mp4")]})
 
+
+
 (defn get-mock-image
   [k]
   (get mock-images k))
@@ -97,5 +130,5 @@
   (get ui k))
 
 (defn get-themed-image
-  [k k2]
-  (get ui (if (colors/dark?) k k2)))
+  [k theme]
+  (get-in ui-themed [k theme]))