status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

chore: remove colors/dark? method from colors file and update uses (#17202)

This commit is contained in:
Jamie Caprani 2023-09-19 17:16:18 +02:00 committed by GitHub
parent cb9ae21cf2
commit 6279264ff1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 205 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/quo2/components/inputs/title_input/style.cljs
View File

@ -25,7 +25,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})

20
src/quo2/components/keycard/style.cljs
View File

@ -5,7 +5,7 @@
(def keycard-chip-height 28)
(defn card-container
[locked?]
[locked? theme]
{:overflow :hidden
:height keycard-height
:align-items :flex-start
@ -13,22 +13,26 @@
: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}]

18
src/quo2/components/keycard/view.cljs
View File

@ -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))

11
src/quo2/components/record_audio/record_audio/buttons/record_button_big.cljs
View File

@ -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)

42
src/quo2/components/record_audio/record_audio/view.cljs
View File

@ -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))

13
src/quo2/components/record_audio/soundtrack/view.cljs
View File

@ -4,14 +4,16 @@
[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.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 +33,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)}]]))

4
src/quo2/foundations/colors.cljs
View File

@ -314,7 +314,3 @@
([light dark override-theme]
(let [theme (or override-theme (theme/get-theme))]
(if (= theme :light) light dark))))
(defn dark?
[]
(theme/dark?))

4
src/quo2/theme.cljs
View File

@ -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)]

39
src/status_im2/common/resources.cljs
View File

@ -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")
@ -97,5 +128,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]))

56
src/status_im2/contexts/chat/messages/content/reactions/view.cljs
View File

@ -3,7 +3,8 @@
[quo2.core :as quo]
[react-native.core :as rn]
[utils.re-frame :as rf]
[status-im2.contexts.chat.messages.drawers.view :as drawers]))
[status-im2.contexts.chat.messages.drawers.view :as drawers]
[quo2.theme :as quo.theme]))
(defn- on-press
[own message-id emoji-id emoji-reaction-id]
@ -17,26 +18,29 @@
:emoji-id emoji-id}])))
(defn- on-long-press
[message-id emoji-id user-message-content reactions]
(rf/dispatch [:chat.ui/emoji-reactions-by-message-id
{:message-id message-id
:on-success (fn [response]
(rf/dispatch [:chat/save-emoji-reaction-details
{:reaction-authors-list response
:selected-reaction emoji-id}])
(rf/dispatch [:dismiss-keyboard])
(rf/dispatch [:show-bottom-sheet
{:on-close (fn []
(rf/dispatch
[:chat/clear-emoji-reaction-author-details]))
:content (fn []
[drawers/reaction-authors reactions])
:selected-item (fn []
user-message-content)
:padding-bottom-override 0}]))}]))
[{:keys [message-id emoji-id user-message-content reactions theme]}]
(rf/dispatch
[:chat.ui/emoji-reactions-by-message-id
{:message-id message-id
:on-success (fn [response]
(rf/dispatch [:chat/save-emoji-reaction-details
{:reaction-authors-list response
:selected-reaction emoji-id}])
(rf/dispatch [:dismiss-keyboard])
(rf/dispatch [:show-bottom-sheet
{:on-close (fn []
(rf/dispatch
[:chat/clear-emoji-reaction-author-details]))
:content (fn []
[drawers/reaction-authors
{:reactions-order reactions
:theme theme}])
:selected-item (fn []
user-message-content)
:padding-bottom-override 0}]))}]))
(defn message-reactions-row
[{:keys [message-id chat-id]} user-message-content]
(defn- view-internal
[{:keys [message-id chat-id theme]} user-message-content]
(let [reactions (rf/sub [:chats/message-reactions message-id chat-id])]
[:<>
(when (seq reactions)
@ -55,10 +59,12 @@
:neutral? own
:clicks quantity
:on-press #(on-press own message-id emoji-id emoji-reaction-id)
:on-long-press #(on-long-press message-id
emoji-id
user-message-content
(map :emoji-id reactions))
:on-long-press #(on-long-press
{:message-id message-id
:emoji-id emoji-id
:user-message-content user-message-content
:reactions (map :emoji-id reactions)
:theme theme})
:accessibility-label (str "emoji-reaction-" emoji-id)}]])
[quo/add-reaction
{:on-press (fn []
@ -70,3 +76,5 @@
:message-id message-id}])
:selected-item (fn []
user-message-content)}]))}]])]))
(def message-reactions-row (quo.theme/with-theme view-internal))

4
src/status_im2/contexts/chat/messages/drawers/style.cljs
View File

@ -12,8 +12,8 @@
:height 20})
(defn tab-count
[active?]
{:color (if (or active? (colors/dark?)) colors/white colors/neutral-100)})
[active? theme]
{:color (if (or active? (= :dark theme)) colors/white colors/neutral-100)})
(def tabs-container
{:flex 1

24
src/status_im2/contexts/chat/messages/drawers/view.cljs
View File

@ -27,8 +27,8 @@
:ens-verified ens-verified
:added? added?}]))
(defn get-tabs-data
[reaction-authors selected-tab reactions-order]
(defn- get-tabs-data
[{:keys [reaction-authors selected-tab reactions-order theme]}]
(map (fn [reaction-type-int]
(let [author-details (get reaction-authors reaction-type-int)]
{:id reaction-type-int
@ -42,12 +42,13 @@
{:weight :medium
:size :paragraph-1
:style (style/tab-count (= selected-tab
reaction-type-int))}
reaction-type-int)
theme)}
(count author-details)]]}))
reactions-order))
(defn reaction-authors-comp
[selected-tab reaction-authors reactions-order]
(defn- reaction-authors-comp
[{:keys [selected-tab reaction-authors reactions-order theme]}]
[:<>
[rn/view style/tabs-container
[quo/tabs
@ -56,7 +57,10 @@
:in-scroll-view? true
:on-change #(reset! selected-tab %)
:default-active @selected-tab
:data (get-tabs-data reaction-authors @selected-tab reactions-order)}]]
:data (get-tabs-data {:reaction-authors reaction-authors
:selected-tab @selected-tab
:reactions-order reactions-order
:theme theme})}]]
[gesture/flat-list
{:data (for [contact (get reaction-authors @selected-tab)]
contact)
@ -65,13 +69,17 @@
:style style/authors-list}]])
(defn reaction-authors
[reactions-order]
[{:keys [reactions-order theme]}]
(let [{:keys [reaction-authors-list
selected-reaction]} (rf/sub [:chat/reactions-authors])
selected-tab (reagent/atom (or selected-reaction
(first (keys reaction-authors-list))))]
(fn []
[reaction-authors-comp selected-tab reaction-authors-list reactions-order])))
[reaction-authors-comp
{:selected-tab selected-tab
:reaction-authors reaction-authors-list
:reactions-order reactions-order
:theme theme}])))
(defn pin-message
[{:keys [chat-id pinned pinned-by] :as message-data}]

19
src/status_im2/contexts/chat/new_chat/view.cljs
View File

@ -10,13 +10,14 @@
[status-im2.common.contact-list.view :as contact-list]
[status-im2.common.resources :as resources]
[status-im2.common.contact-list-item.view :as contact-list-item]
[status-im2.contexts.chat.new-chat.styles :as style]))
[status-im2.contexts.chat.new-chat.styles :as style]
[quo2.theme :as quo.theme]))
(defn- no-contacts-view
[]
[{:keys [theme]}]
[rn/view
{:style (style/no-contacts)}
[rn/image {:source (resources/get-themed-image :no-contacts-dark :no-contacts-light)}]
[rn/image {:source (resources/get-themed-image :no-contacts theme)}]
[quo/text
{:weight :semi-bold
:size :paragraph-1
@ -56,8 +57,8 @@
:on-check on-toggle}}
item])))
(defn view
[{:keys [scroll-enabled on-scroll close]}]
(defn- view-internal
[{:keys [scroll-enabled on-scroll close theme]}]
(let [contacts (rf/sub [:contacts/sorted-and-grouped-by-first-letter])
selected-contacts-count (rf/sub [:selected-contacts-count])
selected-contacts (rf/sub [:group/selected-contacts])
@ -77,19 +78,19 @@
[quo/text
{:weight :semi-bold
:size :heading-1
:style {:color (colors/theme-colors colors/neutral-100 colors/white)}}
:style {:color (colors/theme-colors colors/neutral-100 colors/white theme)}}
(i18n/label :t/new-chat)]
(when (seq contacts)
[quo/text
{:size :paragraph-2
:weight :regular
:style {:margin-bottom 2
:color (colors/theme-colors colors/neutral-40 colors/neutral-50)}}
:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)}}
(i18n/label :t/selected-count-from-max
{:selected selected-contacts-count
:max constants/max-group-chat-participants})])]]
(if (empty? contacts)
[no-contacts-view]
[no-contacts-view {:theme theme}]
[gesture/section-list
{:key-fn :title
:sticky-section-headers-enabled false
@ -111,3 +112,5 @@
(if one-contact-selected?
(i18n/label :t/chat-with {:selected-user primary-name})
(i18n/label :t/setup-group-chat))])]))
(def view (quo.theme/with-theme view-internal))

6
src/status_im2/contexts/shell/jump_to/utils.cljs
View File

@ -2,13 +2,13 @@
(:require [utils.re-frame :as rf]
[react-native.core :as rn]
[status-im2.config :as config]
[quo2.foundations.colors :as colors]
[react-native.platform :as platform]
[react-native.safe-area :as safe-area]
[react-native.reanimated :as reanimated]
[status-im.async-storage.core :as async-storage]
[status-im2.contexts.shell.jump-to.state :as state]
[status-im2.contexts.shell.jump-to.constants :as shell.constants]))
[status-im2.contexts.shell.jump-to.constants :as shell.constants]
[quo2.theme :as quo.theme]))
;;;; Helper Functions
@ -126,7 +126,7 @@
(defn change-shell-status-bar-style
[]
(rf/dispatch [:change-shell-status-bar-style
(if (or (colors/dark?)
(if (or (quo.theme/get-theme)
(not (home-stack-open?)))
:light
:dark)]))

9
src/status_im2/navigation/options.cljs
View File

@ -1,6 +1,7 @@
(ns status-im2.navigation.options
(:require [quo2.foundations.colors :as colors]
[react-native.platform :as platform]))
[react-native.platform :as platform]
[quo2.theme :as quo.theme]))
(defn default-options
[]
@ -44,12 +45,14 @@
(defn navbar
([dark?]
{:navigationBar {:backgroundColor (if (or dark? (colors/dark?)) colors/neutral-100 colors/white)}})
{:navigationBar {:backgroundColor (if (or dark? (= :dark (quo.theme/get-theme)))
colors/neutral-100
colors/white)}})
([] (navbar nil)))
(defn statusbar
([dark?]
(let [style (if (or dark? (colors/dark?)) :light :dark)]
(let [style (if (or dark? (= :dark (quo.theme/get-theme))) :light :dark)]
(if platform/android?
{:statusBar {:translucent true
:backgroundColor :transparent

68
src/status_im2/navigation/roots.cljs
View File

@ -2,7 +2,8 @@
(:require [status-im2.navigation.view :as views]
[quo2.foundations.colors :as colors]
[status-im2.navigation.options :as options]
[status-im2.constants :as constants]))
[status-im2.constants :as constants]
[quo2.theme :as quo.theme]))
(defn get-screen-options
[screen]
@ -80,38 +81,39 @@
(defn roots
[]
(merge (old-roots)
(merge
(old-roots)
{:intro
{:root
{:stack {:id :intro
:children [{:component {:name :intro
:id :intro
:options (options/default-root nil colors/neutral-100)}}]}}}
:shell-stack
{:root
{:stack {:id :shell-stack
:children [{:component {:name :shell-stack
:id :shell-stack
:options (options/default-root
(if (colors/dark?) :light :dark))}}]}}}
:profiles
{:root
{:stack {:id :profiles
:children [{:component {:name :profiles
:id :profiles
{:intro
{:root
{:stack {:id :intro
:children [{:component {:name :intro
:id :intro
:options (options/default-root nil colors/neutral-100)}}]}}}
:shell-stack
{:root
{:stack {:id :shell-stack
:children [{:component {:name :shell-stack
:id :shell-stack
:options (options/default-root
(if (= :dark (quo.theme/get-theme)) :light :dark))}}]}}}
:profiles
{:root
{:stack {:id :profiles
:children [{:component {:name :profiles
:id :profiles
:options (options/default-root)}}]}}}
:enable-notifications
{:root {:stack {:children [{:component {:name :enable-notifications
:id :enable-notifications
:options (options/default-root)}}]}}}
:enable-notifications
{:root {:stack {:children [{:component {:name :enable-notifications
:id :enable-notifications
:options (options/default-root)}}]}}}
:welcome
{:root {:stack {:children [{:component {:name :welcome
:id :welcome
:options (options/default-root)}}]}}}
:syncing-results
{:root {:stack {:children [{:component {:name :syncing-results
:id :syncing-results
:options (options/default-root)}}]}}}}))
:welcome
{:root {:stack {:children [{:component {:name :welcome
:id :welcome
:options (options/default-root)}}]}}}
:syncing-results
{:root {:stack {:children [{:component {:name :syncing-results
:id :syncing-results
:options (options/default-root)}}]}}}}))