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

Merge branch 'develop' into milad/19372-fix-amount-input-error

This commit is contained in:
mmilad75 2024-04-18 16:17:02 +01:00 committed by GitHub
parent 06fe6a5b37 8f67f38de9
commit 6700d6506c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
378 changed files with 3748 additions and 4151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
doc/pipeline_process.md
View File

@ -8,7 +8,7 @@ The generally accepted requirements for its use are described below:
- Once a PR is created, it moves to the ```REVIEW``` column where a review will be requested automatically.
- You can also request a review inside the PR from a particular person if needed.
- When creating a PR, do not forget to assign it to yourself.
- Also in case the PR adds new functionality, a short description would be appreciated.
- Also in case the PR adds new functionality, a description **MUST** be added.
### What if the work is still in progress?
@ -28,26 +28,11 @@ Ready for testing, a PR should meet the following criteria:
4. Has the label: `request-manual-qa` or `skip-manual-qa`.
5. PRs **MUST** identify what area is affected and should have a description.
**NOTE:** Make sure that QAs are OK with that
### Adding `skip-manual-qa`
- Please ask another team member before adding the `skip-manual-qa` label (PR/Status community/DMs) so that there's a second opinion.
- The PR MUST have a proper reasoning why manual QA is skipped.
- The PR MUST include the steps of testing that has been done by the developer prior to moving it forward.
**From the perspective of a developer it means that once work on PR is finished:**
1. It should be rebased to the latest `develop`. If there are conflicts - they should be resolved if possible.
2. If the PR was in the `Contributor` column - it should be moved to `Review` column.
3. Wait for the review.
4. Make sure that after review and before requesting manual QA your PR is rebased to current develop.
5. The PR **MUST** be moved to the E2E column when it is ready for testing (**mandatory for all PRs**).
That will also trigger e2e tests run. QAs are monitoring PRs from E2E column and take it into test.
6. After that - PR will be taken into manual testing by the QA team.
### E2E tests and analyzing the results
The PR **MUST** be moved to the E2E column when it is ready for testing (**mandatory for all PRs**).
That will also trigger e2e tests run. QAs are monitoring PRs from E2E column and take it into test.
This step cannot be skipped. So, at least one comment from the `status-im-auto` bot with results is a prerequisite for moving forward.
Information on how to analyze tests can be found [here](https://github.com/status-im/status-mobile/blob/develop/doc/how-to-launch-e2e.md).
Tests might be flaky, as they depend on infrastructure - SauceLabs and Waku.
@ -59,6 +44,20 @@ Please, respect this rule.**
## Testing PR
### Adding `skip-manual-qa`
**Do not hesitate to use a `skip-manual-qa`** if you're sure that it is a simple flow and you checked it.
- Please ask another team member before adding the `skip-manual-qa` label (PR/Status community/DMs) so that there's a second opinion.
- The PR MUST have a proper reasoning why manual QA is skipped.
- The PR MUST include the steps of testing that has been done by the developer prior to moving it forward.
**NOTE:** Make sure that QAs are OK with that;
Before merging PRs, please make sure that information is added about how you tested the PRs, that e2s have been passed and their results have been reviewed.
The QA team appreciates your help!
### Manual testing
#### Prerequisites for manual testing
@ -99,7 +98,7 @@ There are three possible scenarios when the design review is completed:
---
**Notes:**
- If your PR has a long story and started from `develop` branch several days ago, please rebase it to current develop before adding label
- if PR can be tested by developer (in case of small changes) and/or developer is sure that the changes made cannot introduce a regression, then PR can be merged without manual testing. Also, currently, PRs are not manually tested if the changes relate only the design (creation of components, etc.) and do not affect the functionality.
- if PR can be tested by developer (in case of small changes) and/or developer is sure that the changes made cannot introduce a regression, then PR can be merged without manual testing. Also, currently, PRs are not manually tested if the changes relate only the design (creation of components, etc.) and do not affect the functionality (see `skip-manual-qa` label)
---
#### Why my PR is in `Contributor` column?

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

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