From 98b219191fcae33e0e7f0f9f1c4f293c9150166c Mon Sep 17 00:00:00 2001
From: Icaro Motta <icaro.ldm@gmail.com>
Date: Tue, 7 Feb 2023 08:27:27 -0300
Subject: [PATCH] Fix segmented tab component (#15001)

Fixes #14999

Fix UI regression in the segmented tab component, introduced by PR https://github.com/status-im/status-mobile/pull/14883.

No area was impacted because segmented tabs are not used yet.
---
 src/quo2/components/tabs/segmented_tab.cljs | 15 ++++++++-------
 src/quo2/components/tabs/tab/style.cljs     |  9 ++++++++-
 src/quo2/components/tabs/tab/view.cljs      |  2 ++
 3 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/quo2/components/tabs/segmented_tab.cljs b/src/quo2/components/tabs/segmented_tab.cljs
index 46adc2f8c2..6f27ddbfa3 100644
--- a/src/quo2/components/tabs/segmented_tab.cljs
+++ b/src/quo2/components/tabs/segmented_tab.cljs
@@ -29,11 +29,12 @@
             {:margin-left (if (= 0 indx) 0 2)
              :flex        1}
             [tab/view
-             {:id        id
-              :segmented true
-              :size      size
-              :active    (= id active-id)
-              :on-press  #(do (reset! active-tab-id %)
-                              (when on-change
-                                (on-change %)))}
+             {:id         id
+              :segmented? true
+              :size       size
+              :active     (= id active-id)
+              :on-press   (fn [tab-id]
+                            (reset! active-tab-id tab-id)
+                            (when on-change
+                              (on-change tab-id)))}
              label]])]))))
diff --git a/src/quo2/components/tabs/tab/style.cljs b/src/quo2/components/tabs/tab/style.cljs
index 7f29da3ad6..84c73cf2ae 100644
--- a/src/quo2/components/tabs/tab/style.cljs
+++ b/src/quo2/components/tabs/tab/style.cljs
@@ -31,11 +31,16 @@
   {:flex-direction :row})
 
 (defn tab
-  [{:keys [size disabled background-color show-notification-dot?]}]
+  [{:keys [background-color
+           disabled
+           segmented?
+           show-notification-dot?
+           size]}]
   (let [border-radius (size->border-radius size)
         padding       (size->padding-left size)]
     (merge {:height                    size
             :align-items               :center
+            :justify-content           :center
             :flex-direction            :row
             :border-top-left-radius    border-radius
             :border-bottom-left-radius border-radius
@@ -48,6 +53,8 @@
              {:padding-right 1}
              {:border-radius border-radius
               :padding-right padding})
+           (when segmented?
+             {:flex 1})
            (when disabled
              {:opacity tab-background-opacity}))))
 
diff --git a/src/quo2/components/tabs/tab/view.cljs b/src/quo2/components/tabs/tab/view.cljs
index 54179e9ddd..566f06636c 100644
--- a/src/quo2/components/tabs/tab/view.cljs
+++ b/src/quo2/components/tabs/tab/view.cljs
@@ -55,6 +55,7 @@
            id
            on-press
            override-theme
+           segmented?
            size
            notification-dot?]
     :or   {size 32}}
@@ -80,6 +81,7 @@
       [rn/view
        {:style (style/tab {:size                   size
                            :disabled               disabled
+                           :segmented?             segmented?
                            :background-color       background-color
                            :show-notification-dot? show-notification-dot?})}
        (when before