status-im/status-mobile
2
0
Fork 0
mirror of https://github.com/status-im/status-mobile.git synced 2025-02-26 15:21:08 +00:00
Code Issues Projects Releases Wiki Activity

Refactor Button and correct use of community color (#16536)

Browse Source 
* 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?)))

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

@ -1,5 +1,4 @@
(ns quo2.components.buttons.button.style (ns quo2.components.buttons.button.style)
(:require [quo2.foundations.colors :as colors]))
(def blur-view (def blur-view
{:position :absolute {:position :absolute
@ -8,254 +7,97 @@
:right 0 :right 0
:bottom 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? [{:keys [override-margins size icon-container-size icon-background-color icon-container-rounded?
icon-size]}] icon-size]}]
(merge (icon-style
{:margin-left (or (get override-margins :left) {:margin-left (or (get override-margins :left)
(if (= size 40) 12 8)) (if (= size 40) 12 8))
:margin-right (or (get override-margins :right) 4) :margin-right (or (get override-margins :right) 4)
:align-items :center :icon-container-size icon-container-size
:justify-content :center} :icon-background-color icon-background-color
(when icon-container-size :icon-container-rounded? icon-container-rounded?
{:width icon-container-size :icon-size icon-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 (defn icon-right-icon-style
[{:keys [override-margins size icon-container-size icon-background-color icon-container-rounded? [{:keys [override-margins size icon-container-size icon-background-color icon-container-rounded?
icon-size]}] icon-size]}]
(merge (icon-style {:margin-left (or (get override-margins :left) 4)
{:margin-left (or (get override-margins :left) 4)
:margin-right (or (get override-margins :right) :margin-right (or (get override-margins :right)
(if (= size 40) 12 8)) (if (= size 40) 12 8))
:align-items :center :icon-container-size icon-container-size
:justify-content :center} :icon-background-color icon-background-color
(when icon-container-size :icon-container-rounded? icon-container-rounded?
{:width icon-container-size :icon-size icon-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 (defn shape-style-container
[type icon size] [size border-radius]
{:height size {:height size
:border-radius (if (and icon (#{:primary :secondary :danger} type)) :border-radius (if border-radius
24 border-radius
(case size (case size
56 12 56 12
40 12 40 12
32 10 32 10
24 8))}) 8))})
(defn style-container (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 (merge {:height size
:align-items :center :align-items :center
:justify-content :center :justify-content :center
:flex-direction (if above :column :row) :flex-direction (if icon-above :column :row)
:padding-horizontal (when-not (or icon before after) :padding-horizontal (when-not (or icon-only? icon-left icon-right)
(case size (case size
56 16 56 16
40 16 40 16
32 12 32 12
24 8)) 8))
:padding-left (when-not (or icon before) :padding-left (when-not (or icon-only? icon-left)
(case size (case size
56 16 56 16
40 16 40 16
32 12 32 12
24 8)) 8))
:padding-right (when-not (or icon after) :padding-right (when-not (or icon-only? icon-right)
(case size (case size
56 16 56 16
40 16 40 16
32 12 32 12
24 8)) 8))
:padding-top (when-not (or icon before after) :padding-top (when-not (or icon-only? icon-left icon-right)
(case size (case size
56 0 56 0
40 9 40 9
32 5 32 5
24 3)) 3))
:padding-bottom (when-not (or icon before after) :padding-bottom (when-not (or icon-only? icon-left icon-right)
(case size (case size
56 0 56 0
40 9 40 9
32 5 32 5
24 4)) 4))
:overflow :hidden} :overflow :hidden
(when (or (and (= type :blurred) (not blur-active?)) :background-color background-color}
(not= type :blurred)) (shape-style-container size border-radius)
{:background-color background-color})
(shape-style-container type icon size)
(when width (when width
{:width width}) {:width width})
(when icon (when icon-only?
{:width size}) {:width size})
(when border-color (when border-color
{:border-color border-color {:border-color border-color

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

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

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

@ -35,7 +35,7 @@
[button/button [button/button
{:type :primary {:type :primary
:size 32 :size 32
:override-background-color (styles/upper-button-color customization-color) :customization-color customization-color
:on-press upper-button-on-press} :on-press upper-button-on-press}
upper-button-text] upper-button-text]
(when-let [{lower-button-text :text (when-let [{lower-button-text :text

3
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.avatars.user-avatar.view :as user-avatar]
[quo2.components.inputs.profile-input.style :as style] [quo2.components.inputs.profile-input.style :as style]
[quo2.components.inputs.title-input.view :as title-input] [quo2.components.inputs.title-input.view :as title-input]
[quo2.foundations.colors :as colors]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.hole-view :as hole-view])) [react-native.hole-view :as hole-view]))
@ -37,7 +36,7 @@
[buttons/button [buttons/button
{:accessibility-label :select-profile-picture-button {:accessibility-label :select-profile-picture-button
:type :grey :type :grey
:override-background-color (colors/alpha colors/white 0.05) :background :blur
:on-press on-press :on-press on-press
:icon-size 20 :icon-size 20
:width 24 :width 24

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

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

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

@ -244,11 +244,13 @@
([color suffix] ([color suffix]
(custom-color color suffix nil)) (custom-color color suffix nil))
([color suffix opacity] ([color suffix opacity]
(let [color-keyword (keyword color) (let [hex? (not (keyword? color))
color-keyword (keyword color)
base-color (get-in colors-map base-color (get-in colors-map
[color-keyword suffix] [color-keyword suffix])]
color)] (if hex?
(if opacity (alpha base-color (/ opacity 100)) base-color)))))) color
(if opacity (alpha base-color (/ opacity 100)) base-color)))))))
(defn custom-color-by-theme (defn custom-color-by-theme
"(custom-color-by-theme color suffix-light suffix-dark opacity-light opacity-dark) "(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)) (when (and (not album?) (seq @selected))
[rn/view {:style style/clear-container} [rn/view {:style style/clear-container}
[quo/button [quo/button
{:type :blurred {:type :grey
:size 32 :size 32
:accessibility-label :clear :accessibility-label :clear
:on-press #(reset! selected []) :on-press #(reset! selected [])
:blur-active? blur-active?} :background (when blur-active? :photo)}
(i18n/label :t/clear)]])) (i18n/label :t/clear)]]))
(defn remove-selected (defn remove-selected

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

@ -138,7 +138,7 @@
(defn token-gates (defn token-gates
[{:keys [id]}] [{:keys [id]}]
(rf/dispatch [:communities/check-permissions-to-join-community id]) (rf/dispatch [:communities/check-permissions-to-join-community id])
(fn [{:keys [id community-color]}] (fn [{:keys [id color]}]
(let [{:keys [can-request-access? (let [{:keys [can-request-access?
number-of-hold-tokens tokens]} (rf/sub [:community/token-gated-overview id])] number-of-hold-tokens tokens]} (rf/sub [:community/token-gated-overview id])]
[rn/view {:style (style/token-gated-container)} [rn/view {:style (style/token-gated-container)}
@ -164,14 +164,14 @@
[quo/button [quo/button
{:on-press #(join-gated-community id) {:on-press #(join-gated-community id)
:accessibility-label :join-community-button :accessibility-label :join-community-button
:override-background-color community-color :customization-color color
:style {:margin-horizontal 12 :margin-top 12 :margin-bottom 12} :style {:margin-horizontal 12 :margin-top 12 :margin-bottom 12}
:disabled (not can-request-access?) :disabled (not can-request-access?)
:before (if can-request-access? :i/unlocked :i/locked)} :before (if can-request-access? :i/unlocked :i/locked)}
(i18n/label :t/join-open-community)]]))) (i18n/label :t/join-open-community)]])))
(defn join-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?] pending?]
(let [access-type (get-access-type (:access permissions)) (let [access-type (get-access-type (:access permissions))
unknown-access? (= access-type :unknown-access) unknown-access? (= access-type :unknown-access)
@ -185,7 +185,7 @@
[quo/button [quo/button
{:on-press #(rf/dispatch [:open-modal :community-requests-to-join community]) {:on-press #(rf/dispatch [:open-modal :community-requests-to-join community])
:accessibility-label :show-request-to-join-screen-button :accessibility-label :show-request-to-join-screen-button
:override-background-color community-color :customization-color color
:before :i/communities} :before :i/communities}
(request-to-join-text is-open?)])) (request-to-join-text is-open?)]))

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

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

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

@ -163,7 +163,7 @@
[quo/button [quo/button
{:accessibility-label :submit-create-profile-button {:accessibility-label :submit-create-profile-button
:type :primary :type :primary
:override-background-color (colors/custom-color @custom-color 60) :customization-color @custom-color
:on-press (fn [] :on-press (fn []
(rf/dispatch [:onboarding-2/profile-data-set (rf/dispatch [:onboarding-2/profile-data-set
{:image-path @profile-pic {:image-path @profile-pic

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

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

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

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

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

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

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

@ -4,7 +4,6 @@
[utils.i18n :as i18n] [utils.i18n :as i18n]
[utils.re-frame :as rf] [utils.re-frame :as rf]
[quo2.core :as quo] [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.profile-card.view :as profile-card]
[status-im2.contexts.onboarding.identifiers.style :as style] [status-im2.contexts.onboarding.identifiers.style :as style]
[status-im2.contexts.onboarding.common.background.view :as background] [status-im2.contexts.onboarding.common.background.view :as background]
@ -58,8 +57,9 @@
:progress progress}] :progress progress}]
[quo/button [quo/button
{:accessibility-label :skip-identifiers {:accessibility-label :skip-identifiers
:type :grey
:background :blur
:on-press #(rf/dispatch [:navigate-to :enable-notifications]) :on-press #(rf/dispatch [:navigate-to :enable-notifications])
:override-background-color colors/white-opa-5
:style style/button} :style style/button}
(i18n/label :t/skip)]]]])) (i18n/label :t/skip)]]]]))

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

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

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

@ -49,7 +49,7 @@
[quo/button [quo/button
{:on-press #(rf/dispatch [:init-root :enable-notifications]) {:on-press #(rf/dispatch [:init-root :enable-notifications])
:accessibility-label :continue-button :accessibility-label :continue-button
:override-background-color (colors/custom-color profile-color 60) :customization0color profile-color
:style style/continue-button} :style style/continue-button}
(i18n/label :t/continue)])) (i18n/label :t/continue)]))

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

@ -23,7 +23,6 @@
:subtitle (i18n/label :t/welcome-to-web3-sub-title) :subtitle (i18n/label :t/welcome-to-web3-sub-title)
:subtitle-accessibility-label :welcome-sub-title}])) :subtitle-accessibility-label :welcome-sub-title}]))
(defn navigation-bar (defn navigation-bar
[root] [root]
[quo/page-nav [quo/page-nav
@ -32,8 +31,11 @@
:align-mid? false :align-mid? false
:page-nav-color :transparent :page-nav-color :transparent
:left-section {:icon :i/arrow-left :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 :icon-background-color colors/white-opa-5
:type :shell :type :grey
:on-press #(rf/dispatch [:init-root root])}}]) :on-press #(rf/dispatch [:init-root root])}}])
(defn dispatch-visibility-status-update (defn dispatch-visibility-status-update
@ -62,5 +64,5 @@
(rf/dispatch [:universal-links/process-stored-event])) (rf/dispatch [:universal-links/process-stored-event]))
:type :primary :type :primary
:accessibility-label :welcome-button :accessibility-label :welcome-button
:override-background-color (colors/custom-color profile-color 60)} :customization-color profile-color}
(i18n/label :t/start-using-status)]]])) (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)] (i18n/label :t/profiles-on-device)]
[quo/button [quo/button
{:type :primary {:type :primary
:customization-color :blue
:size 32 :size 32
:icon true :icon true
:on-press show-new-account-options :on-press show-new-account-options
@ -193,12 +194,11 @@
:keyboardVerticalOffset (- (safe-area/get-bottom))} :keyboardVerticalOffset (- (safe-area/get-bottom))}
[quo/button [quo/button
{:size 32 {:size 32
:type :blur-bg :type :grey
:background :blur
:icon true :icon true
:on-press set-show-profiles :on-press set-show-profiles
:disabled processing :disabled processing
:override-theme :dark
:width 32
:accessibility-label :show-profiles :accessibility-label :show-profiles
:style style/multi-profile-button} :style style/multi-profile-button}
:i/multi-profile] :i/multi-profile]
@ -250,7 +250,6 @@
:type :primary :type :primary
:customization-color (or customization-color :primary) :customization-color (or customization-color :primary)
:accessibility-label :login-button :accessibility-label :login-button
:override-theme :dark
:before :i/unlocked :before :i/unlocked
:disabled (or (not sign-in-enabled?) processing) :disabled (or (not sign-in-enabled?) processing)
:on-press login-multiaccount :on-press login-multiaccount

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

@ -11,8 +11,8 @@
:type :select :type :select
:options [{:key :primary :options [{:key :primary
:value "Primary"} :value "Primary"}
{:key :secondary {:key :positive
:value "Secondary"} :value "Positive"}
{:key :grey {:key :grey
:value "Grey"} :value "Grey"}
{:key :dark-grey {:key :dark-grey
@ -23,8 +23,8 @@
:value "Ghost"} :value "Ghost"}
{:key :danger {:key :danger
:value "Danger"} :value "Danger"}
{:key :positive {:key :black
:value "Positive"}]} :value "Black"}]}
{:label "Size:" {:label "Size:"
:key :size :key :size
:type :select :type :select
@ -36,6 +36,13 @@
:value "32"} :value "32"}
{:key 24 {:key 24
:value "24"}]} :value "24"}]}
{:label "Background:"
:key :background
:type :select
:options [{:key :blur
:value "Blur"}
{:key :photo
:value "Photo"}]}
{:label "Icon:" {:label "Icon:"
:key :icon :key :icon
:type :boolean} :type :boolean}
@ -53,7 +60,14 @@
:type :boolean} :type :boolean}
{:label "Label" {:label "Label"
:key :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 (defn cool-preview
[] []
@ -63,7 +77,9 @@
before (reagent/cursor state [:before]) before (reagent/cursor state [:before])
after (reagent/cursor state [:after]) after (reagent/cursor state [:after])
above (reagent/cursor state [:above]) above (reagent/cursor state [:above])
icon (reagent/cursor state [:icon])] icon (reagent/cursor state [:icon])
type (reagent/cursor state [:type])
customization-color (reagent/cursor state [:customization-color])]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150} [rn/view {:padding-bottom 150}
@ -75,10 +91,14 @@
:justify-content :center} :justify-content :center}
[quo/button [quo/button
(merge (dissoc @state (merge (dissoc @state
:customization-color
:theme :theme
:before :before
:after) :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 (when @above
{:above :i/placeholder}) {:above :i/placeholder})
(when @before (when @before
@ -90,7 +110,7 @@
(defn preview-button (defn preview-button
[] []
[rn/view [rn/view
{:background-color (colors/theme-colors colors/white colors/neutral-90) {:background-color (colors/theme-colors colors/white colors/neutral-95)
:flex 1} :flex 1}
[rn/flat-list [rn/flat-list
{:flex 1 {:flex 1

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

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

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

@ -38,7 +38,8 @@
(defn view (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) code (reagent/atom nil)
delay (reagent/atom nil) delay (reagent/atom nil)
timestamp (reagent/atom nil) timestamp (reagent/atom nil)
@ -85,11 +86,14 @@
[quo/button [quo/button
{:on-press (fn [] {:on-press (fn []
;TODO https://github.com/status-im/status-mobile/issues/15570 ;TODO https://github.com/status-im/status-mobile/issues/15570
;remove old bottom sheet when Authentication process design is created. ;remove old bottom sheet when Authentication process design is
;created.
(rf/dispatch [:bottom-sheet/hide-old]) (rf/dispatch [:bottom-sheet/hide-old])
(rf/dispatch [:bottom-sheet/show-sheet-old (rf/dispatch [:bottom-sheet/show-sheet-old
{:content (fn [] {:content (fn []
[enter-password/sheet set-code])}])) [enter-password/sheet set-code])}]))
:type :primary
:customization-color profile-color
:size 40 :size 40
:style style/generate-button :style style/generate-button
:before :i/reveal} (i18n/label :t/reveal-sync-code)]) :before :i/reveal} (i18n/label :t/reveal-sync-code)])

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

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