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

Refactor some quo2 components to use best practices 

* chore: update quo2 group avatar to best practices

* chore: update quo2 browser-input to best practices

* chore: update quo2 dynamic-button to best practices

* chore: update quo2 tabs to best practices

* chore: cleanup quo2 core file

* chore: use best practices in quo2 banner

* chore: use best practices in quo2 step
This commit is contained in:
Jamie Caprani 2023-08-10 12:59:13 +02:00 committed by GitHub
parent 87574ad78a
commit 302c54b6c4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 269 additions and 216 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/quo2/components/avatars/group_avatar/style.cljs Normal file
View File

@ -0,0 +1,14 @@
(ns quo2.components.avatars.group-avatar.style
(:require [quo2.foundations.colors :as colors]))
(defn container
[{:keys [container-size customization-color theme]}]
{:width container-size
:height container-size
:align-items :center
:justify-content :center
:border-radius (/ container-size 2)
:background-color
(colors/theme-colors (colors/custom-color customization-color 50)
(colors/custom-color customization-color 60)
theme)})

23
src/quo2/components/avatars/group_avatar.cljs → src/quo2/components/avatars/group_avatar/view.cljs
View File

@ -1,7 +1,9 @@
(ns quo2.components.avatars.group-avatar
(ns quo2.components.avatars.group-avatar.view
(:require [quo2.components.icon :as icon]
[quo2.theme :as quo.theme]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]))
[react-native.core :as rn]
[quo2.components.avatars.group-avatar.style :as style]))
(def sizes
{:icon {:small 12
@ -13,20 +15,17 @@
;; TODO: this implementation does not support group display picture (can only display default group
;; icon).
(defn group-avatar
(defn- view-internal
[_]
(fn [{:keys [color size]}]
(fn [{:keys [color size theme]}]
(let [container-size (get-in sizes [:container size])
icon-size (get-in sizes [:icon size])]
[rn/view
{:width container-size
:height container-size
:align-items :center
:justify-content :center
:border-radius (/ container-size 2)
;:background-color (colors/custom-color-by-theme color 50 60) ; TODO: this is temporary only.
;Issue: https://github.com/status-im/status-mobile/issues/14566
:background-color color}
{:style (style/container {:container-size container-size
:customization-color color
:theme theme})}
[icon/icon :i/group
{:size icon-size
:color colors/white-opa-70}]])))
(def view (quo.theme/with-theme view-internal))

2
src/quo2/components/banners/banner/component_spec.cljs
View File

@ -5,7 +5,7 @@
(defn render-banner
[opts]
(rtl/render (reagent/as-element [banner/banner opts])))
(rtl/render (reagent/as-element [banner/view opts])))
(js/global.test "basic render of banner component"
(fn []

11
src/quo2/components/banners/banner/view.cljs
View File

@ -4,10 +4,11 @@
[quo2.components.icon :as icons]
[quo2.components.markdown.text :as text]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]))
[react-native.core :as rn]
[quo2.theme :as quo.theme]))
(defn banner
[{:keys [hide-pin? latest-pin-text pins-count on-press]}]
(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
@ -17,7 +18,7 @@
(when-not hide-pin?
[rn/view {:style style/icon}
[icons/icon :i/pin
{:color (colors/theme-colors colors/neutral-100 colors/white)
{:color (colors/theme-colors colors/neutral-100 colors/white theme)
:size 20}]])
[rn/view {:style (style/text hide-pin?)}
[text/text
@ -28,3 +29,5 @@
{:accessibility-label :pins-count
:style style/counter}
[counter/view {:type :secondary} pins-count]]]))
(def view (quo.theme/with-theme view-internal))

18
src/quo2/components/browser/browser_input/component_spec.cljs
View File

@ -4,14 +4,14 @@
(h/describe "Browser input"
(h/test "Renders empty in default state"
(h/render [browser-input/browser-input
(h/render [browser-input/view
{:on-change-text (h/mock-fn)
:value ""}])
(h/is-truthy (h/get-by-label-text :browser-input)))
(h/test "On change text is fired"
(let [on-change-text (h/mock-fn)]
(h/render [browser-input/browser-input
(h/render [browser-input/view
{:on-change-text on-change-text
:value "mock text"}])
(h/fire-event :change-text (h/get-by-label-text :browser-input) "mock-text-new")
@ -19,38 +19,38 @@
(h/describe "Input Label"
(h/test "Doesn't render label text when input is focused"
(h/render [browser-input/browser-input
(h/render [browser-input/view
{:auto-focus true}])
(h/is-null (h/query-by-label-text :browser-input-label)))
(h/test "Renders label text when input has a value and input is not focused"
(h/render [browser-input/browser-input
(h/render [browser-input/view
{:default-value "mock default"}])
(h/is-truthy (h/query-by-label-text :browser-input-label)))
(h/test "Renders site favicon when specified"
(h/render [browser-input/browser-input
(h/render [browser-input/view
{:default-value "mock default" :favicon :i/verified}])
(h/is-truthy (h/query-by-label-text :browser-input-favicon)))
(h/test "Renders lock icon when lock is enabled"
(h/render [browser-input/browser-input
(h/render [browser-input/view
{:default-value "mock default" :locked? true}])
(h/is-truthy (h/query-by-label-text :browser-input-locked-icon))))
(h/describe "Clear button"
(h/test "Doesn't render in default state"
(h/render [browser-input/browser-input])
(h/render [browser-input/view])
(h/is-null (h/query-by-label-text :browser-input-clear-button)))
(h/test "Renders when there is a value"
(h/render [browser-input/browser-input
(h/render [browser-input/view
{:default-value "mock text"}])
(h/is-truthy (h/query-by-label-text :browser-input-clear-button)))
(h/test "Is pressable"
(let [on-clear (h/mock-fn)]
(h/render [browser-input/browser-input
(h/render [browser-input/view
{:default-value "mock text"
:on-clear on-clear}])
(h/is-truthy (h/query-by-label-text :browser-input-clear-button))

4
src/quo2/components/browser/browser_input/view.cljs
View File

@ -67,7 +67,7 @@
[:cursor-color :placeholder-text-color :editable :on-change-text :on-focus
:on-blur :on-clear :value :disabled? :blur? :customization-color :theme])
(defn browser-input-internal
(defn- view-internal
[{:keys [default-value]
:or {default-value ""}}]
(let [state (reagent/atom :default)
@ -141,4 +141,4 @@
(when on-clear (on-clear)))
:theme theme}])]]))))
(def browser-input (quo2.theme/with-theme browser-input-internal))
(def view (quo2.theme/with-theme view-internal))

107
src/quo2/components/buttons/dynamic_button.cljs
View File

@ -1,107 +0,0 @@
(ns quo2.components.buttons.dynamic-button
(:require [quo2.components.icon :as icon]
[quo2.components.markdown.text :as text]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent]))
(defn- get-button-color
[type pressed? customization-color]
(if (#{:jump-to :mention} type)
(if pressed?
(colors/custom-color-by-theme customization-color 60 50)
(colors/custom-color-by-theme customization-color 50 60))
(if pressed?
(colors/theme-colors colors/neutral-80-opa-80 colors/white-opa-80)
(colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70))))
(defn- get-icon-and-text-color
[type]
(if (#{:jump-to :mention} type)
colors/white
(colors/theme-colors colors/white colors/neutral-100)))
(defn- icon-view
[type]
[icon/icon
(case type
:jump-to :i/jump-to
:mention :i/mention
:notification-down :i/arrow-down
:notification-up :i/arrow-up
:search-with-label :i/search
:search :i/search
:scroll-to-bottom :i/arrow-down)
{:size 12
:color (get-icon-and-text-color type)
:container-style {:margin-top 6
:margin-bottom 6
:margin-left (case type
:jump-to 0
:mention 8
:notification-down 2
:notification-up 2
:search-with-label 8
:search 6
:scroll-to-bottom 6)
:margin-right (case type
:jump-to 8
:mention 2
:notification-down 8
:notification-up 8
:search-with-label 4
:search 6
:scroll-to-bottom 6)}}])
(defn dynamic-button
"[dynamic-button opts]
opts
{:type :jump-to/:mention/:notification-down/:notification-up/:search/:search-with-label/:scroll-to-bottom
:on-press fn
:count mentions or notifications count
:customization-color customize jump-to and mention button color}"
[_]
(let [pressed? (reagent/atom false)]
(fn [{:keys [type label on-press customization-color style] :as args}]
[rn/touchable-opacity
{:on-press-in #(reset! pressed? true)
:on-press-out #(reset! pressed? false)
:on-press on-press
:active-opacity 1
:hit-slop {:top 5 :bottom 5 :left 5 :right 5}
:pointer-events :auto
:accessibility-label type}
[rn/view
{:style (merge
{:flex-direction :row
:height 24
:border-radius 12
:background-color (get-button-color type @pressed? (or customization-color :primary))}
style)}
(when (#{:mention :search :search-with-label :scroll-to-bottom} type)
[icon-view type])
(when (#{:jump-to :mention :notification-down :notification-up :search-with-label} type)
[text/text
{:weight :medium
:size :paragraph-2
:style {:color (get-icon-and-text-color type)
:margin-top 2.5
:margin-bottom 3.5
:margin-left (case type
:jump-to 8
:mention 0
:notification-down 8
:notification-up 8
:search-with-label 0)
:margin-right (case type
:jump-to 0
:mention 8
:notification-down 0
:notification-up 0
:search-with-label 8)}}
(case type
:jump-to label
:search-with-label label
(:mention :notification-down :notification-up) (str (:count args)))])
(when (#{:jump-to :notification-down :notification-up} type)
[icon-view type])]])))

43
src/quo2/components/buttons/dynamic_button/style.cljs Normal file
View File

@ -0,0 +1,43 @@
(ns quo2.components.buttons.dynamic-button.style)
(defn container
[type]
{:margin-top 6
:margin-bottom 6
:margin-left (case type
:jump-to 0
:mention 8
:notification-down 2
:notification-up 2
:search-with-label 8
:search 6
:scroll-to-bottom 6
nil)
:margin-right (case type
:jump-to 8
:mention 2
:notification-down 8
:notification-up 8
:search-with-label 4
:search 6
:scroll-to-bottom 6
nil)})
(defn text
[type]
{:margin-top 2.5
:margin-bottom 3.5
:margin-left (case type
:jump-to 8
:mention 0
:notification-down 8
:notification-up 8
:search-with-label 0
nil)
:margin-right (case type
:jump-to 0
:mention 8
:notification-down 0
:notification-up 0
:search-with-label 8
nil)})

90
src/quo2/components/buttons/dynamic_button/view.cljs Normal file
View File

@ -0,0 +1,90 @@
(ns quo2.components.buttons.dynamic-button.view
(:require [quo2.components.icon :as icon]
[quo2.components.markdown.text :as text]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent]
[quo2.theme :as quo.theme]
[quo2.components.buttons.dynamic-button.style :as style]))
(defn- get-button-color
[{:keys [type pressed? customization-color theme]}]
(if (#{:jump-to :mention} type)
(if pressed?
(colors/theme-colors
(colors/custom-color customization-color 60)
(colors/custom-color customization-color 50)
theme)
(colors/theme-colors
(colors/custom-color customization-color 50)
(colors/custom-color customization-color 60)
theme))
(if pressed?
(colors/theme-colors colors/neutral-80-opa-80 colors/white-opa-80 theme)
(colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 theme))))
(defn- get-icon-and-text-color
[type theme]
(if (#{:jump-to :mention} type)
colors/white
(colors/theme-colors colors/white colors/neutral-100 theme)))
(defn- icon-view
[type theme]
[icon/icon
(case type
:jump-to :i/jump-to
:mention :i/mention
:notification-down :i/arrow-down
:notification-up :i/arrow-up
:search-with-label :i/search
:search :i/search
:scroll-to-bottom :i/arrow-down)
{:size 12
:color (get-icon-and-text-color type theme)
:container-style (style/container type)}])
(defn- view-internal
"[dynamic-button opts]
opts
{:type :jump-to/:mention/:notification-down/:notification-up/:search/:search-with-label/:scroll-to-bottom
:on-press fn
:count mentions or notifications count
:customization-color customize jump-to and mention button color}"
[_]
(let [pressed? (reagent/atom false)]
(fn [{:keys [type label on-press customization-color style theme] :as args}]
[rn/touchable-opacity
{:on-press-in #(reset! pressed? true)
:on-press-out #(reset! pressed? false)
:on-press on-press
:active-opacity 1
:hit-slop {:top 5 :bottom 5 :left 5 :right 5}
:pointer-events :auto
:accessibility-label type}
[rn/view
{:style (merge
{:flex-direction :row
:height 24
:border-radius 12
:background-color (get-button-color {:type type
:pressed? @pressed?
:customization-color (or customization-color
:primary)
:theme theme})}
style)}
(when (#{:mention :search :search-with-label :scroll-to-bottom} type)
[icon-view type])
(when (#{:jump-to :mention :notification-down :notification-up :search-with-label} type)
[text/text
{:weight :medium
:size :paragraph-2
:style (assoc (style/text type) :color (get-icon-and-text-color type theme))}
(case type
:jump-to label
:search-with-label label
(:mention :notification-down :notification-up) (str (:count args)))])
(when (#{:jump-to :notification-down :notification-up} type)
[icon-view type theme])]])))
(def view (quo.theme/with-theme view-internal))

6
src/quo2/components/counter/step/component_spec.cljs
View File

@ -4,16 +4,16 @@
(h/describe "step component"
(h/test "default render of step component"
(h/render [step/step {} nil])
(h/render [step/view {} nil])
(-> (h/expect (h/query-by-label-text :step-counter))
(h/is-truthy)))
(h/test "renders step with a string value"
(h/render [step/step {} "1"])
(h/render [step/view {} "1"])
(-> (h/expect (h/get-by-text "1"))
(h/is-truthy)))
(h/test "renders step with an integer value"
(h/render [step/step {} 1])
(h/render [step/view {} 1])
(-> (h/expect (h/get-by-text "1"))
(h/is-truthy))))

4
src/quo2/components/counter/step/view.cljs
View File

@ -6,7 +6,7 @@
[react-native.core :as rn]
[utils.number]))
(defn step-internal
(defn- view-internal
[{:keys [type accessibility-label theme in-blur-view? customization-color]} value]
(let [type (or type :neutral)
value (utils.number/parse-int value)
@ -25,4 +25,4 @@
:size :label
:style {:color (style/text-color type theme)}} label]]))
(def step (theme/with-theme step-internal))
(def view (theme/with-theme view-internal))

2
src/quo2/components/markdown/list/view.cljs
View File

@ -41,7 +41,7 @@
[rn/view {:style (style/container container-style)}
[rn/view {:style style/index}
(if (= type :step)
[step/step
[step/view
{:in-blur-view? blur?
:customization-color customization-color
:type (if customization-color :complete :neutral)} step-number]

4
src/quo2/components/navigation/floating_shell_button.cljs
View File

@ -1,12 +1,12 @@
(ns quo2.components.navigation.floating-shell-button
(:require [quo2.components.buttons.dynamic-button :as dynamic-button]
(:require [quo2.components.buttons.dynamic-button.view :as dynamic-button]
[react-native.core :as rn]
[react-native.reanimated :as reanimated]))
(defn dynamic-button-view
[type dynamic-buttons style]
(when-let [{:keys [on-press customization-color label] :as props} (get dynamic-buttons type)]
[dynamic-button/dynamic-button
[dynamic-button/view
{:type type
:label label
:on-press on-press

12
src/quo2/components/tabs/tabs/style.cljs Normal file
View File

@ -0,0 +1,12 @@
(ns quo2.components.tabs.tabs.style
(:require [utils.number]))
(def linear-gradient
{:width "100%"
:height "100%"})
(defn tab
[{:keys [size default-tab-size number-of-items index style]}]
{:margin-right (if (= size default-tab-size) 12 8)
:padding-right (when (= index (dec number-of-items))
(:padding-left style))})

18
src/quo2/components/tabs/tabs.cljs → src/quo2/components/tabs/tabs/view.cljs
View File

@ -1,4 +1,4 @@
(ns quo2.components.tabs.tabs
(ns quo2.components.tabs.tabs.view
(:require [oops.core :refer [oget]]
[quo2.components.tabs.tab.view :as tab]
[react-native.core :as rn]
@ -7,7 +7,8 @@
[reagent.core :as reagent]
[utils.collection :as utils.collection]
[utils.number]
[react-native.gesture :as gesture]))
[react-native.gesture :as gesture]
[quo2.components.tabs.tabs.style :as style]))
(def default-tab-size 32)
(def unread-count-offset 3)
@ -34,8 +35,7 @@
:start {:x 0 :y 0}
:end {:x 1 :y 0}
:pointer-events :none
:style {:width "100%"
:height "100%"}}])}]
:style style/linear-gradient}])}]
children)
(into [:<>] children)))
@ -71,9 +71,11 @@
{:keys [id label notification-dot? accessibility-label]}
index]
[rn/view
{:style {:margin-right (if (= size default-tab-size) 12 8)
:padding-right (when (= index (dec number-of-items))
(:padding-left style))}}
{:style (style/tab {:size size
:default-tab-size default-tab-size
:number-of-items number-of-items
:index index
:style style})}
[tab/view
{:id id
:notification-dot? notification-dot?
@ -93,7 +95,7 @@
(on-change id)))}
label]])
(defn tabs
(defn view
" Common options (for scrollable and non-scrollable tabs):
- `blur?` Boolean passed down to `quo2.components.tabs.tab/tab`.

4
src/quo2/components/tags/context_tag/view.cljs
View File

@ -1,5 +1,5 @@
(ns quo2.components.tags.context-tag.view
(:require [quo2.components.avatars.group-avatar :as group-avatar]
(:require [quo2.components.avatars.group-avatar.view :as group-avatar]
[quo2.components.avatars.user-avatar.style :as user-avatar-style]
[quo2.components.avatars.user-avatar.view :as user-avatar]
[quo2.components.icon :as icons]
@ -24,7 +24,7 @@
(select-keys [:override-theme :style :blur?])
(assoc-in [:style :padding-left] 3)
(assoc-in [:style :padding-vertical] 2))
[group-avatar/group-avatar opts]
[group-avatar/view opts]
[text/text
{:weight :medium
:size :paragraph-2

109
src/quo2/core.cljs
View File

@ -3,13 +3,13 @@
(:require
quo2.components.avatars.account-avatar.view
quo2.components.avatars.channel-avatar.view
quo2.components.avatars.group-avatar
quo2.components.avatars.group-avatar.view
quo2.components.avatars.icon-avatar
quo2.components.avatars.user-avatar.view
quo2.components.avatars.wallet-user-avatar
quo2.components.banners.banner.view
quo2.components.buttons.button.view
quo2.components.buttons.dynamic-button
quo2.components.buttons.dynamic-button.view
quo2.components.buttons.predictive-keyboard.view
quo2.components.buttons.slide-button.view
quo2.components.browser.browser-input.view
@ -97,7 +97,7 @@
quo2.components.share.share-qr-code.view
quo2.components.tabs.account-selector
quo2.components.tabs.segmented-tab
quo2.components.tabs.tabs
quo2.components.tabs.tabs.view
quo2.components.tags.context-tag.view
quo2.components.tags.permission-tag
quo2.components.tags.status-tags
@ -116,43 +116,43 @@
(def separator quo2.components.common.separator.view/separator)
;;;; AVATAR
;;;; Avatar
(def account-avatar quo2.components.avatars.account-avatar.view/view)
(def channel-avatar quo2.components.avatars.channel-avatar.view/view)
(def group-avatar quo2.components.avatars.group-avatar/group-avatar)
(def group-avatar quo2.components.avatars.group-avatar.view/view)
(def icon-avatar quo2.components.avatars.icon-avatar/icon-avatar)
(def user-avatar quo2.components.avatars.user-avatar.view/user-avatar)
(def wallet-user-avatar quo2.components.avatars.wallet-user-avatar/wallet-user-avatar)
;;;; BANNER
(def banner quo2.components.banners.banner.view/banner)
;;;; Banner
(def banner quo2.components.banners.banner.view/view)
;;;; BUTTONS
;;;; Buttons
(def button quo2.components.buttons.button.view/button)
(def dynamic-button quo2.components.buttons.dynamic-button/dynamic-button)
(def dynamic-button quo2.components.buttons.dynamic-button.view/view)
(def predictive-keyboard quo2.components.buttons.predictive-keyboard.view/view)
(def slide-button quo2.components.buttons.slide-button.view/view)
;;;; BROWSER
(def browser-input quo2.components.browser.browser-input.view/browser-input)
;;;; Browser
(def browser-input quo2.components.browser.browser-input.view/view)
;;;; CALENDAR
;;;; Calendar
(def calendar quo2.components.calendar.calendar.view/view)
(def calendar-day quo2.components.calendar.calendar-day.view/view)
(def calendar-year quo2.components.calendar.calendar-year.view/view)
;;;; CODE
;;;; Code
(def snippet quo2.components.code.snippet/snippet)
;;;; CARDS
;;;; Cards
(def small-option-card quo2.components.onboarding.small-option-card.view/small-option-card)
(def keycard quo2.components.keycard.view/keycard)
;;;; COLORS
;;;; Colors
(def color-picker quo2.components.colors.color-picker.view/view)
(def picker-colors quo2.components.colors.color-picker.view/picker-colors)
;;;; COMMUNITY
;;;; Community
(def community-card-view-item quo2.components.community.community-card-view/view)
(def communities-membership-list-item
quo2.components.community.community-list-view/communities-membership-list-item)
@ -166,42 +166,45 @@
(def token-requirement-list quo2.components.community.token-gating/token-requirement-list)
(def channel-actions quo2.components.community.channel-actions/channel-actions)
;;;; COUNTER
;;;; Counter
(def counter quo2.components.counter.counter.view/view)
(def step quo2.components.counter.step.view/step)
(def step quo2.components.counter.step.view/view)
;;;; DIVIDERS
;;;; Dividers
(def divider-label quo2.components.dividers.divider-label/divider-label)
(def new-messages quo2.components.dividers.new-messages/new-messages)
(def divider-date quo2.components.dividers.date/date)
(def strength-divider quo2.components.dividers.strength-divider.view/view)
;;;; DRAWERS
;;;; Drawers
(def action-drawer quo2.components.drawers.action-drawers.view/action-drawer)
(def documentation-drawers quo2.components.drawers.documentation-drawers.view/view)
(def drawer-buttons quo2.components.drawers.drawer-buttons.view/view)
(def permission-context quo2.components.drawers.permission-context.view/view)
;;;; DROPDOWNS
;;;; Dropdowns
(def dropdown quo2.components.dropdowns.dropdown/dropdown)
;;;; EMPTY STATE
;;;; Empty State
(def empty-state quo2.components.empty-state.empty-state.view/empty-state)
;;;; GRAPH
;;;; Graph
(def wallet-graph quo2.components.graph.wallet-graph.view/view)
;;;; HEADER
;;;; Header
(def header quo2.components.header/header)
;;;; ICON
;;;; Gradient
(def gradient-cover quo2.components.gradient.gradient-cover.view/view)
;;;; Icon
(def icon quo2.components.icon/icon)
;;;; INFO
;;;; Info
(def info-message quo2.components.info.info-message/info-message)
(def information-box quo2.components.info.information-box.view/view)
;;;; INPUTS
;;;; Inputs
(def input quo2.components.inputs.input.view/input)
(def locked-input quo2.components.inputs.locked-input.view/locked-input)
(def profile-input quo2.components.inputs.profile-input.view/profile-input)
@ -209,11 +212,16 @@
(def search-input quo2.components.inputs.search-input.view/search-input)
(def title-input quo2.components.inputs.title-input.view/title-input)
;;;; NUMBERED KEYBOARD
;;;; Numbered Keyboard
(def keyboard-key quo2.components.numbered-keyboard.keyboard-key.view/view)
(def numbered-keyboard quo2.components.numbered-keyboard.numbered-keyboard.view/view)
;;;; LIST ITEMS
;;;; Links
(def link-preview quo2.components.links.link-preview.view/view)
(def url-preview quo2.components.links.url-preview.view/view)
(def url-preview-list quo2.components.links.url-preview-list.view/view)
;;;; List items
(def channel-list-item quo2.components.list-items.channel/list-item)
(def menu-item quo2.components.list-items.menu-item/menu-item)
(def preview-list quo2.components.list-items.preview-list/preview-list)
@ -221,23 +229,23 @@
(def community-list-item quo2.components.list-items.community.view/view)
(def token-value quo2.components.list-items.token-value.view/view)
;;;; LOADERS
;;;; Loaders
(def skeleton quo2.components.loaders.skeleton/skeleton)
(def static-skeleton quo2.components.loaders.skeleton.view/view)
;;;; NAVIGATION
;;;; Navigation
(def floating-shell-button quo2.components.navigation.floating-shell-button/floating-shell-button)
(def page-nav quo2.components.navigation.page-nav/page-nav)
;;;; MARKDOWN
;;;; Markdown
(def markdown-list quo2.components.markdown.list.view/view)
(def text quo2.components.markdown.text/text)
;;;; MESSAGES
;;;; Messages
(def gap quo2.components.messages.gap/gap)
(def system-message quo2.components.messages.system-message/system-message)
;;;; NOTIFICATIONS
;;;; Notifications
(def activity-log quo2.components.notifications.activity-log.view/view)
(def activity-logs-photos quo2.components.notifications.activity-logs-photos.view/view)
(def notification-dot quo2.components.notifications.notification-dot/notification-dot)
@ -245,45 +253,45 @@
(def notification quo2.components.notifications.notification.view/notification)
(def toast quo2.components.notifications.toast.view/toast)
;;;; PASSWORD
;;;; Password
(def tips quo2.components.password.tips.view/view)
;;;; PROFILE
;;;; Profile
(def profile-card quo2.components.profile.profile-card.view/profile-card)
(def select-profile quo2.components.profile.select-profile.view/view)
;;;; REACTIONS
;;;; Reactions
(def reaction quo2.components.reactions.reaction/reaction)
(def add-reaction quo2.components.reactions.reaction/add-reaction)
;;;; RECORD AUDIO
;;;; Record Audio
(def record-audio quo2.components.record-audio.record-audio.view/record-audio)
(def soundtrack quo2.components.record-audio.soundtrack.view/f-soundtrack)
;;;; SELECTORS
;;;; Selectors
(def author quo2.components.messages.author.view/author)
(def disclaimer quo2.components.selectors.disclaimer.view/view)
(def filter quo2.components.selectors.filter.view/view)
(def reactions quo2.components.selectors.reactions.view/view)
(def checkbox quo2.components.selectors.selectors.view/checkbox)
;;;; SETTINGS
;;;; Settings
(def privacy-option quo2.components.settings.privacy-option/card)
(def account quo2.components.settings.accounts.view/account)
(def settings-list quo2.components.settings.settings-list.view/settings-list)
(def reorder-item quo2.components.settings.reorder-item.view/reorder-item)
(def category quo2.components.settings.category.view/category)
;;;; SHARE
;;;; Share
(def qr-code quo2.components.share.qr-code.view/qr-code)
(def share-qr-code quo2.components.share.share-qr-code.view/view)
;;;; TABS
(def tabs quo2.components.tabs.tabs/tabs)
;;;; Tabs
(def tabs quo2.components.tabs.tabs.view/view)
(def segmented-control quo2.components.tabs.segmented-tab/segmented-control)
(def account-selector quo2.components.tabs.account-selector/account-selector)
;;;; TAGS
;;;; Tags
(def tag quo2.components.tags.tag/tag)
(def tags quo2.components.tags.tags/tags)
(def permission-tag quo2.components.tags.permission-tag/tag)
@ -295,18 +303,10 @@
(def audio-tag quo2.components.tags.context-tag.view/audio-tag)
(def community-tag quo2.components.tags.context-tag.view/community-tag)
;;;; TITLE
;;;; Title
(def title quo2.components.text-combinations.title.view/title)
;;;; LINKS
(def url-preview quo2.components.links.url-preview.view/view)
(def url-preview-list quo2.components.links.url-preview-list.view/view)
(def link-preview quo2.components.links.link-preview.view/view)
;;;; GRADIENT
(def gradient-cover quo2.components.gradient.gradient-cover.view/view)
;;;; WALLET
;;;; Wallet
(def account-card quo2.components.wallet.account-card.view/view)
(def account-overview quo2.components.wallet.account-overview.view/view)
(def network-amount quo2.components.wallet.network-amount.view/view)
@ -315,4 +315,3 @@
(def summary-info quo2.components.wallet.summary-info.view/view)
(def token-input quo2.components.wallet.token-input.view/view)
(def wallet-overview quo2.components.wallet.wallet-overview.view/view)

3
src/status_im/ui/screens/wallet/account/views.cljs
View File

@ -5,7 +5,6 @@
[quo.design-system.spacing :as spacing]
[quo2.core :as quo2]
[quo2.components.markdown.text :as quo2.text]
[quo2.components.tabs.tabs :as quo2.tabs]
[quo2.foundations.colors :as quo2.colors]
[re-frame.core :as re-frame]
[reagent.core :as reagent]
@ -124,7 +123,7 @@
(let [tab @selected-tab]
[react/view {:flex 1}
[react/view {:padding-horizontal 20 :padding-bottom 20}
[quo2.tabs/tabs
[quo2/tabs
{:size 24
:on-change #(reset! selected-tab %)
:default-active :tokens

3
src/status_im/ui/screens/wallet/accounts/views.cljs
View File

@ -4,7 +4,6 @@
[quo.design-system.colors :as colors]
[quo2.core :as quo2]
[quo2.components.markdown.text :as quo2.text]
[quo2.components.tabs.tabs :as quo2.tabs]
[quo2.foundations.colors :as quo2.colors]
[re-frame.core :as re-frame]
[reagent.core :as reagent]
@ -283,7 +282,7 @@
:margin-top 12
:margin-bottom 20}
[react/view {:flex-direction :row}
[quo2.tabs/tabs
[quo2/tabs
{:default-active (:address (first accounts))
:on-change #(reset! selected-account-atom %)
:data accounts-data}]

2
src/status_im2/contexts/quo_preview/avatars/group_avatar.cljs
View File

@ -1,5 +1,5 @@
(ns status-im2.contexts.quo-preview.avatars.group-avatar
(:require [quo2.components.avatars.group-avatar :as quo2]
(:require [quo2.core :as quo2]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent]

4
src/status_im2/contexts/quo_preview/buttons/dynamic_button.cljs
View File

@ -1,5 +1,5 @@
(ns status-im2.contexts.quo-preview.buttons.dynamic-button
(:require [quo2.components.buttons.dynamic-button :as quo2]
(:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent]
@ -41,7 +41,7 @@
[rn/view
{:padding-vertical 60
:align-items :center}
[quo2/dynamic-button @state]]]])))
[quo/dynamic-button @state]]]])))
(defn preview-dynamic-button
[]

2
src/status_im2/contexts/quo_preview/counter/step.cljs
View File

@ -1,5 +1,5 @@
(ns status-im2.contexts.quo-preview.counter.step
(:require [quo2.components.counter.step.view :as quo2]
(:require [quo2.core :as quo2]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent]