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 Button and correct use of community color (#16536) 

* chore: refactor button and add use for community colors

* chore: update color in button to work with community color

* chore: correct uses of button across app
This commit is contained in:
Jamie Caprani 2023-07-21 15:43:41 +02:00 committed by GitHub
parent 76eea91ba2
commit 33d41dc5d5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
28 changed files with 828 additions and 433 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
src/quo2/components/buttons/button/properties.cljs Normal file
View File

@ -0,0 +1,103 @@
(ns quo2.components.buttons.button.properties
(:require [quo2.foundations.colors :as colors]))
(defn custom-color-type
[customization-color icon-only?]
{:icon-color colors/white
:icon-secondary-color colors/white-opa-70
:label-color colors/white
:background-color (colors/custom-color customization-color 50)
:border-radius (when icon-only? 24)})
(defn grey-photo
[theme pressed?]
{:icon-color (colors/theme-colors colors/neutral-100 colors/white theme)
:icon-secondary-color (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-70 theme)
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
:icon-background-color (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
:blur-overlay-color (if pressed?
(colors/theme-colors colors/white-opa-50
colors/neutral-80-opa-50
theme)
(colors/theme-colors colors/white-opa-40
colors/neutral-80-opa-40
theme))
:blur-type (if (= theme :light) :light :dark)})
(defn grey-blur
[theme pressed?]
{:icon-color (colors/theme-colors colors/neutral-100 colors/white theme)
:icon-secondary-color (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-70 theme)
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
:background-color (if pressed?
(colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
(colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme))})
(defn outline-blur
[theme pressed?]
{:icon-color (colors/theme-colors colors/neutral-100 colors/white theme)
:icon-secondary-color (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
:border-color (if pressed?
(colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 theme)
(colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme))})
(defn grey
[theme pressed?]
{:icon-color (colors/theme-colors colors/neutral-100 colors/white theme)
:icon-secondary-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
:background-color (if pressed?
(colors/theme-colors colors/neutral-20 colors/neutral-60 theme)
(colors/theme-colors colors/neutral-10 colors/neutral-80 theme))})
(defn dark-grey
[theme pressed?]
{:icon-color (colors/theme-colors colors/neutral-100 colors/white theme)
:icon-secondary-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
:background-color (if pressed?
(colors/theme-colors colors/neutral-30 colors/neutral-60 theme)
(colors/theme-colors colors/neutral-20 colors/neutral-90 theme))})
(defn outline
[theme pressed?]
{:icon-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
:icon-secondary-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
:border-color (if pressed?
(colors/theme-colors colors/neutral-40 colors/neutral-60 theme)
(colors/theme-colors colors/neutral-30 colors/neutral-70 theme))})
(defn ghost
[theme pressed?]
{:icon-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
:icon-secondary-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
:background-color (when pressed?
(colors/theme-colors colors/neutral-10 colors/neutral-80 theme))})
(defn black
[pressed?]
{:icon-color colors/white
:label-color colors/white
:background-color (if pressed? colors/neutral-80 colors/neutral-95)})
(defn get-values
[{:keys [customization-color theme type background pressed? icon-only?]}]
(cond
(= type :primary) (custom-color-type customization-color icon-only?)
(= type :positive) (custom-color-type customization-color icon-only?)
(= type :danger) (custom-color-type customization-color icon-only?)
;; TODO Remove type blurred - https://github.com/status-im/status-mobile/issues/16535
(and (= :photo background) (= type :grey)) (grey-photo theme pressed?)
;; TODO Remove type blur-bg - https://github.com/status-im/status-mobile/issues/16535
(or (= type :blur-bg)
(and (= :blur background) (= type :grey))) (grey-blur theme pressed?)
(and (= :blur background) (= type :outline)) (outline-blur theme pressed?)
(= type :grey) (grey theme pressed?)
(= type :dark-grey) (dark-grey theme pressed?)
(= type :outline) (outline theme pressed?)
(= type :ghost) (ghost theme pressed?)
;; TODO: remove type shell - https://github.com/status-im/status-mobile/issues/16535
(or (= type :shell) (= type :black)) (black pressed?)))

264
src/quo2/components/buttons/button/style.cljs
View File

@ -1,5 +1,4 @@
(ns quo2.components.buttons.button.style
(:require [quo2.foundations.colors :as colors]))
(ns quo2.components.buttons.button.style)
(def blur-view
{:position :absolute
@ -8,254 +7,97 @@
:right 0
:bottom 0})
(defn before-icon-style
(defn icon-style
[{:keys [icon-container-size icon-background-color icon-container-rounded?
icon-size margin-left margin-right]}]
(cond-> (merge {:margin-left margin-left
:margin-right margin-right
:align-items :center
:justify-content :center})
icon-container-size
(assoc :width icon-container-size :height icon-container-size)
icon-background-color
(assoc :background-color icon-background-color)
icon-container-rounded?
(assoc :border-radius (/ (or icon-container-size icon-size) 2))))
(defn icon-left-icon-style
[{:keys [override-margins size icon-container-size icon-background-color icon-container-rounded?
icon-size]}]
(merge
{:margin-left (or (get override-margins :left)
(if (= size 40) 12 8))
:margin-right (or (get override-margins :right) 4)
:align-items :center
:justify-content :center}
(when icon-container-size
{:width icon-container-size
:height icon-container-size})
(when icon-background-color
{:background-color icon-background-color})
(when icon-container-rounded?
{:border-radius (/ (or icon-container-size icon-size) 2)})))
(icon-style
{:margin-left (or (get override-margins :left)
(if (= size 40) 12 8))
:margin-right (or (get override-margins :right) 4)
:icon-container-size icon-container-size
:icon-background-color icon-background-color
:icon-container-rounded? icon-container-rounded?
:icon-size icon-size}))
(defn after-icon-style
(defn icon-right-icon-style
[{:keys [override-margins size icon-container-size icon-background-color icon-container-rounded?
icon-size]}]
(merge
{:margin-left (or (get override-margins :left) 4)
:margin-right (or (get override-margins :right)
(if (= size 40) 12 8))
:align-items :center
:justify-content :center}
(when icon-container-size
{:width icon-container-size
:height icon-container-size})
(when icon-background-color
{:background-color icon-background-color})
(when icon-container-rounded?
{:border-radius (/ (or icon-container-size icon-size) 2)})))
(defn themes
[customization-color]
{:light
{:primary {:icon-color colors/white
:icon-secondary-color colors/white-opa-70
:label-color colors/white
:background-color {:default (colors/custom-color customization-color 50)
:pressed (colors/custom-color customization-color 60)
:disabled (colors/custom-color customization-color 50)}}
:secondary {:icon-color colors/primary-50
:label-color colors/primary-50
:background-color {:default colors/primary-50-opa-20
:pressed colors/primary-50-opa-40
:disabled colors/primary-50-opa-20}}
:grey {:icon-color colors/neutral-100
:icon-secondary-color colors/neutral-50
:label-color colors/neutral-100
:background-color {:default colors/neutral-10
:pressed colors/neutral-20
:disabled colors/neutral-10}}
:dark-grey {:icon-color colors/neutral-100
:icon-secondary-color colors/neutral-50
:label-color colors/neutral-100
:background-color {:default colors/neutral-20
:pressed colors/neutral-30
:disabled colors/neutral-20}}
:outline {:icon-color colors/neutral-50
:icon-secondary-color colors/neutral-50
:label-color colors/neutral-100
:border-color {:default colors/neutral-30
:pressed colors/neutral-40
:disabled colors/neutral-30}}
:ghost {:icon-color colors/neutral-50
:icon-secondary-color colors/neutral-50
:label-color colors/neutral-100
:background-color {:pressed colors/neutral-10}}
:danger {:icon-color colors/white
:icon-secondary-color colors/white-opa-70
:label-color colors/white
:background-color {:default colors/danger-50
:pressed colors/danger-60
:disabled colors/danger-50}}
:positive {:icon-color colors/white
:icon-secondary-color colors/white-opa-70
:label-color colors/white
:background-color {:default colors/success-50
:pressed colors/success-60
:disabled colors/success-50-opa-30}}
:photo-bg {:icon-color colors/neutral-100
:icon-secondary-color colors/neutral-80-opa-40
:label-color colors/neutral-100
:background-color {:default colors/white-opa-40
:pressed colors/white-opa-50
:disabled colors/white-opa-40}}
:blur-bg {:icon-color colors/neutral-100
:icon-secondary-color colors/neutral-80-opa-40
:label-color colors/neutral-100
:background-color {:default colors/neutral-80-opa-5
:pressed colors/neutral-80-opa-10
:disabled colors/neutral-80-opa-5}}
:blurred {:icon-color colors/neutral-100
:icon-secondary-color colors/neutral-100
:icon-background-color {:default colors/neutral-20
:blurred colors/neutral-80-opa-10}
:label-color colors/neutral-100
:background-color {:default colors/neutral-10
:pressed colors/neutral-10
:disabled colors/neutral-10-opa-10-blur}
:blur-overlay-color colors/neutral-10-opa-40-blur
:blur-type :light}
:blur-bg-outline {:icon-color colors/neutral-100
:icon-secondary-color colors/neutral-80-opa-40
:label-color colors/neutral-100
:border-color {:default colors/neutral-80-opa-10
:pressed colors/neutral-80-opa-20
:disabled colors/neutral-80-opa-10}}
:shell {:icon-color colors/white
:label-color colors/white
:background-color {:default colors/neutral-95
:pressed colors/neutral-95
:disabled colors/neutral-95}}}
:dark
{:primary {:icon-color colors/white
:icon-secondary-color colors/white-opa-70
:label-color colors/white
:background-color {:default (colors/custom-color customization-color 60)
:pressed (colors/custom-color customization-color 50)
:disabled (colors/custom-color customization-color 60)}}
:secondary {:icon-color colors/primary-50
:label-color colors/primary-50
:background-color {:default colors/primary-50-opa-20
:pressed colors/primary-50-opa-30
:disabled colors/primary-50-opa-20}}
:grey {:icon-color colors/white
:icon-secondary-color colors/neutral-40
:label-color colors/white
:background-color {:default colors/neutral-90
:pressed colors/neutral-60
:disabled colors/neutral-90}}
:dark-grey {:icon-color colors/white
:icon-secondary-color colors/neutral-40
:label-color colors/white
:background-color {:default colors/neutral-70
:pressed colors/neutral-60
:disabled colors/neutral-70}}
:outline {:icon-color colors/neutral-40
:icon-secondary-color colors/neutral-40
:label-color colors/white
:border-color {:default colors/neutral-70
:pressed colors/neutral-60
:disabled colors/neutral-70}}
:ghost {:icon-color colors/neutral-40
:icon-secondary-color colors/neutral-40
:label-color colors/white
:background-color {:pressed colors/neutral-80}}
:danger {:icon-color colors/white
:icon-secondary-color colors/white-opa-70
:label-color colors/white
:background-color {:default colors/danger-60
:pressed colors/danger-50
:disabled colors/danger-60}}
:positive {:icon-color colors/white
:icon-secondary-color colors/white-opa-70
:label-color colors/white
:background-color {:default colors/success-60
:pressed colors/success-50
:disabled colors/success-60-opa-30}}
:photo-bg {:icon-color colors/white
:icon-secondary-color colors/neutral-30
:label-color colors/white
:background-color {:default colors/neutral-80-opa-40
:pressed colors/neutral-80-opa-50
:disabled colors/neutral-80-opa-40}}
:blur-bg {:icon-color colors/white
:icon-secondary-color colors/white-opa-70
:label-color colors/white
:background-color {:default colors/white-opa-5
:pressed colors/white-opa-10
:disabled colors/white-opa-5}}
:blurred {:icon-color colors/white
:icon-secondary-color colors/white
:icon-background-color {:default colors/neutral-80
:blurred colors/white-opa-10}
:label-color colors/white
:background-color {:default colors/neutral-90
:pressed colors/neutral-90
:disabled colors/neutral-90-opa-10-blur}
:blur-overlay-color colors/neutral-80-opa-40
:blur-type :dark}
:blur-bg-outline {:icon-color colors/white
:icon-secondary-color colors/white-opa-40
:label-color colors/white
:border-color {:default colors/white-opa-10
:pressed colors/white-opa-20
:disabled colors/white-opa-5}}
:shell {:icon-color colors/white
:label-color colors/white
:background-color {:default colors/neutral-95}}}})
(icon-style {:margin-left (or (get override-margins :left) 4)
:margin-right (or (get override-margins :right)
(if (= size 40) 12 8))
:icon-container-size icon-container-size
:icon-background-color icon-background-color
:icon-container-rounded? icon-container-rounded?
:icon-size icon-size}))
(defn shape-style-container
[type icon size]
[size border-radius]
{:height size
:border-radius (if (and icon (#{:primary :secondary :danger} type))
24
:border-radius (if border-radius
border-radius
(case size
56 12
40 12
32 10
24 8))})
8))})
(defn style-container
[{:keys [type size disabled background-color border-color icon above width before after blur-active?]}]
[{:keys [size disabled border-radius background-color border-color icon-only? icon-above width
icon-left icon-right]}]
(merge {:height size
:align-items :center
:justify-content :center
:flex-direction (if above :column :row)
:padding-horizontal (when-not (or icon before after)
:flex-direction (if icon-above :column :row)
:padding-horizontal (when-not (or icon-only? icon-left icon-right)
(case size
56 16
40 16
32 12
24 8))
:padding-left (when-not (or icon before)
8))
:padding-left (when-not (or icon-only? icon-left)
(case size
56 16
40 16
32 12
24 8))
:padding-right (when-not (or icon after)
8))
:padding-right (when-not (or icon-only? icon-right)
(case size
56 16
40 16
32 12
24 8))
:padding-top (when-not (or icon before after)
8))
:padding-top (when-not (or icon-only? icon-left icon-right)
(case size
56 0
40 9
32 5
24 3))
:padding-bottom (when-not (or icon before after)
3))
:padding-bottom (when-not (or icon-only? icon-left icon-right)
(case size
56 0
40 9
32 5
24 4))
:overflow :hidden}
(when (or (and (= type :blurred) (not blur-active?))
(not= type :blurred))
{:background-color background-color})
(shape-style-container type icon size)
4))
:overflow :hidden
:background-color background-color}
(shape-style-container size border-radius)
(when width
{:width width})
(when icon
(when icon-only?
{:width size})
(when border-color
{:border-color border-color

153
src/quo2/components/buttons/button/view.cljs
View File

@ -5,110 +5,116 @@
[react-native.core :as rn]
[react-native.blur :as blur]
[reagent.core :as reagent]
[quo2.components.buttons.button.style :as style]))
[quo2.components.buttons.button.style :as style]
[quo2.components.buttons.button.properties :as button-properties]
[quo2.foundations.customization-colors :as customization-colors]))
(defn- button-internal
"with label
[button opts \"label\"]
opts
{:type :primary/:secondary/:grey/:dark-grey/:outline/:ghost/
:danger/:photo-bg/:blur-bg/:blur-bg-outline/:shell/:community
:size 40 [default] /32/24
{on-press callback
on-long-press callback
disabled boolean
:type :primary/:positive:grey/:dark-grey/:outline/:ghost/
:danger/:black (TODO remove :photo-bg/:blur-bg/:blur-bg-outline/:shell/:community)
background :photo/:blur or nil
:size 40 [default] /32/24/56
:icon true/false
:community-color '#FFFFFF'
:community-text-color '#000000'
:above :icon-keyword
:before :icon-keyword
:after :icon-keyword}
:customization-color keyword or hexstring
:theme :light/:dark
only icon
[button {:icon true} :i/close-circle]"
[_ _]
(let [pressed-in (reagent/atom false)]
(let [pressed? (reagent/atom false)]
(fn
[{:keys [on-press disabled type size before after above icon-secondary-no-color
width customization-color theme override-background-color pressed
on-long-press accessibility-label icon icon-no-color style inner-style test-ID
blur-active? override-before-margins override-after-margins icon-size icon-container-size
icon-container-rounded?]
[{:keys [on-press on-long-press disabled type background size before after above
width customization-color theme override-background-color
accessibility-label icon style inner-style]
:or {type :primary
size 40
customization-color :primary
blur-active? true}}
customization-color (cond (= type :primary) :blue
(= type :positive) :success
(= type :danger) :danger
:else nil)}}
children]
(let [{:keys [icon-color icon-secondary-color background-color label-color border-color blur-type
blur-overlay-color icon-background-color]}
(get-in (style/themes customization-color)
[theme type])
state (cond disabled :disabled
(or @pressed-in pressed) :pressed
:else :default)
blur-state (if blur-active? :blurred :default)
icon-size (or icon-size (when (= 24 size) 12))
(let [icon-only? icon ;; TODO Update external api to icon-only? -
;; https://github.com/status-im/status-mobile/issues/16535
container-style style ;; TODO Update external api to container-style and remove prop width
icon-left before ;; TODO Update external api to icon-left
icon-right after ;; TODO Update external api to icon-right
icon-above above ;; TODO Update external api to icon-above
{:keys [icon-color icon-secondary-color background-color label-color border-color blur-type
blur-overlay-color icon-background-color border-radius]}
(button-properties/get-values {:customization-color customization-color
:background background
:type type
:theme theme
:pressed? @pressed?
:icon-only? icon-only?})
icon-size (when (= 24 size) 12)
icon-secondary-color (or icon-secondary-color icon-color)]
[rn/touchable-without-feedback
(merge {:test-ID test-ID
:disabled disabled
:accessibility-label accessibility-label
:on-press-in #(reset! pressed-in true)
:on-press-out #(reset! pressed-in nil)}
(when on-press
{:on-press on-press})
(when on-long-press
{:on-long-press on-long-press}))
{:disabled disabled
:accessibility-label accessibility-label
:on-press-in #(reset! pressed? true)
:on-press-out #(reset! pressed? nil)
:on-press on-press
:on-long-press on-long-press}
[rn/view
{:style (merge
(style/shape-style-container type icon size)
(style/shape-style-container size border-radius)
{:width width}
style)}
container-style)}
[rn/view
{:style (merge
(style/style-container {:type type
:size size
(style/style-container {:size size
:disabled disabled
:border-radius border-radius
:background-color
(or override-background-color (get background-color state))
:border-color
(get border-color state)
:icon icon
:above above
(or override-background-color background-color)
:border-color border-color
:icon-only? icon-only?
:icon-above icon-above
:width width
:before before
:after after
:blur-active? blur-active?})
(when (= state :pressed) {:opacity 0.9})
:icon-left icon-left
:icon-right icon-right})
inner-style)}
(when (and (= type :blurred)
blur-active?)
(when customization-color
[customization-colors/overlay
{:customization-color customization-color
:theme theme
:pressed? @pressed?}])
(when (= background :photo)
[blur/view
{:blur-radius 20
:blur-type blur-type
:overlay-color blur-overlay-color
:style style/blur-view}])
(when above
(when icon-above
[rn/view
[quo2.icons/icon above
[quo2.icons/icon icon-above
{:container-style {:margin-bottom 2}
:color icon-secondary-color
:size icon-size}]])
(when before
(when icon-left
[rn/view
{:style (style/before-icon-style
{:override-margins override-before-margins
:size size
:icon-container-size icon-container-size
:icon-background-color (get icon-background-color blur-state)
:icon-container-rounded? icon-container-rounded?
:icon-size icon-size})}
[quo2.icons/icon before
{:style (style/icon-left-icon-style
{:size size
:icon-background-color icon-background-color
:icon-size icon-size})}
[quo2.icons/icon icon-left
{:color icon-secondary-color
:size icon-size}]])
[rn/view
(cond
(or icon icon-no-color)
icon-only?
[quo2.icons/icon children
{:color icon-color
:no-color icon-no-color
:size icon-size}]
{:color icon-color
:size icon-size}]
(string? children)
[text/text
@ -116,23 +122,18 @@
:weight :medium
:number-of-lines 1
:style {:color label-color}}
children]
(vector? children)
children)]
(when after
(when icon-right
[rn/view
{:style (style/after-icon-style
{:override-margins override-after-margins
:size size
:icon-container-size icon-container-size
:icon-background-color (get icon-background-color blur-state)
:icon-container-rounded? icon-container-rounded?
:icon-size icon-size})}
[quo2.icons/icon after
{:no-color icon-secondary-no-color
:color icon-secondary-color
:size icon-size}]])]]]))))
{:style (style/icon-right-icon-style
{:size size
:icon-background-color icon-background-color
:icon-size icon-size})}
[quo2.icons/icon icon-right
{:color icon-secondary-color
:size icon-size}]])]]]))))
(def button (theme/with-theme button-internal))

6
src/quo2/components/dropdowns/dropdown.cljs
View File

@ -1,10 +1,12 @@
(ns quo2.components.dropdowns.dropdown
(:require [quo2.components.buttons.button.view :as button]))
(:require [quo2.components.dropdowns.old-button-view :as old-button]))
(defn dropdown
[_ _]
(fn [{:keys [on-change selected] :as opts} children]
[button/button
;TODO: Dropdown needs to be implemented/refactored to be its own component -
;https://github.com/status-im/status-mobile/issues/16456
[old-button/button
(merge
opts
{:after (if selected :i/chevron-top :i/chevron-down)

264
src/quo2/components/dropdowns/old_button_style.cljs Normal file
View File

@ -0,0 +1,264 @@
(ns quo2.components.dropdowns.old-button-style
(:require [quo2.foundations.colors :as colors]))
(def blur-view
{:position :absolute
:top 0
:left 0
:right 0
:bottom 0})
(defn before-icon-style
[{:keys [override-margins size icon-container-size icon-background-color icon-container-rounded?
icon-size]}]
(merge
{:margin-left (or (get override-margins :left)
(if (= size 40) 12 8))
:margin-right (or (get override-margins :right) 4)
:align-items :center
:justify-content :center}
(when icon-container-size
{:width icon-container-size
:height icon-container-size})
(when icon-background-color
{:background-color icon-background-color})
(when icon-container-rounded?
{:border-radius (/ (or icon-container-size icon-size) 2)})))
(defn after-icon-style
[{:keys [override-margins size icon-container-size icon-background-color icon-container-rounded?
icon-size]}]
(merge
{:margin-left (or (get override-margins :left) 4)
:margin-right (or (get override-margins :right)
(if (= size 40) 12 8))
:align-items :center
:justify-content :center}
(when icon-container-size
{:width icon-container-size
:height icon-container-size})
(when icon-background-color
{:background-color icon-background-color})
(when icon-container-rounded?
{:border-radius (/ (or icon-container-size icon-size) 2)})))
(defn themes
[customization-color]
{:light
{:primary {:icon-color colors/white
:icon-secondary-color colors/white-opa-70
:label-color colors/white
:background-color {:default (colors/custom-color customization-color 50)
:pressed (colors/custom-color customization-color 60)
:disabled (colors/custom-color customization-color 50)}}
:secondary {:icon-color colors/primary-50
:label-color colors/primary-50
:background-color {:default colors/primary-50-opa-20
:pressed colors/primary-50-opa-40
:disabled colors/primary-50-opa-20}}
:grey {:icon-color colors/neutral-100
:icon-secondary-color colors/neutral-50
:label-color colors/neutral-100
:background-color {:default colors/neutral-10
:pressed colors/neutral-20
:disabled colors/neutral-10}}
:dark-grey {:icon-color colors/neutral-100
:icon-secondary-color colors/neutral-50
:label-color colors/neutral-100
:background-color {:default colors/neutral-20
:pressed colors/neutral-30
:disabled colors/neutral-20}}
:outline {:icon-color colors/neutral-50
:icon-secondary-color colors/neutral-50
:label-color colors/neutral-100
:border-color {:default colors/neutral-30
:pressed colors/neutral-40
:disabled colors/neutral-30}}
:ghost {:icon-color colors/neutral-50
:icon-secondary-color colors/neutral-50
:label-color colors/neutral-100
:background-color {:pressed colors/neutral-10}}
:danger {:icon-color colors/white
:icon-secondary-color colors/white-opa-70
:label-color colors/white
:background-color {:default colors/danger-50
:pressed colors/danger-60
:disabled colors/danger-50}}
:positive {:icon-color colors/white
:icon-secondary-color colors/white-opa-70
:label-color colors/white
:background-color {:default colors/success-50
:pressed colors/success-60
:disabled colors/success-50-opa-30}}
:photo-bg {:icon-color colors/neutral-100
:icon-secondary-color colors/neutral-80-opa-40
:label-color colors/neutral-100
:background-color {:default colors/white-opa-40
:pressed colors/white-opa-50
:disabled colors/white-opa-40}}
:blur-bg {:icon-color colors/neutral-100
:icon-secondary-color colors/neutral-80-opa-40
:label-color colors/neutral-100
:background-color {:default colors/neutral-80-opa-5
:pressed colors/neutral-80-opa-10
:disabled colors/neutral-80-opa-5}}
:blurred {:icon-color colors/neutral-100
:icon-secondary-color colors/neutral-100
:icon-background-color {:default colors/neutral-20
:blurred colors/neutral-80-opa-10}
:label-color colors/neutral-100
:background-color {:default colors/neutral-10
:pressed colors/neutral-10
:disabled colors/neutral-10-opa-10-blur}
:blur-overlay-color colors/neutral-10-opa-40-blur
:blur-type :light}
:blur-bg-outline {:icon-color colors/neutral-100
:icon-secondary-color colors/neutral-80-opa-40
:label-color colors/neutral-100
:border-color {:default colors/neutral-80-opa-10
:pressed colors/neutral-80-opa-20
:disabled colors/neutral-80-opa-10}}
:shell {:icon-color colors/white
:label-color colors/white
:background-color {:default colors/neutral-95
:pressed colors/neutral-95
:disabled colors/neutral-95}}}
:dark
{:primary {:icon-color colors/white
:icon-secondary-color colors/white-opa-70
:label-color colors/white
:background-color {:default (colors/custom-color customization-color 60)
:pressed (colors/custom-color customization-color 50)
:disabled (colors/custom-color customization-color 60)}}
:secondary {:icon-color colors/primary-50
:label-color colors/primary-50
:background-color {:default colors/primary-50-opa-20
:pressed colors/primary-50-opa-30
:disabled colors/primary-50-opa-20}}
:grey {:icon-color colors/white
:icon-secondary-color colors/neutral-40
:label-color colors/white
:background-color {:default colors/neutral-90
:pressed colors/neutral-60
:disabled colors/neutral-90}}
:dark-grey {:icon-color colors/white
:icon-secondary-color colors/neutral-40
:label-color colors/white
:background-color {:default colors/neutral-70
:pressed colors/neutral-60
:disabled colors/neutral-70}}
:outline {:icon-color colors/neutral-40
:icon-secondary-color colors/neutral-40
:label-color colors/white
:border-color {:default colors/neutral-70
:pressed colors/neutral-60
:disabled colors/neutral-70}}
:ghost {:icon-color colors/neutral-40
:icon-secondary-color colors/neutral-40
:label-color colors/white
:background-color {:pressed colors/neutral-80}}
:danger {:icon-color colors/white
:icon-secondary-color colors/white-opa-70
:label-color colors/white
:background-color {:default colors/danger-60
:pressed colors/danger-50
:disabled colors/danger-60}}
:positive {:icon-color colors/white
:icon-secondary-color colors/white-opa-70
:label-color colors/white
:background-color {:default colors/success-60
:pressed colors/success-50
:disabled colors/success-60-opa-30}}
:photo-bg {:icon-color colors/white
:icon-secondary-color colors/neutral-30
:label-color colors/white
:background-color {:default colors/neutral-80-opa-40
:pressed colors/neutral-80-opa-50
:disabled colors/neutral-80-opa-40}}
:blur-bg {:icon-color colors/white
:icon-secondary-color colors/white-opa-70
:label-color colors/white
:background-color {:default colors/white-opa-5
:pressed colors/white-opa-10
:disabled colors/white-opa-5}}
:blurred {:icon-color colors/white
:icon-secondary-color colors/white
:icon-background-color {:default colors/neutral-80
:blurred colors/white-opa-10}
:label-color colors/white
:background-color {:default colors/neutral-90
:pressed colors/neutral-90
:disabled colors/neutral-90-opa-10-blur}
:blur-overlay-color colors/neutral-80-opa-40
:blur-type :dark}
:blur-bg-outline {:icon-color colors/white
:icon-secondary-color colors/white-opa-40
:label-color colors/white
:border-color {:default colors/white-opa-10
:pressed colors/white-opa-20
:disabled colors/white-opa-5}}
:shell {:icon-color colors/white
:label-color colors/white
:background-color {:default colors/neutral-95}}}})
(defn shape-style-container
[type icon size]
{:height size
:border-radius (if (and icon (#{:primary :secondary :danger} type))
24
(case size
56 12
40 12
32 10
24 8))})
(defn style-container
[{:keys [type size disabled background-color border-color icon above width before after blur-active?]}]
(merge {:height size
:align-items :center
:justify-content :center
:flex-direction (if above :column :row)
:padding-horizontal (when-not (or icon before after)
(case size
56 16
40 16
32 12
24 8))
:padding-left (when-not (or icon before)
(case size
56 16
40 16
32 12
24 8))
:padding-right (when-not (or icon after)
(case size
56 16
40 16
32 12
24 8))
:padding-top (when-not (or icon before after)
(case size
56 0
40 9
32 5
24 3))
:padding-bottom (when-not (or icon before after)
(case size
56 0
40 9
32 5
24 4))
:overflow :hidden}
(when (or (and (= type :blurred) (not blur-active?))
(not= type :blurred))
{:background-color background-color})
(shape-style-container type icon size)
(when width
{:width width})
(when icon
{:width size})
(when border-color
{:border-color border-color
:border-width 1})
(when disabled
{:opacity 0.3})))

138
src/quo2/components/dropdowns/old_button_view.cljs Normal file
View File

@ -0,0 +1,138 @@
(ns quo2.components.dropdowns.old-button-view
(:require [quo2.components.icon :as quo2.icons]
[quo2.components.markdown.text :as text]
[quo2.theme :as theme]
[react-native.core :as rn]
[react-native.blur :as blur]
[reagent.core :as reagent]
[quo2.components.dropdowns.old-button-style :as style]))
(defn- button-internal
"with label
[button opts \"label\"]
opts
{:type :primary/:secondary/:grey/:dark-grey/:outline/:ghost/
:danger/:photo-bg/:blur-bg/:blur-bg-outline/:shell/:community
:size 40 [default] /32/24
:icon true/false
:community-color '#FFFFFF'
:community-text-color '#000000'
:before :icon-keyword
:after :icon-keyword}
only icon
[button {:icon true} :i/close-circle]"
[_ _]
(let [pressed-in (reagent/atom false)]
(fn
[{:keys [on-press disabled type size before after above icon-secondary-no-color
width customization-color theme override-background-color pressed
on-long-press accessibility-label icon icon-no-color style inner-style test-ID
blur-active? override-before-margins override-after-margins icon-size icon-container-size
icon-container-rounded?]
:or {type :primary
size 40
customization-color :primary
blur-active? true}}
children]
(let [{:keys [icon-color icon-secondary-color background-color label-color border-color blur-type
blur-overlay-color icon-background-color]}
(get-in (style/themes customization-color)
[theme type])
state (cond disabled :disabled
(or @pressed-in pressed) :pressed
:else :default)
blur-state (if blur-active? :blurred :default)
icon-size (or icon-size (when (= 24 size) 12))
icon-secondary-color (or icon-secondary-color icon-color)]
[rn/touchable-without-feedback
(merge {:test-ID test-ID
:disabled disabled
:accessibility-label accessibility-label
:on-press-in #(reset! pressed-in true)
:on-press-out #(reset! pressed-in nil)}
(when on-press
{:on-press on-press})
(when on-long-press
{:on-long-press on-long-press}))
[rn/view
{:style (merge
(style/shape-style-container type icon size)
{:width width}
style)}
[rn/view
{:style (merge
(style/style-container {:type type
:size size
:disabled disabled
:background-color
(or override-background-color (get background-color state))
:border-color
(get border-color state)
:icon icon
:above above
:width width
:before before
:after after
:blur-active? blur-active?})
(when (= state :pressed) {:opacity 0.9})
inner-style)}
(when (and (= type :blurred)
blur-active?)
[blur/view
{:blur-radius 20
:blur-type blur-type
:overlay-color blur-overlay-color
:style style/blur-view}])
(when above
[rn/view
[quo2.icons/icon above
{:container-style {:margin-bottom 2}
:color icon-secondary-color
:size icon-size}]])
(when before
[rn/view
{:style (style/before-icon-style
{:override-margins override-before-margins
:size size
:icon-container-size icon-container-size
:icon-background-color (get icon-background-color blur-state)
:icon-container-rounded? icon-container-rounded?
:icon-size icon-size})}
[quo2.icons/icon before
{:color icon-secondary-color
:size icon-size}]])
[rn/view
(cond
(or icon icon-no-color)
[quo2.icons/icon children
{:color icon-color
:no-color icon-no-color
:size icon-size}]
(string? children)
[text/text
{:size (when (#{56 24} size) :paragraph-2)
:weight :medium
:number-of-lines 1
:style {:color label-color}}
children]
(vector? children)
children)]
(when after
[rn/view
{:style (style/after-icon-style
{:override-margins override-after-margins
:size size
:icon-container-size icon-container-size
:icon-background-color (get icon-background-color blur-state)
:icon-container-rounded? icon-container-rounded?
:icon-size icon-size})}
[quo2.icons/icon after
{:no-color icon-secondary-no-color
:color icon-secondary-color
:size icon-size}]])]]]))))
(def button (theme/with-theme button-internal))

4
src/quo2/components/empty_state/empty_state/styles.cljs
View File

@ -24,7 +24,3 @@
{:color colors/white}))
(def button-container {:margin-top 20})
(defn upper-button-color
[customization-color]
(colors/custom-color-by-theme customization-color 50 60))

8
src/quo2/components/empty_state/empty_state/view.cljs
View File

@ -33,10 +33,10 @@
upper-button-on-press :on-press} upper-button]
[rn/view {:style styles/button-container}
[button/button
{:type :primary
:size 32
:override-background-color (styles/upper-button-color customization-color)
:on-press upper-button-on-press}
{:type :primary
:size 32
:customization-color customization-color
:on-press upper-button-on-press}
upper-button-text]
(when-let [{lower-button-text :text
lower-button-on-press :on-press} lower-button]

21
src/quo2/components/inputs/profile_input/view.cljs
View File

@ -4,7 +4,6 @@
[quo2.components.avatars.user-avatar.view :as user-avatar]
[quo2.components.inputs.profile-input.style :as style]
[quo2.components.inputs.title-input.view :as title-input]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[react-native.hole-view :as hole-view]))
@ -35,16 +34,16 @@
:status-indicator? false
:size :medium)]]
[buttons/button
{:accessibility-label :select-profile-picture-button
:type :grey
:override-background-color (colors/alpha colors/white 0.05)
:on-press on-press
:icon-size 20
:width 24
:size 24
:icon :i/camera
:style style/button
:inner-style style/button-inner} :i/camera]]
{:accessibility-label :select-profile-picture-button
:type :grey
:background :blur
:on-press on-press
:icon-size 20
:width 24
:size 24
:icon :i/camera
:style style/button
:inner-style style/button-inner} :i/camera]]
[rn/view {:style style/input-container}
[title-input/title-input
(merge title-input-props

3
src/quo2/components/profile/profile_card/view.cljs
View File

@ -73,7 +73,8 @@
(when show-options-button?
[button/button
{:size 32
:type :blur-bg
:type :grey
:background :blur
:icon true
:style style/option-button
:on-press on-options-press

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

@ -244,11 +244,13 @@
([color suffix]
(custom-color color suffix nil))
([color suffix opacity]
(let [color-keyword (keyword color)
(let [hex? (not (keyword? color))
color-keyword (keyword color)
base-color (get-in colors-map
[color-keyword suffix]
color)]
(if opacity (alpha base-color (/ opacity 100)) base-color))))))
[color-keyword suffix])]
(if hex?
color
(if opacity (alpha base-color (/ opacity 100)) base-color)))))))
(defn custom-color-by-theme
"(custom-color-by-theme color suffix-light suffix-dark opacity-light opacity-dark)

20
src/quo2/foundations/customization_colors.cljs Normal file
View File

@ -0,0 +1,20 @@
(ns quo2.foundations.customization-colors
(:require [quo2.foundations.colors :as colors]
[react-native.core :as rn]))
(defn get-overlay-color
[theme pressed? customization-color]
(let [community-color (string? customization-color)]
(if (or community-color (= theme :light))
(colors/alpha colors/black (if pressed? 0.2 0))
(colors/alpha colors/black (if pressed? 0 0.2)))))
(defn overlay
[{:keys [theme pressed? customization-color]}]
[rn/view
{:position :absolute
:top 0
:left 0
:right 0
:bottom 0
:background-color (get-overlay-color theme pressed? customization-color)}])

4
src/status_im2/contexts/chat/photo_selector/view.cljs
View File

@ -56,11 +56,11 @@
(when (and (not album?) (seq @selected))
[rn/view {:style style/clear-container}
[quo/button
{:type :blurred
{:type :grey
:size 32
:accessibility-label :clear
:on-press #(reset! selected [])
:blur-active? blur-active?}
:background (when blur-active? :photo)}
(i18n/label :t/clear)]]))
(defn remove-selected

24
src/status_im2/contexts/communities/overview/view.cljs
View File

@ -138,7 +138,7 @@
(defn token-gates
[{:keys [id]}]
(rf/dispatch [:communities/check-permissions-to-join-community id])
(fn [{:keys [id community-color]}]
(fn [{:keys [id color]}]
(let [{:keys [can-request-access?
number-of-hold-tokens tokens]} (rf/sub [:community/token-gated-overview id])]
[rn/view {:style (style/token-gated-container)}
@ -162,16 +162,16 @@
{:tokens tokens
:padding? true}]
[quo/button
{:on-press #(join-gated-community id)
:accessibility-label :join-community-button
:override-background-color community-color
:style {:margin-horizontal 12 :margin-top 12 :margin-bottom 12}
:disabled (not can-request-access?)
:before (if can-request-access? :i/unlocked :i/locked)}
{:on-press #(join-gated-community id)
:accessibility-label :join-community-button
:customization-color color
:style {:margin-horizontal 12 :margin-top 12 :margin-bottom 12}
:disabled (not can-request-access?)
:before (if can-request-access? :i/unlocked :i/locked)}
(i18n/label :t/join-open-community)]])))
(defn join-community
[{:keys [joined can-join? community-color permissions token-permissions] :as community}
[{:keys [joined can-join? color permissions token-permissions] :as community}
pending?]
(let [access-type (get-access-type (:access permissions))
unknown-access? (= access-type :unknown-access)
@ -183,10 +183,10 @@
(if token-permissions
[token-gates community]
[quo/button
{:on-press #(rf/dispatch [:open-modal :community-requests-to-join community])
:accessibility-label :show-request-to-join-screen-button
:override-background-color community-color
:before :i/communities}
{:on-press #(rf/dispatch [:open-modal :community-requests-to-join community])
:accessibility-label :show-request-to-join-screen-button
:customization-color color
:before :i/communities}
(request-to-join-text is-open?)]))
(when (and (not (or joined pending? token-permissions)) (not (or is-open? node-offline?)))

11
src/status_im2/contexts/onboarding/create_password/view.cljs
View File

@ -2,7 +2,6 @@
(:require
[oops.core :refer [ocall]]
[quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[react-native.safe-area :as safe-area]
[reagent.core :as reagent]
@ -177,11 +176,11 @@
[rn/view {:style style/button-container}
[quo/button
{:disabled (not meet-requirements?)
:override-background-color (colors/custom-color user-color 60)
:on-press #(rf/dispatch
[:onboarding-2/password-set
(security/mask-data @password)])}
{:disabled (not meet-requirements?)
:customization-color user-color
:on-press #(rf/dispatch
[:onboarding-2/password-set
(security/mask-data @password)])}
(i18n/label :t/password-creation-confirm)]]]]))))
(defn create-password-doc

20
src/status_im2/contexts/onboarding/create_profile/view.cljs
View File

@ -161,16 +161,16 @@
:pointer-events :box-none}
[button-container @keyboard-shown?
[quo/button
{:accessibility-label :submit-create-profile-button
:type :primary
:override-background-color (colors/custom-color @custom-color 60)
:on-press (fn []
(rf/dispatch [:onboarding-2/profile-data-set
{:image-path @profile-pic
:display-name @full-name
:color @custom-color}]))
:style style/continue-button
:disabled (or (not valid-name?) (not (seq @full-name)))}
{:accessibility-label :submit-create-profile-button
:type :primary
:customization-color @custom-color
:on-press (fn []
(rf/dispatch [:onboarding-2/profile-data-set
{:image-path @profile-pic
:display-name @full-name
:color @custom-color}]))
:style style/continue-button
:disabled (or (not valid-name?) (not (seq @full-name)))}
(i18n/label :t/continue)]]]])
(finally
(oops/ocall show-listener "remove")

18
src/status_im2/contexts/onboarding/enable_biometrics/view.cljs
View File

@ -1,6 +1,5 @@
(ns status-im2.contexts.onboarding.enable-biometrics.view
(:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[react-native.safe-area :as safe-area]
[status-im2.contexts.onboarding.enable-biometrics.style :as style]
@ -29,16 +28,17 @@
profile-color (:color (rf/sub [:onboarding-2/profile]))]
[rn/view {:style (style/buttons insets)}
[quo/button
{:accessibility-label :enable-biometrics-button
:on-press #(rf/dispatch [:onboarding-2/enable-biometrics])
:before :i/face-id
:override-background-color (colors/custom-color profile-color 50)}
{:accessibility-label :enable-biometrics-button
:on-press #(rf/dispatch [:onboarding-2/enable-biometrics])
:before :i/face-id
:customization-color profile-color}
(i18n/label :t/biometric-enable-button {:bio-type-label bio-type-label})]
[quo/button
{:accessibility-label :maybe-later-button
:on-press #(rf/dispatch [:onboarding-2/create-account-and-login])
:override-background-color colors/white-opa-5
:style {:margin-top 12}}
{:accessibility-label :maybe-later-button
:background :blur
:type :grey
:on-press #(rf/dispatch [:onboarding-2/create-account-and-login])
:style {:margin-top 12}}
(i18n/label :t/maybe-later)]]))
(defn enable-biometrics-parallax

30
src/status_im2/contexts/onboarding/enable_notifications/view.cljs
View File

@ -1,7 +1,6 @@
(ns status-im2.contexts.onboarding.enable-notifications.view
(:require
[quo2.core :as quo]
[quo2.foundations.colors :as colors]
[utils.i18n :as i18n]
[utils.re-frame :as rf]
[react-native.core :as rn]
@ -27,22 +26,23 @@
(let [profile-color (:color (rf/sub [:onboarding-2/profile]))]
[rn/view {:style (style/buttons insets)}
[quo/button
{:on-press (fn []
(shell.utils/change-selected-stack-id :communities-stack true nil)
(rf/dispatch [::notifications/switch true platform/ios?])
(rf/dispatch [:init-root :welcome]))
:type :primary
:before :i/notifications
:accessibility-label :enable-notifications-button
:override-background-color (colors/custom-color profile-color 60)}
{:on-press (fn []
(shell.utils/change-selected-stack-id :communities-stack true nil)
(rf/dispatch [::notifications/switch true platform/ios?])
(rf/dispatch [:init-root :welcome]))
:type :primary
:before :i/notifications
:accessibility-label :enable-notifications-button
:customization-color profile-color}
(i18n/label :t/intro-wizard-title6)]
[quo/button
{:on-press (fn []
(shell.utils/change-selected-stack-id :communities-stack true nil)
(rf/dispatch [:init-root :welcome]))
:accessibility-label :enable-notifications-later-button
:override-background-color colors/white-opa-5
:style {:margin-top 12}}
{:on-press (fn []
(shell.utils/change-selected-stack-id :communities-stack true nil)
(rf/dispatch [:init-root :welcome]))
:accessibility-label :enable-notifications-later-button
:type :grey
:background :blur
:style {:margin-top 12}}
(i18n/label :t/maybe-later)]]))
(defn enable-notifications

1
src/status_im2/contexts/onboarding/enter_seed_phrase/view.cljs
View File

@ -75,6 +75,7 @@
seed-phrase]]
[quo/button
{:style (style/continue-button keyboard-shown?)
:type :primary
:disabled button-disabled?
:on-press on-submit}
(i18n/label :t/continue)]]))

10
src/status_im2/contexts/onboarding/identifiers/view.cljs
View File

@ -4,7 +4,6 @@
[utils.i18n :as i18n]
[utils.re-frame :as rf]
[quo2.core :as quo]
[quo2.foundations.colors :as colors]
[status-im2.contexts.onboarding.identifiers.profile-card.view :as profile-card]
[status-im2.contexts.onboarding.identifiers.style :as style]
[status-im2.contexts.onboarding.common.background.view :as background]
@ -57,10 +56,11 @@
:customization-color color
:progress progress}]
[quo/button
{:accessibility-label :skip-identifiers
:on-press #(rf/dispatch [:navigate-to :enable-notifications])
:override-background-color colors/white-opa-5
:style style/button}
{:accessibility-label :skip-identifiers
:type :grey
:background :blur
:on-press #(rf/dispatch [:navigate-to :enable-notifications])
:style style/button}
(i18n/label :t/skip)]]]]))
(defn view [props] [:f> f-view props])

15
src/status_im2/contexts/onboarding/syncing/progress/view.cljs
View File

@ -1,7 +1,6 @@
(ns status-im2.contexts.onboarding.syncing.progress.view
(:require [quo2.core :as quo]
[utils.i18n :as i18n]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[utils.re-frame :as rf]
[status-im2.contexts.onboarding.syncing.progress.style :as style]
@ -32,13 +31,13 @@
(defn try-again-button
[profile-color in-onboarding?]
[quo/button
{:on-press (fn []
(rf/dispatch [:syncing/clear-states])
(rf/dispatch [:navigate-back-to
(if in-onboarding? :sign-in-intro :sign-in)]))
:accessibility-label :try-again-later-button
:override-background-color (colors/custom-color profile-color 60)
:style style/try-again-button}
{:on-press (fn []
(rf/dispatch [:syncing/clear-states])
(rf/dispatch [:navigate-back-to
(if in-onboarding? :sign-in-intro :sign-in)]))
:accessibility-label :try-again-later-button
:customization-color profile-color
:style style/try-again-button}
(i18n/label :t/try-again)])
(defn view

8
src/status_im2/contexts/onboarding/syncing/results/view.cljs
View File

@ -47,10 +47,10 @@
[]
(let [profile-color (:color (rf/sub [:onboarding-2/profile]))]
[quo/button
{:on-press #(rf/dispatch [:init-root :enable-notifications])
:accessibility-label :continue-button
:override-background-color (colors/custom-color profile-color 60)
:style style/continue-button}
{:on-press #(rf/dispatch [:init-root :enable-notifications])
:accessibility-label :continue-button
:customization0color profile-color
:style style/continue-button}
(i18n/label :t/continue)]))
(defn view

18
src/status_im2/contexts/onboarding/welcome/view.cljs
View File

@ -23,7 +23,6 @@
:subtitle (i18n/label :t/welcome-to-web3-sub-title)
:subtitle-accessibility-label :welcome-sub-title}]))
(defn navigation-bar
[root]
[quo/page-nav
@ -32,8 +31,11 @@
:align-mid? false
:page-nav-color :transparent
:left-section {:icon :i/arrow-left
;TODO this is wrong - page nav needs updating
;https://github.com/status-im/status-mobile/issues/16535
; should be type:grey, and page nav can use background instead.
:icon-background-color colors/white-opa-5
:type :shell
:type :grey
:on-press #(rf/dispatch [:init-root root])}}])
(defn dispatch-visibility-status-update
@ -57,10 +59,10 @@
"Illustration here"]]
[rn/view {:style (style/buttons insets)}
[quo/button
{:on-press (fn []
(rf/dispatch [:init-root :shell-stack])
(rf/dispatch [:universal-links/process-stored-event]))
:type :primary
:accessibility-label :welcome-button
:override-background-color (colors/custom-color profile-color 60)}
{:on-press (fn []
(rf/dispatch [:init-root :shell-stack])
(rf/dispatch [:universal-links/process-stored-event]))
:type :primary
:accessibility-label :welcome-button
:customization-color profile-color}
(i18n/label :t/start-using-status)]]]))

7
src/status_im2/contexts/profile/profiles/view.cljs
View File

@ -111,6 +111,7 @@
(i18n/label :t/profiles-on-device)]
[quo/button
{:type :primary
:customization-color :blue
:size 32
:icon true
:on-press show-new-account-options
@ -193,12 +194,11 @@
:keyboardVerticalOffset (- (safe-area/get-bottom))}
[quo/button
{:size 32
:type :blur-bg
:type :grey
:background :blur
:icon true
:on-press set-show-profiles
:disabled processing
:override-theme :dark
:width 32
:accessibility-label :show-profiles
:style style/multi-profile-button}
:i/multi-profile]
@ -250,7 +250,6 @@
:type :primary
:customization-color (or customization-color :primary)
:accessibility-label :login-button
:override-theme :dark
:before :i/unlocked
:disabled (or (not sign-in-enabled?) processing)
:on-press login-multiaccount

48
src/status_im2/contexts/quo_preview/buttons/button.cljs
View File

@ -11,8 +11,8 @@
:type :select
:options [{:key :primary
:value "Primary"}
{:key :secondary
:value "Secondary"}
{:key :positive
:value "Positive"}
{:key :grey
:value "Grey"}
{:key :dark-grey
@ -23,8 +23,8 @@
:value "Ghost"}
{:key :danger
:value "Danger"}
{:key :positive
:value "Positive"}]}
{:key :black
:value "Black"}]}
{:label "Size:"
:key :size
:type :select
@ -36,6 +36,13 @@
:value "32"}
{:key 24
:value "24"}]}
{:label "Background:"
:key :background
:type :select
:options [{:key :blur
:value "Blur"}
{:key :photo
:value "Photo"}]}
{:label "Icon:"
:key :icon
:type :boolean}
@ -53,17 +60,26 @@
:type :boolean}
{:label "Label"
:key :label
:type :text}])
:type :text}
{:label "Customization color:"
:key :customization-color
:type :select
:options (map (fn [color]
(let [k (get color :name)]
{:key k :value k}))
(quo/picker-colors))}])
(defn cool-preview
[]
(let [state (reagent/atom {:label "Press Me"
:size 40})
label (reagent/cursor state [:label])
before (reagent/cursor state [:before])
after (reagent/cursor state [:after])
above (reagent/cursor state [:above])
icon (reagent/cursor state [:icon])]
(let [state (reagent/atom {:label "Press Me"
:size 40})
label (reagent/cursor state [:label])
before (reagent/cursor state [:before])
after (reagent/cursor state [:after])
above (reagent/cursor state [:above])
icon (reagent/cursor state [:icon])
type (reagent/cursor state [:type])
customization-color (reagent/cursor state [:customization-color])]
(fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150}
@ -75,10 +91,14 @@
:justify-content :center}
[quo/button
(merge (dissoc @state
:customization-color
:theme
:before
:after)
{:on-press #(println "Hello world!")}
{:background (:background @state)
:on-press #(println "Hello world!")}
(when (and (= type :primary) customization-color)
(:customization-color customization-color))
(when @above
{:above :i/placeholder})
(when @before
@ -90,7 +110,7 @@
(defn preview-button
[]
[rn/view
{:background-color (colors/theme-colors colors/white colors/neutral-90)
{:background-color (colors/theme-colors colors/white colors/neutral-95)
:flex 1}
[rn/flat-list
{:flex 1

14
src/status_im2/contexts/syncing/scan_sync_code/view.cljs
View File

@ -424,13 +424,13 @@
(when show-bottom-view? [bottom-view insets bottom-view-translate-y])
(when (and (or (not animated?) @render-camera?) show-camera?)
[quo/button
{:icon true
:type :blur-bg
:size style/flash-button-size
:accessibility-label :camera-flash
:override-background-color colors/neutral-80-opa-40
:style (style/camera-flash-button @qr-view-finder)
:on-press #(swap! torch? not)}
{:icon true
:type :grey
:background :blur
:size style/flash-button-size
:accessibility-label :camera-flash
:style (style/camera-flash-button @qr-view-finder)
:on-press #(swap! torch? not)}
flashlight-icon])]]))))
(defn view

26
src/status_im2/contexts/syncing/setup_syncing/view.cljs
View File

@ -38,7 +38,8 @@
(defn view
[]
(let [valid-for-ms (reagent/atom code-valid-for-ms)
(let [profile-color (:color (rf/sub [:onboarding-2/profile]))
valid-for-ms (reagent/atom code-valid-for-ms)
code (reagent/atom nil)
delay (reagent/atom nil)
timestamp (reagent/atom nil)
@ -83,16 +84,19 @@
:width "100%"}])
(when-not (sync-utils/valid-connection-string? @code)
[quo/button
{:on-press (fn []
;TODO https://github.com/status-im/status-mobile/issues/15570
;remove old bottom sheet when Authentication process design is created.
(rf/dispatch [:bottom-sheet/hide-old])
(rf/dispatch [:bottom-sheet/show-sheet-old
{:content (fn []
[enter-password/sheet set-code])}]))
:size 40
:style style/generate-button
:before :i/reveal} (i18n/label :t/reveal-sync-code)])
{:on-press (fn []
;TODO https://github.com/status-im/status-mobile/issues/15570
;remove old bottom sheet when Authentication process design is
;created.
(rf/dispatch [:bottom-sheet/hide-old])
(rf/dispatch [:bottom-sheet/show-sheet-old
{:content (fn []
[enter-password/sheet set-code])}]))
:type :primary
:customization-color profile-color
:size 40
:style style/generate-button
:before :i/reveal} (i18n/label :t/reveal-sync-code)])
(when (sync-utils/valid-connection-string? @code)
[rn/view
{:style style/valid-cs-container}

13
src/status_im2/contexts/syncing/syncing_devices_list/view.cljs
View File

@ -13,7 +13,8 @@
[quo/page-nav
{:align-mid? true
:mid-section {:type :text-only :main-text ""}
:left-section {:type :grey
:left-section {:type :blur-bg
:icon :i/arrow-left
:on-press #(rf/dispatch [:navigate-back])}}]])
@ -23,7 +24,7 @@
devices-with-button (map #(assoc % :show-button? true) devices)
user-device (first devices-with-button)
other-devices (rest devices-with-button)
profile-color (:color (rf/sub [:onboarding-2/profile]))
{:keys [paired-devices unpaired-devices]} (group-by
#(if (:enabled? %) :paired-devices :unpaired-devices)
other-devices)]
@ -37,9 +38,11 @@
:style {:color colors/white}}
(i18n/label :t/syncing)]
[quo/button
{:size 32
:icon true
:on-press #(rf/dispatch [:navigate-to :settings-setup-syncing])}
{:size 32
:type :primary
:customization-color profile-color
:icon true
:on-press #(rf/dispatch [:navigate-to :settings-setup-syncing])}
:i/add]]
[device/view (merge user-device {:this-device? true})]
(when (seq paired-devices)