diff --git a/src/quo/components/buttons/logout_button/component_spec.cljs b/src/quo/components/buttons/logout_button/component_spec.cljs new file mode 100644 index 000000000000..1f5050100f08 --- /dev/null +++ b/src/quo/components/buttons/logout_button/component_spec.cljs @@ -0,0 +1,35 @@ +(ns quo.components.buttons.logout-button.component-spec + (:require + [quo.components.buttons.logout-button.view :as logout-button] + [test-helpers.component :as h])) + +(h/describe "button tests" + (h/test "default render of logout button component" + (h/render [logout-button/view + {:accessibility-label "test-button"}]) + (h/is-truthy (h/get-by-label-text "test-button"))) + + (h/test "button on-press works" + (let [event (h/mock-fn)] + (h/render [logout-button/view + {:on-press event + :accessibility-label "test-button"}]) + (h/fire-event :press (h/get-by-label-text "test-button")) + (h/was-called event))) + + (h/test "button on-press disabled when disabled" + (let [event (h/mock-fn)] + (h/render [logout-button/view + {:on-press event + :accessibility-label "test-button" + :disabled? true}]) + (h/fire-event :press (h/get-by-label-text "test-button")) + (h/was-not-called event))) + + (h/test "button on-long-press works" + (let [event (h/mock-fn)] + (h/render [logout-button/view + {:on-long-press event + :accessibility-label "test-button"}]) + (h/fire-event :long-press (h/get-by-label-text "test-button")) + (h/was-called event)))) diff --git a/src/quo/components/buttons/logout_button/style.cljs b/src/quo/components/buttons/logout_button/style.cljs new file mode 100644 index 000000000000..c2aa9c19eeba --- /dev/null +++ b/src/quo/components/buttons/logout_button/style.cljs @@ -0,0 +1,15 @@ +(ns quo.components.buttons.logout-button.style + (:require + [quo.foundations.colors :as colors])) + +(defn main + [{:keys [pressed? disabled?]}] + {:background-color (if pressed? colors/danger-50-opa-40 colors/danger-50-opa-30) + :border-radius 12 + :height 40 + :gap 4 + :padding-right 3 + :flex-direction :row + :justify-content :center + :align-items :center + :opacity (when disabled? 0.2)}) diff --git a/src/quo/components/buttons/logout_button/view.cljs b/src/quo/components/buttons/logout_button/view.cljs new file mode 100644 index 000000000000..7838f0df066f --- /dev/null +++ b/src/quo/components/buttons/logout_button/view.cljs @@ -0,0 +1,32 @@ +(ns quo.components.buttons.logout-button.view + (:require + [quo.components.buttons.logout-button.style :as style] + [quo.components.icon :as icon] + [quo.components.markdown.text :as text] + [quo.foundations.colors :as colors] + [quo.theme :as theme] + [react-native.core :as rn] + [reagent.core :as reagent] + [utils.i18n :as i18n])) + +(defn- view-internal + [_ _] + (let [pressed? (reagent/atom false)] + (fn + [{:keys [on-press on-long-press disabled? theme accessibility-label container-style]}] + [rn/pressable + {:accessibility-label (or accessibility-label :composer-button) + :on-press on-press + :on-press-in #(reset! pressed? true) + :on-press-out #(reset! pressed? nil) + :on-long-press on-long-press + :disabled disabled? + :style (merge (style/main {:pressed? @pressed? + :theme theme + :disabled? disabled?}) + container-style)} + [icon/icon :i/log-out {:color (if pressed? colors/white-opa-40 colors/white-opa-70)}] + [text/text {:weight :medium :size :paragraph-1} + (i18n/label :t/logout)]]))) + +(def view (theme/with-theme view-internal)) diff --git a/src/quo/core.cljs b/src/quo/core.cljs index ed6089725840..62bc4f91ad53 100644 --- a/src/quo/core.cljs +++ b/src/quo/core.cljs @@ -14,6 +14,7 @@ quo.components.buttons.button.view quo.components.buttons.composer-button.view quo.components.buttons.dynamic-button.view + quo.components.buttons.logout-button.view quo.components.buttons.predictive-keyboard.view quo.components.buttons.slide-button.view quo.components.buttons.wallet-button.view @@ -180,6 +181,7 @@ (def button quo.components.buttons.button.view/button) (def composer-button quo.components.buttons.composer-button.view/view) (def dynamic-button quo.components.buttons.dynamic-button.view/view) +(def logout-button quo.components.buttons.logout-button.view/view) (def predictive-keyboard quo.components.buttons.predictive-keyboard.view/view) (def slide-button quo.components.buttons.slide-button.view/view) (def wallet-button quo.components.buttons.wallet-button.view/view) diff --git a/src/quo/core_spec.cljs b/src/quo/core_spec.cljs index ca9beb8c58db..d5f80533bc56 100644 --- a/src/quo/core_spec.cljs +++ b/src/quo/core_spec.cljs @@ -6,6 +6,7 @@ [quo.components.browser.browser-input.component-spec] [quo.components.buttons.button.component-spec] [quo.components.buttons.composer-button.component-spec] + [quo.components.buttons.logout-button.component-spec] [quo.components.buttons.predictive-keyboard.component-spec] [quo.components.buttons.slide-button.component-spec] [quo.components.buttons.wallet-button.component-spec] diff --git a/src/status_im2/contexts/profile/settings/style.cljs b/src/status_im2/contexts/profile/settings/style.cljs index d60f70a4756d..1ea93fa2c9dd 100644 --- a/src/status_im2/contexts/profile/settings/style.cljs +++ b/src/status_im2/contexts/profile/settings/style.cljs @@ -7,5 +7,6 @@ :background-color (colors/resolve-color customization-color theme 40)}) (def footer-container - {:padding-horizontal 20 + {:margin-top 8 + :padding-horizontal 20 :padding-vertical 12}) diff --git a/src/status_im2/contexts/profile/settings/view.cljs b/src/status_im2/contexts/profile/settings/view.cljs index f0f725545068..b9099ddddbed 100644 --- a/src/status_im2/contexts/profile/settings/view.cljs +++ b/src/status_im2/contexts/profile/settings/view.cljs @@ -10,7 +10,6 @@ [status-im2.contexts.profile.settings.list-items :as settings.items] [status-im2.contexts.profile.settings.style :as style] [utils.debounce :as debounce] - [utils.i18n :as i18n] [utils.re-frame :as rf])) (defn- settings-item-view @@ -29,11 +28,7 @@ (defn- footer [logout-press] [rn/view {:style style/footer-container} - [quo/button - {:on-press logout-press - :type :danger - :icon-left :i/log-out} - (i18n/label :t/logout)]]) + [quo/logout-button {:on-press logout-press}]]) (defn- get-item-layout [_ index]