From 33d41dc5d55b6e976edaf23ac2caf6ab3d1c87bc Mon Sep 17 00:00:00 2001 From: Jamie Caprani Date: Fri, 21 Jul 2023 15:43:41 +0200 Subject: [PATCH] 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 --- .../components/buttons/button/properties.cljs | 103 +++++++ src/quo2/components/buttons/button/style.cljs | 264 ++++-------------- src/quo2/components/buttons/button/view.cljs | 153 +++++----- src/quo2/components/dropdowns/dropdown.cljs | 6 +- .../dropdowns/old_button_style.cljs | 264 ++++++++++++++++++ .../components/dropdowns/old_button_view.cljs | 138 +++++++++ .../empty_state/empty_state/styles.cljs | 4 - .../empty_state/empty_state/view.cljs | 8 +- .../components/inputs/profile_input/view.cljs | 21 +- .../components/profile/profile_card/view.cljs | 3 +- src/quo2/foundations/colors.cljs | 10 +- .../foundations/customization_colors.cljs | 20 ++ .../contexts/chat/photo_selector/view.cljs | 4 +- .../contexts/communities/overview/view.cljs | 24 +- .../onboarding/create_password/view.cljs | 11 +- .../onboarding/create_profile/view.cljs | 20 +- .../onboarding/enable_biometrics/view.cljs | 18 +- .../onboarding/enable_notifications/view.cljs | 30 +- .../onboarding/enter_seed_phrase/view.cljs | 1 + .../contexts/onboarding/identifiers/view.cljs | 10 +- .../onboarding/syncing/progress/view.cljs | 15 +- .../onboarding/syncing/results/view.cljs | 8 +- .../contexts/onboarding/welcome/view.cljs | 18 +- .../contexts/profile/profiles/view.cljs | 7 +- .../contexts/quo_preview/buttons/button.cljs | 48 +++- .../contexts/syncing/scan_sync_code/view.cljs | 14 +- .../contexts/syncing/setup_syncing/view.cljs | 26 +- .../syncing/syncing_devices_list/view.cljs | 13 +- 28 files changed, 828 insertions(+), 433 deletions(-) create mode 100644 src/quo2/components/buttons/button/properties.cljs create mode 100644 src/quo2/components/dropdowns/old_button_style.cljs create mode 100644 src/quo2/components/dropdowns/old_button_view.cljs create mode 100644 src/quo2/foundations/customization_colors.cljs diff --git a/src/quo2/components/buttons/button/properties.cljs b/src/quo2/components/buttons/button/properties.cljs new file mode 100644 index 0000000000..bf6bd75d2e --- /dev/null +++ b/src/quo2/components/buttons/button/properties.cljs @@ -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?))) diff --git a/src/quo2/components/buttons/button/style.cljs b/src/quo2/components/buttons/button/style.cljs index d0997d3895..a81d209d4b 100644 --- a/src/quo2/components/buttons/button/style.cljs +++ b/src/quo2/components/buttons/button/style.cljs @@ -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 diff --git a/src/quo2/components/buttons/button/view.cljs b/src/quo2/components/buttons/button/view.cljs index a1e396e58b..6c5937b001 100644 --- a/src/quo2/components/buttons/button/view.cljs +++ b/src/quo2/components/buttons/button/view.cljs @@ -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)) diff --git a/src/quo2/components/dropdowns/dropdown.cljs b/src/quo2/components/dropdowns/dropdown.cljs index 290fca3d79..d7e499b8bf 100644 --- a/src/quo2/components/dropdowns/dropdown.cljs +++ b/src/quo2/components/dropdowns/dropdown.cljs @@ -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) diff --git a/src/quo2/components/dropdowns/old_button_style.cljs b/src/quo2/components/dropdowns/old_button_style.cljs new file mode 100644 index 0000000000..2edda941d1 --- /dev/null +++ b/src/quo2/components/dropdowns/old_button_style.cljs @@ -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}))) diff --git a/src/quo2/components/dropdowns/old_button_view.cljs b/src/quo2/components/dropdowns/old_button_view.cljs new file mode 100644 index 0000000000..a1d80970db --- /dev/null +++ b/src/quo2/components/dropdowns/old_button_view.cljs @@ -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)) diff --git a/src/quo2/components/empty_state/empty_state/styles.cljs b/src/quo2/components/empty_state/empty_state/styles.cljs index e3e4e6a7a4..439010bcfb 100644 --- a/src/quo2/components/empty_state/empty_state/styles.cljs +++ b/src/quo2/components/empty_state/empty_state/styles.cljs @@ -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)) diff --git a/src/quo2/components/empty_state/empty_state/view.cljs b/src/quo2/components/empty_state/empty_state/view.cljs index 3d44e4b0f4..4955b243bc 100644 --- a/src/quo2/components/empty_state/empty_state/view.cljs +++ b/src/quo2/components/empty_state/empty_state/view.cljs @@ -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] diff --git a/src/quo2/components/inputs/profile_input/view.cljs b/src/quo2/components/inputs/profile_input/view.cljs index 8a1073749f..c8bbfdbca3 100644 --- a/src/quo2/components/inputs/profile_input/view.cljs +++ b/src/quo2/components/inputs/profile_input/view.cljs @@ -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 diff --git a/src/quo2/components/profile/profile_card/view.cljs b/src/quo2/components/profile/profile_card/view.cljs index bfd6c7c547..602eb4117e 100644 --- a/src/quo2/components/profile/profile_card/view.cljs +++ b/src/quo2/components/profile/profile_card/view.cljs @@ -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 diff --git a/src/quo2/foundations/colors.cljs b/src/quo2/foundations/colors.cljs index 80f3e8dc38..916406ce2c 100644 --- a/src/quo2/foundations/colors.cljs +++ b/src/quo2/foundations/colors.cljs @@ -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) diff --git a/src/quo2/foundations/customization_colors.cljs b/src/quo2/foundations/customization_colors.cljs new file mode 100644 index 0000000000..e67fd306e0 --- /dev/null +++ b/src/quo2/foundations/customization_colors.cljs @@ -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)}]) diff --git a/src/status_im2/contexts/chat/photo_selector/view.cljs b/src/status_im2/contexts/chat/photo_selector/view.cljs index 9fd0cb1db3..9aa159fe1d 100644 --- a/src/status_im2/contexts/chat/photo_selector/view.cljs +++ b/src/status_im2/contexts/chat/photo_selector/view.cljs @@ -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 diff --git a/src/status_im2/contexts/communities/overview/view.cljs b/src/status_im2/contexts/communities/overview/view.cljs index 753f4f6743..cfc738be20 100644 --- a/src/status_im2/contexts/communities/overview/view.cljs +++ b/src/status_im2/contexts/communities/overview/view.cljs @@ -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?))) diff --git a/src/status_im2/contexts/onboarding/create_password/view.cljs b/src/status_im2/contexts/onboarding/create_password/view.cljs index 17f882f5e6..802bb7f16d 100644 --- a/src/status_im2/contexts/onboarding/create_password/view.cljs +++ b/src/status_im2/contexts/onboarding/create_password/view.cljs @@ -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 diff --git a/src/status_im2/contexts/onboarding/create_profile/view.cljs b/src/status_im2/contexts/onboarding/create_profile/view.cljs index 4d7e387516..79bf67e559 100644 --- a/src/status_im2/contexts/onboarding/create_profile/view.cljs +++ b/src/status_im2/contexts/onboarding/create_profile/view.cljs @@ -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") diff --git a/src/status_im2/contexts/onboarding/enable_biometrics/view.cljs b/src/status_im2/contexts/onboarding/enable_biometrics/view.cljs index 677be11671..ba6b5f4018 100644 --- a/src/status_im2/contexts/onboarding/enable_biometrics/view.cljs +++ b/src/status_im2/contexts/onboarding/enable_biometrics/view.cljs @@ -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 diff --git a/src/status_im2/contexts/onboarding/enable_notifications/view.cljs b/src/status_im2/contexts/onboarding/enable_notifications/view.cljs index d684e5aa1d..727a0a4d11 100644 --- a/src/status_im2/contexts/onboarding/enable_notifications/view.cljs +++ b/src/status_im2/contexts/onboarding/enable_notifications/view.cljs @@ -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 diff --git a/src/status_im2/contexts/onboarding/enter_seed_phrase/view.cljs b/src/status_im2/contexts/onboarding/enter_seed_phrase/view.cljs index be6a40d74b..169e1f89bd 100644 --- a/src/status_im2/contexts/onboarding/enter_seed_phrase/view.cljs +++ b/src/status_im2/contexts/onboarding/enter_seed_phrase/view.cljs @@ -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)]])) diff --git a/src/status_im2/contexts/onboarding/identifiers/view.cljs b/src/status_im2/contexts/onboarding/identifiers/view.cljs index fac68e4642..48891e8084 100644 --- a/src/status_im2/contexts/onboarding/identifiers/view.cljs +++ b/src/status_im2/contexts/onboarding/identifiers/view.cljs @@ -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]) diff --git a/src/status_im2/contexts/onboarding/syncing/progress/view.cljs b/src/status_im2/contexts/onboarding/syncing/progress/view.cljs index d574af0091..66cdf36413 100644 --- a/src/status_im2/contexts/onboarding/syncing/progress/view.cljs +++ b/src/status_im2/contexts/onboarding/syncing/progress/view.cljs @@ -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 diff --git a/src/status_im2/contexts/onboarding/syncing/results/view.cljs b/src/status_im2/contexts/onboarding/syncing/results/view.cljs index c9ef7399b6..db12b322d9 100644 --- a/src/status_im2/contexts/onboarding/syncing/results/view.cljs +++ b/src/status_im2/contexts/onboarding/syncing/results/view.cljs @@ -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 diff --git a/src/status_im2/contexts/onboarding/welcome/view.cljs b/src/status_im2/contexts/onboarding/welcome/view.cljs index cdc8d53578..ed42cfdcf3 100644 --- a/src/status_im2/contexts/onboarding/welcome/view.cljs +++ b/src/status_im2/contexts/onboarding/welcome/view.cljs @@ -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)]]])) diff --git a/src/status_im2/contexts/profile/profiles/view.cljs b/src/status_im2/contexts/profile/profiles/view.cljs index eaa1a5d32d..8414cb7e0b 100644 --- a/src/status_im2/contexts/profile/profiles/view.cljs +++ b/src/status_im2/contexts/profile/profiles/view.cljs @@ -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 diff --git a/src/status_im2/contexts/quo_preview/buttons/button.cljs b/src/status_im2/contexts/quo_preview/buttons/button.cljs index 32a3680f9f..ec0661d757 100644 --- a/src/status_im2/contexts/quo_preview/buttons/button.cljs +++ b/src/status_im2/contexts/quo_preview/buttons/button.cljs @@ -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 diff --git a/src/status_im2/contexts/syncing/scan_sync_code/view.cljs b/src/status_im2/contexts/syncing/scan_sync_code/view.cljs index 6d518b7e41..85d54ca6a4 100644 --- a/src/status_im2/contexts/syncing/scan_sync_code/view.cljs +++ b/src/status_im2/contexts/syncing/scan_sync_code/view.cljs @@ -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 diff --git a/src/status_im2/contexts/syncing/setup_syncing/view.cljs b/src/status_im2/contexts/syncing/setup_syncing/view.cljs index 52fa5839f8..cb1fce2ee0 100644 --- a/src/status_im2/contexts/syncing/setup_syncing/view.cljs +++ b/src/status_im2/contexts/syncing/setup_syncing/view.cljs @@ -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} diff --git a/src/status_im2/contexts/syncing/syncing_devices_list/view.cljs b/src/status_im2/contexts/syncing/syncing_devices_list/view.cljs index 719d8eb724..af61dacbc1 100644 --- a/src/status_im2/contexts/syncing/syncing_devices_list/view.cljs +++ b/src/status_im2/contexts/syncing/syncing_devices_list/view.cljs @@ -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)