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

Feature/remove reagent atom from theme (#19706)

This commit is contained in:
flexsurfer 2024-04-18 16:14:17 +02:00 committed by GitHub
parent 17afff272e
commit 2b40a4d0c4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
371 changed files with 3617 additions and 4080 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
scripts/lint/re-frame-in-quo-components.sh
View File

@ -1,9 +1,9 @@
#!/usr/bin/env sh #!/usr/bin/env sh
INVALID_CHANGES=$(grep -E -r '(re-frame/dispatch|rf/dispatch|re-frame/subscribe|rf/subscribe|rf/sub|<sub|>evt|status-im\.)' --include '*.cljs' --include '*.clj' './src/quo') INVALID_CHANGES=$(grep -E -r '(/atom|re-frame/dispatch|rf/dispatch|re-frame/subscribe|rf/subscribe|rf/sub|<sub|>evt|status-im\.)' --include '*.cljs' --include '*.clj' './src/quo')
if test -n "$INVALID_CHANGES"; then if test -n "$INVALID_CHANGES"; then
echo "WARNING: re-frame, status-im are not allowed in quo components" echo "WARNING: re-frame, status-im, reagent atoms are not allowed in quo components"
echo '' echo ''
echo "$INVALID_CHANGES" echo "$INVALID_CHANGES"
exit 1 exit 1

7
src/legacy/status_im/bottom_sheet/sheets.cljs
View File

@ -3,7 +3,7 @@
[legacy.status-im.bottom-sheet.view :as bottom-sheet] [legacy.status-im.bottom-sheet.view :as bottom-sheet]
[legacy.status-im.ui.screens.about-app.views :as about-app] [legacy.status-im.ui.screens.about-app.views :as about-app]
[legacy.status-im.ui.screens.mobile-network-settings.view :as mobile-network-settings] [legacy.status-im.ui.screens.mobile-network-settings.view :as mobile-network-settings]
[quo.theme :as theme] [quo.theme]
[react-native.core :as rn] [react-native.core :as rn]
[utils.re-frame :as rf])) [utils.re-frame :as rf]))
@ -23,8 +23,7 @@
(merge mobile-network-settings/offline-sheet) (merge mobile-network-settings/offline-sheet)
(= view :learn-more) (= view :learn-more)
(merge about-app/learn-more)) (merge about-app/learn-more))]
page-theme (:theme options)]
[:f> [:f>
(fn [] (fn []
@ -32,7 +31,7 @@
(rn/hw-back-add-listener dismiss-bottom-sheet-callback) (rn/hw-back-add-listener dismiss-bottom-sheet-callback)
(fn [] (fn []
(rn/hw-back-remove-listener dismiss-bottom-sheet-callback)))) (rn/hw-back-remove-listener dismiss-bottom-sheet-callback))))
[theme/provider {:theme (or page-theme (theme/get-theme))} [quo.theme/provider (or (:theme options))
[bottom-sheet/bottom-sheet opts [bottom-sheet/bottom-sheet opts
(when content (when content
[content (when options options)])]])])) [content (when options options)])]])]))

4
src/legacy/status_im/events.cljs
View File

@ -189,8 +189,8 @@
:db (assoc db :screens/was-focused-once? true)} :db (assoc db :screens/was-focused-once? true)}
(not (get db :screens/was-focused-once?)) (not (get db :screens/was-focused-once?))
{:db (assoc db :screens/was-focused-once? true)}) {:db (assoc db :screens/was-focused-once? true)})))
))
;;TODO :replace by named events ;;TODO :replace by named events
(rf/defn set-event (rf/defn set-event

8
src/legacy/status_im/ui/components/chat_icon/screen.cljs
View File

@ -8,7 +8,7 @@
[legacy.status-im.ui.screens.profile.visibility-status.utils :as visibility-status-utils] [legacy.status-im.ui.screens.profile.visibility-status.utils :as visibility-status-utils]
[quo.components.avatars.user-avatar.style :as user-avatar.style] [quo.components.avatars.user-avatar.style :as user-avatar.style]
[quo.core :as quo] [quo.core :as quo]
[quo.theme :as theme] [quo.theme]
[re-frame.core :as re-frame.core] [re-frame.core :as re-frame.core]
[react-native.core :as rn] [react-native.core :as rn]
[status-im.contexts.profile.utils :as profile.utils] [status-im.contexts.profile.utils :as profile.utils]
@ -52,7 +52,8 @@
(defn profile-photo-plus-dot-view (defn profile-photo-plus-dot-view
[{:keys [public-key full-name customization-color photo-container photo-path community?]}] [{:keys [public-key full-name customization-color photo-container photo-path community?]}]
(let [photo-container (if (nil? photo-container) (let [theme @(re-frame.core/subscribe [:theme])
photo-container (if (nil? photo-container)
styles/container-chat-list styles/container-chat-list
photo-container) photo-container)
size (:width photo-container) size (:width photo-container)
@ -71,8 +72,7 @@
{:size size {:size size
:full-name full-name :full-name full-name
:font-size (get text-style :font-size) :font-size (get text-style :font-size)
:background-color (user-avatar.style/customization-color customization-color :background-color (user-avatar.style/customization-color customization-color theme)
(theme/get-theme))
:indicator-size 0 :indicator-size 0
:indicator-border 0 :indicator-border 0
:indicator-color "#000000" :indicator-color "#000000"

7
src/legacy/status_im/ui/components/topbar.cljs
View File

@ -2,6 +2,7 @@
(:require (:require
[legacy.status-im.ui.components.core :as quo] [legacy.status-im.ui.components.core :as quo]
[quo.foundations.colors :as quo.colors] [quo.foundations.colors :as quo.colors]
[quo.theme]
[re-frame.core :as re-frame] [re-frame.core :as re-frame]
[react-native.safe-area :as safe-area])) [react-native.safe-area :as safe-area]))
@ -32,7 +33,8 @@
:or {border-bottom? true :or {border-bottom? true
new-ui? false} new-ui? false}
:as props}] :as props}]
(let [navigation (if (= navigation :none) (let [theme (quo.theme/use-theme)
navigation (if (= navigation :none)
nil nil
[(default-navigation modal? navigation)])] [(default-navigation modal? navigation)])]
[quo/header [quo/header
@ -47,4 +49,5 @@
{:right-accessories right-accessories}) {:right-accessories right-accessories})
(when new-ui? (when new-ui?
{:background (quo.colors/theme-colors quo.colors/neutral-5 {:background (quo.colors/theme-colors quo.colors/neutral-5
quo.colors/neutral-95)}))])) quo.colors/neutral-95
theme)}))]))

70
src/legacy/status_im/ui/screens/chat/message/legacy_style.cljs
View File

@ -46,22 +46,22 @@
:color colors/gray}) :color colors/gray})
(defn message-default-style (defn message-default-style
[] [theme]
{:font-family "Inter-Regular" {:font-family "Inter-Regular"
:color (quo.colors/theme-colors quo.colors/neutral-100 quo.colors/white) :color (quo.colors/theme-colors quo.colors/neutral-100 quo.colors/white theme)
:font-size 15 :font-size 15
:line-height 21.75 :line-height 21.75
:letter-spacing -0.135}) :letter-spacing -0.135})
;; Markdown styles ;; Markdown styles
(defn default-text-style (defn default-text-style
[] [theme]
{:max-font-size-multiplier react/max-font-size-multiplier {:max-font-size-multiplier react/max-font-size-multiplier
:style (message-default-style)}) :style (message-default-style theme)})
(defn system-text-style (defn system-text-style
[] [theme]
(update (default-text-style) (update (default-text-style theme)
:style assoc :style assoc
:color colors/gray :color colors/gray
:line-height 20 :line-height 20
@ -70,65 +70,65 @@
:font-weight "400")) :font-weight "400"))
(defn text-style (defn text-style
[content-type in-popover?] [content-type in-popover? theme]
(merge (merge
(when in-popover? {:number-of-lines 2}) (when in-popover? {:number-of-lines 2})
(cond (cond
(= content-type constants/content-type-system-text) (system-text-style) (= content-type constants/content-type-system-text) (system-text-style theme)
(= content-type constants/content-type-system-pinned-message) (system-text-style) (= content-type constants/content-type-system-pinned-message) (system-text-style theme)
:else (default-text-style)))) :else (default-text-style theme))))
(defn emph-text-style (defn emph-text-style
[] [theme]
(update (default-text-style) (update (default-text-style theme)
:style :style
assoc assoc
:font-style :italic)) :font-style :italic))
(defn emph-style (defn emph-style
[] [theme]
(emph-text-style)) (emph-text-style theme))
(defn strong-text-style (defn strong-text-style
[] [theme]
(update (default-text-style) (update (default-text-style theme)
:style :style
assoc assoc
:font-weight "700")) :font-weight "700"))
(defn outgoing-strong-text-style (defn outgoing-strong-text-style
[] [theme]
(update (strong-text-style) (update (strong-text-style theme)
:style :style
assoc assoc
:color colors/white-persist)) :color colors/white-persist))
(defn strong-style (defn strong-style
[] [theme]
(outgoing-strong-text-style) (outgoing-strong-text-style theme)
(strong-text-style)) (strong-text-style theme))
(defn strong-emph-style (defn strong-emph-style
[] [theme]
(update (strong-style) (update (strong-style theme)
:style :style
assoc assoc
:font-style :italic)) :font-style :italic))
(defn strikethrough-style (defn strikethrough-style
[] [theme]
(cond-> (update (default-text-style) (cond-> (update (default-text-style theme)
:style :style
assoc assoc
:text-decoration-line :line-through))) :text-decoration-line :line-through)))
(defn edited-style (defn edited-style
[] [theme]
(cond-> (cond->
(update (default-text-style) (update (default-text-style theme)
:style :style
assoc assoc
:color (quo.colors/theme-colors quo.colors/neutral-40 quo.colors/neutral-50) :color (quo.colors/theme-colors quo.colors/neutral-40 quo.colors/neutral-50 theme)
:font-size 13 :font-size 13
:line-height 18.2 :line-height 18.2
:letter-spacing (typography/tracking 13)))) :letter-spacing (typography/tracking 13))))
@ -149,8 +149,8 @@
(default-blockquote-style)) (default-blockquote-style))
(defn default-blockquote-text-style (defn default-blockquote-text-style
[] [theme]
(update (default-text-style) (update (default-text-style theme)
:style :style
assoc assoc
:line-height 19 :line-height 19
@ -158,16 +158,16 @@
:color colors/black-transparent-50)) :color colors/black-transparent-50))
(defn outgoing-blockquote-text-style (defn outgoing-blockquote-text-style
[] [theme]
(update (default-blockquote-text-style) (update (default-blockquote-text-style theme)
:style :style
assoc assoc
:color colors/white-transparent-70-persist)) :color colors/white-transparent-70-persist))
(defn blockquote-text-style (defn blockquote-text-style
[] [theme]
(outgoing-blockquote-text-style) (outgoing-blockquote-text-style theme)
(default-blockquote-text-style)) (default-blockquote-text-style theme))
(defn community-verified (defn community-verified
[] []

71
src/legacy/status_im/ui/screens/chat/message/legacy_view.cljs
View File

@ -6,6 +6,7 @@
[quo.core :as quo] [quo.core :as quo]
[quo.foundations.colors :as colors] [quo.foundations.colors :as colors]
[quo.foundations.typography :as typography] [quo.foundations.typography :as typography]
[quo.theme]
[react-native.core :as rn] [react-native.core :as rn]
[status-im.constants :as constants] [status-im.constants :as constants]
[status-im.contexts.chat.messenger.messages.delete-message-for-me.events] [status-im.contexts.chat.messenger.messages.delete-message-for-me.events]
@ -26,7 +27,7 @@
(defn render-inline (defn render-inline
[_message-text content-type acc {:keys [type literal destination]} [_message-text content-type acc {:keys [type literal destination]}
community-id] community-id theme]
(case type (case type
"" ""
(conj acc literal) (conj acc literal)
@ -35,24 +36,25 @@
(conj acc [rn/text literal]) (conj acc [rn/text literal])
"emph" "emph"
(conj acc [rn/text (style/emph-style) literal]) (conj acc [rn/text (style/emph-style theme) literal])
"strong" "strong"
(conj acc [rn/text (style/strong-style) literal]) (conj acc [rn/text (style/strong-style theme) literal])
"strong-emph" "strong-emph"
(conj acc [quo/text (style/strong-emph-style) literal]) (conj acc [quo/text (style/strong-emph-style theme) literal])
"del" "del"
(conj acc [rn/text (style/strikethrough-style) literal]) (conj acc [rn/text (style/strikethrough-style theme) literal])
"link" "link"
(conj acc (conj
[rn/text acc
{:style {:color (colors/theme-colors colors/primary-50 colors/primary-60) [rn/text
:text-decoration-line :underline} {:style {:color (colors/theme-colors colors/primary-50 colors/primary-60 theme)
:on-press #(rf/dispatch [:browser.ui/message-link-pressed destination])} :text-decoration-line :underline}
destination]) :on-press #(rf/dispatch [:browser.ui/message-link-pressed destination])}
destination])
"mention" "mention"
(conj (conj
@ -66,17 +68,18 @@
#(rf/dispatch [:chat.ui/show-profile literal]))} #(rf/dispatch [:chat.ui/show-profile literal]))}
[mention-element literal]]]) [mention-element literal]]])
"status-tag" "status-tag"
(conj acc (conj
[rn/text acc
(when community-id [rn/text
{:style {:color (colors/theme-colors colors/primary-50 colors/primary-60) (when community-id
:text-decoration-line :underline} {:style {:color (colors/theme-colors colors/primary-50 colors/primary-60 theme)
:on-press #(rf/dispatch [:communities/status-tag-pressed community-id literal])}) :text-decoration-line :underline}
"#" :on-press #(rf/dispatch [:communities/status-tag-pressed community-id literal])})
literal]) "#"
literal])
"edited" "edited"
(conj acc [rn/text (style/edited-style) (str " (" (i18n/label :t/edited) ")")]) (conj acc [rn/text (style/edited-style theme) (str " (" (i18n/label :t/edited) ")")])
(conj acc literal))) (conj acc literal)))
@ -84,7 +87,7 @@
(defn render-block (defn render-block
[{:keys [content content-type edited-at in-popover?]} acc [{:keys [content content-type edited-at in-popover?]} acc
{:keys [type ^js literal children]} {:keys [type ^js literal children]}
community-id] community-id theme]
(case type (case type
@ -96,8 +99,9 @@
content-type content-type
acc acc
e e
community-id)) community-id
[rn/text (style/text-style content-type in-popover?)] theme))
[rn/text (style/text-style content-type in-popover? theme)]
(conj (conj
children children
(when edited-at (when edited-at
@ -106,7 +110,7 @@
"blockquote" "blockquote"
(conj acc (conj acc
[rn/view (style/blockquote-style) [rn/view (style/blockquote-style)
[rn/text (style/blockquote-text-style) [rn/text (style/blockquote-text-style theme)
(.substring literal 0 (.-length literal))]]) (.substring literal 0 (.-length literal))]])
"codeblock" "codeblock"
@ -119,12 +123,14 @@
(defn render-parsed-text (defn render-parsed-text
[{:keys [content chat-id] [{:keys [content chat-id]
:as message-data}] :as message-data}]
(let [community-id (rf/sub [:community-id-by-chat-id chat-id])] (let [community-id (rf/sub [:community-id-by-chat-id chat-id])
theme (quo.theme/use-theme)]
(reduce (fn [acc e] (reduce (fn [acc e]
(render-block message-data (render-block message-data
acc acc
e e
community-id)) community-id
theme))
[:<>] [:<>]
(:parsed-text content)))) (:parsed-text content))))
@ -137,12 +143,13 @@
;; STATUS ? whats that ? ;; STATUS ? whats that ?
(defmethod ->message constants/content-type-status (defmethod ->message constants/content-type-status
[{:keys [content content-type]}] [{:keys [content content-type]}]
[rn/view style/status-container (let [theme (quo.theme/use-theme)]
[rn/text {:style (style/status-text)} [rn/view style/status-container
(reduce [rn/text {:style (style/status-text)}
(fn [acc e] (render-inline (:text content) content-type acc e nil)) (reduce
[rn/text {:style (style/status-text)}] (fn [acc e] (render-inline (:text content) content-type acc e nil theme))
(-> content :parsed-text peek :children))]]) [rn/text {:style (style/status-text)}]
(-> content :parsed-text peek :children))]]))
(defn contact-request-status-pending (defn contact-request-status-pending
[] []

6
src/legacy/status_im/ui/screens/profile/contact/views.cljs
View File

@ -11,7 +11,7 @@
[legacy.status-im.ui.components.topbar :as topbar] [legacy.status-im.ui.components.topbar :as topbar]
[legacy.status-im.ui.screens.profile.components.sheets :as sheets] [legacy.status-im.ui.screens.profile.components.sheets :as sheets]
[quo.components.avatars.user-avatar.style :as user-avatar.style] [quo.components.avatars.user-avatar.style :as user-avatar.style]
[quo.theme :as theme] [quo.theme]
[re-frame.core :as re-frame] [re-frame.core :as re-frame]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im.constants :as constants] [status-im.constants :as constants]
@ -184,6 +184,7 @@
:as profile} @(re-frame/subscribe [:contacts/current-contact]) :as profile} @(re-frame/subscribe [:contacts/current-contact])
muted? @(re-frame/subscribe [:chats/muted public-key]) muted? @(re-frame/subscribe [:chats/muted public-key])
customization-color (or customization-color :primary) customization-color (or customization-color :primary)
theme @(re-frame/subscribe [:theme])
on-share #(re-frame/dispatch [:show-popover on-share #(re-frame/dispatch [:show-popover
(merge (merge
{:view :share-chat-key {:view :share-chat-key
@ -205,8 +206,7 @@
{:on-press on-share {:on-press on-share
:bottom-separator false :bottom-separator false
:title (profile.utils/displayed-name profile) :title (profile.utils/displayed-name profile)
:color (user-avatar.style/customization-color customization-color :color (user-avatar.style/customization-color customization-color theme)
(theme/get-theme))
:photo (profile.utils/photo profile) :photo (profile.utils/photo profile)
:monospace (not ens-verified) :monospace (not ens-verified)
:subtitle secondary-name :subtitle secondary-name

5
src/legacy/status_im/ui/screens/profile/user/views.cljs
View File

@ -14,7 +14,7 @@
[legacy.status-im.ui.screens.profile.visibility-status.views :as visibility-status] [legacy.status-im.ui.screens.profile.visibility-status.views :as visibility-status]
[legacy.status-im.utils.utils :as utils] [legacy.status-im.utils.utils :as utils]
[quo.components.avatars.user-avatar.style :as user-avatar.style] [quo.components.avatars.user-avatar.style :as user-avatar.style]
[quo.theme :as theme] [quo.theme]
[re-frame.core :as re-frame] [re-frame.core :as re-frame]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im.common.qr-codes.view :as qr-codes] [status-im.common.qr-codes.view :as qr-codes]
@ -200,6 +200,7 @@
@(re-frame/subscribe [:profile/profile-with-image]) @(re-frame/subscribe [:profile/profile-with-image])
customization-color (or (:color @(re-frame/subscribe [:onboarding/profile])) customization-color (or (:color @(re-frame/subscribe [:onboarding/profile]))
@(re-frame/subscribe [:profile/customization-color key-uid])) @(re-frame/subscribe [:profile/customization-color key-uid]))
theme @(re-frame/subscribe [:theme])
on-share #(re-frame/dispatch [:show-popover on-share #(re-frame/dispatch [:show-popover
{:view :share-chat-key {:view :share-chat-key
:address (or compressed-key :address (or compressed-key
@ -221,7 +222,7 @@
{:content (edit/bottom-sheet {:content (edit/bottom-sheet
has-picture)}]) has-picture)}])
:color (user-avatar.style/customization-color customization-color :color (user-avatar.style/customization-color customization-color
(theme/get-theme)) theme)
:title (profile.utils/displayed-name profile) :title (profile.utils/displayed-name profile)
:photo (profile.utils/photo profile) :photo (profile.utils/photo profile)
:monospace (not ens-verified) :monospace (not ens-verified)

9
src/legacy/status_im/ui/screens/profile/visibility_status/styles.cljs
View File

@ -17,14 +17,14 @@
:padding-right 12}) :padding-right 12})
(defn visibility-status-dot (defn visibility-status-dot
[{:keys [color size new-ui?]}] [{:keys [color size new-ui?]} theme]
(if new-ui? (if new-ui?
{:background-color color {:background-color color
:width size :width size
:height size :height size
:border-radius (/ size 2) :border-radius (/ size 2)
:border-width 3.5 :border-width 3.5
:border-color (quo.colors/theme-colors quo.colors/white quo.colors/neutral-90)} :border-color (quo.colors/theme-colors quo.colors/white quo.colors/neutral-90 theme)}
{:background-color color {:background-color color
:width size :width size
:height size :height size
@ -33,10 +33,11 @@
:border-color colors/white})) :border-color colors/white}))
(defn visibility-status-profile-dot (defn visibility-status-profile-dot
[{:keys [color size border-width margin-left new-ui?]}] [{:keys [color size border-width margin-left new-ui?]} theme]
(merge (visibility-status-dot {:color color (merge (visibility-status-dot {:color color
:size size :size size
:new-ui? new-ui?}) :new-ui? new-ui?}
theme)
{:margin-right 6 {:margin-right 6
:margin-left margin-left :margin-left margin-left
:border-width border-width})) :border-width border-width}))

5
src/legacy/status_im/ui/screens/profile/visibility_status/utils.cljs
View File

@ -3,6 +3,7 @@
[legacy.status-im.ui.components.colors :as colors] [legacy.status-im.ui.components.colors :as colors]
[legacy.status-im.ui.screens.profile.visibility-status.styles :as styles] [legacy.status-im.ui.screens.profile.visibility-status.styles :as styles]
[quo.foundations.colors :as quo.colors] [quo.foundations.colors :as quo.colors]
[quo.theme]
[status-im.constants :as constants] [status-im.constants :as constants]
[utils.datetime :as datetime] [utils.datetime :as datetime]
[utils.i18n :as i18n] [utils.i18n :as i18n]
@ -90,13 +91,15 @@
(defn icon-visibility-status-dot (defn icon-visibility-status-dot
[public-key container-size] [public-key container-size]
(let [status (rf/sub [:visibility-status-updates/visibility-status-update public-key]) (let [status (rf/sub [:visibility-status-updates/visibility-status-update public-key])
theme (quo.theme/use-theme)
size (icon-dot-size container-size) size (icon-dot-size container-size)
margin -2 margin -2
dot-color (icon-dot-color status) dot-color (icon-dot-color status)
new-ui? true] new-ui? true]
(merge (styles/visibility-status-dot {:color dot-color (merge (styles/visibility-status-dot {:color dot-color
:size size :size size
:new-ui? new-ui?}) :new-ui? new-ui?}
theme)
{:bottom margin {:bottom margin
:right margin :right margin
:position :absolute :position :absolute

8
src/legacy/status_im/ui/screens/profile/visibility_status/views.cljs
View File

@ -37,7 +37,7 @@
(dispatch-popover page-y)))) (dispatch-popover page-y))))
(defn profile-visibility-status-dot (defn profile-visibility-status-dot
[status-type color] [status-type color theme]
(let [automatic? (= status-type (let [automatic? (= status-type
constants/visibility-status-automatic) constants/visibility-status-automatic)
[border-width margin-left size] (if automatic? [1 -10 12] [0 6 10]) [border-width margin-left size] (if automatic? [1 -10 12] [0 6 10])
@ -50,14 +50,16 @@
:size size :size size
:border-width border-width :border-width border-width
:margin-left 6 :margin-left 6
:new-ui? new-ui?})}]) :new-ui? new-ui?}
theme)}])
[rn/view [rn/view
{:style (styles/visibility-status-profile-dot {:style (styles/visibility-status-profile-dot
{:color color {:color color
:size size :size size
:border-width border-width :border-width border-width
:margin-left margin-left :margin-left margin-left
:new-ui? new-ui?})}]])) :new-ui? new-ui?}
theme)}]]))
(defn visibility-status-button (defn visibility-status-button
[on-press props] [on-press props]

2
src/quo/components/animated_header_flatlist/view.cljs
View File

@ -54,7 +54,7 @@
(defn- f-animated-header-list (defn- f-animated-header-list
[{:keys [header-comp main-comp back-button-on-press] :as params}] [{:keys [header-comp main-comp back-button-on-press] :as params}]
(let [theme (quo.theme/use-theme-value) (let [theme (quo.theme/use-theme)
window-height (:height (rn/get-window)) window-height (:height (rn/get-window))
{:keys [top bottom]} (safe-area/get-insets) {:keys [top bottom]} (safe-area/get-insets)
;; view height calculation is different because window height is different on iOS and ;; view height calculation is different because window height is different on iOS and

4
src/quo/components/avatars/account_avatar/component_spec.cljs
View File

@ -29,7 +29,7 @@
{:height (:size opts) {:height (:size opts)
:width (:size opts) :width (:size opts)
:borderRadius (style/get-border-radius (:size opts)) :borderRadius (style/get-border-radius (:size opts))
:backgroundColor (colors/resolve-color (:customization-color opts) :dark)}) :backgroundColor (colors/resolve-color (:customization-color opts) :light)})
(h/is-truthy (h/query-by-label-text :account-emoji)) (h/is-truthy (h/query-by-label-text :account-emoji))
(h/has-style (h/query-by-label-text :account-emoji) (h/has-style (h/query-by-label-text :account-emoji)
{:fontSize (style/get-emoji-size (:size opts))}) {:fontSize (style/get-emoji-size (:size opts))})
@ -65,7 +65,7 @@
{:height (:size opts) {:height (:size opts)
:width (:size opts) :width (:size opts)
:borderRadius (style/get-border-radius (:size opts)) :borderRadius (style/get-border-radius (:size opts))
:backgroundColor (colors/resolve-color (:customization-color opts) :dark)}) :backgroundColor (colors/resolve-color (:customization-color opts) :light)})
(h/is-truthy (h/query-by-label-text :account-emoji)) (h/is-truthy (h/query-by-label-text :account-emoji))
(h/has-style (h/query-by-label-text :account-emoji) (h/has-style (h/query-by-label-text :account-emoji)
{:fontSize (style/get-emoji-size (:size opts))}) {:fontSize (style/get-emoji-size (:size opts))})

5
src/quo/components/avatars/account_avatar/style.cljs
View File

@ -56,9 +56,10 @@
(defn root-container (defn root-container
[{:keys [type size theme customization-color] [{:keys [type size customization-color]
:or {size default-size :or {size default-size
customization-color :blue}}] customization-color :blue}}
theme]
(let [watch-only? (= type :watch-only) (let [watch-only? (= type :watch-only)
width (cond-> size width (cond-> size
(keyword? size) (container-size size))] (keyword? size) (container-size size))]

9
src/quo/components/avatars/account_avatar/view.cljs
View File

@ -5,7 +5,7 @@
[quo.theme :as quo.theme] [quo.theme :as quo.theme]
[react-native.core :as rn])) [react-native.core :as rn]))
(defn- view-internal (defn view
"Opts: "Opts:
:type - keyword -> :default/:watch-only :type - keyword -> :default/:watch-only
@ -21,15 +21,14 @@
:or {size style/default-size :or {size style/default-size
emoji "🍑"} emoji "🍑"}
:as opts}] :as opts}]
(let [emoji-size (style/get-emoji-size size)] (let [theme (quo.theme/use-theme)
emoji-size (style/get-emoji-size size)]
[rn/view [rn/view
{:accessible true {:accessible true
:accessibility-label :account-avatar :accessibility-label :account-avatar
:style (style/root-container opts)} :style (style/root-container opts theme)}
[rn/text [rn/text
{:accessibility-label :account-emoji {:accessibility-label :account-emoji
:adjusts-font-size-to-fit true :adjusts-font-size-to-fit true
:style {:font-size emoji-size}} :style {:font-size emoji-size}}
(when emoji (string/trim emoji))]])) (when emoji (string/trim emoji))]]))
(def view (quo.theme/with-theme view-internal))

39
src/quo/components/avatars/channel_avatar/view.cljs
View File

@ -34,7 +34,7 @@
:container-style style/lock-icon :container-style style/lock-icon
:size 12}]])) :size 12}]]))
(defn- view-internal (defn view
"Options: "Options:
:size - keyword (default nil) - Container size, for the moment, :size - keyword (default nil) - Container size, for the moment,
@ -52,22 +52,21 @@
:full-name - string (default nil) - When :emoji is blank, this value will be :full-name - string (default nil) - When :emoji is blank, this value will be
used to extract the initials. used to extract the initials.
" "
[{:keys [size emoji customization-color locked? full-name theme]}] [{:keys [size emoji customization-color locked? full-name]}]
[rn/view (let [theme (quo.theme/use-theme)]
{:accessibility-label :channel-avatar [rn/view
:style (style/outer-container {:theme theme {:accessibility-label :channel-avatar
:size size :style (style/outer-container {:theme theme
:customization-color customization-color})} :size size
(if (string/blank? emoji) :customization-color customization-color})}
[initials (if (string/blank? emoji)
{:full-name full-name [initials
:size size {:full-name full-name
:customization-color customization-color :size size
:theme theme}] :customization-color customization-color
[rn/text :theme theme}]
{:style (style/emoji-size size) [rn/text
:accessibility-label :emoji} {:style (style/emoji-size size)
(when emoji (string/trim emoji))]) :accessibility-label :emoji}
[lock locked? size theme]]) (when emoji (string/trim emoji))])
[lock locked? size theme]]))
(def view (quo.theme/with-theme view-internal))

19
src/quo/components/avatars/collection_avatar/view.cljs
View File

@ -4,17 +4,16 @@
[quo.theme :as quo.theme] [quo.theme :as quo.theme]
[react-native.fast-image :as fast-image])) [react-native.fast-image :as fast-image]))
(defn- view-internal (defn view
"Opts: "Opts:
:image - collection image :image - collection image
:theme - keyword -> :light/:dark" :theme - keyword -> :light/:dark"
[{:keys [image theme size on-load-end on-error] :or {size :size-24}}] [{:keys [image size on-load-end on-error] :or {size :size-24}}]
[fast-image/fast-image (let [theme (quo.theme/use-theme)]
{:accessibility-label :collection-avatar [fast-image/fast-image
:source image {:accessibility-label :collection-avatar
:on-load-end on-load-end :source image
:on-error on-error :on-load-end on-load-end
:style (style/collection-avatar theme size)}]) :on-error on-error
:style (style/collection-avatar theme size)}]))
(def view (quo.theme/with-theme view-internal))

84
src/quo/components/avatars/group_avatar/view.cljs
View File

@ -21,46 +21,44 @@
:size-80 {:icon 32 :size-80 {:icon 32
:container 80}}) :container 80}})
(defn- view-internal (defn view
[_] [{:keys [size customization-color picture icon-name emoji chat-name]
(fn [{:keys [size theme customization-color picture icon-name emoji chat-name] :or {size :size-20
:or {size :size-20 customization-color :blue
customization-color :blue picture nil
picture nil icon-name :i/members}}]
icon-name :i/members}}] (let [theme (quo.theme/use-theme)
(let [container-size (get-in sizes [size :container]) container-size (get-in sizes [size :container])
icon-size (get-in sizes [size :icon])] icon-size (get-in sizes [size :icon])]
[rn/view [rn/view
{:accessibility-label :group-avatar {:accessibility-label :group-avatar
:style (style/container {:container-size container-size :style (style/container {:container-size container-size
:customization-color customization-color :customization-color customization-color
:theme theme})} :theme theme})}
(if picture (if picture
[fast-image/fast-image [fast-image/fast-image
{:source picture {:source picture
:style {:width container-size :style {:width container-size
:height container-size}}] :height container-size}}]
(cond (cond
emoji emoji
(if (= size :size-80) (if (= size :size-80)
[rn/text [rn/text
{:style (style/avatar-identifier theme)} {:style (style/avatar-identifier theme)}
emoji] emoji]
[text/text [text/text
{:size :paragraph-1 {:size :paragraph-1
:style (dissoc (style/avatar-identifier theme) :font-size)} :style (dissoc (style/avatar-identifier theme) :font-size)}
emoji]) emoji])
chat-name chat-name
(if (= size :size-80) (if (= size :size-80)
[rn/text [rn/text
{:style (style/avatar-identifier theme)} {:style (style/avatar-identifier theme)}
((comp first string/upper-case) chat-name)] ((comp first string/upper-case) chat-name)]
[text/text [text/text
{:size :paragraph-1} {:size :paragraph-1}
((comp first string/upper-case) chat-name)]) ((comp first string/upper-case) chat-name)])
:else :else
[icon/icon icon-name [icon/icon icon-name
{:size icon-size {:size icon-size
:color colors/white-opa-70}]))]))) :color colors/white-opa-70}]))]))
(def view (quo.theme/with-theme view-internal))

9
src/quo/components/avatars/icon_avatar.cljs
View File

@ -15,11 +15,12 @@
:size-20 {:component 20 :size-20 {:component 20
:icon 12}}) :icon 12}})
(defn icon-avatar-internal (defn icon-avatar
[{:keys [size icon color opacity border? theme] [{:keys [size icon color opacity border?]
:or {opacity 20 :or {opacity 20
size :size-32}}] size :size-32}}]
(let [{component-size :component icon-size :icon} (get sizes size) (let [theme (quo.theme/use-theme)
{component-size :component icon-size :icon} (get sizes size)
circle-color (colors/resolve-color color theme opacity) circle-color (colors/resolve-color color theme opacity)
icon-color (colors/resolve-color color theme)] icon-color (colors/resolve-color color theme)]
(if (keyword? icon) (if (keyword? icon)
@ -38,5 +39,3 @@
[rn/image [rn/image
{:source icon {:source icon
:style {:width component-size :height component-size}}]))) :style {:width component-size :height component-size}}])))
(def icon-avatar (quo.theme/with-theme icon-avatar-internal))

1
src/quo/components/avatars/user_avatar/schema.cljs
View File

@ -14,7 +14,6 @@
[:status-indicator? {:optional true} [:maybe boolean?]] [:status-indicator? {:optional true} [:maybe boolean?]]
[:online? {:optional true} [:maybe boolean?]] [:online? {:optional true} [:maybe boolean?]]
[:ring? {:optional true} [:maybe boolean?]] [:ring? {:optional true} [:maybe boolean?]]
[:theme :schema.common/theme]
[:profile-picture [:profile-picture
{:optional true} {:optional true}
[:maybe :schema.quo/profile-picture-source]]]]] [:maybe :schema.quo/profile-picture-source]]]]]

4
src/quo/components/avatars/user_avatar/style.cljs
View File

@ -66,8 +66,8 @@
:background-color (colors/resolve-color customization-color theme)})) :background-color (colors/resolve-color customization-color theme)}))
(defn indicator-color (defn indicator-color
[] [theme]
{:online (colors/theme-colors colors/success-50 colors/success-60) {:online (colors/theme-colors colors/success-50 colors/success-60 theme)
:offline colors/neutral-40}) :offline colors/neutral-40})
(defn outer (defn outer

20
src/quo/components/avatars/user_avatar/view.cljs
View File

@ -11,9 +11,10 @@
utils.string)) utils.string))
(defn initials-avatar (defn initials-avatar
[{:keys [full-name size customization-color theme] [{:keys [full-name size customization-color]
:or {customization-color :blue}}] :or {customization-color :blue}}]
(let [font-size (get-in style/sizes [size :font-size]) (let [theme (quo.theme/use-theme)
font-size (get-in style/sizes [size :font-size])
amount-initials (if (#{:xs :xxs :xxxs} size) 1 2)] amount-initials (if (#{:xs :xxs :xxxs} size) 1 2)]
[rn/view [rn/view
{:accessibility-label :initials-avatar {:accessibility-label :initials-avatar
@ -31,14 +32,14 @@
When calling the `profile-picture-fn` and passing the `:ring?` key, be aware that the `profile-picture-fn` When calling the `profile-picture-fn` and passing the `:ring?` key, be aware that the `profile-picture-fn`
may have an `:override-ring?` value. If it does then the `:ring?` value will not be used. may have an `:override-ring?` value. If it does then the `:ring?` value will not be used.
For reference, refer to the `utils.image-server` namespace for these `profile-picture-fn` are generated." For reference, refer to the `utils.image-server` namespace for these `profile-picture-fn` are generated."
[{:keys [full-name size profile-picture static? [{:keys [full-name size profile-picture static? status-indicator? online? ring?]
status-indicator? online? ring? theme]
:or {size :big :or {size :big
status-indicator? true status-indicator? true
online? true online? true
ring? true} ring? true}
:as props}] :as props}]
(let [full-name (or full-name "Your Name") (let [theme (quo.theme/use-theme)
full-name (or full-name "Your Name")
;; image generated with `profile-picture-fn` is round cropped ;; image generated with `profile-picture-fn` is round cropped
;; no need to add border-radius for them ;; no need to add border-radius for them
outer-styles (style/outer size (not (:fn profile-picture))) outer-styles (style/outer size (not (:fn profile-picture)))
@ -49,7 +50,7 @@
font-size (get-in style/sizes [size :font-size]) font-size (get-in style/sizes [size :font-size])
amount-initials (if (#{:xs :xxs :xxxs} size) 1 2) amount-initials (if (#{:xs :xxs :xxxs} size) 1 2)
sizes (get style/sizes size) sizes (get style/sizes size)
indicator-color (get (style/indicator-color) (if online? :online :offline)) indicator-color (get (style/indicator-color theme) (if online? :online :offline))
profile-picture-fn (:fn profile-picture)] profile-picture-fn (:fn profile-picture)]
[rn/view {:style outer-styles :accessibility-label :user-avatar} [rn/view {:style outer-styles :accessibility-label :user-avatar}
@ -66,7 +67,8 @@
{:length amount-initials {:length amount-initials
:full-name full-name :full-name full-name
:font-size (:font-size (text/text-style {:size :font-size (:font-size (text/text-style {:size
font-size})) font-size}
nil))
:indicator-size (when status-indicator? :indicator-size (when status-indicator?
(:status-indicator sizes)) (:status-indicator sizes))
:indicator-border (when status-indicator? :indicator-border (when status-indicator?
@ -87,6 +89,4 @@
:else {:uri profile-picture})}])])) :else {:uri profile-picture})}])]))
(def user-avatar (def user-avatar (schema/instrument #'user-avatar-internal component-schema/?schema))
(quo.theme/with-theme
(schema/instrument #'user-avatar-internal component-schema/?schema)))

9
src/quo/components/avatars/wallet_user_avatar/view.cljs
View File

@ -34,7 +34,7 @@
(= size second-smallest-possible))) (= size second-smallest-possible)))
(def biggest-possible (last (keys properties))) (def biggest-possible (last (keys properties)))
(defn- view-internal (defn wallet-user-avatar
"Options: "Options:
:full-name - string (default: nil) - used to generate initials :full-name - string (default: nil) - used to generate initials
@ -44,9 +44,10 @@
:monospace? - boolean (default: false) - use monospace font :monospace? - boolean (default: false) - use monospace font
:lowercase? - boolean (default: false) - lowercase text :lowercase? - boolean (default: false) - lowercase text
:neutral? - boolean (default: false) - use neutral colors variant" :neutral? - boolean (default: false) - use neutral colors variant"
[{:keys [full-name customization-color size theme monospace? lowercase? neutral?] [{:keys [full-name customization-color size monospace? lowercase? neutral?]
:or {size biggest-possible}}] :or {size biggest-possible}}]
(let [circle-size (:size (size properties)) (let [theme (quo.theme/use-theme)
circle-size (:size (size properties))
small? (check-if-size-small size) small? (check-if-size-small size)
initials (utils.string/get-initials full-name (if small? 1 2))] initials (utils.string/get-initials full-name (if small? 1 2))]
[rn/view [rn/view
@ -57,5 +58,3 @@
:weight (if monospace? :monospace (:font-weight (size properties))) :weight (if monospace? :monospace (:font-weight (size properties)))
:style (style/text customization-color neutral? theme)} :style (style/text customization-color neutral? theme)}
(if (and initials lowercase?) (string/lower-case initials) initials)]])) (if (and initials lowercase?) (string/lower-case initials) initials)]]))
(def wallet-user-avatar (quo.theme/with-theme view-internal))

47
src/quo/components/banners/banner/view.cljs
View File

@ -8,27 +8,26 @@
[quo.theme :as quo.theme] [quo.theme :as quo.theme]
[react-native.core :as rn])) [react-native.core :as rn]))
(defn- view-internal (defn view
[{:keys [hide-pin? latest-pin-text pins-count on-press theme]}] [{:keys [hide-pin? latest-pin-text pins-count on-press]}]
(when (pos? pins-count) (let [theme (quo.theme/use-theme)]
[rn/touchable-opacity (when (pos? pins-count)
{:accessibility-label :pinned-banner [rn/touchable-opacity
:style style/container {:accessibility-label :pinned-banner
:active-opacity 1 :style style/container
:on-press on-press} :active-opacity 1
(when-not hide-pin? :on-press on-press}
[rn/view {:style style/icon} (when-not hide-pin?
[icons/icon :i/pin [rn/view {:style style/icon}
{:color (colors/theme-colors colors/neutral-100 colors/white theme) [icons/icon :i/pin
:size 20}]]) {:color (colors/theme-colors colors/neutral-100 colors/white theme)
[rn/view {:style (style/text hide-pin?)} :size 20}]])
[text/text [rn/view {:style (style/text hide-pin?)}
{:number-of-lines 1 [text/text
:size :paragraph-2} {:number-of-lines 1
latest-pin-text]] :size :paragraph-2}
[rn/view latest-pin-text]]
{:accessibility-label :pins-count [rn/view
:style style/counter} {:accessibility-label :pins-count
[counter/view {:type :secondary} pins-count]]])) :style style/counter}
[counter/view {:type :secondary} pins-count]]])))
(def view (quo.theme/with-theme view-internal))

10
src/quo/components/browser/browser_input/style.cljs
View File

@ -17,7 +17,8 @@
(defn input (defn input
[disabled?] [disabled?]
(assoc (text/text-style {:size :paragraph-1 (assoc (text/text-style {:size :paragraph-1
:weight :regular}) :weight :regular}
nil)
:flex 1 :flex 1
:min-height 36 :min-height 36
:min-width 120 :min-width 120
@ -45,11 +46,12 @@
:z-index 10}) :z-index 10})
(defn text (defn text
[] [theme]
(assoc (text/text-style {:size :paragraph-1 (assoc (text/text-style {:size :paragraph-1
:weight :medium}) :weight :medium}
nil)
:color :color
(colors/theme-colors colors/neutral-100 colors/white))) (colors/theme-colors colors/neutral-100 colors/white theme)))
(def root-container (def root-container
{:height 60 {:height 60

2
src/quo/components/browser/browser_input/view.cljs
View File

@ -121,7 +121,7 @@
:size favicon-size}]) :size favicon-size}])
[rn/text [rn/text
{:accessibility-label :browser-input-label {:accessibility-label :browser-input-label
:style (style/text)} :style (style/text theme)}
(remove-http-https-www value)] (remove-http-https-www value)]
(when locked? (when locked?
[lock-icon {:blur? blur? :theme theme}])]) [lock-icon {:blur? blur? :theme theme}])])

4
src/quo/components/buttons/button/view.cljs
View File

@ -5,7 +5,7 @@
[quo.components.icon :as quo.icons] [quo.components.icon :as quo.icons]
[quo.components.markdown.text :as text] [quo.components.markdown.text :as text]
[quo.foundations.customization-colors :as customization-colors] [quo.foundations.customization-colors :as customization-colors]
[quo.theme :as theme] [quo.theme]
[react-native.blur :as blur] [react-native.blur :as blur]
[react-native.core :as rn])) [react-native.core :as rn]))
@ -36,7 +36,7 @@
customization-color (if (= type :primary) :blue nil)}} customization-color (if (= type :primary) :blue nil)}}
children] children]
(let [[pressed-state? set-pressed-state] (rn/use-state false) (let [[pressed-state? set-pressed-state] (rn/use-state false)
theme (theme/use-theme-value) theme (quo.theme/use-theme)
{:keys [icon-color background-color label-color border-color blur-type {:keys [icon-color background-color label-color border-color blur-type
blur-overlay-color border-radius overlay-customization-color]} blur-overlay-color border-radius overlay-customization-color]}
(button-properties/get-values {:customization-color customization-color (button-properties/get-values {:customization-color customization-color

4
src/quo/components/buttons/composer_button/view.cljs
View File

@ -2,13 +2,13 @@
(:require (:require
[quo.components.buttons.composer-button.style :as style] [quo.components.buttons.composer-button.style :as style]
[quo.components.icon :as quo.icons] [quo.components.icon :as quo.icons]
[quo.theme :as theme] [quo.theme]
[react-native.core :as rn])) [react-native.core :as rn]))
(defn view (defn view
[{:keys [on-press on-long-press disabled? blur? icon accessibility-label container-style]}] [{:keys [on-press on-long-press disabled? blur? icon accessibility-label container-style]}]
(let [[pressed? set-pressed] (rn/use-state false) (let [[pressed? set-pressed] (rn/use-state false)
theme (theme/use-theme-value) theme (quo.theme/use-theme)
on-press-in (rn/use-callback #(set-pressed true)) on-press-in (rn/use-callback #(set-pressed true))
on-press-out (rn/use-callback #(set-pressed nil))] on-press-out (rn/use-callback #(set-pressed nil))]
[rn/pressable [rn/pressable

2
src/quo/components/buttons/dynamic_button/view.cljs
View File

@ -52,7 +52,7 @@
:count mentions or notifications count :count mentions or notifications count
:customization-color customize jump-to and mention button color}" :customization-color customize jump-to and mention button color}"
[{:keys [type label on-press customization-color style] :as args}] [{:keys [type label on-press customization-color style] :as args}]
(let [theme (quo.theme/use-theme-value) (let [theme (quo.theme/use-theme)
[pressed? set-pressed] (rn/use-state false) [pressed? set-pressed] (rn/use-state false)
button-color (get-button-color {:type type button-color (get-button-color {:type type
:pressed? pressed? :pressed? pressed?

2
src/quo/components/buttons/logout_button/view.cljs
View File

@ -10,7 +10,7 @@
(defn view (defn view
[{:keys [on-press on-long-press disabled? container-style]}] [{:keys [on-press on-long-press disabled? container-style]}]
(let [theme (quo.theme/use-theme-value) (let [theme (quo.theme/use-theme)
[pressed? set-pressed] (rn/use-state false) [pressed? set-pressed] (rn/use-state false)
on-press-in (rn/use-callback #(set-pressed true)) on-press-in (rn/use-callback #(set-pressed true))
on-press-out (rn/use-callback #(set-pressed nil))] on-press-out (rn/use-callback #(set-pressed nil))]

79
src/quo/components/buttons/predictive_keyboard/view.cljs
View File

@ -4,7 +4,7 @@
[quo.components.buttons.predictive-keyboard.style :as style] [quo.components.buttons.predictive-keyboard.style :as style]
[quo.components.info.info-message :as info-message] [quo.components.info.info-message :as info-message]
[quo.foundations.colors :as colors] [quo.foundations.colors :as colors]
[quo.theme :as theme] [quo.theme]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.linear-gradient :as linear-gradient])) [react-native.linear-gradient :as linear-gradient]))
@ -26,7 +26,7 @@
[] []
[rn/view {:style {:width 8}}]) [rn/view {:style {:width 8}}])
(defn- view-internal (defn view
"Options "Options
- `type` `:words`/`:error`/`:info`/`:empty`. - `type` `:words`/`:error`/`:info`/`:empty`.
- `blur?` Boolean to enable blur background support. - `blur?` Boolean to enable blur background support.
@ -34,43 +34,42 @@
- `words` List of words to display in the keyboard. - `words` List of words to display in the keyboard.
- `on-press` Callback called when a word is pressed `(fn [word])` - `on-press` Callback called when a word is pressed `(fn [word])`
- `theme` :light or :dark, received from with-theme HOC." - `theme` :light or :dark, received from with-theme HOC."
[{:keys [type blur? text words on-press theme]}] [{:keys [type blur? text words on-press]}]
[linear-gradient/linear-gradient (let [theme (quo.theme/use-theme)]
{:style {:flex-direction :row} [linear-gradient/linear-gradient
:accessibility-label :predictive-keyboard {:style {:flex-direction :row}
:colors (if blur? :accessibility-label :predictive-keyboard
(gradients :blur) :colors (if blur?
(colors/theme-colors (gradients :light) (gradients :dark) theme))} (gradients :blur)
[rn/view {:style (style/wrapper type)} (colors/theme-colors (gradients :light) (gradients :dark) theme))}
(case type [rn/view {:style (style/wrapper type)}
:words (case type
[rn/flat-list :words
{:keyboard-should-persist-taps :always [rn/flat-list
:data words {:keyboard-should-persist-taps :always
:content-container-style style/word-list :data words
:render-fn word-component :content-container-style style/word-list
:render-data {:on-press on-press} :render-fn word-component
:shows-horizontal-scroll-indicator false :render-data {:on-press on-press}
:separator [separator] :shows-horizontal-scroll-indicator false
:horizontal true :separator [separator]
:key-fn str}] :horizontal true
:key-fn str}]
:error :error
[info-message/info-message [info-message/info-message
{:icon :i/info {:icon :i/info
:size :default :size :default
:type :error} :type :error}
text] text]
:info :info
[info-message/info-message [info-message/info-message
(merge {:icon :i/info (merge {:icon :i/info
:size :default :size :default
:type (if (= type :error) :error :default)} :type (if (= type :error) :error :default)}
(when blur? (when blur?
{:text-color colors/white-opa-70 {:text-color colors/white-opa-70
:icon-color colors/white-opa-70})) :icon-color colors/white-opa-70}))
text] text]
nil)]]) nil)]]))
(def view (theme/with-theme view-internal))

2
src/quo/components/buttons/slide_button/view.cljs
View File

@ -48,7 +48,7 @@
" "
[{:keys [on-complete track-text track-icon disabled? customization-color size [{:keys [on-complete track-text track-icon disabled? customization-color size
container-style type blur?]}] container-style type blur?]}]
(let [theme (quo.theme/use-theme-value) (let [theme (quo.theme/use-theme)
x-pos (reanimated/use-shared-value 0) x-pos (reanimated/use-shared-value 0)
[track-width set-track-width] (rn/use-state nil) [track-width set-track-width] (rn/use-state nil)
[sliding-complete? [sliding-complete?

4
src/quo/components/buttons/wallet_button/view.cljs
View File

@ -3,12 +3,12 @@
[quo.components.buttons.wallet-button.style :as style] [quo.components.buttons.wallet-button.style :as style]
[quo.components.icon :as quo.icons] [quo.components.icon :as quo.icons]
[quo.foundations.colors :as colors] [quo.foundations.colors :as colors]
[quo.theme :as theme] [quo.theme]
[react-native.core :as rn])) [react-native.core :as rn]))
(defn view (defn view
[{:keys [on-press on-long-press disabled? icon accessibility-label container-style]}] [{:keys [on-press on-long-press disabled? icon accessibility-label container-style]}]
(let [theme (theme/use-theme-value) (let [theme (quo.theme/use-theme)
[pressed? set-pressed] (rn/use-state false) [pressed? set-pressed] (rn/use-state false)
on-press-in (rn/use-callback #(set-pressed true)) on-press-in (rn/use-callback #(set-pressed true))
on-press-out (rn/use-callback #(set-pressed nil))] on-press-out (rn/use-callback #(set-pressed nil))]

57
src/quo/components/buttons/wallet_ctas/view.cljs
View File

@ -23,32 +23,31 @@
:style {:margin-top 4 :style {:margin-top 4
:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}} text]]) :color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}} text]])
(defn view-internal (defn view
[{:keys [theme buy-action send-action receive-action bridge-action]}] [{:keys [buy-action send-action receive-action bridge-action]}]
[rn/view {:style style/container} (let [theme (quo.theme/use-theme)]
[action-button [rn/view {:style style/container}
{:icon :i/add [action-button
:text (i18n/label :t/buy) {:icon :i/add
:on-press buy-action :text (i18n/label :t/buy)
:theme theme :on-press buy-action
:accessibility-label :buy}] :theme theme
[action-button :accessibility-label :buy}]
{:icon :i/send [action-button
:text (i18n/label :t/send) {:icon :i/send
:on-press send-action :text (i18n/label :t/send)
:theme theme :on-press send-action
:accessibility-label :send}] :theme theme
[action-button :accessibility-label :send}]
{:icon :i/receive [action-button
:text (i18n/label :t/receive) {:icon :i/receive
:on-press receive-action :text (i18n/label :t/receive)
:theme theme :on-press receive-action
:accessibility-label :receive}] :theme theme
[action-button :accessibility-label :receive}]
{:icon :i/bridge [action-button
:text (i18n/label :t/bridge) {:icon :i/bridge
:on-press bridge-action :text (i18n/label :t/bridge)
:theme theme :on-press bridge-action
:accessibility-label :bridge}]]) :theme theme
:accessibility-label :bridge}]]))
(def view (quo.theme/with-theme view-internal))

11
src/quo/components/calendar/calendar/month_picker/view.cljs
View File

@ -4,13 +4,14 @@
[quo.components.calendar.calendar.month-picker.style :as style] [quo.components.calendar.calendar.month-picker.style :as style]
[quo.components.calendar.calendar.month-picker.utils :as utils] [quo.components.calendar.calendar.month-picker.utils :as utils]
[quo.components.markdown.text :as text] [quo.components.markdown.text :as text]
[quo.theme :as theme] [quo.theme]
[react-native.core :as rn] [react-native.core :as rn]
[utils.number :as utils.number])) [utils.number :as utils.number]))
(defn- view-internal (defn view
[{:keys [year month on-change theme]}] [{:keys [year month on-change]}]
(let [year (utils.number/parse-int year) (let [theme (quo.theme/use-theme)
year (utils.number/parse-int year)
month (utils.number/parse-int month)] month (utils.number/parse-int month)]
[rn/view [rn/view
{:style style/container} {:style style/container}
@ -35,5 +36,3 @@
:type :outline :type :outline
:on-press #(on-change (utils/next-month year month))} :on-press #(on-change (utils/next-month year month))}
:i/chevron-right]])) :i/chevron-right]]))
(def view (theme/with-theme view-internal))

4
src/quo/components/calendar/calendar/view.cljs
View File

@ -6,13 +6,13 @@
[quo.components.calendar.calendar.utils :as utils] [quo.components.calendar.calendar.utils :as utils]
[quo.components.calendar.calendar.weekdays-header.view :as weekdays-header] [quo.components.calendar.calendar.weekdays-header.view :as weekdays-header]
[quo.components.calendar.calendar.years-list.view :as years-list] [quo.components.calendar.calendar.years-list.view :as years-list]
[quo.theme :as theme] [quo.theme]
[react-native.core :as rn] [react-native.core :as rn]
[utils.number :as utils.number])) [utils.number :as utils.number]))
(defn view (defn view
[{:keys [on-change start-date end-date]}] [{:keys [on-change start-date end-date]}]
(let [theme (theme/use-theme-value) (let [theme (quo.theme/use-theme)
[selected-year set-selected-year] (rn/use-state (utils/current-year)) [selected-year set-selected-year] (rn/use-state (utils/current-year))
[selected-month set-selected-month] (rn/use-state (utils/current-month)) [selected-month set-selected-month] (rn/use-state (utils/current-month))
on-change-year (rn/use-callback #(set-selected-year %)) on-change-year (rn/use-callback #(set-selected-year %))

31
src/quo/components/calendar/calendar/weekdays_header/view.cljs
View File

@ -2,23 +2,22 @@
(:require (:require
[quo.components.calendar.calendar.weekdays-header.style :as style] [quo.components.calendar.calendar.weekdays-header.style :as style]
[quo.components.markdown.text :as text] [quo.components.markdown.text :as text]
[quo.theme :as theme] [quo.theme]
[react-native.core :as rn] [react-native.core :as rn]
[utils.datetime :as datetime] [utils.datetime :as datetime]
[utils.i18n :as i18n])) [utils.i18n :as i18n]))
(defn- view-internal (defn view
[theme] []
[rn/view (let [theme (quo.theme/use-theme)]
{:style style/container-weekday-row} [rn/view
(for [weekday datetime/weekday-names] {:style style/container-weekday-row}
[rn/view (for [weekday datetime/weekday-names]
{:style style/container-weekday [rn/view
:key weekday} {:style style/container-weekday
[text/text :key weekday}
{:weight :medium [text/text
:size :paragraph-2 {:weight :medium
:style (style/text-weekdays theme)} :size :paragraph-2
(str (i18n/label weekday))]])]) :style (style/text-weekdays theme)}
(str (i18n/label weekday))]])]))
(def view (theme/with-theme view-internal))

37
src/quo/components/calendar/calendar/years_list/view.cljs
View File

@ -3,7 +3,7 @@
[quo.components.calendar.calendar-year.view :as calendar-year] [quo.components.calendar.calendar-year.view :as calendar-year]
[quo.components.calendar.calendar.utils :as utils] [quo.components.calendar.calendar.utils :as utils]
[quo.components.calendar.calendar.years-list.style :as style] [quo.components.calendar.calendar.years-list.style :as style]
[quo.theme :as theme] [quo.theme]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.linear-gradient :as linear-gradient])) [react-native.linear-gradient :as linear-gradient]))
@ -30,21 +30,20 @@
:start {:x 0 :y 0} :start {:x 0 :y 0}
:end {:x 0 :y 1}}]) :end {:x 0 :y 1}}])
(defn view-internal (defn view
[{:keys [on-change-year year theme]}] [{:keys [on-change-year year]}]
[rn/view (let [theme (quo.theme/use-theme)]
{:style (style/container-years theme)} [rn/view
[rn/flat-list {:style (style/container-years theme)}
{:data (utils/generate-years (utils/current-year)) [rn/flat-list
:key-fn str {:data (utils/generate-years (utils/current-year))
:list-key :years-list :key-fn str
:inverted true :list-key :years-list
:shows-vertical-scroll-indicator false :inverted true
:footer [footer] :shows-vertical-scroll-indicator false
:separator [separator] :footer [footer]
:render-fn year-view :separator [separator]
:render-data {:selected-year year :render-fn year-view
:on-press #(on-change-year %)}}] :render-data {:selected-year year
[gradiant-overview theme]]) :on-press #(on-change-year %)}}]
[gradiant-overview theme]]))
(def view (theme/with-theme view-internal))

43
src/quo/components/calendar/calendar_day/view.cljs
View File

@ -2,31 +2,30 @@
(:require (:require
[quo.components.calendar.calendar-day.style :as style] [quo.components.calendar.calendar-day.style :as style]
[quo.components.markdown.text :as text] [quo.components.markdown.text :as text]
[quo.theme :as theme] [quo.theme]
[react-native.core :as rn])) [react-native.core :as rn]))
(defn- view-internal (defn view
[{:keys [state in-range on-press customization-color theme] [{:keys [state in-range on-press customization-color]
:or {state :default}} :or {state :default}}
day] day]
[rn/view {:style style/wrapper} (let [theme (quo.theme/use-theme)]
[rn/view {:style (style/in-range-background {:in-range in-range :theme theme})}] [rn/view {:style style/wrapper}
[rn/touchable-opacity [rn/view {:style (style/in-range-background {:in-range in-range :theme theme})}]
{:on-press on-press [rn/touchable-opacity
:style (style/container {:on-press on-press
:style (style/container
{:state state
:theme theme
:customization-color customization-color})
:disabled (= state :disabled)}
[text/text
{:weight :medium
:size :paragraph-2
:style (style/text {:state state :theme theme})}
day]
[rn/view
{:style (style/indicator
{:state state {:state state
:theme theme :theme theme
:customization-color customization-color}) :customization-color customization-color})}]]]))
:disabled (= state :disabled)}
[text/text
{:weight :medium
:size :paragraph-2
:style (style/text {:state state :theme theme})}
day]
[rn/view
{:style (style/indicator
{:state state
:theme theme
:customization-color customization-color})}]]])
(def view (theme/with-theme view-internal))

37
src/quo/components/calendar/calendar_year/view.cljs
View File

@ -2,24 +2,23 @@
(:require (:require
[quo.components.calendar.calendar-year.style :as style] [quo.components.calendar.calendar-year.style :as style]
[quo.components.markdown.text :as text] [quo.components.markdown.text :as text]
[quo.theme :as theme] [quo.theme]
[react-native.core :as rn])) [react-native.core :as rn]))
(defn- view-internal (defn view
[{:keys [selected? disabled? on-press theme]} year] [{:keys [selected? disabled? on-press]} year]
[rn/touchable-opacity (let [theme (quo.theme/use-theme)]
{:on-press on-press [rn/touchable-opacity
:style (style/container {:on-press on-press
{:selected? selected? :style (style/container
:disabled? disabled? {:selected? selected?
:theme theme}) :disabled? disabled?
:disabled disabled?} :theme theme})
[text/text :disabled disabled?}
{:weight :medium [text/text
:size :paragraph-2 {:weight :medium
:style (style/text :size :paragraph-2
{:selected? selected? :style (style/text
:theme theme})} {:selected? selected?
year]]) :theme theme})}
year]]))
(def view (theme/with-theme view-internal))

22
src/quo/components/code/snippet/view.cljs
View File

@ -1,16 +1,12 @@
(ns quo.components.code.snippet.view (ns quo.components.code.snippet.view
(:require (:require
[quo.components.code.common.view :as code-common] [quo.components.code.common.view :as code-common]))
[quo.theme :as theme]))
(defn- view-internal (defn view
[_] [{:keys [language max-lines on-copy-press]} children]
(fn [{:keys [language max-lines on-copy-press]} children] [code-common/view
[code-common/view {:language language
{:language language :max-lines max-lines
:max-lines max-lines :on-copy-press on-copy-press
:on-copy-press on-copy-press :preview? false}
:preview? false} children])
children]))
(def view (theme/with-theme view-internal))

16
src/quo/components/colors/color/view.cljs
View File

@ -14,16 +14,11 @@
[rn/view {:style (style/left-half theme)}] [rn/view {:style (style/left-half theme)}]
[rn/view {:style (style/right-half theme)}]]) [rn/view {:style (style/right-half theme)}]])
(defn- view-internal (defn view
[{:keys [color [{:keys [color selected? on-press blur? idx window-width]
selected?
on-press
blur?
theme
idx
window-width]
:as props}] :as props}]
(let [border? (and (not blur?) (not selected?)) (let [theme (quo.theme/use-theme)
border? (and (not blur?) (not selected?))
hex-color (if (= :feng-shui color) hex-color (if (= :feng-shui color)
(colors/theme-colors colors/neutral-100 colors/white theme) (colors/theme-colors colors/neutral-100 colors/white theme)
(colors/theme-colors (colors/custom-color color 50) (colors/theme-colors (colors/custom-color color 50)
@ -38,6 +33,7 @@
(if (and (= :feng-shui color) (not selected?)) (if (and (= :feng-shui color) (not selected?))
[feng-shui [feng-shui
(assoc props (assoc props
:theme theme
:hex-color hex-color :hex-color hex-color
:border? border?)] :border? border?)]
[rn/view [rn/view
@ -49,5 +45,3 @@
:color (if (= :feng-shui color) :color (if (= :feng-shui color)
(colors/theme-colors colors/white colors/neutral-100 theme) (colors/theme-colors colors/white colors/neutral-100 theme)
colors/white)}])])])) colors/white)}])])]))
(def view (quo.theme/with-theme view-internal))

11
src/quo/components/common/not_implemented/view.cljs
View File

@ -4,9 +4,8 @@
[quo.theme :as quo.theme] [quo.theme :as quo.theme]
[react-native.core :as rn])) [react-native.core :as rn]))
(defn- view-internal (defn view
[{:keys [blur? theme]}] [{:keys [blur?]}]
[rn/text {:style (style/text blur? theme)} (let [theme (quo.theme/use-theme)]
"not implemented"]) [rn/text {:style (style/text blur? theme)}
"not implemented"]))
(def view (quo.theme/with-theme view-internal))

17
src/quo/components/common/notification_dot/view.cljs
View File

@ -4,12 +4,11 @@
[quo.theme :as quo.theme] [quo.theme :as quo.theme]
[react-native.core :as rn])) [react-native.core :as rn]))
(defn view-internal (defn view
[{:keys [customization-color style theme blur?]}] [{:keys [customization-color style blur?]}]
[rn/view (let [theme (quo.theme/use-theme)]
{:accessibility-label :notification-dot [rn/view
:style (merge {:accessibility-label :notification-dot
(style/notification-dot customization-color theme blur?) :style (merge
style)}]) (style/notification-dot customization-color theme blur?)
style)}]))
(def view (quo.theme/with-theme view-internal))

21
src/quo/components/common/separator/view.cljs
View File

@ -1,16 +1,19 @@
(ns quo.components.common.separator.view (ns quo.components.common.separator.view
(:require (:require
[quo.foundations.colors :as quo.colors] [quo.foundations.colors :as quo.colors]
[quo.theme]
[react-native.core :as rn])) [react-native.core :as rn]))
(defn separator (defn separator
[{:keys [style]}] [{:keys [style]}]
[rn/view (let [theme (quo.theme/use-theme)]
{:style [rn/view
(merge {:style
style (merge
{:background-color (quo.colors/theme-colors style
quo.colors/neutral-10 {:background-color (quo.colors/theme-colors
quo.colors/neutral-80) quo.colors/neutral-10
:align-self :stretch quo.colors/neutral-80
:height 1})}]) theme)
:align-self :stretch
:height 1})}]))

6
src/quo/components/common/unread_grey_dot/style.cljs
View File

@ -2,10 +2,12 @@
(:require (:require
[quo.foundations.colors :as colors])) [quo.foundations.colors :as colors]))
(def unread-grey-dot (defn unread-grey-dot
[theme]
{:width 8 {:width 8
:height 8 :height 8
:border-radius 4 :border-radius 4
:background-color (colors/theme-colors :background-color (colors/theme-colors
colors/neutral-40 colors/neutral-40
colors/neutral-60)}) colors/neutral-60
theme)})

8
src/quo/components/common/unread_grey_dot/view.cljs
View File

@ -1,10 +1,12 @@
(ns quo.components.common.unread-grey-dot.view (ns quo.components.common.unread-grey-dot.view
(:require (:require
[quo.components.common.unread-grey-dot.style :as style] [quo.components.common.unread-grey-dot.style :as style]
[quo.theme]
[react-native.core :as rn])) [react-native.core :as rn]))
(defn unread-grey-dot (defn unread-grey-dot
[accessibility-label] [accessibility-label]
[rn/view (let [theme (quo.theme/use-theme)]
(cond-> {:style style/unread-grey-dot} [rn/view
accessibility-label (assoc :accessibility-label accessibility-label :accessible true))]) (cond-> {:style (style/unread-grey-dot theme)}
accessibility-label (assoc :accessibility-label accessibility-label :accessible true))]))

27
src/quo/components/community/banner/view.cljs
View File

@ -3,7 +3,7 @@
[quo.components.community.banner.style :as style] [quo.components.community.banner.style :as style]
[quo.components.markdown.text :as text] [quo.components.markdown.text :as text]
[quo.foundations.colors :as colors] [quo.foundations.colors :as colors]
[quo.theme :as theme] [quo.theme]
[react-native.core :as rn])) [react-native.core :as rn]))
(defn- card-title-and-description (defn- card-title-and-description
@ -26,16 +26,15 @@
:size :paragraph-2} :size :paragraph-2}
description]]]) description]]])
(defn view-internal (defn view
[{:keys [title description on-press accessibility-label banner style theme]}] [{:keys [title description on-press accessibility-label banner style]}]
[rn/touchable-without-feedback (let [theme (quo.theme/use-theme)]
{:on-press on-press [rn/touchable-without-feedback
:accessibility-label accessibility-label} {:on-press on-press
[rn/view {:style (merge (style/community-card theme) style)} :accessibility-label accessibility-label}
[card-title-and-description title description theme] [rn/view {:style (merge (style/community-card theme) style)}
[rn/image [card-title-and-description title description theme]
{:style style/discover-illustration [rn/image
:source banner {:style style/discover-illustration
:accessibility-label :discover-communities-illustration}]]]) :source banner
:accessibility-label :discover-communities-illustration}]]]))
(def view (theme/with-theme view-internal))

2
src/quo/components/community/channel_action/view.cljs
View File

@ -9,7 +9,7 @@
(defn view (defn view
[{:keys [big? customization-color label counter-value icon on-press accessibility-label disabled?]}] [{:keys [big? customization-color label counter-value icon on-press accessibility-label disabled?]}]
(let [theme (quo.theme/use-theme-value) (let [theme (quo.theme/use-theme)
[pressed? set-pressed] (rn/use-state false) [pressed? set-pressed] (rn/use-state false)
on-press-in (rn/use-callback #(set-pressed true)) on-press-in (rn/use-callback #(set-pressed true))
on-press-out (rn/use-callback #(set-pressed false))] on-press-out (rn/use-callback #(set-pressed false))]

55
src/quo/components/community/community_card_view.cljs
View File

@ -7,33 +7,34 @@
[react-native.core :as rn])) [react-native.core :as rn]))
(defn- loading-card-view (defn- loading-card-view
[{:keys [width theme]}] [{:keys [width]}]
[rn/view {:style (style/loading-card width theme)} (let [theme (quo.theme/use-theme)]
[rn/view (style/loading-cover-container theme)] [rn/view {:style (style/loading-card width theme)}
[rn/view (style/loading-content-container theme) [rn/view (style/loading-cover-container theme)]
[rn/view (style/loading-avatar theme)] [rn/view (style/loading-content-container theme)
[rn/view (style/loading-lock theme)] [rn/view (style/loading-avatar theme)]
[rn/view [rn/view (style/loading-lock theme)]
{:style style/loading-card-content-container} [rn/view
[rn/view {:style (style/loading-content-line {:theme theme :width 84 :margin-top 0})}] {:style style/loading-card-content-container}
[rn/view {:style (style/loading-content-line {:theme theme :width 311 :margin-top 8})}] [rn/view {:style (style/loading-content-line {:theme theme :width 84 :margin-top 0})}]
[rn/view {:style (style/loading-content-line {:theme theme :width 271 :margin-top 8})}]] [rn/view {:style (style/loading-content-line {:theme theme :width 311 :margin-top 8})}]
[rn/view [rn/view {:style (style/loading-content-line {:theme theme :width 271 :margin-top 8})}]]
{:style style/loading-stats-container} [rn/view
[rn/view {:style (style/loading-stat-circle theme 0)}] {:style style/loading-stats-container}
[rn/view {:style (style/loading-stat-line theme 4)}] [rn/view {:style (style/loading-stat-circle theme 0)}]
[rn/view {:style (style/loading-stat-circle theme 12)}] [rn/view {:style (style/loading-stat-line theme 4)}]
[rn/view {:style (style/loading-stat-line theme 4)}]] [rn/view {:style (style/loading-stat-circle theme 12)}]
[rn/view [rn/view {:style (style/loading-stat-line theme 4)}]]
{:style style/loading-tags-container} [rn/view
[rn/view {:style (style/loading-tag theme 0)}] {:style style/loading-tags-container}
[rn/view {:style (style/loading-tag theme 8)}] [rn/view {:style (style/loading-tag theme 0)}]
[rn/view {:style (style/loading-tag theme 8)}]]]]) [rn/view {:style (style/loading-tag theme 8)}]
[rn/view {:style (style/loading-tag theme 8)}]]]]))
(defn- community-card-view (defn- community-card-view
[{:keys [community on-press width theme]}] [{:keys [community on-press width]}]
(let [{:keys [name description locked? images cover (let [theme (quo.theme/use-theme)
status tokens tags]} community] {:keys [name description locked? images cover status tokens tags]} community]
[rn/touchable-without-feedback [rn/touchable-without-feedback
{:accessibility-label :community-card-item {:accessibility-label :community-card-item
:on-press on-press} :on-press on-press}
@ -68,10 +69,8 @@
[rn/view {:style (style/community-tags-position)} [rn/view {:style (style/community-tags-position)}
[community-view/community-tags {:tags tags}]]]]]]])) [community-view/community-tags {:tags tags}]]]]]]]))
(defn- internal-view (defn view
[{:keys [loading?] :as props}] [{:keys [loading?] :as props}]
(if-not loading? (if-not loading?
[community-card-view props] [community-card-view props]
[loading-card-view props])) [loading-card-view props]))
(def view (quo.theme/with-theme internal-view))

30
src/quo/components/community/community_detail_token_gating/view.cljs
View File

@ -6,6 +6,7 @@
[quo.components.tags.collectible-tag.view :as collectible-tag] [quo.components.tags.collectible-tag.view :as collectible-tag]
[quo.components.tags.token-tag.view :as token-tag] [quo.components.tags.token-tag.view :as token-tag]
[quo.foundations.colors :as colors] [quo.foundations.colors :as colors]
[quo.theme]
[react-native.core :as rn] [react-native.core :as rn]
[utils.i18n :as i18n])) [utils.i18n :as i18n]))
@ -28,20 +29,21 @@
(defn- tokens-row (defn- tokens-row
[{:keys [tokens divider? first?]}] [{:keys [tokens divider? first?]}]
[:<> (let [theme (quo.theme/use-theme)]
[rn/view [:<>
{:style (style/token-row first?)} [rn/view
(map-indexed (fn [token-index token] {:style (style/token-row first?)}
^{:key (str "token-" token-index)} (map-indexed (fn [token-index token]
[token-view token]) ^{:key (str "token-" token-index)}
tokens)] [token-view token])
(when-not divider? tokens)]
[divider-label/view (when-not divider?
{:container-style style/divider} [divider-label/view
[text/text {:container-style style/divider}
{:size :label [text/text
:style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}} {:size :label
(string/lower-case (i18n/label :t/or))]])]) :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
(string/lower-case (i18n/label :t/or))]])]))
(defn- role-view (defn- role-view
[{:keys [role tokens satisfied? role-text]}] [{:keys [role tokens satisfied? role-text]}]

182
src/quo/components/community/community_list_view.cljs
View File

@ -38,110 +38,94 @@
unread-messages? unread-messages?
[unread-grey-dot :unviewed-messages-public])]) [unread-grey-dot :unviewed-messages-public])])
(defn- communities-list-view-item-internal (defn communities-list-view-item
[{:keys [theme customization-color] :as props} [{:keys [customization-color] :as props}
{:keys [name {:keys [name locked? status muted unread-messages? unread-mentions-count community-icon tokens]}]
locked? (let [theme (quo.theme/use-theme)]
status [rn/view
muted {:style (merge (style/community-card 16 theme)
unread-messages? {:margin-bottom 12})}
unread-mentions-count [rn/touchable-highlight
community-icon (merge {:style {:height 56
tokens]}] :border-radius 16}}
[rn/view props)
{:style (merge (style/community-card 16 theme) [rn/view {:style style/detail-container}
{:margin-bottom 12})} [rn/view (style/list-info-container)
[rn/touchable-highlight [community-icon/community-icon
(merge {:style {:height 56 {:images community-icon} 32]
:border-radius 16}} [rn/view
props) {:flex 1
[rn/view {:style style/detail-container} :margin-horizontal 12}
[rn/view (style/list-info-container) [text/text
{:weight :semi-bold
:size :paragraph-1
:accessibility-label :community-name-text
:number-of-lines 1
:ellipsize-mode :tail
:style {:color (when muted
(colors/theme-colors
colors/neutral-40
colors/neutral-60
theme))}}
name]
[community-view/community-stats-column
{:type :list-view}]]
(if (= status :gated)
[community-view/permission-tag-container
{:locked? locked?
:tokens tokens}]
[notification-view
{:customization-color customization-color
:theme theme
:muted? muted
:unread-mentions-count unread-mentions-count
:unread-messages? unread-messages?}])]]]]))
(defn communities-membership-list-item
[{:keys [customization-color] :as props}
bottom-sheet?
{:keys [name muted unviewed-messages-count unviewed-mentions-count status
images tokens locked? style]}]
(let [theme (quo.theme/use-theme)]
[rn/touchable-highlight
(merge {:underlay-color (colors/theme-colors
colors/neutral-5
colors/neutral-95
theme)
:style {:border-radius 12
:margin-left 12}}
props)
[rn/view (merge (style/membership-info-container) style)
[community-icon/community-icon [community-icon/community-icon
{:images community-icon} 32] {:images images} 32]
[rn/view [rn/view
{:flex 1 {:flex 1
:margin-horizontal 12} :margin-left 12
:justify-content :center}
[text/text [text/text
{:weight :semi-bold {:accessibility-label :chat-name-text
:size :paragraph-1
:accessibility-label :community-name-text
:number-of-lines 1 :number-of-lines 1
:ellipsize-mode :tail :ellipsize-mode :tail
:style {:color (when muted :weight :semi-bold
(colors/theme-colors :size :paragraph-1
:style (when muted
{:color (colors/theme-colors
colors/neutral-40 colors/neutral-40
colors/neutral-60 colors/neutral-60
theme))}} theme)})}
name] name]]
[community-view/community-stats-column
{:type :list-view}]]
(if (= status :gated)
[community-view/permission-tag-container
{:locked? locked?
:tokens tokens}]
[notification-view
{:customization-color customization-color
:theme theme
:muted? muted
:unread-mentions-count unread-mentions-count
:unread-messages? unread-messages?}])]]]])
(def communities-list-view-item (quo.theme/with-theme communities-list-view-item-internal)) [rn/view
{:justify-content :center
(defn- communities-membership-list-item-internal :margin-right (when bottom-sheet?
[{:keys [theme customization-color] :as props} 16)}
bottom-sheet? (if (= status :gated)
{:keys [name [community-view/permission-tag-container
muted {:locked? locked?
unviewed-messages-count :tokens tokens}]
unviewed-mentions-count [notification-view
status {:theme theme
images :customization-color customization-color
tokens :muted? muted
locked? :unread-mentions-count unviewed-mentions-count
style]}] :unread-messages? (pos? unviewed-messages-count)}])]]]))
[rn/touchable-highlight
(merge {:underlay-color (colors/theme-colors
colors/neutral-5
colors/neutral-95
theme)
:style {:border-radius 12
:margin-left 12}}
props)
[rn/view (merge (style/membership-info-container) style)
[community-icon/community-icon
{:images images} 32]
[rn/view
{:flex 1
:margin-left 12
:justify-content :center}
[text/text
{:accessibility-label :chat-name-text
:number-of-lines 1
:ellipsize-mode :tail
:weight :semi-bold
:size :paragraph-1
:style (when muted
{:color (colors/theme-colors
colors/neutral-40
colors/neutral-60
theme)})}
name]]
[rn/view
{:justify-content :center
:margin-right (when bottom-sheet?
16)}
(if (= status :gated)
[community-view/permission-tag-container
{:locked? locked?
:tokens tokens}]
[notification-view
{:theme theme
:customization-color customization-color
:muted? muted
:unread-mentions-count unviewed-mentions-count
:unread-messages? (pos? unviewed-messages-count)}])]]])
(def communities-membership-list-item (quo.theme/with-theme communities-membership-list-item-internal))

33
src/quo/components/community/community_stat/view.cljs
View File

@ -7,20 +7,19 @@
[react-native.core :as rn] [react-native.core :as rn]
utils.money)) utils.money))
(defn view-internal (defn view
[{:keys [value icon theme style accessibility-label text-size]}] [{:keys [value icon style accessibility-label text-size]}]
[rn/view (let [theme (quo.theme/use-theme)]
{:style (merge style/container style) [rn/view
:accessibility-label accessibility-label} {:style (merge style/container style)
[quo.icons/icon icon :accessibility-label accessibility-label}
{:size 16 [quo.icons/icon icon
:container-style {:align-items :center {:size 16
:justify-content :center} :container-style {:align-items :center
:resize-mode :center :justify-content :center}
:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}] :resize-mode :center
[quo.text/text :color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}]
{:size (or text-size :paragraph-1) [quo.text/text
:weight :regular {:size (or text-size :paragraph-1)
:style (style/text theme)} (utils.money/format-amount value)]]) :weight :regular
:style (style/text theme)} (utils.money/format-amount value)]]))
(def view (quo.theme/with-theme view-internal))

27
src/quo/components/community/community_view.cljs
View File

@ -6,7 +6,7 @@
[quo.components.tags.permission-tag :as permission] [quo.components.tags.permission-tag :as permission]
[quo.components.tags.tag :as tag] [quo.components.tags.tag :as tag]
[quo.foundations.colors :as colors] [quo.foundations.colors :as colors]
[quo.theme :as theme] [quo.theme]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.gesture :as gesture])) [react-native.gesture :as gesture]))
@ -70,16 +70,15 @@
:style {:margin-top (if (= size :large) 8 2)}} :style {:margin-top (if (= size :large) 8 2)}}
description])]) description])])
(defn- permission-tag-container-internal (defn permission-tag-container
[{:keys [locked? blur? tokens on-press theme]}] [{:keys [locked? blur? tokens on-press]}]
[permission/tag (let [theme (quo.theme/use-theme)]
{:accessibility-label :permission-tag [permission/tag
:background-color (if (and (= :dark theme) blur?) {:accessibility-label :permission-tag
colors/white-opa-10 :background-color (if (and (= :dark theme) blur?)
(colors/theme-colors colors/neutral-10 colors/neutral-80 theme)) colors/white-opa-10
:locked? locked? (colors/theme-colors colors/neutral-10 colors/neutral-80 theme))
:tokens tokens :locked? locked?
:size 24 :tokens tokens
:on-press on-press}]) :size 24
:on-press on-press}]))
(def permission-tag-container (theme/with-theme permission-tag-container-internal))

37
src/quo/components/community/token_gating.cljs
View File

@ -24,22 +24,21 @@
purchasable? :add)}]]) purchasable? :add)}]])
tokens)]) tokens)])
(defn- internal-view (defn token-requirement-list
[{:keys [tokens padding? theme]}] [{:keys [tokens padding?]}]
[:<> (let [theme (quo.theme/use-theme)]
(if (> (count tokens) 1) [:<>
(map-indexed (if (> (count tokens) 1)
(fn [token-requirement-index tokens] (map-indexed
^{:key token-requirement-index} (fn [token-requirement-index tokens]
[rn/view {:margin-bottom 12} ^{:key token-requirement-index}
(when-not (= token-requirement-index 0) [rn/view {:margin-bottom 12}
[rn/view {:style (style/token-row-or-border theme)}]) (when-not (= token-requirement-index 0)
(when-not (= token-requirement-index 0) [rn/view {:style (style/token-row-or-border theme)}])
[text/text (when-not (= token-requirement-index 0)
{:style (style/token-row-or-text padding? theme) [text/text
:size :label} (string/lower-case (i18n/label :t/or))]) {:style (style/token-row-or-text padding? theme)
[token-requirement-list-row tokens padding?]]) :size :label} (string/lower-case (i18n/label :t/or))])
tokens) [token-requirement-list-row tokens padding?]])
[token-requirement-list-row (first tokens) padding?])]) tokens)
[token-requirement-list-row (first tokens) padding?])]))
(def token-requirement-list (quo.theme/with-theme internal-view))

16
src/quo/components/counter/collectible_counter/style.cljs
View File

@ -3,14 +3,14 @@
[quo.foundations.colors :as colors])) [quo.foundations.colors :as colors]))
(defn- get-background-color (defn- get-background-color
[{:keys [status theme]}] [{:keys [status]} theme]
(case status (case status
:default (colors/theme-colors colors/white-opa-70 colors/neutral-95-opa-70 theme) :default (colors/theme-colors colors/white-opa-70 colors/neutral-95-opa-70 theme)
:error (colors/resolve-color :danger theme 10) :error (colors/resolve-color :danger theme 10)
(colors/theme-colors colors/white-opa-70 colors/neutral-95-opa-70 theme))) (colors/theme-colors colors/white-opa-70 colors/neutral-95-opa-70 theme)))
(defn- get-container-border-styles (defn- get-container-border-styles
[{:keys [status theme]}] [{:keys [status]} theme]
(when (= status :error) (when (= status :error)
{:border-color (colors/resolve-color :danger theme 20) {:border-color (colors/resolve-color :danger theme 20)
:border-width 1})) :border-width 1}))
@ -29,17 +29,17 @@
style-size-32))) style-size-32)))
(defn container (defn container
[props] [props theme]
(merge {:align-self :flex-start (merge {:align-self :flex-start
:flex-direcrion :row :flex-direcrion :row
:justify-content :center :justify-content :center
:border-radius 999 :border-radius 999
:background-color (get-background-color props)} :background-color (get-background-color props theme)}
(get-container-border-styles props) (get-container-border-styles props theme)
(get-container-styles-by-size props))) (get-container-styles-by-size props)))
(defn- get-text-color (defn- get-text-color
[{:keys [status theme]}] [{:keys [status]} theme]
(case status (case status
:default (colors/theme-colors colors/neutral-100 colors/white theme) :default (colors/theme-colors colors/neutral-100 colors/white theme)
:error (colors/resolve-color :danger theme) :error (colors/resolve-color :danger theme)
@ -53,5 +53,5 @@
:paragraph-1)) :paragraph-1))
(defn text (defn text
[props] [props theme]
{:color (get-text-color props)}) {:color (get-text-color props theme)})

14
src/quo/components/counter/collectible_counter/view.cljs
View File

@ -15,26 +15,24 @@
[:value {:optional true} [:maybe [:or :string :int]]] [:value {:optional true} [:maybe [:or :string :int]]]
[:status {:optional true} [:maybe :keyword]] [:status {:optional true} [:maybe :keyword]]
[:size {:optional true} [:maybe [:enum :size-32 :size-24]]] [:size {:optional true} [:maybe [:enum :size-32 :size-24]]]
[:accessibility-label {:optional true} [:maybe :keyword]] [:accessibility-label {:optional true} [:maybe :keyword]]]]]
[:theme :schema.common/theme]]]]
:any]) :any])
(defn- view-internal (defn- view-internal
[{:keys [value accessibility-label container-style] [{:keys [value accessibility-label container-style]
:as props}] :as props}]
(let [default-props {:status :default (let [theme (quo.theme/use-theme)
default-props {:status :default
:size :size-32} :size :size-32}
props (merge default-props props)] props (merge default-props props)]
[rn/view [rn/view
{:accessible true {:accessible true
:accessibility-label (or accessibility-label :collectible-counter) :accessibility-label (or accessibility-label :collectible-counter)
:style (merge (style/container props) container-style)} :style (merge (style/container props theme) container-style)}
[text/text [text/text
{:weight :medium {:weight :medium
:size (style/get-text-size props) :size (style/get-text-size props)
:style (style/text props)} :style (style/text props theme)}
value]])) value]]))
(def view (def view (schema/instrument #'view-internal ?schema))
(quo.theme/with-theme
(schema/instrument #'view-internal ?schema)))

11
src/quo/components/counter/counter/view.cljs
View File

@ -7,11 +7,12 @@
[react-native.core :as rn] [react-native.core :as rn]
[utils.number])) [utils.number]))
(defn- view-internal (defn view
[{:keys [type customization-color theme container-style accessibility-label max-value] [{:keys [type customization-color container-style accessibility-label max-value]
:or {max-value 99 customization-color :blue theme :dark}} :or {max-value 99 customization-color :blue}}
value] value]
(let [type (or type :default) (let [theme (quo.theme/use-theme)
type (or type :default)
value (utils.number/parse-int value) value (utils.number/parse-int value)
label (if (> value max-value) label (if (> value max-value)
(str max-value "+") (str max-value "+")
@ -33,5 +34,3 @@
:size :label :size :label
:style (when (= type :default) {:color colors/white})} :style (when (= type :default) {:color colors/white})}
label]])) label]]))
(def view (quo.theme/with-theme view-internal))

10
src/quo/components/counter/step/view.cljs
View File

@ -15,14 +15,14 @@
[:accessibility-label {:optional true} [:maybe :keyword]] [:accessibility-label {:optional true} [:maybe :keyword]]
[:customization-color {:optional true} [:maybe :schema.common/customization-color]] [:customization-color {:optional true} [:maybe :schema.common/customization-color]]
[:in-blur-view? {:optional true} [:maybe :boolean]] [:in-blur-view? {:optional true} [:maybe :boolean]]
[:theme :schema.common/theme]
[:type {:optional true} [:enum :active :complete :neutral]]]] [:type {:optional true} [:enum :active :complete :neutral]]]]
[:value [:maybe [:or :string :int]]]] [:value [:maybe [:or :string :int]]]]
:any]) :any])
(defn- view-internal (defn- view-internal
[{:keys [type accessibility-label theme in-blur-view? customization-color]} value] [{:keys [type accessibility-label in-blur-view? customization-color]} value]
(let [type (or type :neutral) (let [theme (quo.theme/use-theme)
type (or type :neutral)
value (utils.number/parse-int value) value (utils.number/parse-int value)
label (str value) label (str value)
size (count label)] size (count label)]
@ -40,6 +40,4 @@
:style {:color (style/text-color type theme)}} :style {:color (style/text-color type theme)}}
label]])) label]]))
(def view (def view (schema/instrument #'view-internal ?schema))
(quo.theme/with-theme
(schema/instrument #'view-internal ?schema)))

32
src/quo/components/dividers/date.cljs
View File

@ -3,21 +3,25 @@
[quo.components.common.separator.view :as separator] [quo.components.common.separator.view :as separator]
[quo.components.markdown.text :as text] [quo.components.markdown.text :as text]
[quo.foundations.colors :as colors] [quo.foundations.colors :as colors]
[quo.theme]
[react-native.core :as rn])) [react-native.core :as rn]))
(defn date (defn date
[value] [value]
[rn/view (let [theme (quo.theme/use-theme)]
{:padding-top 8 [rn/view
:padding-bottom 12 {:padding-top 8
:padding-right 20 :padding-bottom 12
:padding-left 60} :padding-right 20
[text/text :padding-left 60}
{:weight :medium [text/text
:accessibility-label :divider-date-text {:weight :medium
:size :label :accessibility-label :divider-date-text
:style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40) :size :label
:text-transform :capitalize :style {:color (colors/theme-colors colors/neutral-50
:margin-bottom 4}} colors/neutral-40
value] theme)
[separator/separator]]) :text-transform :capitalize
:margin-bottom 4}}
value]
[separator/separator]]))

61
src/quo/components/dividers/divider_label/view.cljs
View File

@ -20,42 +20,35 @@
- `container-style` - Style applied to the container view. - `container-style` - Style applied to the container view.
label - String or markdown text component to display in the divider label." label - String or markdown text component to display in the divider label."
[{:keys [counter? [{:keys [counter? counter-value chevron chevron-icon tight? blur? on-press container-style]
counter-value
chevron
chevron-icon
tight?
blur?
theme
on-press
container-style]
:or {tight? true}} :or {tight? true}}
label] label]
[rn/pressable (let [theme (quo.theme/use-theme)]
{:on-press on-press [rn/pressable
:accessibility-label :divider-label {:on-press on-press
:style (merge (style/container blur? tight? chevron theme) :accessibility-label :divider-label
container-style)} :style (merge (style/container blur? tight? chevron theme)
[rn/view container-style)}
{:style (style/content chevron)} [rn/view
(when chevron {:style (style/content chevron)}
[icons/icon (or chevron-icon :i/chevron-right) (when chevron
{:color (style/get-content-color blur? theme) [icons/icon (or chevron-icon :i/chevron-right)
:container-style {(if (= chevron :right) {:color (style/get-content-color blur? theme)
:margin-left :container-style {(if (= chevron :right)
:margin-right) :margin-left
2}}]) :margin-right)
[text/text 2}}])
{:size :paragraph-2 [text/text
:weight :medium {:size :paragraph-2
:style (style/text blur? theme)} :weight :medium
label]] :style (style/text blur? theme)}
(when counter? label]]
[counter/view (when counter?
{:type (if blur? :secondary :grey) [counter/view
:container-style {:margin-left 2}} {:type (if blur? :secondary :grey)
counter-value])]) :container-style {:margin-left 2}}
counter-value])]))
(defn view (defn view
([_ _] (quo.theme/with-theme view-internal)) ([props label] [view-internal props label])
([label] [view {} label])) ([label] [view {} label]))

2
src/quo/components/dividers/divider_line/style.cljs
View File

@ -3,7 +3,7 @@
[quo.foundations.colors :as colors])) [quo.foundations.colors :as colors]))
(defn divider-line (defn divider-line
[{:keys [blur? container-style theme]}] [{:keys [blur? container-style]} theme]
(merge (merge
{:border-color (if blur? {:border-color (if blur?
(colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme) (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)

7
src/quo/components/dividers/divider_line/view.cljs
View File

@ -4,8 +4,7 @@
[quo.theme :as quo.theme] [quo.theme :as quo.theme]
[react-native.core :as rn])) [react-native.core :as rn]))
(defn- view-internal (defn view
[props] [props]
[rn/view {:style (style/divider-line props)}]) (let [theme (quo.theme/use-theme)]
[rn/view {:style (style/divider-line props theme)}]))
(def view (quo.theme/with-theme view-internal))

9
src/quo/components/dividers/new_messages.cljs
View File

@ -6,10 +6,11 @@
[react-native.core :as rn] [react-native.core :as rn]
[react-native.linear-gradient :as linear-gradient])) [react-native.linear-gradient :as linear-gradient]))
(defn- view-internal (defn view
"new-messages params - label, customization-color, theme" "new-messages params - label, customization-color, theme"
[{:keys [label customization-color theme] :or {customization-color :blue}}] [{:keys [label customization-color] :or {customization-color :blue}}]
(let [bg-color (colors/resolve-color customization-color theme 5) (let [theme (quo.theme/use-theme)
bg-color (colors/resolve-color customization-color theme 5)
text-color (colors/resolve-color customization-color theme)] text-color (colors/resolve-color customization-color theme)]
[linear-gradient/linear-gradient [linear-gradient/linear-gradient
{:colors [bg-color "rgba(0,0,0,0)"] {:colors [bg-color "rgba(0,0,0,0)"]
@ -24,5 +25,3 @@
:weight :medium :weight :medium
:style {:color text-color}} :style {:color text-color}}
label]]])) label]]]))
(def view (quo.theme/with-theme view-internal))

143
src/quo/components/drawers/action_drawers/view.cljs
View File

@ -26,88 +26,73 @@
[rn/view (dissoc props :on-press) child] [rn/view (dissoc props :on-press) child]
[rn/touchable-highlight props child])) [rn/touchable-highlight props child]))
(defn- action-internal (defn action
[{:keys [icon [{:keys [icon label sub-label right-icon right-text danger? disabled? on-press add-divider?
label accessibility-label icon-color no-icon-color? state customization-color blur?]}]
sub-label (let [theme (quo.theme/use-theme)]
right-icon [:<>
right-text (when add-divider?
danger? [divider theme blur?])
disabled? [maybe-pressable disabled?
on-press {:accessibility-label accessibility-label
add-divider? :style (style/container {:sub-label sub-label
theme :disabled? disabled?
accessibility-label :state state
icon-color :customization-color customization-color
no-icon-color? :blur? blur?
state :theme theme})
customization-color :underlay-color (colors/theme-colors colors/neutral-5 colors/neutral-90 theme)
blur?]}] :on-press on-press}
[:<> [rn/view
(when add-divider? {:style (style/row-container sub-label)}
[divider theme blur?]) (when icon
[maybe-pressable disabled? [rn/view
{:accessibility-label accessibility-label {:accessibility-label :left-icon-for-action
:style (style/container {:sub-label sub-label :accessible true
:disabled? disabled? :style (style/left-icon sub-label)}
:state state [icon/icon icon
:customization-color customization-color {:color (or icon-color (get-icon-color danger? theme))
:blur? blur? :no-color no-icon-color?
:theme theme}) :size 20}]])
:underlay-color (colors/theme-colors colors/neutral-5 colors/neutral-90 theme)
:on-press on-press}
[rn/view
{:style (style/row-container sub-label)}
(when icon
[rn/view [rn/view
{:accessibility-label :left-icon-for-action {:style style/text-container}
:accessible true
:style (style/left-icon sub-label)}
[icon/icon icon
{:color (or icon-color (get-icon-color danger? theme))
:no-color no-icon-color?
:size 20}]])
[rn/view
{:style style/text-container}
[text/text
{:size :paragraph-1
:weight :medium
:style {:color
(cond
danger? (colors/theme-colors colors/danger-50 colors/danger-60 theme)
:else (colors/theme-colors colors/neutral-100 colors/white theme))}}
label]
(when sub-label
[text/text [text/text
{:size :paragraph-2 {:size :paragraph-1
:style {:color :weight :medium
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}} :style {:color
sub-label])] (cond
(when (or right-text right-icon (= state :selected)) danger? (colors/theme-colors colors/danger-50 colors/danger-60 theme)
[rn/view {:style style/right-side-container} :else (colors/theme-colors colors/neutral-100 colors/white theme))}}
(when right-text label]
(when sub-label
[text/text [text/text
{:accessibility-label :right-text-for-action {:size :paragraph-2
:size :paragraph-1 :style {:color
:style (style/right-text theme)} (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
right-text]) sub-label])]
(when right-icon (when (or right-text right-icon (= state :selected))
[rn/view [rn/view {:style style/right-side-container}
{:style style/right-icon (when right-text
:accessible true [text/text
:accessibility-label :right-icon-for-action} {:accessibility-label :right-text-for-action
[icon/icon right-icon :size :paragraph-1
{:color (get-icon-color danger? theme) :style (style/right-text theme)}
:size 20}]]) right-text])
(when (= state :selected) (when right-icon
[rn/view {:style style/right-icon} [rn/view
[icon/icon :i/check {:style style/right-icon
{:color (if blur? :accessible true
colors/white :accessibility-label :right-icon-for-action}
(colors/resolve-color customization-color theme)) [icon/icon right-icon
:size 20}]])])]]]) {:color (get-icon-color danger? theme)
:size 20}]])
(def ^:private action (quo.theme/with-theme action-internal)) (when (= state :selected)
[rn/view {:style style/right-icon}
[icon/icon :i/check
{:color (if blur?
colors/white
(colors/resolve-color customization-color theme))
:size 20}]])])]]]))
(defn action-drawer (defn action-drawer
[sections] [sections]

94
src/quo/components/drawers/bottom_actions/view.cljs
View File

@ -26,7 +26,6 @@
[:button-two-label {:optional true} [:maybe :string]] [:button-two-label {:optional true} [:maybe :string]]
[:button-one-props {:optional true} [:maybe :map]] [:button-one-props {:optional true} [:maybe :map]]
[:button-two-props {:optional true} [:maybe :map]] [:button-two-props {:optional true} [:maybe :map]]
[:theme :schema.common/theme]
[:scroll? {:optional true} [:maybe :boolean]] [:scroll? {:optional true} [:maybe :boolean]]
[:blur? {:optional true} [:maybe :boolean]] [:blur? {:optional true} [:maybe :boolean]]
[:container-style {:optional true} [:maybe :map]]]]] [:container-style {:optional true} [:maybe :map]]]]]
@ -40,58 +39,57 @@
(defn- view-internal (defn- view-internal
[{:keys [actions description description-text description-top-text error-message role button-one-label [{:keys [actions description description-text description-top-text error-message role button-one-label
button-two-label blur? button-one-props button-two-props theme scroll? container-style]}] button-two-label blur? button-one-props button-two-props scroll? container-style]}]
[rn/view (let [theme (quo.theme/use-theme)]
{:style (merge (style/container scroll? blur? theme) container-style)} [rn/view
(when (= description :top-error) {:style (merge (style/container scroll? blur? theme) container-style)}
[rn/view {:style style/error-message} (when (= description :top-error)
[icon/icon [rn/view {:style style/error-message}
:i/alert [icon/icon
{:color (colors/theme-colors colors/danger-50 colors/danger-60 theme) :i/alert
:size 16}] {:color (colors/theme-colors colors/danger-50 colors/danger-60 theme)
[text/text :size 16}]
{:size :paragraph-2 [text/text
:style {:color (colors/theme-colors colors/danger-50 colors/danger-60 theme)}} {:size :paragraph-2
error-message]]) :style {:color (colors/theme-colors colors/danger-50 colors/danger-60 theme)}}
error-message]])
(when (and (= description :top) role) (when (and (= description :top) role)
[rn/view {:style style/description-top} [rn/view {:style style/description-top}
[text/text [text/text
{:size :paragraph-2 {:size :paragraph-2
:style (style/description-top-text scroll? blur? theme)} :style (style/description-top-text scroll? blur? theme)}
(or description-top-text (i18n/label :t/eligible-to-join-as))] (or description-top-text (i18n/label :t/eligible-to-join-as))]
[context-tag/view [context-tag/view
{:type :icon {:type :icon
:size 24 :size 24
:icon (role role-icon) :icon (role role-icon)
:blur? blur? :blur? blur?
:context (i18n/label (keyword "t" role))}]]) :context (i18n/label (keyword "t" role))}]])
[rn/view {:style style/buttons-container} [rn/view {:style style/buttons-container}
(when (= actions :two-actions) (when (= actions :two-actions)
[button/button
(merge
{:size 40
:background (when (or blur? scroll?) :blur)
:container-style style/button-container
:theme theme
:accessibility-label :button-two}
button-two-props)
button-two-label])
[button/button [button/button
(merge (merge
{:size 40 {:size 40
:background (when (or blur? scroll?) :blur)
:container-style style/button-container :container-style style/button-container
:background (when (or blur? scroll?) :blur)
:theme theme :theme theme
:accessibility-label :button-two} :accessibility-label :button-one}
button-two-props) button-one-props)
button-two-label]) button-one-label]]
[button/button (when (= description :bottom)
(merge [text/text
{:size 40 {:size :paragraph-2
:container-style style/button-container :style (style/description-bottom scroll? blur? theme)} description-text])]))
:background (when (or blur? scroll?) :blur)
:theme theme
:accessibility-label :button-one}
button-one-props)
button-one-label]]
(when (= description :bottom)
[text/text
{:size :paragraph-2
:style (style/description-bottom scroll? blur? theme)} description-text])])
(def view (def view (schema/instrument #'view-internal ?schema))
(quo.theme/with-theme
(schema/instrument #'view-internal ?schema)))

53
src/quo/components/drawers/documentation_drawers/view.cljs
View File

@ -7,7 +7,7 @@
[react-native.core :as rn] [react-native.core :as rn]
[react-native.gesture :as gesture])) [react-native.gesture :as gesture]))
(defn- view-internal (defn view
"Options "Options
- `title` Title text - `title` Title text
- `show-button?` Show button - `show-button?` Show button
@ -17,29 +17,28 @@
- `shell?` use shell theme - `shell?` use shell theme
`content` Content of the drawer `content` Content of the drawer
" "
[{:keys [title show-button? on-press-button button-label button-icon theme shell?]} content] [{:keys [title show-button? on-press-button button-label button-icon shell?]} content]
[gesture/scroll-view (let [theme (quo.theme/use-theme)]
{:style style/outer-container [gesture/scroll-view
:always-bounce-vertical false {:style style/outer-container
:content-inset-adjustment-behavior :never} :always-bounce-vertical false
[rn/view {:style style/container} :content-inset-adjustment-behavior :never}
[text/text [rn/view {:style style/container}
{:size :heading-2 [text/text
:accessibility-label :documentation-drawer-title {:size :heading-2
:style (style/title theme) :accessibility-label :documentation-drawer-title
:weight :semi-bold} :style (style/title theme)
title] :weight :semi-bold}
[rn/view {:style style/content :accessibility-label :documentation-drawer-content} title]
content [rn/view {:style style/content :accessibility-label :documentation-drawer-content}
(when show-button? content
[button/button (when show-button?
{:size 24 [button/button
:type :outline {:size 24
:container-style {:margin-top 16} :type :outline
:background (when shell? :blur) :container-style {:margin-top 16}
:on-press on-press-button :background (when shell? :blur)
:accessibility-label :documentation-drawer-button :on-press on-press-button
:icon-right button-icon} :accessibility-label :documentation-drawer-button
button-label])]]]) :icon-right button-icon}
button-label])]]]))
(def view (quo.theme/with-theme view-internal))

4
src/quo/components/drawers/drawer_action/view.cljs
View File

@ -5,7 +5,7 @@
[quo.components.icon :as icon] [quo.components.icon :as icon]
[quo.components.markdown.text :as text] [quo.components.markdown.text :as text]
[quo.components.selectors.selectors.view :as selectors] [quo.components.selectors.selectors.view :as selectors]
[quo.theme :as theme] [quo.theme]
[react-native.core :as rn] [react-native.core :as rn]
[schema.core :as schema])) [schema.core :as schema]))
@ -14,7 +14,7 @@
customization-color blur?] customization-color blur?]
:or {customization-color :blue :or {customization-color :blue
blur? false}}] blur? false}}]
(let [theme (theme/use-theme-value) (let [theme (quo.theme/use-theme)
[pressed? set-pressed] (rn/use-state false) [pressed? set-pressed] (rn/use-state false)
on-press-in (rn/use-callback #(set-pressed true)) on-press-in (rn/use-callback #(set-pressed true))
on-press-out (rn/use-callback #(set-pressed false))] on-press-out (rn/use-callback #(set-pressed false))]

98
src/quo/components/drawers/drawer_top/view.cljs
View File

@ -192,54 +192,50 @@
colors/white-opa-40 colors/white-opa-40
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}])])) (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}])]))
(defn- view-internal (defn view
[{:keys [title title-icon type theme description blur? community-name community-logo button-icon [{:keys [title title-icon type description blur? community-name community-logo button-icon
account-name emoji context-tag-type button-type account-name emoji context-tag-type button-type container-style
on-button-press on-button-press on-button-long-press profile-picture keycard? networks label full-name
on-button-long-press button-disabled? account-avatar-emoji account-avatar-type customization-color icon-avatar]}]
button-disabled? account-avatar-emoji account-avatar-type customization-color icon-avatar (let [theme (quo.theme/use-theme)]
profile-picture keycard? networks label full-name [rn/view {:style (merge style/container container-style)}
container-style]}] (when (left-image-supported-types type)
[rn/view {:style (merge style/container container-style)} [rn/view {:style style/left-container}
(when (left-image-supported-types type) [left-image
[rn/view {:style style/left-container} {:type type
[left-image :customization-color customization-color
{:type type :account-avatar-emoji account-avatar-emoji
:customization-color customization-color :account-avatar-type account-avatar-type
:account-avatar-emoji account-avatar-emoji :icon-avatar icon-avatar
:account-avatar-type account-avatar-type :profile-picture profile-picture}]])
:icon-avatar icon-avatar [rn/view {:style style/body-container}
:profile-picture profile-picture}]]) [left-title
[rn/view {:style style/body-container} {:type type
[left-title :label label
{:type type :title title
:label label :title-icon title-icon
:title title :theme theme
:title-icon title-icon :blur? blur?}]
:theme theme [subtitle
:blur? blur?}] {:type type
[subtitle :theme theme
{:type type :blur? blur?
:theme theme :keycard? keycard?
:blur? blur? :networks networks
:keycard? keycard? :description description
:networks networks :community-name community-name
:description description :community-logo community-logo
:community-name community-name :context-tag-type context-tag-type
:community-logo community-logo :customization-color customization-color
:context-tag-type context-tag-type :account-name account-name
:customization-color customization-color :emoji emoji
:account-name account-name :full-name full-name
:emoji emoji :profile-picture profile-picture}]]
:full-name full-name [right-icon
:profile-picture profile-picture}]] {:theme theme
[right-icon :type type
{:theme theme :button-type button-type
:type type :on-button-press on-button-press
:button-type button-type :on-button-long-press on-button-long-press
:on-button-press on-button-press :button-disabled? button-disabled?
:on-button-long-press on-button-long-press :button-icon button-icon}]]))
:button-disabled? button-disabled?
:button-icon button-icon}]])
(def view (quo.theme/with-theme view-internal))

6
src/quo/components/drawers/permission_context/view.cljs
View File

@ -69,12 +69,12 @@
(defn- view-internal (defn- view-internal
[{:keys [on-press blur? container-style] :as props}] [{:keys [on-press blur? container-style] :as props}]
(let [theme (quo.theme/use-theme-value) (let [theme (quo.theme/use-theme)
context-type (:type props)] context-type (:type props)]
[shadow/view [shadow/view
{:offset [0 4] {:offset [0 4]
:paint-inside false :paint-inside false
:start-color (colors/theme-colors colors/neutral-100-opa-8 colors/neutral-100-opa-60) :start-color (colors/theme-colors colors/neutral-100-opa-8 colors/neutral-100-opa-60 theme)
:distance 25 :distance 25
:style {:align-self :stretch}} :style {:align-self :stretch}}
[rn/view {:style (merge (style/container blur? theme) container-style)} [rn/view {:style (merge (style/container blur? theme) container-style)}
@ -83,7 +83,7 @@
{:style style/blur-container {:style style/blur-container
:blur-amount 20 :blur-amount 20
:blur-radius (if platform/ios? 20 10) :blur-radius (if platform/ios? 20 10)
:overlay-color (colors/theme-colors colors/white-70-blur colors/neutral-95-opa-70-blur) :overlay-color (colors/theme-colors colors/white-70-blur colors/neutral-95-opa-70-blur theme)
:blur-type :transparent}]) :blur-type :transparent}])
[button/button [button/button
{:type :ghost {:type :ghost

2
src/quo/components/dropdowns/dropdown/properties.cljs
View File

@ -109,7 +109,7 @@
(colors/theme-colors colors/neutral-10 colors/neutral-80 theme))}) (colors/theme-colors colors/neutral-10 colors/neutral-80 theme))})
(defn get-colors (defn get-colors
[{:keys [customization-color theme type state background size]}] [{:keys [customization-color type state background size]} theme]
(let [active? (= state :active)] (let [active? (= state :active)]
(cond (cond
(and (= background :photo) (= type :grey)) (grey-photo theme active? size) (and (= background :photo) (= type :grey)) (grey-photo theme active? size)

38
src/quo/components/dropdowns/dropdown/view.cljs
View File

@ -5,12 +5,24 @@
[quo.components.icon :as icon] [quo.components.icon :as icon]
[quo.components.markdown.text :as text] [quo.components.markdown.text :as text]
[quo.foundations.customization-colors :as customization-colors] [quo.foundations.customization-colors :as customization-colors]
[quo.theme :as theme] [quo.theme]
[react-native.blur :as blur] [react-native.blur :as blur]
[react-native.core :as rn])) [react-native.core :as rn]))
(defn- view-internal (defn view
[{:keys [type size state background customization-color theme on-press icon-name icon? emoji? "Props:
- type: :outline |:grey (default) | :ghost | :customization
- size: :size-40 (default) | :size-32 | :size-24
- state: :default (default) | :active | :disabled
- emoji?: boolean
- icon?: boolean
- no-icon-color?: boolean
- background: :blur | :photo (optional)
- icon-name: keyword
- on-press: function
Child: string - used as label or emoji (for emoji only)"
[{:keys [type size state background customization-color on-press icon-name icon? emoji?
accessibility-label no-icon-color?] accessibility-label no-icon-color?]
:or {type :grey :or {type :grey
size :size-40 size :size-40
@ -20,11 +32,12 @@
icon-name :i/placeholder} icon-name :i/placeholder}
:as props} :as props}
text] text]
(let [{:keys [icon-size text-size emoji-size border-radius] (let [theme (quo.theme/use-theme)
{:keys [icon-size text-size emoji-size border-radius]
:as size-properties} (properties/sizes size) :as size-properties} (properties/sizes size)
{:keys [left-icon-color right-icon-color right-icon-color-2 label-color blur-type {:keys [left-icon-color right-icon-color right-icon-color-2 label-color blur-type
blur-overlay-color] blur-overlay-color]
:as colors} (properties/get-colors props) :as colors} (properties/get-colors props theme)
right-icon (if (= state :active) :i/pullup :i/dropdown) right-icon (if (= state :active) :i/pullup :i/dropdown)
customization-type? (= type :customization) customization-type? (= type :customization)
show-blur-background? (and (= background :photo) show-blur-background? (and (= background :photo)
@ -73,18 +86,3 @@
:accessibility-label :right-icon :accessibility-label :right-icon
:color right-icon-color :color right-icon-color
:color-2 right-icon-color-2}]])])) :color-2 right-icon-color-2}]])]))
(def view
"Props:
- type: :outline |:grey (default) | :ghost | :customization
- size: :size-40 (default) | :size-32 | :size-24
- state: :default (default) | :active | :disabled
- emoji?: boolean
- icon?: boolean
- no-icon-color?: boolean
- background: :blur | :photo (optional)
- icon-name: keyword
- on-press: function
Child: string - used as label or emoji (for emoji only)"
(theme/with-theme view-internal))

30
src/quo/components/dropdowns/dropdown_input/view.cljs
View File

@ -4,13 +4,19 @@
[quo.components.dropdowns.dropdown-input.style :as style] [quo.components.dropdowns.dropdown-input.style :as style]
[quo.components.icon :as icon] [quo.components.icon :as icon]
[quo.components.markdown.text :as text] [quo.components.markdown.text :as text]
[quo.theme :as theme] [quo.theme]
[react-native.core :as rn])) [react-native.core :as rn]))
(defn- view-internal (defn view
[{:keys [state theme on-press icon? "Props:
label? blur? - state: :default (default) | :active | :disabled
accessibility-label header-label] - label: string
- header-label: string
- icon?: boolean
- label?: boolean
- blur?: boolean
- on-press: function"
[{:keys [state on-press icon? label? blur? accessibility-label header-label]
:or {state :default :or {state :default
icon? true icon? true
label? true label? true
@ -18,7 +24,8 @@
header-label "Label"} header-label "Label"}
:as props} :as props}
label] label]
(let [{:keys [left-icon-color right-icon-color right-icon-color-2] (let [theme (quo.theme/use-theme)
{:keys [left-icon-color right-icon-color right-icon-color-2]
:as colors} (properties/get-colors props) :as colors} (properties/get-colors props)
right-icon (if (= state :active) :i/pullup :i/dropdown)] right-icon (if (= state :active) :i/pullup :i/dropdown)]
[rn/view [rn/view
@ -55,14 +62,3 @@
:accessibility-label :right-icon :accessibility-label :right-icon
:color right-icon-color :color right-icon-color
:color-2 right-icon-color-2}]]])) :color-2 right-icon-color-2}]]]))
(def view
"Props:
- state: :default (default) | :active | :disabled
- label: string
- header-label: string
- icon?: boolean
- label?: boolean
- blur?: boolean
- on-press: function"
(theme/with-theme view-internal))

2
src/quo/components/dropdowns/network_dropdown/view.cljs
View File

@ -7,7 +7,7 @@
(defn view (defn view
[{:keys [on-press state] :as props} networks] [{:keys [on-press state] :as props} networks]
(let [theme (quo.theme/use-theme-value) (let [theme (quo.theme/use-theme)
[pressed? set-pressed] (rn/use-state false) [pressed? set-pressed] (rn/use-state false)
on-press-in (rn/use-callback #(set-pressed true)) on-press-in (rn/use-callback #(set-pressed true))
on-press-out (rn/use-callback #(set-pressed false))] on-press-out (rn/use-callback #(set-pressed false))]

5
src/quo/components/empty_state/empty_state/view.cljs
View File

@ -3,11 +3,10 @@
[quo.components.buttons.button.view :as button] [quo.components.buttons.button.view :as button]
[quo.components.empty-state.empty-state.styles :as styles] [quo.components.empty-state.empty-state.styles :as styles]
[quo.components.markdown.text :as text] [quo.components.markdown.text :as text]
[quo.theme :as theme]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.fast-image :as fast-image])) [react-native.fast-image :as fast-image]))
(defn- empty-state-internal (defn empty-state
[{:keys [customization-color image title description blur? placeholder? container-style] [{:keys [customization-color image title description blur? placeholder? container-style]
upper-button :upper-button upper-button :upper-button
lower-button :lower-button lower-button :lower-button
@ -50,5 +49,3 @@
:background :blur :background :blur
:on-press lower-button-on-press} :on-press lower-button-on-press}
lower-button-text])])]) lower-button-text])])])
(def empty-state (theme/with-theme empty-state-internal))

5
src/quo/components/gradient/gradient_cover/view.cljs
View File

@ -2,10 +2,9 @@
(:require (:require
[quo.components.gradient.gradient-cover.style :as style] [quo.components.gradient.gradient-cover.style :as style]
[quo.foundations.colors :as colors] [quo.foundations.colors :as colors]
[quo.theme :as quo.theme]
[react-native.linear-gradient :as linear-gradient])) [react-native.linear-gradient :as linear-gradient]))
(defn- view-internal (defn view
[{:keys [customization-color opacity container-style height] [{:keys [customization-color opacity container-style height]
:or {customization-color :blue}}] :or {customization-color :blue}}]
;; `when` added for safety, `linear-gradient` will break if `nil` is passed, the `:or` ;; `when` added for safety, `linear-gradient` will break if `nil` is passed, the `:or`
@ -21,5 +20,3 @@
:end {:x 0 :y 1} :end {:x 0 :y 1}
:style (merge (style/root-container opacity height) :style (merge (style/root-container opacity height)
container-style)}]))) container-style)}])))
(def view (quo.theme/with-theme view-internal))

2
src/quo/components/graph/interactive_graph/view.cljs
View File

@ -49,7 +49,7 @@
[{:keys [data state customization-color reference-value reference-prefix decimal-separator] [{:keys [data state customization-color reference-value reference-prefix decimal-separator]
:or {reference-prefix "$" :or {reference-prefix "$"
decimal-separator :dot}}] decimal-separator :dot}}]
(let [theme (quo.theme/use-theme-value) (let [theme (quo.theme/use-theme)
[inspecting? set-inspecting] (rn/use-state false) [inspecting? set-inspecting] (rn/use-state false)
data (if (> (count data) max-data-points) data (if (> (count data) max-data-points)
(utils/downsample-data data max-data-points) (utils/downsample-data data max-data-points)

11
src/quo/components/graph/wallet_graph/view.cljs
View File

@ -31,9 +31,10 @@
(colors/custom-color color-keyword 60) (colors/custom-color color-keyword 60)
theme))) theme)))
(defn- view-internal (defn view
[{:keys [data state time-frame customization-color theme]}] [{:keys [data state time-frame customization-color]}]
(let [max-data-points (time-frame->max-data-points time-frame) (let [theme (quo.theme/use-theme)
max-data-points (time-frame->max-data-points time-frame)
data (if (and (not= time-frame :empty) (> (count data) max-data-points)) data (if (and (not= time-frame :empty) (> (count data) max-data-points))
(utils/downsample-data data max-data-points) (utils/downsample-data data max-data-points)
data) data)
@ -41,7 +42,7 @@
width (:width (rn/get-window)) width (:width (rn/get-window))
line-color (get-line-color customization-color state theme) line-color (get-line-color customization-color state theme)
gradient-colors [(colors/alpha line-color 0.1) (colors/alpha line-color 0)] gradient-colors [(colors/alpha line-color 0.1) (colors/alpha line-color 0)]
fill-color (colors/theme-colors colors/white colors/neutral-95)] fill-color (colors/theme-colors colors/white colors/neutral-95 theme)]
(if (= time-frame :empty) (if (= time-frame :empty)
[fast-image/fast-image [fast-image/fast-image
{:style style/empty-state {:style style/empty-state
@ -78,5 +79,3 @@
:y-axis-label-width 0.01 :y-axis-label-width 0.01
:labels-extra-height -36 :labels-extra-height -36
:x-axis-label-text-style style/x-axis-label-text-style}]]]))) :x-axis-label-text-style style/x-axis-label-text-style}]]])))
(def view (quo.theme/with-theme view-internal))

2
src/quo/components/header.cljs
View File

@ -139,7 +139,7 @@
background] background]
:or {title-align :center :or {title-align :center
border-bottom false}}] border-bottom false}}]
(let [theme (quo.theme/use-theme-value) (let [theme (quo.theme/use-theme)
[layout set-layout] (rn/use-state {:left {:width (or left-width 8) [layout set-layout] (rn/use-state {:left {:width (or left-width 8)
:height header-height} :height header-height}
:right {:width (or right-width 8) :right {:width (or right-width 8)

46
src/quo/components/icon.cljs
View File

@ -15,7 +15,7 @@
(not (string/blank? color)))))) (not (string/blank? color))))))
(defn- image-icon-style (defn- image-icon-style
[{:keys [color no-color size container-style theme]}] [{:keys [color no-color size container-style]} theme]
(cond-> {:width size (cond-> {:width size
:height size} :height size}
(not no-color) (not no-color)
@ -26,29 +26,31 @@
:always :always
(merge container-style))) (merge container-style)))
(defn memo-icon-fn (def memo-icon-fn
[{:keys [color color-2 container-style size accessibility-label] (fn [{:keys [color color-2 container-style size accessibility-label]
:or {accessibility-label :icon} :or {accessibility-label :icon}
:as props} :as props}
icon-name] icon-name
(let [size (or size 20)] theme]
(with-meta (let [size (or size 20)]
(if-let [svg-icon (icons.svg/get-icon icon-name size)] (with-meta
[svg-icon (if-let [svg-icon (icons.svg/get-icon icon-name size)]
(cond-> {:size size [svg-icon
:accessibility-label accessibility-label (cond-> {:size size
:style container-style} :accessibility-label accessibility-label
(valid-color? color) (assoc :color color) :style container-style}
(valid-color? color-2) (assoc :color-2 color-2))] (valid-color? color) (assoc :color color)
[rn/image (valid-color? color-2) (assoc :color-2 color-2))]
{:style (image-icon-style (assoc props :size size)) [rn/image
:accessibility-label accessibility-label {:style (image-icon-style (assoc props :size size) theme)
:source (icons/icon-source (str (name icon-name) size))}]) :accessibility-label accessibility-label
{:key icon-name}))) :source (icons/icon-source (str (name icon-name) size))}])
{:key icon-name}))))
(def ^:private themed-icon (memoize (quo.theme/with-theme memo-icon-fn))) (def ^:private memoized-icon (memoize memo-icon-fn))
(defn icon (defn icon
([icon-name] (icon icon-name nil)) ([icon-name] (icon icon-name nil))
([icon-name params] ([icon-name params]
(themed-icon params icon-name))) (let [theme (quo.theme/use-theme)]
(memoized-icon params icon-name theme))))

9
src/quo/components/info/info_message.cljs
View File

@ -14,7 +14,7 @@
:warning (colors/resolve-color :warning theme) :warning (colors/resolve-color :warning theme)
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme))) (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)))
(defn view-internal (defn info-message
"[info-message opts \"message\"] "[info-message opts \"message\"]
opts opts
{:type :default/:success/:error {:type :default/:success/:error
@ -23,9 +23,10 @@
:text-color colors/white ;; text color override :text-color colors/white ;; text color override
:icon-color colors/white ;; icon color override :icon-color colors/white ;; icon color override
:no-icon-color? false ;; disable tint color for icon" :no-icon-color? false ;; disable tint color for icon"
[{:keys [type size theme icon text-color icon-color no-icon-color? style accessibility-label [{:keys [type size icon text-color icon-color no-icon-color? style accessibility-label
container-style]} message] container-style]} message]
(let [weight (if (= size :default) :regular :medium) (let [theme (quo.theme/use-theme)
weight (if (= size :default) :regular :medium)
icon-size (if (= size :default) 16 12) icon-size (if (= size :default) 16 12)
size (if (= size :default) :paragraph-2 :label) size (if (= size :default) :paragraph-2 :label)
text-color (or text-color (get-color type theme)) text-color (or text-color (get-color type theme))
@ -45,5 +46,3 @@
:weight weight :weight weight
:style {:color text-color :style {:color text-color
:margin-horizontal 4}} message]])) :margin-horizontal 4}} message]]))
(def info-message (quo.theme/with-theme view-internal))

4
src/quo/components/info/information_box/view.cljs
View File

@ -5,7 +5,7 @@
[quo.components.icon :as icons] [quo.components.icon :as icons]
[quo.components.info.information-box.style :as style] [quo.components.info.information-box.style :as style]
[quo.components.markdown.text :as text] [quo.components.markdown.text :as text]
[quo.theme :as theme] [quo.theme]
[react-native.core :as rn])) [react-native.core :as rn]))
(defn- info-type->button-type (defn- info-type->button-type
@ -57,7 +57,7 @@
on-button-press on-close no-icon-color? icon-size]} on-button-press on-close no-icon-color? icon-size]}
message] message]
(when-not closed? (when-not closed?
(let [theme (theme/get-theme) (let [theme (quo.theme/use-theme)
include-button? (not (string/blank? button-label))] include-button? (not (string/blank? button-label))]
[rn/view [rn/view
{:accessibility-label :information-box {:accessibility-label :information-box

3
src/quo/components/inputs/address_input/style.cljs
View File

@ -29,7 +29,8 @@
(defn input-text (defn input-text
[theme] [theme]
(assoc (text/text-style {:size :paragraph-1 (assoc (text/text-style {:size :paragraph-1
:weight :monospace}) :weight :monospace}
nil)
:flex 1 :flex 1
:color (colors/theme-colors colors/neutral-100 colors/white theme) :color (colors/theme-colors colors/neutral-100 colors/white theme)
:margin-top (if platform/ios? 0 -4) :margin-top (if platform/ios? 0 -4)

4
src/quo/components/inputs/address_input/view.cljs
View File

@ -58,7 +58,7 @@
[{:keys [default-value blur? on-change-text on-blur on-focus on-clear on-scan [{:keys [default-value blur? on-change-text on-blur on-focus on-clear on-scan
on-detect-ens on-detect-address on-detect-unclassified address-regex ens-regex on-detect-ens on-detect-address on-detect-unclassified address-regex ens-regex
valid-ens-or-address? container-style]}] valid-ens-or-address? container-style]}]
(let [theme (quo.theme/use-theme-value) (let [theme (quo.theme/use-theme)
[status set-status] (rn/use-state :default) [status set-status] (rn/use-state :default)
[value set-value] (rn/use-state nil) [value set-value] (rn/use-state nil)
[focused? set-focused] (rn/use-state false) [focused? set-focused] (rn/use-state false)
@ -128,7 +128,7 @@
:auto-capitalize :none :auto-capitalize :none
:auto-correct false :auto-correct false
:spell-check false :spell-check false
:keyboard-appearance (quo.theme/theme-value :light :dark theme) :keyboard-appearance theme
:on-focus on-focus :on-focus on-focus
:on-blur on-blur :on-blur on-blur
:on-change-text on-change}] :on-change-text on-change}]

2
src/quo/components/inputs/input/style.cljs
View File

@ -87,7 +87,7 @@
(defn input (defn input
[colors-by-status small? multiple-lines? weight] [colors-by-status small? multiple-lines? weight]
(let [padding (if small? 4 8) (let [padding (if small? 4 8)
base-props (assoc (text/text-style {:size :paragraph-1 :weight (or weight :regular)}) base-props (assoc (text/text-style {:size :paragraph-1 :weight (or weight :regular)} nil)
:flex 1 :flex 1
:padding-right 0 :padding-right 0
:padding-left padding :padding-left padding

4
src/quo/components/inputs/input/view.cljs
View File

@ -67,7 +67,7 @@
label char-limit multiline? clearable? on-focus on-blur container-style input-container-style label char-limit multiline? clearable? on-focus on-blur container-style input-container-style
on-change-text on-char-limit-reach weight default-value on-clear placeholder] on-change-text on-char-limit-reach weight default-value on-clear placeholder]
:as props}] :as props}]
(let [theme (quo.theme/use-theme-value) (let [theme (quo.theme/use-theme)
ref (rn/use-ref-atom nil) ref (rn/use-ref-atom nil)
on-ref (rn/use-callback (fn [value] on-ref (rn/use-callback (fn [value]
(when (:ref props) (when (:ref props)
@ -134,7 +134,7 @@
:style (style/input colors-by-status small? multiple-lines? weight) :style (style/input colors-by-status small? multiple-lines? weight)
:accessibility-label :input :accessibility-label :input
:placeholder-text-color (:placeholder colors-by-status) :placeholder-text-color (:placeholder colors-by-status)
:keyboard-appearance (quo.theme/theme-value :light :dark theme) :keyboard-appearance theme
:cursor-color (:cursor variant-colors) :cursor-color (:cursor variant-colors)
:editable (not disabled?) :editable (not disabled?)
:placeholder modified-placeholder :placeholder modified-placeholder

30
src/quo/components/inputs/locked_input/view.cljs
View File

@ -19,21 +19,7 @@
{:size :paragraph-1 {:size :paragraph-1
:style (style/info-box-label theme)} value-text]]) :style (style/info-box-label theme)} value-text]])
(defn- locked-input-internal (defn locked-input
[{:keys [label icon container-style theme]} value]
[rn/view {:style container-style}
(when label
[text/text
{:size :paragraph-2
:weight :medium
:style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
label])
[info-box
{:theme theme
:icon icon
:value-text value}]])
(def locked-input
"Options: "Options:
:label - string (default nil) - Text to display above the input :label - string (default nil) - Text to display above the input
@ -42,4 +28,16 @@
:theme - :light/:dark (passed from with-theme HOC) :theme - :light/:dark (passed from with-theme HOC)
:value - string (default nil) - value to display in the info box" :value - string (default nil) - value to display in the info box"
(quo.theme/with-theme locked-input-internal)) [{:keys [label icon container-style]} value]
(let [theme (quo.theme/use-theme)]
[rn/view {:style container-style}
(when label
[text/text
{:size :paragraph-2
:weight :medium
:style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
label])
[info-box
{:theme theme
:icon icon
:value-text value}]]))

2
src/quo/components/inputs/recovery_phrase/style.cljs
View File

@ -13,7 +13,7 @@
(defn input (defn input
[] []
(assoc (text/text-style {}) (assoc (text/text-style {} nil)
:height 32 :height 32
:flex-grow 1 :flex-grow 1
:padding-vertical 5 :padding-vertical 5

4
src/quo/components/inputs/recovery_phrase/view.cljs
View File

@ -47,7 +47,7 @@
error-pred-written-words (constantly false)} error-pred-written-words (constantly false)}
:as props} :as props}
text] text]
(let [theme (quo.theme/use-theme-value) (let [theme (quo.theme/use-theme)
[state set-state] (rn/use-state :default) [state set-state] (rn/use-state :default)
on-focus (rn/use-callback on-focus (rn/use-callback
(fn [] (fn []
@ -64,7 +64,7 @@
:style (style/input) :style (style/input)
:placeholder-text-color (style/placeholder-color state theme blur?) :placeholder-text-color (style/placeholder-color state theme blur?)
:cursor-color (style/cursor-color customization-color theme) :cursor-color (style/cursor-color customization-color theme)
:keyboard-appearance (quo.theme/theme-value :light :dark theme) :keyboard-appearance theme
:multiline true :multiline true
:on-focus on-focus :on-focus on-focus
:on-blur on-blur} :on-blur on-blur}

3
src/quo/components/inputs/search_input/style.cljs
View File

@ -63,7 +63,8 @@
(defn input-text (defn input-text
[disabled?] [disabled?]
(assoc (text/text-style {:size :paragraph-1 (assoc (text/text-style {:size :paragraph-1
:weight :regular}) :weight :regular}
nil)
:flex 1 :flex 1
:padding-vertical 5 :padding-vertical 5
:min-width 120 :min-width 120

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

@ -18,7 +18,7 @@
(defn get-char-count-color (defn get-char-count-color
[blur? theme] [blur? theme]
(if blur? (if blur?
(colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40) (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
(colors/theme-colors colors/neutral-40 colors/neutral-50 theme))) (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)))
(defn get-selection-color (defn get-selection-color

7
src/quo/components/inputs/title_input/view.cljs
View File

@ -18,7 +18,7 @@
:or {max-length 0 :or {max-length 0
auto-focus false auto-focus false
default-value ""}}] default-value ""}}]
(let [theme (quo.theme/use-theme-value) (let [theme (quo.theme/use-theme)
[focused? set-focused] (rn/use-state auto-focus) [focused? set-focused] (rn/use-state auto-focus)
[value set-value] (rn/use-state default-value) [value set-value] (rn/use-state default-value)
input-ref (rn/use-ref-atom nil) input-ref (rn/use-ref-atom nil)
@ -45,10 +45,11 @@
{:style (text/text-style {:style (text/text-style
{:size (or size :heading-1) {:size (or size :heading-1)
:weight :semi-bold :weight :semi-bold
:style (style/title-text theme)}) :style (style/title-text theme)}
nil)
:default-value default-value :default-value default-value
:accessibility-label :profile-title-input :accessibility-label :profile-title-input
:keyboard-appearance (quo.theme/theme-value :light :dark theme) :keyboard-appearance theme
:return-key-type return-key-type :return-key-type return-key-type
:on-focus on-focus :on-focus on-focus
:on-blur on-blur :on-blur on-blur

6
src/quo/components/ios/drawer_bar/style.cljs
View File

@ -1,7 +1,7 @@
(ns quo.components.ios.drawer-bar.style (ns quo.components.ios.drawer-bar.style
(:require (:require
[quo.foundations.colors :as colors] [quo.foundations.colors :as colors]
[quo.theme :as theme])) [quo.theme]))
(def handle-container (def handle-container
{:padding-vertical 8 {:padding-vertical 8
@ -9,9 +9,9 @@
:align-items :center}) :align-items :center})
(defn handle (defn handle
[{:keys [theme]}] [theme]
{:width 32 {:width 32
:height 4 :height 4
:background-color (colors/theme-colors colors/neutral-100 colors/white theme) :background-color (colors/theme-colors colors/neutral-100 colors/white theme)
:opacity (theme/theme-value 0.05 0.1 theme) :opacity (if (= theme :light) 0.05 0.1)
:border-radius 100}) :border-radius 100})

11
src/quo/components/ios/drawer_bar/view.cljs
View File

@ -4,9 +4,8 @@
[quo.theme :as quo.theme] [quo.theme :as quo.theme]
[react-native.core :as rn])) [react-native.core :as rn]))
(defn- view-internal (defn view
[props] [_]
[rn/view {:style style/handle-container} (let [theme (quo.theme/use-theme)]
[rn/view {:style (style/handle props)}]]) [rn/view {:style style/handle-container}
[rn/view {:style (style/handle theme)}]]))
(def view (quo.theme/with-theme view-internal))

9
src/quo/components/keycard/view.cljs
View File

@ -8,14 +8,15 @@
[react-native.core :as rn] [react-native.core :as rn]
[utils.i18n :as i18n])) [utils.i18n :as i18n]))
(defn- view-internal (defn keycard
"This component based on the following properties: "This component based on the following properties:
- :holder-name - Can be owner's name. Default is Empty - :holder-name - Can be owner's name. Default is Empty
- :locked? - Boolean to specify whether the keycard is locked or not - :locked? - Boolean to specify whether the keycard is locked or not
- :theme :light/:dark - :theme :light/:dark
" "
[{:keys [holder-name locked? theme]}] [{:keys [holder-name locked?]}]
(let [label (if (boolean holder-name) (let [theme (quo.theme/use-theme)
label (if (boolean holder-name)
(i18n/label :t/user-keycard {:name holder-name}) (i18n/label :t/user-keycard {:name holder-name})
(i18n/label :t/empty-keycard))] (i18n/label :t/empty-keycard))]
[rn/view {:style (style/card-container locked? theme)} [rn/view {:style (style/card-container locked? theme)}
@ -39,5 +40,3 @@
:accessibility-label :holder-name :accessibility-label :holder-name
:icon-color colors/white-70-blur :icon-color colors/white-70-blur
:override-theme (when locked? :dark)}]])) :override-theme (when locked? :dark)}]]))
(def keycard (quo.theme/with-theme view-internal))

38
src/quo/components/links/internal_link_card/channel/view.cljs
View File

@ -68,25 +68,23 @@
[rn/view {:style (style/loading-thumbnail-box theme size)}]]) [rn/view {:style (style/loading-thumbnail-box theme size)}]])
(defn view-internal (defn view-internal
[{:keys [title description loading? icon banner [{:keys [title description loading? icon banner on-press channel-name size]
theme on-press channel-name size]
:or {channel-name "empty name"}}] :or {channel-name "empty name"}}]
[rn/pressable (let [theme (quo.theme/use-theme)]
{:style (style/container size theme) [rn/pressable
:accessibility-label :internal-link-card {:style (style/container size theme)
:on-press on-press} :accessibility-label :internal-link-card
(if loading? :on-press on-press}
[loading-view theme size] (if loading?
[:<> [loading-view theme size]
[rn/view {:style style/header-container} [:<>
(when icon [rn/view {:style style/header-container}
[logo-comp icon]) (when icon
[title-comp title channel-name theme]] [logo-comp icon])
(when description [title-comp title channel-name theme]]
[description-comp description]) (when description
(when banner [description-comp description])
[banner-comp banner size])])]) (when banner
[banner-comp banner size])])]))
(def view (def view (schema/instrument #'view-internal component-schema/?schema))
(quo.theme/with-theme
(schema/instrument #'view-internal component-schema/?schema)))

37
src/quo/components/links/internal_link_card/community/view.cljs
View File

@ -74,23 +74,22 @@
(defn- view-internal (defn- view-internal
[{:keys [title description loading? icon banner members-count active-members-count [{:keys [title description loading? icon banner members-count active-members-count
theme on-press size]}] on-press size]}]
[rn/pressable (let [theme (quo.theme/use-theme)]
{:style (style/container size theme) [rn/pressable
:accessibility-label :internal-link-card {:style (style/container size theme)
:on-press on-press} :accessibility-label :internal-link-card
(if loading? :on-press on-press}
[loading-view theme size] (if loading?
[:<> [loading-view theme size]
[rn/view {:style style/header-container} [:<>
(when icon [rn/view {:style style/header-container}
[logo-comp icon]) (when icon
[title-comp title]] [logo-comp icon])
(when description [title-comp title]]
[description-comp description members-count active-members-count]) (when description
(when banner [description-comp description members-count active-members-count])
[thumbnail-comp banner size])])]) (when banner
[thumbnail-comp banner size])])]))
(def view (def view (schema/instrument #'view-internal component-schema/?schema))
(quo.theme/with-theme
(schema/instrument #'view-internal component-schema/?schema)))

3
src/quo/components/links/internal_link_card/schema.cljs
View File

@ -18,6 +18,5 @@
[:active-members-count {:optional true} [:maybe [:or :int :string]]] [:active-members-count {:optional true} [:maybe [:or :int :string]]]
[:customization-color {:optional true} [:maybe :schema.common/customization-color]] [:customization-color {:optional true} [:maybe :schema.common/customization-color]]
[:emoji-hash {:optional true} [:maybe :string]] [:emoji-hash {:optional true} [:maybe :string]]
[:size {:optional true} [:maybe :keyword]] [:size {:optional true} [:maybe :keyword]]]]]
[:theme :schema.common/theme]]]]
:any]) :any])

46
src/quo/components/links/internal_link_card/user/view.cljs
View File

@ -56,28 +56,26 @@
[(style/gradient-start-color customization-color theme) :transparent]) [(style/gradient-start-color customization-color theme) :transparent])
(defn view-internal (defn view-internal
[{:keys [title loading? icon [{:keys [title loading? icon on-press subtitle emoji-hash customization-color size]}]
theme on-press subtitle emoji-hash customization-color size]}] (let [theme (quo.theme/use-theme)]
(if loading? (if loading?
[rn/pressable [rn/pressable
{:accessibility-label :internal-link-card {:accessibility-label :internal-link-card
:on-press on-press :on-press on-press
:style (style/container loading? theme size)} :style (style/container loading? theme size)}
[loading-view theme]] [loading-view theme]]
[linear-gradient/linear-gradient [linear-gradient/linear-gradient
(assoc {:style (style/container loading? theme size)} (assoc {:style (style/container loading? theme size)}
:colors :colors
(linear-gradient-props theme customization-color)) (linear-gradient-props theme customization-color))
[rn/pressable [rn/pressable
{:accessibility-label :internal-link-card {:accessibility-label :internal-link-card
:on-press on-press} :on-press on-press}
[rn/view {:style style/header-container} [rn/view {:style style/header-container}
(when icon (when icon
[logo-comp icon]) [logo-comp icon])
[title-comp title]] [title-comp title]]
(when subtitle (when subtitle
[subtitle-comp subtitle emoji-hash])]])) [subtitle-comp subtitle emoji-hash])]])))
(def view (def view (schema/instrument #'view-internal component-schema/?schema))
(quo.theme/with-theme
(schema/instrument #'view-internal component-schema/?schema)))

Some files were not shown because too many files have changed in this diff Show More