[#17393] feat: add logout button component

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))))

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)})

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))

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
@@ -182,6 +183,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)

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]

src/status_im/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})

src/status_im/contexts/profile/settings/view.cljs

@@ -10,7 +10,6 @@
             [status-im.contexts.profile.settings.list-items :as settings.items]
             [status-im.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]