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
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
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 "$INVALID_CHANGES"
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.ui.screens.about-app.views :as about-app]
[legacy.status-im.ui.screens.mobile-network-settings.view :as mobile-network-settings]
[quo.theme :as theme]
[quo.theme]
[react-native.core :as rn]
[utils.re-frame :as rf]))
@ -23,8 +23,7 @@
(merge mobile-network-settings/offline-sheet)
(= view :learn-more)
(merge about-app/learn-more))
page-theme (:theme options)]
(merge about-app/learn-more))]
[:f>
(fn []
@ -32,7 +31,7 @@
(rn/hw-back-add-listener dismiss-bottom-sheet-callback)
(fn []
(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
(when content
[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)}
(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
(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]
[quo.components.avatars.user-avatar.style :as user-avatar.style]
[quo.core :as quo]
[quo.theme :as theme]
[quo.theme]
[re-frame.core :as re-frame.core]
[react-native.core :as rn]
[status-im.contexts.profile.utils :as profile.utils]
@ -52,7 +52,8 @@
(defn profile-photo-plus-dot-view
[{: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
photo-container)
size (:width photo-container)
@ -71,8 +72,7 @@
{:size size
:full-name full-name
:font-size (get text-style :font-size)
:background-color (user-avatar.style/customization-color customization-color
(theme/get-theme))
:background-color (user-avatar.style/customization-color customization-color theme)
:indicator-size 0
:indicator-border 0
:indicator-color "#000000"

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

@ -2,6 +2,7 @@
(:require
[legacy.status-im.ui.components.core :as quo]
[quo.foundations.colors :as quo.colors]
[quo.theme]
[re-frame.core :as re-frame]
[react-native.safe-area :as safe-area]))
@ -32,7 +33,8 @@
:or {border-bottom? true
new-ui? false}
:as props}]
(let [navigation (if (= navigation :none)
(let [theme (quo.theme/use-theme)
navigation (if (= navigation :none)
nil
[(default-navigation modal? navigation)])]
[quo/header
@ -47,4 +49,5 @@
{:right-accessories right-accessories})
(when new-ui?
{: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})
(defn message-default-style
[]
[theme]
{: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
:line-height 21.75
:letter-spacing -0.135})
;; Markdown styles
(defn default-text-style
[]
[theme]
{:max-font-size-multiplier react/max-font-size-multiplier
:style (message-default-style)})
:style (message-default-style theme)})
(defn system-text-style
[]
(update (default-text-style)
[theme]
(update (default-text-style theme)
:style assoc
:color colors/gray
:line-height 20
@ -70,65 +70,65 @@
:font-weight "400"))
(defn text-style
[content-type in-popover?]
[content-type in-popover? theme]
(merge
(when in-popover? {:number-of-lines 2})
(cond
(= content-type constants/content-type-system-text) (system-text-style)
(= content-type constants/content-type-system-pinned-message) (system-text-style)
:else (default-text-style))))
(= content-type constants/content-type-system-text) (system-text-style theme)
(= content-type constants/content-type-system-pinned-message) (system-text-style theme)
:else (default-text-style theme))))
(defn emph-text-style
[]
(update (default-text-style)
[theme]
(update (default-text-style theme)
:style
assoc
:font-style :italic))
(defn emph-style
[]
(emph-text-style))
[theme]
(emph-text-style theme))
(defn strong-text-style
[]
(update (default-text-style)
[theme]
(update (default-text-style theme)
:style
assoc
:font-weight "700"))
(defn outgoing-strong-text-style
[]
(update (strong-text-style)
[theme]
(update (strong-text-style theme)
:style
assoc
:color colors/white-persist))
(defn strong-style
[]
(outgoing-strong-text-style)
(strong-text-style))
[theme]
(outgoing-strong-text-style theme)
(strong-text-style theme))
(defn strong-emph-style
[]
(update (strong-style)
[theme]
(update (strong-style theme)
:style
assoc
:font-style :italic))
(defn strikethrough-style
[]
(cond-> (update (default-text-style)
[theme]
(cond-> (update (default-text-style theme)
:style
assoc
:text-decoration-line :line-through)))
(defn edited-style
[]
[theme]
(cond->
(update (default-text-style)
(update (default-text-style theme)
:style
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
:line-height 18.2
:letter-spacing (typography/tracking 13))))
@ -149,8 +149,8 @@
(default-blockquote-style))
(defn default-blockquote-text-style
[]
(update (default-text-style)
[theme]
(update (default-text-style theme)
:style
assoc
:line-height 19
@ -158,16 +158,16 @@
:color colors/black-transparent-50))
(defn outgoing-blockquote-text-style
[]
(update (default-blockquote-text-style)
[theme]
(update (default-blockquote-text-style theme)
:style
assoc
:color colors/white-transparent-70-persist))
(defn blockquote-text-style
[]
(outgoing-blockquote-text-style)
(default-blockquote-text-style))
[theme]
(outgoing-blockquote-text-style theme)
(default-blockquote-text-style theme))
(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.foundations.colors :as colors]
[quo.foundations.typography :as typography]
[quo.theme]
[react-native.core :as rn]
[status-im.constants :as constants]
[status-im.contexts.chat.messenger.messages.delete-message-for-me.events]
@ -26,7 +27,7 @@
(defn render-inline
[_message-text content-type acc {:keys [type literal destination]}
community-id]
community-id theme]
(case type
""
(conj acc literal)
@ -35,24 +36,25 @@
(conj acc [rn/text literal])
"emph"
(conj acc [rn/text (style/emph-style) literal])
(conj acc [rn/text (style/emph-style theme) literal])
"strong"
(conj acc [rn/text (style/strong-style) literal])
(conj acc [rn/text (style/strong-style theme) literal])
"strong-emph"
(conj acc [quo/text (style/strong-emph-style) literal])
(conj acc [quo/text (style/strong-emph-style theme) literal])
"del"
(conj acc [rn/text (style/strikethrough-style) literal])
(conj acc [rn/text (style/strikethrough-style theme) literal])
"link"
(conj acc
[rn/text
{:style {:color (colors/theme-colors colors/primary-50 colors/primary-60)
:text-decoration-line :underline}
:on-press #(rf/dispatch [:browser.ui/message-link-pressed destination])}
destination])
(conj
acc
[rn/text
{:style {:color (colors/theme-colors colors/primary-50 colors/primary-60 theme)
:text-decoration-line :underline}
:on-press #(rf/dispatch [:browser.ui/message-link-pressed destination])}
destination])
"mention"
(conj
@ -66,17 +68,18 @@
#(rf/dispatch [:chat.ui/show-profile literal]))}
[mention-element literal]]])
"status-tag"
(conj acc
[rn/text
(when community-id
{:style {:color (colors/theme-colors colors/primary-50 colors/primary-60)
:text-decoration-line :underline}
:on-press #(rf/dispatch [:communities/status-tag-pressed community-id literal])})
"#"
literal])
(conj
acc
[rn/text
(when community-id
{:style {:color (colors/theme-colors colors/primary-50 colors/primary-60 theme)
:text-decoration-line :underline}
:on-press #(rf/dispatch [:communities/status-tag-pressed community-id literal])})
"#"
literal])
"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)))
@ -84,7 +87,7 @@
(defn render-block
[{:keys [content content-type edited-at in-popover?]} acc
{:keys [type ^js literal children]}
community-id]
community-id theme]
(case type
@ -96,8 +99,9 @@
content-type
acc
e
community-id))
[rn/text (style/text-style content-type in-popover?)]
community-id
theme))
[rn/text (style/text-style content-type in-popover? theme)]
(conj
children
(when edited-at
@ -106,7 +110,7 @@
"blockquote"
(conj acc
[rn/view (style/blockquote-style)
[rn/text (style/blockquote-text-style)
[rn/text (style/blockquote-text-style theme)
(.substring literal 0 (.-length literal))]])
"codeblock"
@ -119,12 +123,14 @@
(defn render-parsed-text
[{:keys [content chat-id]
: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]
(render-block message-data
acc
e
community-id))
community-id
theme))
[:<>]
(:parsed-text content))))
@ -137,12 +143,13 @@
;; STATUS ? whats that ?
(defmethod ->message constants/content-type-status
[{:keys [content content-type]}]
[rn/view style/status-container
[rn/text {:style (style/status-text)}
(reduce
(fn [acc e] (render-inline (:text content) content-type acc e nil))
[rn/text {:style (style/status-text)}]
(-> content :parsed-text peek :children))]])
(let [theme (quo.theme/use-theme)]
[rn/view style/status-container
[rn/text {:style (style/status-text)}
(reduce
(fn [acc e] (render-inline (:text content) content-type acc e nil theme))
[rn/text {:style (style/status-text)}]
(-> content :parsed-text peek :children))]]))
(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.screens.profile.components.sheets :as sheets]
[quo.components.avatars.user-avatar.style :as user-avatar.style]
[quo.theme :as theme]
[quo.theme]
[re-frame.core :as re-frame]
[reagent.core :as reagent]
[status-im.constants :as constants]
@ -184,6 +184,7 @@
:as profile} @(re-frame/subscribe [:contacts/current-contact])
muted? @(re-frame/subscribe [:chats/muted public-key])
customization-color (or customization-color :primary)
theme @(re-frame/subscribe [:theme])
on-share #(re-frame/dispatch [:show-popover
(merge
{:view :share-chat-key
@ -205,8 +206,7 @@
{:on-press on-share
:bottom-separator false
:title (profile.utils/displayed-name profile)
:color (user-avatar.style/customization-color customization-color
(theme/get-theme))
:color (user-avatar.style/customization-color customization-color theme)
:photo (profile.utils/photo profile)
:monospace (not ens-verified)
: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.utils.utils :as utils]
[quo.components.avatars.user-avatar.style :as user-avatar.style]
[quo.theme :as theme]
[quo.theme]
[re-frame.core :as re-frame]
[reagent.core :as reagent]
[status-im.common.qr-codes.view :as qr-codes]
@ -200,6 +200,7 @@
@(re-frame/subscribe [:profile/profile-with-image])
customization-color (or (:color @(re-frame/subscribe [:onboarding/profile]))
@(re-frame/subscribe [:profile/customization-color key-uid]))
theme @(re-frame/subscribe [:theme])
on-share #(re-frame/dispatch [:show-popover
{:view :share-chat-key
:address (or compressed-key
@ -221,7 +222,7 @@
{:content (edit/bottom-sheet
has-picture)}])
:color (user-avatar.style/customization-color customization-color
(theme/get-theme))
theme)
:title (profile.utils/displayed-name profile)
:photo (profile.utils/photo profile)
: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})
(defn visibility-status-dot
[{:keys [color size new-ui?]}]
[{:keys [color size new-ui?]} theme]
(if new-ui?
{:background-color color
:width size
:height size
:border-radius (/ size 2)
: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
:width size
:height size
@ -33,10 +33,11 @@
:border-color colors/white}))
(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
:size size
:new-ui? new-ui?})
:new-ui? new-ui?}
theme)
{:margin-right 6
:margin-left margin-left
: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.screens.profile.visibility-status.styles :as styles]
[quo.foundations.colors :as quo.colors]
[quo.theme]
[status-im.constants :as constants]
[utils.datetime :as datetime]
[utils.i18n :as i18n]
@ -90,13 +91,15 @@
(defn icon-visibility-status-dot
[public-key container-size]
(let [status (rf/sub [:visibility-status-updates/visibility-status-update public-key])
theme (quo.theme/use-theme)
size (icon-dot-size container-size)
margin -2
dot-color (icon-dot-color status)
new-ui? true]
(merge (styles/visibility-status-dot {:color dot-color
:size size
:new-ui? new-ui?})
:new-ui? new-ui?}
theme)
{:bottom margin
:right margin
:position :absolute

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

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

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

@ -54,7 +54,7 @@
(defn- f-animated-header-list
[{: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))
{:keys [top bottom]} (safe-area/get-insets)
;; 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)
:width (: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/has-style (h/query-by-label-text :account-emoji)
{:fontSize (style/get-emoji-size (:size opts))})
@ -65,7 +65,7 @@
{:height (:size opts)
:width (: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/has-style (h/query-by-label-text :account-emoji)
{: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
[{:keys [type size theme customization-color]
[{:keys [type size customization-color]
:or {size default-size
customization-color :blue}}]
customization-color :blue}}
theme]
(let [watch-only? (= type :watch-only)
width (cond-> 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]
[react-native.core :as rn]))
(defn- view-internal
(defn view
"Opts:
:type - keyword -> :default/:watch-only
@ -21,15 +21,14 @@
:or {size style/default-size
emoji "🍑"}
: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
{:accessible true
:accessibility-label :account-avatar
:style (style/root-container opts)}
:style (style/root-container opts theme)}
[rn/text
{:accessibility-label :account-emoji
:adjusts-font-size-to-fit true
:style {:font-size emoji-size}}
(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
:size 12}]]))
(defn- view-internal
(defn view
"Options:
: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
used to extract the initials.
"
[{:keys [size emoji customization-color locked? full-name theme]}]
[rn/view
{:accessibility-label :channel-avatar
:style (style/outer-container {:theme theme
:size size
:customization-color customization-color})}
(if (string/blank? emoji)
[initials
{:full-name full-name
:size size
:customization-color customization-color
:theme theme}]
[rn/text
{:style (style/emoji-size size)
:accessibility-label :emoji}
(when emoji (string/trim emoji))])
[lock locked? size theme]])
(def view (quo.theme/with-theme view-internal))
[{:keys [size emoji customization-color locked? full-name]}]
(let [theme (quo.theme/use-theme)]
[rn/view
{:accessibility-label :channel-avatar
:style (style/outer-container {:theme theme
:size size
:customization-color customization-color})}
(if (string/blank? emoji)
[initials
{:full-name full-name
:size size
:customization-color customization-color
:theme theme}]
[rn/text
{:style (style/emoji-size size)
:accessibility-label :emoji}
(when emoji (string/trim emoji))])
[lock locked? size theme]]))

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

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

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

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

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

@ -15,11 +15,12 @@
:size-20 {:component 20
:icon 12}})
(defn icon-avatar-internal
[{:keys [size icon color opacity border? theme]
(defn icon-avatar
[{:keys [size icon color opacity border?]
:or {opacity 20
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)
icon-color (colors/resolve-color color theme)]
(if (keyword? icon)
@ -38,5 +39,3 @@
[rn/image
{:source icon
: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?]]
[:online? {:optional true} [:maybe boolean?]]
[:ring? {:optional true} [:maybe boolean?]]
[:theme :schema.common/theme]
[:profile-picture
{:optional true}
[: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)}))
(defn indicator-color
[]
{:online (colors/theme-colors colors/success-50 colors/success-60)
[theme]
{:online (colors/theme-colors colors/success-50 colors/success-60 theme)
:offline colors/neutral-40})
(defn outer

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

@ -11,9 +11,10 @@
utils.string))
(defn initials-avatar
[{:keys [full-name size customization-color theme]
[{:keys [full-name size customization-color]
: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)]
[rn/view
{: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`
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."
[{:keys [full-name size profile-picture static?
status-indicator? online? ring? theme]
[{:keys [full-name size profile-picture static? status-indicator? online? ring?]
:or {size :big
status-indicator? true
online? true
ring? true}
: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
;; no need to add border-radius for them
outer-styles (style/outer size (not (:fn profile-picture)))
@ -49,7 +50,7 @@
font-size (get-in style/sizes [size :font-size])
amount-initials (if (#{:xs :xxs :xxxs} size) 1 2)
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)]
[rn/view {:style outer-styles :accessibility-label :user-avatar}
@ -66,7 +67,8 @@
{:length amount-initials
:full-name full-name
:font-size (:font-size (text/text-style {:size
font-size}))
font-size}
nil))
:indicator-size (when status-indicator?
(:status-indicator sizes))
:indicator-border (when status-indicator?
@ -87,6 +89,4 @@
:else {:uri profile-picture})}])]))
(def user-avatar
(quo.theme/with-theme
(schema/instrument #'user-avatar-internal component-schema/?schema)))
(def user-avatar (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)))
(def biggest-possible (last (keys properties)))
(defn- view-internal
(defn wallet-user-avatar
"Options:
:full-name - string (default: nil) - used to generate initials
@ -44,9 +44,10 @@
:monospace? - boolean (default: false) - use monospace font
:lowercase? - boolean (default: false) - lowercase text
: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}}]
(let [circle-size (:size (size properties))
(let [theme (quo.theme/use-theme)
circle-size (:size (size properties))
small? (check-if-size-small size)
initials (utils.string/get-initials full-name (if small? 1 2))]
[rn/view
@ -57,5 +58,3 @@
:weight (if monospace? :monospace (:font-weight (size properties)))
:style (style/text customization-color neutral? theme)}
(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]
[react-native.core :as rn]))
(defn- view-internal
[{:keys [hide-pin? latest-pin-text pins-count on-press theme]}]
(when (pos? pins-count)
[rn/touchable-opacity
{:accessibility-label :pinned-banner
:style style/container
:active-opacity 1
:on-press on-press}
(when-not hide-pin?
[rn/view {:style style/icon}
[icons/icon :i/pin
{:color (colors/theme-colors colors/neutral-100 colors/white theme)
:size 20}]])
[rn/view {:style (style/text hide-pin?)}
[text/text
{:number-of-lines 1
:size :paragraph-2}
latest-pin-text]]
[rn/view
{:accessibility-label :pins-count
:style style/counter}
[counter/view {:type :secondary} pins-count]]]))
(def view (quo.theme/with-theme view-internal))
(defn view
[{:keys [hide-pin? latest-pin-text pins-count on-press]}]
(let [theme (quo.theme/use-theme)]
(when (pos? pins-count)
[rn/touchable-opacity
{:accessibility-label :pinned-banner
:style style/container
:active-opacity 1
:on-press on-press}
(when-not hide-pin?
[rn/view {:style style/icon}
[icons/icon :i/pin
{:color (colors/theme-colors colors/neutral-100 colors/white theme)
:size 20}]])
[rn/view {:style (style/text hide-pin?)}
[text/text
{:number-of-lines 1
:size :paragraph-2}
latest-pin-text]]
[rn/view
{:accessibility-label :pins-count
:style style/counter}
[counter/view {:type :secondary} pins-count]]])))

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

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

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

@ -121,7 +121,7 @@
:size favicon-size}])
[rn/text
{:accessibility-label :browser-input-label
:style (style/text)}
:style (style/text theme)}
(remove-http-https-www value)]
(when locked?
[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.markdown.text :as text]
[quo.foundations.customization-colors :as customization-colors]
[quo.theme :as theme]
[quo.theme]
[react-native.blur :as blur]
[react-native.core :as rn]))
@ -36,7 +36,7 @@
customization-color (if (= type :primary) :blue nil)}}
children]
(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
blur-overlay-color border-radius overlay-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
[quo.components.buttons.composer-button.style :as style]
[quo.components.icon :as quo.icons]
[quo.theme :as theme]
[quo.theme]
[react-native.core :as rn]))
(defn view
[{:keys [on-press on-long-press disabled? blur? icon accessibility-label container-style]}]
(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-out (rn/use-callback #(set-pressed nil))]
[rn/pressable

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

@ -52,7 +52,7 @@
:count mentions or notifications count
:customization-color customize jump-to and mention button color}"
[{: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)
button-color (get-button-color {:type type
:pressed? pressed?

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

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

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
container-style type blur?]}]
(let [theme (quo.theme/use-theme-value)
(let [theme (quo.theme/use-theme)
x-pos (reanimated/use-shared-value 0)
[track-width set-track-width] (rn/use-state nil)
[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.icon :as quo.icons]
[quo.foundations.colors :as colors]
[quo.theme :as theme]
[quo.theme]
[react-native.core :as rn]))
(defn view
[{: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)
on-press-in (rn/use-callback #(set-pressed true))
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
:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}} text]])
(defn view-internal
[{:keys [theme buy-action send-action receive-action bridge-action]}]
[rn/view {:style style/container}
[action-button
{:icon :i/add
:text (i18n/label :t/buy)
:on-press buy-action
:theme theme
:accessibility-label :buy}]
[action-button
{:icon :i/send
:text (i18n/label :t/send)
:on-press send-action
:theme theme
:accessibility-label :send}]
[action-button
{:icon :i/receive
:text (i18n/label :t/receive)
:on-press receive-action
:theme theme
:accessibility-label :receive}]
[action-button
{:icon :i/bridge
:text (i18n/label :t/bridge)
:on-press bridge-action
:theme theme
:accessibility-label :bridge}]])
(def view (quo.theme/with-theme view-internal))
(defn view
[{:keys [buy-action send-action receive-action bridge-action]}]
(let [theme (quo.theme/use-theme)]
[rn/view {:style style/container}
[action-button
{:icon :i/add
:text (i18n/label :t/buy)
:on-press buy-action
:theme theme
:accessibility-label :buy}]
[action-button
{:icon :i/send
:text (i18n/label :t/send)
:on-press send-action
:theme theme
:accessibility-label :send}]
[action-button
{:icon :i/receive
:text (i18n/label :t/receive)
:on-press receive-action
:theme theme
:accessibility-label :receive}]
[action-button
{:icon :i/bridge
:text (i18n/label :t/bridge)
:on-press bridge-action
:theme theme
:accessibility-label :bridge}]]))

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.utils :as utils]
[quo.components.markdown.text :as text]
[quo.theme :as theme]
[quo.theme]
[react-native.core :as rn]
[utils.number :as utils.number]))
(defn- view-internal
[{:keys [year month on-change theme]}]
(let [year (utils.number/parse-int year)
(defn view
[{:keys [year month on-change]}]
(let [theme (quo.theme/use-theme)
year (utils.number/parse-int year)
month (utils.number/parse-int month)]
[rn/view
{:style style/container}
@ -35,5 +36,3 @@
:type :outline
:on-press #(on-change (utils/next-month year month))}
: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.weekdays-header.view :as weekdays-header]
[quo.components.calendar.calendar.years-list.view :as years-list]
[quo.theme :as theme]
[quo.theme]
[react-native.core :as rn]
[utils.number :as utils.number]))
(defn view
[{: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-month set-selected-month] (rn/use-state (utils/current-month))
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
[quo.components.calendar.calendar.weekdays-header.style :as style]
[quo.components.markdown.text :as text]
[quo.theme :as theme]
[quo.theme]
[react-native.core :as rn]
[utils.datetime :as datetime]
[utils.i18n :as i18n]))
(defn- view-internal
[theme]
[rn/view
{:style style/container-weekday-row}
(for [weekday datetime/weekday-names]
[rn/view
{:style style/container-weekday
:key weekday}
[text/text
{:weight :medium
:size :paragraph-2
:style (style/text-weekdays theme)}
(str (i18n/label weekday))]])])
(def view (theme/with-theme view-internal))
(defn view
[]
(let [theme (quo.theme/use-theme)]
[rn/view
{:style style/container-weekday-row}
(for [weekday datetime/weekday-names]
[rn/view
{:style style/container-weekday
:key weekday}
[text/text
{:weight :medium
:size :paragraph-2
:style (style/text-weekdays theme)}
(str (i18n/label weekday))]])]))

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

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

@ -2,31 +2,30 @@
(:require
[quo.components.calendar.calendar-day.style :as style]
[quo.components.markdown.text :as text]
[quo.theme :as theme]
[quo.theme]
[react-native.core :as rn]))
(defn- view-internal
[{:keys [state in-range on-press customization-color theme]
(defn view
[{:keys [state in-range on-press customization-color]
:or {state :default}}
day]
[rn/view {:style style/wrapper}
[rn/view {:style (style/in-range-background {:in-range in-range :theme theme})}]
[rn/touchable-opacity
{:on-press on-press
:style (style/container
(let [theme (quo.theme/use-theme)]
[rn/view {:style style/wrapper}
[rn/view {:style (style/in-range-background {:in-range in-range :theme theme})}]
[rn/touchable-opacity
{: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
: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
:theme theme
:customization-color customization-color})}]]])
(def view (theme/with-theme view-internal))
:customization-color customization-color})}]]]))

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

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

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

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

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/right-half theme)}]])
(defn- view-internal
[{:keys [color
selected?
on-press
blur?
theme
idx
window-width]
(defn view
[{:keys [color selected? on-press blur? idx window-width]
: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)
(colors/theme-colors colors/neutral-100 colors/white theme)
(colors/theme-colors (colors/custom-color color 50)
@ -38,6 +33,7 @@
(if (and (= :feng-shui color) (not selected?))
[feng-shui
(assoc props
:theme theme
:hex-color hex-color
:border? border?)]
[rn/view
@ -49,5 +45,3 @@
:color (if (= :feng-shui color)
(colors/theme-colors colors/white colors/neutral-100 theme)
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]
[react-native.core :as rn]))
(defn- view-internal
[{:keys [blur? theme]}]
[rn/text {:style (style/text blur? theme)}
"not implemented"])
(def view (quo.theme/with-theme view-internal))
(defn view
[{:keys [blur?]}]
(let [theme (quo.theme/use-theme)]
[rn/text {:style (style/text blur? theme)}
"not implemented"]))

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

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

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

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

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

@ -2,10 +2,12 @@
(:require
[quo.foundations.colors :as colors]))
(def unread-grey-dot
(defn unread-grey-dot
[theme]
{:width 8
:height 8
:border-radius 4
:background-color (colors/theme-colors
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
(:require
[quo.components.common.unread-grey-dot.style :as style]
[quo.theme]
[react-native.core :as rn]))
(defn unread-grey-dot
[accessibility-label]
[rn/view
(cond-> {:style style/unread-grey-dot}
accessibility-label (assoc :accessibility-label accessibility-label :accessible true))])
(let [theme (quo.theme/use-theme)]
[rn/view
(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.markdown.text :as text]
[quo.foundations.colors :as colors]
[quo.theme :as theme]
[quo.theme]
[react-native.core :as rn]))
(defn- card-title-and-description
@ -26,16 +26,15 @@
:size :paragraph-2}
description]]])
(defn view-internal
[{:keys [title description on-press accessibility-label banner style theme]}]
[rn/touchable-without-feedback
{:on-press on-press
:accessibility-label accessibility-label}
[rn/view {:style (merge (style/community-card theme) style)}
[card-title-and-description title description theme]
[rn/image
{:style style/discover-illustration
:source banner
:accessibility-label :discover-communities-illustration}]]])
(def view (theme/with-theme view-internal))
(defn view
[{:keys [title description on-press accessibility-label banner style]}]
(let [theme (quo.theme/use-theme)]
[rn/touchable-without-feedback
{:on-press on-press
:accessibility-label accessibility-label}
[rn/view {:style (merge (style/community-card theme) style)}
[card-title-and-description title description theme]
[rn/image
{:style style/discover-illustration
:source banner
:accessibility-label :discover-communities-illustration}]]]))

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

@ -9,7 +9,7 @@
(defn view
[{: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)
on-press-in (rn/use-callback #(set-pressed true))
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]))
(defn- loading-card-view
[{:keys [width theme]}]
[rn/view {:style (style/loading-card width theme)}
[rn/view (style/loading-cover-container theme)]
[rn/view (style/loading-content-container theme)
[rn/view (style/loading-avatar theme)]
[rn/view (style/loading-lock theme)]
[rn/view
{:style style/loading-card-content-container}
[rn/view {:style (style/loading-content-line {:theme theme :width 84 :margin-top 0})}]
[rn/view {:style (style/loading-content-line {:theme theme :width 311 :margin-top 8})}]
[rn/view {:style (style/loading-content-line {:theme theme :width 271 :margin-top 8})}]]
[rn/view
{:style style/loading-stats-container}
[rn/view {:style (style/loading-stat-circle theme 0)}]
[rn/view {:style (style/loading-stat-line theme 4)}]
[rn/view {:style (style/loading-stat-circle theme 12)}]
[rn/view {:style (style/loading-stat-line theme 4)}]]
[rn/view
{:style style/loading-tags-container}
[rn/view {:style (style/loading-tag theme 0)}]
[rn/view {:style (style/loading-tag theme 8)}]
[rn/view {:style (style/loading-tag theme 8)}]]]])
[{:keys [width]}]
(let [theme (quo.theme/use-theme)]
[rn/view {:style (style/loading-card width theme)}
[rn/view (style/loading-cover-container theme)]
[rn/view (style/loading-content-container theme)
[rn/view (style/loading-avatar theme)]
[rn/view (style/loading-lock theme)]
[rn/view
{:style style/loading-card-content-container}
[rn/view {:style (style/loading-content-line {:theme theme :width 84 :margin-top 0})}]
[rn/view {:style (style/loading-content-line {:theme theme :width 311 :margin-top 8})}]
[rn/view {:style (style/loading-content-line {:theme theme :width 271 :margin-top 8})}]]
[rn/view
{:style style/loading-stats-container}
[rn/view {:style (style/loading-stat-circle theme 0)}]
[rn/view {:style (style/loading-stat-line theme 4)}]
[rn/view {:style (style/loading-stat-circle theme 12)}]
[rn/view {:style (style/loading-stat-line theme 4)}]]
[rn/view
{:style style/loading-tags-container}
[rn/view {:style (style/loading-tag theme 0)}]
[rn/view {:style (style/loading-tag theme 8)}]
[rn/view {:style (style/loading-tag theme 8)}]]]]))
(defn- community-card-view
[{:keys [community on-press width theme]}]
(let [{:keys [name description locked? images cover
status tokens tags]} community]
[{:keys [community on-press width]}]
(let [theme (quo.theme/use-theme)
{:keys [name description locked? images cover status tokens tags]} community]
[rn/touchable-without-feedback
{:accessibility-label :community-card-item
:on-press on-press}
@ -68,10 +69,8 @@
[rn/view {:style (style/community-tags-position)}
[community-view/community-tags {:tags tags}]]]]]]]))
(defn- internal-view
(defn view
[{:keys [loading?] :as props}]
(if-not loading?
[community-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.token-tag.view :as token-tag]
[quo.foundations.colors :as colors]
[quo.theme]
[react-native.core :as rn]
[utils.i18n :as i18n]))
@ -28,20 +29,21 @@
(defn- tokens-row
[{:keys [tokens divider? first?]}]
[:<>
[rn/view
{:style (style/token-row first?)}
(map-indexed (fn [token-index token]
^{:key (str "token-" token-index)}
[token-view token])
tokens)]
(when-not divider?
[divider-label/view
{:container-style style/divider}
[text/text
{:size :label
:style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}}
(string/lower-case (i18n/label :t/or))]])])
(let [theme (quo.theme/use-theme)]
[:<>
[rn/view
{:style (style/token-row first?)}
(map-indexed (fn [token-index token]
^{:key (str "token-" token-index)}
[token-view token])
tokens)]
(when-not divider?
[divider-label/view
{:container-style style/divider}
[text/text
{:size :label
:style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
(string/lower-case (i18n/label :t/or))]])]))
(defn- role-view
[{:keys [role tokens satisfied? role-text]}]

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

@ -38,110 +38,94 @@
unread-messages?
[unread-grey-dot :unviewed-messages-public])])
(defn- communities-list-view-item-internal
[{:keys [theme customization-color] :as props}
{:keys [name
locked?
status
muted
unread-messages?
unread-mentions-count
community-icon
tokens]}]
[rn/view
{:style (merge (style/community-card 16 theme)
{:margin-bottom 12})}
[rn/touchable-highlight
(merge {:style {:height 56
:border-radius 16}}
props)
[rn/view {:style style/detail-container}
[rn/view (style/list-info-container)
(defn communities-list-view-item
[{:keys [customization-color] :as props}
{:keys [name locked? status muted unread-messages? unread-mentions-count community-icon tokens]}]
(let [theme (quo.theme/use-theme)]
[rn/view
{:style (merge (style/community-card 16 theme)
{:margin-bottom 12})}
[rn/touchable-highlight
(merge {:style {:height 56
:border-radius 16}}
props)
[rn/view {:style style/detail-container}
[rn/view (style/list-info-container)
[community-icon/community-icon
{:images community-icon} 32]
[rn/view
{:flex 1
:margin-horizontal 12}
[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
{:images community-icon} 32]
{:images images} 32]
[rn/view
{:flex 1
:margin-horizontal 12}
{:flex 1
:margin-left 12
:justify-content :center}
[text/text
{:weight :semi-bold
:size :paragraph-1
:accessibility-label :community-name-text
{:accessibility-label :chat-name-text
:number-of-lines 1
:ellipsize-mode :tail
:style {:color (when muted
(colors/theme-colors
:weight :semi-bold
:size :paragraph-1
:style (when muted
{:color (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?}])]]]])
theme)})}
name]]
(def communities-list-view-item (quo.theme/with-theme communities-list-view-item-internal))
(defn- communities-membership-list-item-internal
[{:keys [theme customization-color] :as props}
bottom-sheet?
{:keys [name
muted
unviewed-messages-count
unviewed-mentions-count
status
images
tokens
locked?
style]}]
[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))
[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)}])]]]))

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

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

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

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

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

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

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

@ -3,14 +3,14 @@
[quo.foundations.colors :as colors]))
(defn- get-background-color
[{:keys [status theme]}]
[{:keys [status]} theme]
(case status
:default (colors/theme-colors colors/white-opa-70 colors/neutral-95-opa-70 theme)
:error (colors/resolve-color :danger theme 10)
(colors/theme-colors colors/white-opa-70 colors/neutral-95-opa-70 theme)))
(defn- get-container-border-styles
[{:keys [status theme]}]
[{:keys [status]} theme]
(when (= status :error)
{:border-color (colors/resolve-color :danger theme 20)
:border-width 1}))
@ -29,17 +29,17 @@
style-size-32)))
(defn container
[props]
[props theme]
(merge {:align-self :flex-start
:flex-direcrion :row
:justify-content :center
:border-radius 999
:background-color (get-background-color props)}
(get-container-border-styles props)
:background-color (get-background-color props theme)}
(get-container-border-styles props theme)
(get-container-styles-by-size props)))
(defn- get-text-color
[{:keys [status theme]}]
[{:keys [status]} theme]
(case status
:default (colors/theme-colors colors/neutral-100 colors/white theme)
:error (colors/resolve-color :danger theme)
@ -53,5 +53,5 @@
:paragraph-1))
(defn text
[props]
{:color (get-text-color props)})
[props theme]
{: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]]]
[:status {:optional true} [:maybe :keyword]]
[:size {:optional true} [:maybe [:enum :size-32 :size-24]]]
[:accessibility-label {:optional true} [:maybe :keyword]]
[:theme :schema.common/theme]]]]
[:accessibility-label {:optional true} [:maybe :keyword]]]]]
:any])
(defn- view-internal
[{:keys [value accessibility-label container-style]
:as props}]
(let [default-props {:status :default
(let [theme (quo.theme/use-theme)
default-props {:status :default
:size :size-32}
props (merge default-props props)]
[rn/view
{:accessible true
:accessibility-label (or accessibility-label :collectible-counter)
:style (merge (style/container props) container-style)}
:style (merge (style/container props theme) container-style)}
[text/text
{:weight :medium
:size (style/get-text-size props)
:style (style/text props)}
:style (style/text props theme)}
value]]))
(def view
(quo.theme/with-theme
(schema/instrument #'view-internal ?schema)))
(def view (schema/instrument #'view-internal ?schema))

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

@ -7,11 +7,12 @@
[react-native.core :as rn]
[utils.number]))
(defn- view-internal
[{:keys [type customization-color theme container-style accessibility-label max-value]
:or {max-value 99 customization-color :blue theme :dark}}
(defn view
[{:keys [type customization-color container-style accessibility-label max-value]
:or {max-value 99 customization-color :blue}}
value]
(let [type (or type :default)
(let [theme (quo.theme/use-theme)
type (or type :default)
value (utils.number/parse-int value)
label (if (> value max-value)
(str max-value "+")
@ -33,5 +34,3 @@
:size :label
:style (when (= type :default) {:color colors/white})}
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]]
[:customization-color {:optional true} [:maybe :schema.common/customization-color]]
[:in-blur-view? {:optional true} [:maybe :boolean]]
[:theme :schema.common/theme]
[:type {:optional true} [:enum :active :complete :neutral]]]]
[:value [:maybe [:or :string :int]]]]
:any])
(defn- view-internal
[{:keys [type accessibility-label theme in-blur-view? customization-color]} value]
(let [type (or type :neutral)
[{:keys [type accessibility-label in-blur-view? customization-color]} value]
(let [theme (quo.theme/use-theme)
type (or type :neutral)
value (utils.number/parse-int value)
label (str value)
size (count label)]
@ -40,6 +40,4 @@
:style {:color (style/text-color type theme)}}
label]]))
(def view
(quo.theme/with-theme
(schema/instrument #'view-internal ?schema)))
(def view (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.markdown.text :as text]
[quo.foundations.colors :as colors]
[quo.theme]
[react-native.core :as rn]))
(defn date
[value]
[rn/view
{:padding-top 8
:padding-bottom 12
:padding-right 20
:padding-left 60}
[text/text
{:weight :medium
:accessibility-label :divider-date-text
:size :label
:style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)
:text-transform :capitalize
:margin-bottom 4}}
value]
[separator/separator]])
(let [theme (quo.theme/use-theme)]
[rn/view
{:padding-top 8
:padding-bottom 12
:padding-right 20
:padding-left 60}
[text/text
{:weight :medium
:accessibility-label :divider-date-text
:size :label
:style {:color (colors/theme-colors colors/neutral-50
colors/neutral-40
theme)
: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.
label - String or markdown text component to display in the divider label."
[{:keys [counter?
counter-value
chevron
chevron-icon
tight?
blur?
theme
on-press
container-style]
[{:keys [counter? counter-value chevron chevron-icon tight? blur? on-press container-style]
:or {tight? true}}
label]
[rn/pressable
{:on-press on-press
:accessibility-label :divider-label
:style (merge (style/container blur? tight? chevron theme)
container-style)}
[rn/view
{:style (style/content chevron)}
(when chevron
[icons/icon (or chevron-icon :i/chevron-right)
{:color (style/get-content-color blur? theme)
:container-style {(if (= chevron :right)
:margin-left
:margin-right)
2}}])
[text/text
{:size :paragraph-2
:weight :medium
:style (style/text blur? theme)}
label]]
(when counter?
[counter/view
{:type (if blur? :secondary :grey)
:container-style {:margin-left 2}}
counter-value])])
(let [theme (quo.theme/use-theme)]
[rn/pressable
{:on-press on-press
:accessibility-label :divider-label
:style (merge (style/container blur? tight? chevron theme)
container-style)}
[rn/view
{:style (style/content chevron)}
(when chevron
[icons/icon (or chevron-icon :i/chevron-right)
{:color (style/get-content-color blur? theme)
:container-style {(if (= chevron :right)
:margin-left
:margin-right)
2}}])
[text/text
{:size :paragraph-2
:weight :medium
:style (style/text blur? theme)}
label]]
(when counter?
[counter/view
{:type (if blur? :secondary :grey)
:container-style {:margin-left 2}}
counter-value])]))
(defn view
([_ _] (quo.theme/with-theme view-internal))
([props label] [view-internal props label])
([label] [view {} label]))

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

@ -3,7 +3,7 @@
[quo.foundations.colors :as colors]))
(defn divider-line
[{:keys [blur? container-style theme]}]
[{:keys [blur? container-style]} theme]
(merge
{:border-color (if blur?
(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]
[react-native.core :as rn]))
(defn- view-internal
(defn view
[props]
[rn/view {:style (style/divider-line props)}])
(def view (quo.theme/with-theme view-internal))
(let [theme (quo.theme/use-theme)]
[rn/view {:style (style/divider-line props theme)}]))

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

@ -6,10 +6,11 @@
[react-native.core :as rn]
[react-native.linear-gradient :as linear-gradient]))
(defn- view-internal
(defn view
"new-messages params - label, customization-color, theme"
[{:keys [label customization-color theme] :or {customization-color :blue}}]
(let [bg-color (colors/resolve-color customization-color theme 5)
[{:keys [label customization-color] :or {customization-color :blue}}]
(let [theme (quo.theme/use-theme)
bg-color (colors/resolve-color customization-color theme 5)
text-color (colors/resolve-color customization-color theme)]
[linear-gradient/linear-gradient
{:colors [bg-color "rgba(0,0,0,0)"]
@ -24,5 +25,3 @@
:weight :medium
:style {:color text-color}}
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/touchable-highlight props child]))
(defn- action-internal
[{:keys [icon
label
sub-label
right-icon
right-text
danger?
disabled?
on-press
add-divider?
theme
accessibility-label
icon-color
no-icon-color?
state
customization-color
blur?]}]
[:<>
(when add-divider?
[divider theme blur?])
[maybe-pressable disabled?
{:accessibility-label accessibility-label
:style (style/container {:sub-label sub-label
:disabled? disabled?
:state state
:customization-color customization-color
:blur? blur?
:theme theme})
: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
(defn action
[{:keys [icon label sub-label right-icon right-text danger? disabled? on-press add-divider?
accessibility-label icon-color no-icon-color? state customization-color blur?]}]
(let [theme (quo.theme/use-theme)]
[:<>
(when add-divider?
[divider theme blur?])
[maybe-pressable disabled?
{:accessibility-label accessibility-label
:style (style/container {:sub-label sub-label
:disabled? disabled?
:state state
:customization-color customization-color
:blur? blur?
:theme theme})
: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
{:accessibility-label :left-icon-for-action
: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
{:accessibility-label :left-icon-for-action
: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
{:style style/text-container}
[text/text
{:size :paragraph-2
:style {:color
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
sub-label])]
(when (or right-text right-icon (= state :selected))
[rn/view {:style style/right-side-container}
(when right-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
{:accessibility-label :right-text-for-action
:size :paragraph-1
:style (style/right-text theme)}
right-text])
(when right-icon
[rn/view
{:style style/right-icon
:accessible true
:accessibility-label :right-icon-for-action}
[icon/icon right-icon
{:color (get-icon-color danger? theme)
:size 20}]])
(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}]])])]]])
(def ^:private action (quo.theme/with-theme action-internal))
{:size :paragraph-2
:style {:color
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
sub-label])]
(when (or right-text right-icon (= state :selected))
[rn/view {:style style/right-side-container}
(when right-text
[text/text
{:accessibility-label :right-text-for-action
:size :paragraph-1
:style (style/right-text theme)}
right-text])
(when right-icon
[rn/view
{:style style/right-icon
:accessible true
:accessibility-label :right-icon-for-action}
[icon/icon right-icon
{:color (get-icon-color danger? theme)
:size 20}]])
(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
[sections]

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

@ -26,7 +26,6 @@
[:button-two-label {:optional true} [:maybe :string]]
[:button-one-props {:optional true} [:maybe :map]]
[:button-two-props {:optional true} [:maybe :map]]
[:theme :schema.common/theme]
[:scroll? {:optional true} [:maybe :boolean]]
[:blur? {:optional true} [:maybe :boolean]]
[:container-style {:optional true} [:maybe :map]]]]]
@ -40,58 +39,57 @@
(defn- view-internal
[{: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]}]
[rn/view
{:style (merge (style/container scroll? blur? theme) container-style)}
(when (= description :top-error)
[rn/view {:style style/error-message}
[icon/icon
:i/alert
{:color (colors/theme-colors colors/danger-50 colors/danger-60 theme)
:size 16}]
[text/text
{:size :paragraph-2
:style {:color (colors/theme-colors colors/danger-50 colors/danger-60 theme)}}
error-message]])
button-two-label blur? button-one-props button-two-props scroll? container-style]}]
(let [theme (quo.theme/use-theme)]
[rn/view
{:style (merge (style/container scroll? blur? theme) container-style)}
(when (= description :top-error)
[rn/view {:style style/error-message}
[icon/icon
:i/alert
{:color (colors/theme-colors colors/danger-50 colors/danger-60 theme)
:size 16}]
[text/text
{:size :paragraph-2
:style {:color (colors/theme-colors colors/danger-50 colors/danger-60 theme)}}
error-message]])
(when (and (= description :top) role)
[rn/view {:style style/description-top}
[text/text
{:size :paragraph-2
:style (style/description-top-text scroll? blur? theme)}
(or description-top-text (i18n/label :t/eligible-to-join-as))]
[context-tag/view
{:type :icon
:size 24
:icon (role role-icon)
:blur? blur?
:context (i18n/label (keyword "t" role))}]])
(when (and (= description :top) role)
[rn/view {:style style/description-top}
[text/text
{:size :paragraph-2
:style (style/description-top-text scroll? blur? theme)}
(or description-top-text (i18n/label :t/eligible-to-join-as))]
[context-tag/view
{:type :icon
:size 24
:icon (role role-icon)
:blur? blur?
:context (i18n/label (keyword "t" role))}]])
[rn/view {:style style/buttons-container}
(when (= actions :two-actions)
[rn/view {:style style/buttons-container}
(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
(merge
{:size 40
:background (when (or blur? scroll?) :blur)
:container-style style/button-container
:background (when (or blur? scroll?) :blur)
:theme theme
:accessibility-label :button-two}
button-two-props)
button-two-label])
[button/button
(merge
{:size 40
:container-style style/button-container
: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])])
: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
(quo.theme/with-theme
(schema/instrument #'view-internal ?schema)))
(def view (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.gesture :as gesture]))
(defn- view-internal
(defn view
"Options
- `title` Title text
- `show-button?` Show button
@ -17,29 +17,28 @@
- `shell?` use shell theme
`content` Content of the drawer
"
[{:keys [title show-button? on-press-button button-label button-icon theme shell?]} content]
[gesture/scroll-view
{:style style/outer-container
:always-bounce-vertical false
:content-inset-adjustment-behavior :never}
[rn/view {:style style/container}
[text/text
{:size :heading-2
:accessibility-label :documentation-drawer-title
:style (style/title theme)
:weight :semi-bold}
title]
[rn/view {:style style/content :accessibility-label :documentation-drawer-content}
content
(when show-button?
[button/button
{:size 24
:type :outline
:container-style {:margin-top 16}
:background (when shell? :blur)
:on-press on-press-button
:accessibility-label :documentation-drawer-button
:icon-right button-icon}
button-label])]]])
(def view (quo.theme/with-theme view-internal))
[{:keys [title show-button? on-press-button button-label button-icon shell?]} content]
(let [theme (quo.theme/use-theme)]
[gesture/scroll-view
{:style style/outer-container
:always-bounce-vertical false
:content-inset-adjustment-behavior :never}
[rn/view {:style style/container}
[text/text
{:size :heading-2
:accessibility-label :documentation-drawer-title
:style (style/title theme)
:weight :semi-bold}
title]
[rn/view {:style style/content :accessibility-label :documentation-drawer-content}
content
(when show-button?
[button/button
{:size 24
:type :outline
:container-style {:margin-top 16}
:background (when shell? :blur)
:on-press on-press-button
:accessibility-label :documentation-drawer-button
:icon-right button-icon}
button-label])]]]))

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

@ -5,7 +5,7 @@
[quo.components.icon :as icon]
[quo.components.markdown.text :as text]
[quo.components.selectors.selectors.view :as selectors]
[quo.theme :as theme]
[quo.theme]
[react-native.core :as rn]
[schema.core :as schema]))
@ -14,7 +14,7 @@
customization-color blur?]
:or {customization-color :blue
blur? false}}]
(let [theme (theme/use-theme-value)
(let [theme (quo.theme/use-theme)
[pressed? set-pressed] (rn/use-state false)
on-press-in (rn/use-callback #(set-pressed true))
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/theme-colors colors/neutral-50 colors/neutral-40 theme))}])]))
(defn- view-internal
[{:keys [title title-icon type theme description blur? community-name community-logo button-icon
account-name emoji context-tag-type button-type
on-button-press
on-button-long-press
button-disabled? account-avatar-emoji account-avatar-type customization-color icon-avatar
profile-picture keycard? networks label full-name
container-style]}]
[rn/view {:style (merge style/container container-style)}
(when (left-image-supported-types type)
[rn/view {:style style/left-container}
[left-image
{:type type
:customization-color customization-color
:account-avatar-emoji account-avatar-emoji
:account-avatar-type account-avatar-type
:icon-avatar icon-avatar
:profile-picture profile-picture}]])
[rn/view {:style style/body-container}
[left-title
{:type type
:label label
:title title
:title-icon title-icon
:theme theme
:blur? blur?}]
[subtitle
{:type type
:theme theme
:blur? blur?
:keycard? keycard?
:networks networks
:description description
:community-name community-name
:community-logo community-logo
:context-tag-type context-tag-type
:customization-color customization-color
:account-name account-name
:emoji emoji
:full-name full-name
:profile-picture profile-picture}]]
[right-icon
{:theme theme
:type type
:button-type button-type
:on-button-press on-button-press
:on-button-long-press on-button-long-press
:button-disabled? button-disabled?
:button-icon button-icon}]])
(def view (quo.theme/with-theme view-internal))
(defn view
[{:keys [title title-icon type description blur? community-name community-logo button-icon
account-name emoji context-tag-type button-type container-style
on-button-press on-button-long-press profile-picture keycard? networks label full-name
button-disabled? account-avatar-emoji account-avatar-type customization-color icon-avatar]}]
(let [theme (quo.theme/use-theme)]
[rn/view {:style (merge style/container container-style)}
(when (left-image-supported-types type)
[rn/view {:style style/left-container}
[left-image
{:type type
:customization-color customization-color
:account-avatar-emoji account-avatar-emoji
:account-avatar-type account-avatar-type
:icon-avatar icon-avatar
:profile-picture profile-picture}]])
[rn/view {:style style/body-container}
[left-title
{:type type
:label label
:title title
:title-icon title-icon
:theme theme
:blur? blur?}]
[subtitle
{:type type
:theme theme
:blur? blur?
:keycard? keycard?
:networks networks
:description description
:community-name community-name
:community-logo community-logo
:context-tag-type context-tag-type
:customization-color customization-color
:account-name account-name
:emoji emoji
:full-name full-name
:profile-picture profile-picture}]]
[right-icon
{:theme theme
:type type
:button-type button-type
:on-button-press on-button-press
:on-button-long-press on-button-long-press
:button-disabled? button-disabled?
:button-icon button-icon}]]))

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

@ -69,12 +69,12 @@
(defn- view-internal
[{: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)]
[shadow/view
{:offset [0 4]
: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
:style {:align-self :stretch}}
[rn/view {:style (merge (style/container blur? theme) container-style)}
@ -83,7 +83,7 @@
{:style style/blur-container
:blur-amount 20
: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}])
[button/button
{: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))})
(defn get-colors
[{:keys [customization-color theme type state background size]}]
[{:keys [customization-color type state background size]} theme]
(let [active? (= state :active)]
(cond
(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.markdown.text :as text]
[quo.foundations.customization-colors :as customization-colors]
[quo.theme :as theme]
[quo.theme]
[react-native.blur :as blur]
[react-native.core :as rn]))
(defn- view-internal
[{:keys [type size state background customization-color theme on-press icon-name icon? emoji?
(defn 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)"
[{:keys [type size state background customization-color on-press icon-name icon? emoji?
accessibility-label no-icon-color?]
:or {type :grey
size :size-40
@ -20,11 +32,12 @@
icon-name :i/placeholder}
:as props}
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)
{:keys [left-icon-color right-icon-color right-icon-color-2 label-color blur-type
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)
customization-type? (= type :customization)
show-blur-background? (and (= background :photo)
@ -73,18 +86,3 @@
:accessibility-label :right-icon
:color right-icon-color
: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.icon :as icon]
[quo.components.markdown.text :as text]
[quo.theme :as theme]
[quo.theme]
[react-native.core :as rn]))
(defn- view-internal
[{:keys [state theme on-press icon?
label? blur?
accessibility-label header-label]
(defn view
"Props:
- state: :default (default) | :active | :disabled
- 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
icon? true
label? true
@ -18,7 +24,8 @@
header-label "Label"}
:as props}
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)
right-icon (if (= state :active) :i/pullup :i/dropdown)]
[rn/view
@ -55,14 +62,3 @@
:accessibility-label :right-icon
:color right-icon-color
: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
[{: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)
on-press-in (rn/use-callback #(set-pressed true))
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.empty-state.empty-state.styles :as styles]
[quo.components.markdown.text :as text]
[quo.theme :as theme]
[react-native.core :as rn]
[react-native.fast-image :as fast-image]))
(defn- empty-state-internal
(defn empty-state
[{:keys [customization-color image title description blur? placeholder? container-style]
upper-button :upper-button
lower-button :lower-button
@ -50,5 +49,3 @@
:background :blur
:on-press lower-button-on-press}
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
[quo.components.gradient.gradient-cover.style :as style]
[quo.foundations.colors :as colors]
[quo.theme :as quo.theme]
[react-native.linear-gradient :as linear-gradient]))
(defn- view-internal
(defn view
[{:keys [customization-color opacity container-style height]
:or {customization-color :blue}}]
;; `when` added for safety, `linear-gradient` will break if `nil` is passed, the `:or`
@ -21,5 +20,3 @@
:end {:x 0 :y 1}
:style (merge (style/root-container opacity height)
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]
:or {reference-prefix "$"
decimal-separator :dot}}]
(let [theme (quo.theme/use-theme-value)
(let [theme (quo.theme/use-theme)
[inspecting? set-inspecting] (rn/use-state false)
data (if (> (count 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)
theme)))
(defn- view-internal
[{:keys [data state time-frame customization-color theme]}]
(let [max-data-points (time-frame->max-data-points time-frame)
(defn view
[{:keys [data state time-frame customization-color]}]
(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))
(utils/downsample-data data max-data-points)
data)
@ -41,7 +42,7 @@
width (:width (rn/get-window))
line-color (get-line-color customization-color state theme)
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)
[fast-image/fast-image
{:style style/empty-state
@ -78,5 +79,3 @@
:y-axis-label-width 0.01
:labels-extra-height -36
: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]
:or {title-align :center
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)
:height header-height}
:right {:width (or right-width 8)

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

@ -15,7 +15,7 @@
(not (string/blank? color))))))
(defn- image-icon-style
[{:keys [color no-color size container-style theme]}]
[{:keys [color no-color size container-style]} theme]
(cond-> {:width size
:height size}
(not no-color)
@ -26,29 +26,31 @@
:always
(merge container-style)))
(defn memo-icon-fn
[{:keys [color color-2 container-style size accessibility-label]
:or {accessibility-label :icon}
:as props}
icon-name]
(let [size (or size 20)]
(with-meta
(if-let [svg-icon (icons.svg/get-icon icon-name size)]
[svg-icon
(cond-> {:size size
:accessibility-label accessibility-label
:style container-style}
(valid-color? color) (assoc :color color)
(valid-color? color-2) (assoc :color-2 color-2))]
[rn/image
{:style (image-icon-style (assoc props :size size))
:accessibility-label accessibility-label
:source (icons/icon-source (str (name icon-name) size))}])
{:key icon-name})))
(def memo-icon-fn
(fn [{:keys [color color-2 container-style size accessibility-label]
:or {accessibility-label :icon}
:as props}
icon-name
theme]
(let [size (or size 20)]
(with-meta
(if-let [svg-icon (icons.svg/get-icon icon-name size)]
[svg-icon
(cond-> {:size size
:accessibility-label accessibility-label
:style container-style}
(valid-color? color) (assoc :color color)
(valid-color? color-2) (assoc :color-2 color-2))]
[rn/image
{:style (image-icon-style (assoc props :size size) theme)
:accessibility-label accessibility-label
: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
([icon-name] (icon icon-name nil))
([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)
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme)))
(defn view-internal
(defn info-message
"[info-message opts \"message\"]
opts
{:type :default/:success/:error
@ -23,9 +23,10 @@
:text-color colors/white ;; text color override
:icon-color colors/white ;; icon color override
: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]
(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)
size (if (= size :default) :paragraph-2 :label)
text-color (or text-color (get-color type theme))
@ -45,5 +46,3 @@
:weight weight
:style {:color text-color
: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.info.information-box.style :as style]
[quo.components.markdown.text :as text]
[quo.theme :as theme]
[quo.theme]
[react-native.core :as rn]))
(defn- info-type->button-type
@ -57,7 +57,7 @@
on-button-press on-close no-icon-color? icon-size]}
message]
(when-not closed?
(let [theme (theme/get-theme)
(let [theme (quo.theme/use-theme)
include-button? (not (string/blank? button-label))]
[rn/view
{:accessibility-label :information-box

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

@ -29,7 +29,8 @@
(defn input-text
[theme]
(assoc (text/text-style {:size :paragraph-1
:weight :monospace})
:weight :monospace}
nil)
:flex 1
:color (colors/theme-colors colors/neutral-100 colors/white theme)
: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
on-detect-ens on-detect-address on-detect-unclassified address-regex ens-regex
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)
[value set-value] (rn/use-state nil)
[focused? set-focused] (rn/use-state false)
@ -128,7 +128,7 @@
:auto-capitalize :none
:auto-correct false
:spell-check false
:keyboard-appearance (quo.theme/theme-value :light :dark theme)
:keyboard-appearance theme
:on-focus on-focus
:on-blur on-blur
:on-change-text on-change}]

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

@ -87,7 +87,7 @@
(defn input
[colors-by-status small? multiple-lines? weight]
(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
:padding-right 0
: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
on-change-text on-char-limit-reach weight default-value on-clear placeholder]
:as props}]
(let [theme (quo.theme/use-theme-value)
(let [theme (quo.theme/use-theme)
ref (rn/use-ref-atom nil)
on-ref (rn/use-callback (fn [value]
(when (:ref props)
@ -134,7 +134,7 @@
:style (style/input colors-by-status small? multiple-lines? weight)
:accessibility-label :input
:placeholder-text-color (:placeholder colors-by-status)
:keyboard-appearance (quo.theme/theme-value :light :dark theme)
:keyboard-appearance theme
:cursor-color (:cursor variant-colors)
:editable (not disabled?)
:placeholder modified-placeholder

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

@ -19,21 +19,7 @@
{:size :paragraph-1
:style (style/info-box-label theme)} value-text]])
(defn- locked-input-internal
[{: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
(defn locked-input
"Options:
:label - string (default nil) - Text to display above the input
@ -42,4 +28,16 @@
:theme - :light/:dark (passed from with-theme HOC)
: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
[]
(assoc (text/text-style {})
(assoc (text/text-style {} nil)
:height 32
:flex-grow 1
:padding-vertical 5

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

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

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

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

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

@ -18,7 +18,7 @@
(defn get-char-count-color
[blur? theme]
(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)))
(defn get-selection-color

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

@ -18,7 +18,7 @@
:or {max-length 0
auto-focus false
default-value ""}}]
(let [theme (quo.theme/use-theme-value)
(let [theme (quo.theme/use-theme)
[focused? set-focused] (rn/use-state auto-focus)
[value set-value] (rn/use-state default-value)
input-ref (rn/use-ref-atom nil)
@ -45,10 +45,11 @@
{:style (text/text-style
{:size (or size :heading-1)
:weight :semi-bold
:style (style/title-text theme)})
:style (style/title-text theme)}
nil)
:default-value default-value
:accessibility-label :profile-title-input
:keyboard-appearance (quo.theme/theme-value :light :dark theme)
:keyboard-appearance theme
:return-key-type return-key-type
:on-focus on-focus
: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
(:require
[quo.foundations.colors :as colors]
[quo.theme :as theme]))
[quo.theme]))
(def handle-container
{:padding-vertical 8
@ -9,9 +9,9 @@
:align-items :center})
(defn handle
[{:keys [theme]}]
[theme]
{:width 32
:height 4
: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})

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

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

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

@ -8,14 +8,15 @@
[react-native.core :as rn]
[utils.i18n :as i18n]))
(defn- view-internal
(defn keycard
"This component based on the following properties:
- :holder-name - Can be owner's name. Default is Empty
- :locked? - Boolean to specify whether the keycard is locked or not
- :theme :light/:dark
"
[{:keys [holder-name locked? theme]}]
(let [label (if (boolean holder-name)
[{:keys [holder-name locked?]}]
(let [theme (quo.theme/use-theme)
label (if (boolean holder-name)
(i18n/label :t/user-keycard {:name holder-name})
(i18n/label :t/empty-keycard))]
[rn/view {:style (style/card-container locked? theme)}
@ -39,5 +40,3 @@
:accessibility-label :holder-name
:icon-color colors/white-70-blur
: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)}]])
(defn view-internal
[{:keys [title description loading? icon banner
theme on-press channel-name size]
[{:keys [title description loading? icon banner on-press channel-name size]
:or {channel-name "empty name"}}]
[rn/pressable
{:style (style/container size theme)
:accessibility-label :internal-link-card
:on-press on-press}
(if loading?
[loading-view theme size]
[:<>
[rn/view {:style style/header-container}
(when icon
[logo-comp icon])
[title-comp title channel-name theme]]
(when description
[description-comp description])
(when banner
[banner-comp banner size])])])
(let [theme (quo.theme/use-theme)]
[rn/pressable
{:style (style/container size theme)
:accessibility-label :internal-link-card
:on-press on-press}
(if loading?
[loading-view theme size]
[:<>
[rn/view {:style style/header-container}
(when icon
[logo-comp icon])
[title-comp title channel-name theme]]
(when description
[description-comp description])
(when banner
[banner-comp banner size])])]))
(def view
(quo.theme/with-theme
(schema/instrument #'view-internal component-schema/?schema)))
(def view (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
[{:keys [title description loading? icon banner members-count active-members-count
theme on-press size]}]
[rn/pressable
{:style (style/container size theme)
:accessibility-label :internal-link-card
:on-press on-press}
(if loading?
[loading-view theme size]
[:<>
[rn/view {:style style/header-container}
(when icon
[logo-comp icon])
[title-comp title]]
(when description
[description-comp description members-count active-members-count])
(when banner
[thumbnail-comp banner size])])])
on-press size]}]
(let [theme (quo.theme/use-theme)]
[rn/pressable
{:style (style/container size theme)
:accessibility-label :internal-link-card
:on-press on-press}
(if loading?
[loading-view theme size]
[:<>
[rn/view {:style style/header-container}
(when icon
[logo-comp icon])
[title-comp title]]
(when description
[description-comp description members-count active-members-count])
(when banner
[thumbnail-comp banner size])])]))
(def view
(quo.theme/with-theme
(schema/instrument #'view-internal component-schema/?schema)))
(def view (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]]]
[:customization-color {:optional true} [:maybe :schema.common/customization-color]]
[:emoji-hash {:optional true} [:maybe :string]]
[:size {:optional true} [:maybe :keyword]]
[:theme :schema.common/theme]]]]
[:size {:optional true} [:maybe :keyword]]]]]
: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])
(defn view-internal
[{:keys [title loading? icon
theme on-press subtitle emoji-hash customization-color size]}]
(if loading?
[rn/pressable
{:accessibility-label :internal-link-card
:on-press on-press
:style (style/container loading? theme size)}
[loading-view theme]]
[linear-gradient/linear-gradient
(assoc {:style (style/container loading? theme size)}
:colors
(linear-gradient-props theme customization-color))
[rn/pressable
{:accessibility-label :internal-link-card
:on-press on-press}
[rn/view {:style style/header-container}
(when icon
[logo-comp icon])
[title-comp title]]
(when subtitle
[subtitle-comp subtitle emoji-hash])]]))
[{:keys [title loading? icon on-press subtitle emoji-hash customization-color size]}]
(let [theme (quo.theme/use-theme)]
(if loading?
[rn/pressable
{:accessibility-label :internal-link-card
:on-press on-press
:style (style/container loading? theme size)}
[loading-view theme]]
[linear-gradient/linear-gradient
(assoc {:style (style/container loading? theme size)}
:colors
(linear-gradient-props theme customization-color))
[rn/pressable
{:accessibility-label :internal-link-card
:on-press on-press}
[rn/view {:style style/header-container}
(when icon
[logo-comp icon])
[title-comp title]]
(when subtitle
[subtitle-comp subtitle emoji-hash])]])))
(def view
(quo.theme/with-theme
(schema/instrument #'view-internal component-schema/?schema)))
(def view (schema/instrument #'view-internal component-schema/?schema))

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