From 1cf2613171c9a97fac01664d9c79758eaa365806 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Thu, 21 Sep 2023 16:59:30 +0700
Subject: [PATCH 01/32] Separate pressable with animated.view, add hover color
 to tabitem

---
 src/components/TabSelector/TabSelector.js     |  3 +-
 src/components/TabSelector/TabSelectorItem.js | 44 ++++++++++++-------
 2 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/src/components/TabSelector/TabSelector.js b/src/components/TabSelector/TabSelector.js
index 79cd1a6dd17d..e36eff4abd12 100644
--- a/src/components/TabSelector/TabSelector.js
+++ b/src/components/TabSelector/TabSelector.js
@@ -82,7 +82,7 @@ const getBackgroundColor = (position, routesLength, tabIndex) => {
 
 function TabSelector({state, navigation, onTabPress, position}) {
     const {translate} = useLocalize();
-
+    const hoverBackgroundColor = themeColors.border;
     return (
         <View style={styles.tabSelector}>
             {_.map(state.routes, (route, index) => {
@@ -120,6 +120,7 @@ function TabSelector({state, navigation, onTabPress, position}) {
                         activeOpacity={activeOpacity}
                         inactiveOpacity={inactiveOpacity}
                         backgroundColor={backgroundColor}
+                        hoverBackgroundColor={hoverBackgroundColor}
                     />
                 );
             })}
diff --git a/src/components/TabSelector/TabSelectorItem.js b/src/components/TabSelector/TabSelectorItem.js
index d0ea8fcc773b..36aed843fc24 100644
--- a/src/components/TabSelector/TabSelectorItem.js
+++ b/src/components/TabSelector/TabSelectorItem.js
@@ -20,6 +20,10 @@ const propTypes = {
     // eslint-disable-next-line
     backgroundColor: PropTypes.any,
 
+    /** Hovered background color value for the tab button */
+    // eslint-disable-next-line
+    backgroundColor: PropTypes.string,
+
     /** Animated opacity value while the label is inactive state */
     // eslint-disable-next-line
     inactiveOpacity: PropTypes.any,
@@ -34,31 +38,37 @@ const defaultProps = {
     icon: () => {},
     title: '',
     backgroundColor: '',
+    hoverBackgroundColor: '',
     inactiveOpacity: 1,
     activeOpacity: 0,
 };
 
-const AnimatedPressableWithFeedback = Animated.createAnimatedComponent(PressableWithFeedback);
-
-function TabSelectorItem({icon, title, onPress, backgroundColor, activeOpacity, inactiveOpacity}) {
+function TabSelectorItem({icon, title, onPress, backgroundColor, hoverBackgroundColor, activeOpacity, inactiveOpacity}) {
     return (
-        <AnimatedPressableWithFeedback
+        <PressableWithFeedback
             accessibilityLabel={title}
-            style={[styles.tabSelectorButton, {backgroundColor}]}
             wrapperStyle={[styles.flex1]}
             onPress={onPress}
-        >
-            <TabIcon
-                icon={icon}
-                activeOpacity={activeOpacity}
-                inactiveOpacity={inactiveOpacity}
-            />
-            <TabLabel
-                title={title}
-                activeOpacity={activeOpacity}
-                inactiveOpacity={inactiveOpacity}
-            />
-        </AnimatedPressableWithFeedback>
+        >{({hovered})=>(
+            <Animated.View
+                style={[
+                    styles.tabSelectorButton,
+                    { backgroundColor: Boolean(hoverBackgroundColor) && hovered ? hoverBackgroundColor : backgroundColor },
+                ]}
+            >
+                <TabIcon
+                    icon={icon}
+                    activeOpacity={hovered ? 1 : activeOpacity}
+                    inactiveOpacity={hovered ? 0 : inactiveOpacity}
+                />
+                <TabLabel
+                    title={title}
+                    activeOpacity={hovered ? 1 : activeOpacity}
+                    inactiveOpacity={hovered ? 0 : inactiveOpacity}
+                />
+            </Animated.View>
+        )}
+        </PressableWithFeedback>
     );
 }
 

From e3b8121b516b58cba57e41a5b8324e8604775427 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Fri, 22 Sep 2023 10:25:01 +0700
Subject: [PATCH 02/32] make tab label always strong

---
 src/styles/styles.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/styles/styles.js b/src/styles/styles.js
index 842d4aa5b902..473778fb7367 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3420,8 +3420,8 @@ const styles = (theme) => ({
 
     tabText: (isSelected) => ({
         marginLeft: 8,
-        fontFamily: isSelected ? fontFamily.EXP_NEUE_BOLD : fontFamily.EXP_NEUE,
-        fontWeight: isSelected ? fontWeightBold : 400,
+        fontFamily: fontFamily.EXP_NEUE_BOLD,
+        fontWeight: fontWeightBold,
         color: isSelected ? theme.textLight : theme.textSupporting,
     }),
 

From 6a4c8879f3dac1658e707309c2109e75f4920788 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Fri, 22 Sep 2023 14:29:35 +0700
Subject: [PATCH 03/32] prettier and lint

---
 src/components/TabSelector/TabSelector.js     |  3 +-
 src/components/TabSelector/TabSelectorItem.js | 42 +++++++++----------
 2 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/src/components/TabSelector/TabSelector.js b/src/components/TabSelector/TabSelector.js
index e36eff4abd12..f6ff76818d0f 100644
--- a/src/components/TabSelector/TabSelector.js
+++ b/src/components/TabSelector/TabSelector.js
@@ -82,7 +82,7 @@ const getBackgroundColor = (position, routesLength, tabIndex) => {
 
 function TabSelector({state, navigation, onTabPress, position}) {
     const {translate} = useLocalize();
-    const hoverBackgroundColor = themeColors.border;
+    const hoverBackgroundColor = themeColors.highlightBG;
     return (
         <View style={styles.tabSelector}>
             {_.map(state.routes, (route, index) => {
@@ -121,6 +121,7 @@ function TabSelector({state, navigation, onTabPress, position}) {
                         inactiveOpacity={inactiveOpacity}
                         backgroundColor={backgroundColor}
                         hoverBackgroundColor={hoverBackgroundColor}
+                        isFocused={isFocused}
                     />
                 );
             })}
diff --git a/src/components/TabSelector/TabSelectorItem.js b/src/components/TabSelector/TabSelectorItem.js
index 36aed843fc24..290729559f9a 100644
--- a/src/components/TabSelector/TabSelectorItem.js
+++ b/src/components/TabSelector/TabSelectorItem.js
@@ -22,7 +22,7 @@ const propTypes = {
 
     /** Hovered background color value for the tab button */
     // eslint-disable-next-line
-    backgroundColor: PropTypes.string,
+    hoverBackgroundColor: PropTypes.string,
 
     /** Animated opacity value while the label is inactive state */
     // eslint-disable-next-line
@@ -31,6 +31,9 @@ const propTypes = {
     /** Animated opacity value while the label is in active state */
     // eslint-disable-next-line
     activeOpacity: PropTypes.any,
+
+    /** Whether this tab is active */
+    isFocused: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -41,33 +44,30 @@ const defaultProps = {
     hoverBackgroundColor: '',
     inactiveOpacity: 1,
     activeOpacity: 0,
+    isFocused: false,
 };
 
-function TabSelectorItem({icon, title, onPress, backgroundColor, hoverBackgroundColor, activeOpacity, inactiveOpacity}) {
+function TabSelectorItem({icon, title, onPress, backgroundColor, hoverBackgroundColor, activeOpacity, inactiveOpacity, isFocused}) {
     return (
         <PressableWithFeedback
             accessibilityLabel={title}
             wrapperStyle={[styles.flex1]}
             onPress={onPress}
-        >{({hovered})=>(
-            <Animated.View
-                style={[
-                    styles.tabSelectorButton,
-                    { backgroundColor: Boolean(hoverBackgroundColor) && hovered ? hoverBackgroundColor : backgroundColor },
-                ]}
-            >
-                <TabIcon
-                    icon={icon}
-                    activeOpacity={hovered ? 1 : activeOpacity}
-                    inactiveOpacity={hovered ? 0 : inactiveOpacity}
-                />
-                <TabLabel
-                    title={title}
-                    activeOpacity={hovered ? 1 : activeOpacity}
-                    inactiveOpacity={hovered ? 0 : inactiveOpacity}
-                />
-            </Animated.View>
-        )}
+        >
+            {({hovered}) => (
+                <Animated.View style={[styles.tabSelectorButton, {backgroundColor: Boolean(hoverBackgroundColor) && hovered && !isFocused ? hoverBackgroundColor : backgroundColor}]}>
+                    <TabIcon
+                        icon={icon}
+                        activeOpacity={hovered && !isFocused ? 1 : activeOpacity}
+                        inactiveOpacity={hovered && !isFocused ? 0 : inactiveOpacity}
+                    />
+                    <TabLabel
+                        title={title}
+                        activeOpacity={hovered && !isFocused ? 1 : activeOpacity}
+                        inactiveOpacity={hovered && !isFocused ? 0 : inactiveOpacity}
+                    />
+                </Animated.View>
+            )}
         </PressableWithFeedback>
     );
 }

From ad0eb5769a0e08ea1c9abedeafe4dd78399b88cc Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Tue, 26 Sep 2023 21:41:22 +0700
Subject: [PATCH 04/32] Keep AnimatedPressableWithFeedback for optimum
 performance

---
 src/components/TabSelector/TabSelectorItem.js | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/components/TabSelector/TabSelectorItem.js b/src/components/TabSelector/TabSelectorItem.js
index 290729559f9a..7f5a2add5117 100644
--- a/src/components/TabSelector/TabSelectorItem.js
+++ b/src/components/TabSelector/TabSelectorItem.js
@@ -1,4 +1,4 @@
-import {Animated} from 'react-native';
+import {Animated, View, StyleSheet} from 'react-native';
 import React from 'react';
 import PropTypes from 'prop-types';
 import styles from '../../styles/styles';
@@ -47,15 +47,22 @@ const defaultProps = {
     isFocused: false,
 };
 
+const AnimatedPressableWithFeedback = Animated.createAnimatedComponent(PressableWithFeedback);
+
 function TabSelectorItem({icon, title, onPress, backgroundColor, hoverBackgroundColor, activeOpacity, inactiveOpacity, isFocused}) {
     return (
-        <PressableWithFeedback
+        <AnimatedPressableWithFeedback
             accessibilityLabel={title}
+            style={[styles.tabSelectorButton, {backgroundColor}]}
             wrapperStyle={[styles.flex1]}
             onPress={onPress}
         >
-            {({hovered}) => (
-                <Animated.View style={[styles.tabSelectorButton, {backgroundColor: Boolean(hoverBackgroundColor) && hovered && !isFocused ? hoverBackgroundColor : backgroundColor}]}>
+            {({ hovered }) => (
+                <View style={[
+                    styles.tabSelectorButton,
+                    StyleSheet.absoluteFill,
+                    { backgroundColor: Boolean(hoverBackgroundColor) && hovered && !isFocused ? hoverBackgroundColor : {} }
+                ]}>
                     <TabIcon
                         icon={icon}
                         activeOpacity={hovered && !isFocused ? 1 : activeOpacity}
@@ -66,9 +73,9 @@ function TabSelectorItem({icon, title, onPress, backgroundColor, hoverBackground
                         activeOpacity={hovered && !isFocused ? 1 : activeOpacity}
                         inactiveOpacity={hovered && !isFocused ? 0 : inactiveOpacity}
                     />
-                </Animated.View>
+                </View>
             )}
-        </PressableWithFeedback>
+        </AnimatedPressableWithFeedback>
     );
 }
 

From 919c15db3b7213e9562a445bfabcda12bce07504 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Wed, 27 Sep 2023 08:00:41 +0700
Subject: [PATCH 05/32] change to undefined instead of empty object

---
 src/components/TabSelector/TabSelectorItem.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TabSelector/TabSelectorItem.js b/src/components/TabSelector/TabSelectorItem.js
index 7f5a2add5117..0b7392c17234 100644
--- a/src/components/TabSelector/TabSelectorItem.js
+++ b/src/components/TabSelector/TabSelectorItem.js
@@ -61,7 +61,7 @@ function TabSelectorItem({icon, title, onPress, backgroundColor, hoverBackground
                 <View style={[
                     styles.tabSelectorButton,
                     StyleSheet.absoluteFill,
-                    { backgroundColor: Boolean(hoverBackgroundColor) && hovered && !isFocused ? hoverBackgroundColor : {} }
+                    { backgroundColor: Boolean(hoverBackgroundColor) && hovered && !isFocused ? hoverBackgroundColor : undefined }
                 ]}>
                     <TabIcon
                         icon={icon}

From 395d6d84c3db16f5b4c68639e220204782728b28 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Thu, 28 Sep 2023 07:36:38 +0700
Subject: [PATCH 06/32] run prettier

---
 src/components/TabSelector/TabSelectorItem.js | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/TabSelector/TabSelectorItem.js b/src/components/TabSelector/TabSelectorItem.js
index 0b7392c17234..55ae41342807 100644
--- a/src/components/TabSelector/TabSelectorItem.js
+++ b/src/components/TabSelector/TabSelectorItem.js
@@ -57,12 +57,10 @@ function TabSelectorItem({icon, title, onPress, backgroundColor, hoverBackground
             wrapperStyle={[styles.flex1]}
             onPress={onPress}
         >
-            {({ hovered }) => (
-                <View style={[
-                    styles.tabSelectorButton,
-                    StyleSheet.absoluteFill,
-                    { backgroundColor: Boolean(hoverBackgroundColor) && hovered && !isFocused ? hoverBackgroundColor : undefined }
-                ]}>
+            {({hovered}) => (
+                <View
+                    style={[styles.tabSelectorButton, StyleSheet.absoluteFill, {backgroundColor: Boolean(hoverBackgroundColor) && hovered && !isFocused ? hoverBackgroundColor : undefined}]}
+                >
                     <TabIcon
                         icon={icon}
                         activeOpacity={hovered && !isFocused ? 1 : activeOpacity}

From 941e1cae56ac42c872d49636c8ea6614443baafa Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Thu, 28 Sep 2023 08:28:42 +0700
Subject: [PATCH 07/32] remove unnecessary comment

---
 src/components/TabSelector/TabSelectorItem.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/TabSelector/TabSelectorItem.js b/src/components/TabSelector/TabSelectorItem.js
index 55ae41342807..2eded6748a5d 100644
--- a/src/components/TabSelector/TabSelectorItem.js
+++ b/src/components/TabSelector/TabSelectorItem.js
@@ -21,7 +21,6 @@ const propTypes = {
     backgroundColor: PropTypes.any,
 
     /** Hovered background color value for the tab button */
-    // eslint-disable-next-line
     hoverBackgroundColor: PropTypes.string,
 
     /** Animated opacity value while the label is inactive state */

From 5373a25f42ba4fcbdb357953ba0bbbf224a453d6 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Thu, 28 Sep 2023 17:30:34 +0700
Subject: [PATCH 08/32] change view to animated.view

---
 src/components/TabSelector/TabSelectorItem.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/TabSelector/TabSelectorItem.js b/src/components/TabSelector/TabSelectorItem.js
index 2eded6748a5d..5b738bf6660d 100644
--- a/src/components/TabSelector/TabSelectorItem.js
+++ b/src/components/TabSelector/TabSelectorItem.js
@@ -1,4 +1,4 @@
-import {Animated, View, StyleSheet} from 'react-native';
+import {Animated, StyleSheet} from 'react-native';
 import React from 'react';
 import PropTypes from 'prop-types';
 import styles from '../../styles/styles';
@@ -57,7 +57,7 @@ function TabSelectorItem({icon, title, onPress, backgroundColor, hoverBackground
             onPress={onPress}
         >
             {({hovered}) => (
-                <View
+                <Animated.View
                     style={[styles.tabSelectorButton, StyleSheet.absoluteFill, {backgroundColor: Boolean(hoverBackgroundColor) && hovered && !isFocused ? hoverBackgroundColor : undefined}]}
                 >
                     <TabIcon
@@ -70,7 +70,7 @@ function TabSelectorItem({icon, title, onPress, backgroundColor, hoverBackground
                         activeOpacity={hovered && !isFocused ? 1 : activeOpacity}
                         inactiveOpacity={hovered && !isFocused ? 0 : inactiveOpacity}
                     />
-                </View>
+                </Animated.View>
             )}
         </AnimatedPressableWithFeedback>
     );

From f2dd9976525ce3285b7c6f7b464d6d3018974b00 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Fri, 29 Sep 2023 01:15:01 +0700
Subject: [PATCH 09/32] remove unnecessary variable

---
 src/components/TabSelector/TabSelector.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/TabSelector/TabSelector.js b/src/components/TabSelector/TabSelector.js
index f6ff76818d0f..477ab9c5d47f 100644
--- a/src/components/TabSelector/TabSelector.js
+++ b/src/components/TabSelector/TabSelector.js
@@ -82,7 +82,6 @@ const getBackgroundColor = (position, routesLength, tabIndex) => {
 
 function TabSelector({state, navigation, onTabPress, position}) {
     const {translate} = useLocalize();
-    const hoverBackgroundColor = themeColors.highlightBG;
     return (
         <View style={styles.tabSelector}>
             {_.map(state.routes, (route, index) => {
@@ -120,7 +119,7 @@ function TabSelector({state, navigation, onTabPress, position}) {
                         activeOpacity={activeOpacity}
                         inactiveOpacity={inactiveOpacity}
                         backgroundColor={backgroundColor}
-                        hoverBackgroundColor={hoverBackgroundColor}
+                        hoverBackgroundColor={themeColors.highlightBG}
                         isFocused={isFocused}
                     />
                 );

From a9a1a00c79fddee4119356ce79dff648dce0109c Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Fri, 29 Sep 2023 22:24:17 +0700
Subject: [PATCH 10/32] add Hoverable component

---
 src/components/TabSelector/TabSelectorItem.js | 48 +++++++++----------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/components/TabSelector/TabSelectorItem.js b/src/components/TabSelector/TabSelectorItem.js
index 5b738bf6660d..30bc81b1a236 100644
--- a/src/components/TabSelector/TabSelectorItem.js
+++ b/src/components/TabSelector/TabSelectorItem.js
@@ -1,10 +1,11 @@
-import {Animated, StyleSheet} from 'react-native';
+import {Animated, StyleSheet, View} from 'react-native';
 import React from 'react';
 import PropTypes from 'prop-types';
 import styles from '../../styles/styles';
 import PressableWithFeedback from '../Pressable/PressableWithFeedback';
 import TabIcon from './TabIcon';
 import TabLabel from './TabLabel';
+import Hoverable from '../Hoverable';
 
 const propTypes = {
     /** Function to call when onPress */
@@ -50,29 +51,28 @@ const AnimatedPressableWithFeedback = Animated.createAnimatedComponent(Pressable
 
 function TabSelectorItem({icon, title, onPress, backgroundColor, hoverBackgroundColor, activeOpacity, inactiveOpacity, isFocused}) {
     return (
-        <AnimatedPressableWithFeedback
-            accessibilityLabel={title}
-            style={[styles.tabSelectorButton, {backgroundColor}]}
-            wrapperStyle={[styles.flex1]}
-            onPress={onPress}
-        >
-            {({hovered}) => (
-                <Animated.View
-                    style={[styles.tabSelectorButton, StyleSheet.absoluteFill, {backgroundColor: Boolean(hoverBackgroundColor) && hovered && !isFocused ? hoverBackgroundColor : undefined}]}
-                >
-                    <TabIcon
-                        icon={icon}
-                        activeOpacity={hovered && !isFocused ? 1 : activeOpacity}
-                        inactiveOpacity={hovered && !isFocused ? 0 : inactiveOpacity}
-                    />
-                    <TabLabel
-                        title={title}
-                        activeOpacity={hovered && !isFocused ? 1 : activeOpacity}
-                        inactiveOpacity={hovered && !isFocused ? 0 : inactiveOpacity}
-                    />
-                </Animated.View>
-            )}
-        </AnimatedPressableWithFeedback>
+        <View style={[styles.flex1]}>
+            <Hoverable>
+                {(hovered) => (
+                    <AnimatedPressableWithFeedback
+                        accessibilityLabel={title}
+                        style={[styles.tabSelectorButton, {backgroundColor: Boolean(hoverBackgroundColor) && hovered && !isFocused ? hoverBackgroundColor : backgroundColor}]}
+                        onPress={onPress}
+                    >
+                        <TabIcon
+                            icon={icon}
+                            activeOpacity={hovered && !isFocused ? 1 : activeOpacity}
+                            inactiveOpacity={hovered && !isFocused ? 0 : inactiveOpacity}
+                        />
+                        <TabLabel
+                            title={title}
+                            activeOpacity={hovered && !isFocused ? 1 : activeOpacity}
+                            inactiveOpacity={hovered && !isFocused ? 0 : inactiveOpacity}
+                        />
+                    </AnimatedPressableWithFeedback>
+                )}
+            </Hoverable>
+        </View>
     );
 }
 

From 21ee1d2abf2e812d869de9b05ac61c56329f8e09 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Fri, 29 Sep 2023 22:32:01 +0700
Subject: [PATCH 11/32] remove unused import

---
 src/components/TabSelector/TabSelectorItem.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TabSelector/TabSelectorItem.js b/src/components/TabSelector/TabSelectorItem.js
index 30bc81b1a236..f090321b048c 100644
--- a/src/components/TabSelector/TabSelectorItem.js
+++ b/src/components/TabSelector/TabSelectorItem.js
@@ -1,4 +1,4 @@
-import {Animated, StyleSheet, View} from 'react-native';
+import {Animated, View} from 'react-native';
 import React from 'react';
 import PropTypes from 'prop-types';
 import styles from '../../styles/styles';

From c3074236f860672d0f5716b02b75c85ad04e1028 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Fri, 29 Sep 2023 23:04:17 +0700
Subject: [PATCH 12/32] remove hoverBackgroundColor props, create tabBackground
 style function

---
 src/components/TabSelector/TabSelector.js     | 1 -
 src/components/TabSelector/TabSelectorItem.js | 9 +++------
 src/styles/styles.js                          | 4 ++++
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/TabSelector/TabSelector.js b/src/components/TabSelector/TabSelector.js
index 477ab9c5d47f..4efa033c60d0 100644
--- a/src/components/TabSelector/TabSelector.js
+++ b/src/components/TabSelector/TabSelector.js
@@ -119,7 +119,6 @@ function TabSelector({state, navigation, onTabPress, position}) {
                         activeOpacity={activeOpacity}
                         inactiveOpacity={inactiveOpacity}
                         backgroundColor={backgroundColor}
-                        hoverBackgroundColor={themeColors.highlightBG}
                         isFocused={isFocused}
                     />
                 );
diff --git a/src/components/TabSelector/TabSelectorItem.js b/src/components/TabSelector/TabSelectorItem.js
index f090321b048c..9f5ac1a71867 100644
--- a/src/components/TabSelector/TabSelectorItem.js
+++ b/src/components/TabSelector/TabSelectorItem.js
@@ -21,9 +21,6 @@ const propTypes = {
     // eslint-disable-next-line
     backgroundColor: PropTypes.any,
 
-    /** Hovered background color value for the tab button */
-    hoverBackgroundColor: PropTypes.string,
-
     /** Animated opacity value while the label is inactive state */
     // eslint-disable-next-line
     inactiveOpacity: PropTypes.any,
@@ -41,7 +38,7 @@ const defaultProps = {
     icon: () => {},
     title: '',
     backgroundColor: '',
-    hoverBackgroundColor: '',
+    : '',
     inactiveOpacity: 1,
     activeOpacity: 0,
     isFocused: false,
@@ -49,14 +46,14 @@ const defaultProps = {
 
 const AnimatedPressableWithFeedback = Animated.createAnimatedComponent(PressableWithFeedback);
 
-function TabSelectorItem({icon, title, onPress, backgroundColor, hoverBackgroundColor, activeOpacity, inactiveOpacity, isFocused}) {
+function TabSelectorItem({icon, title, onPress, backgroundColor, activeOpacity, inactiveOpacity, isFocused}) {
     return (
         <View style={[styles.flex1]}>
             <Hoverable>
                 {(hovered) => (
                     <AnimatedPressableWithFeedback
                         accessibilityLabel={title}
-                        style={[styles.tabSelectorButton, {backgroundColor: Boolean(hoverBackgroundColor) && hovered && !isFocused ? hoverBackgroundColor : backgroundColor}]}
+                        style={[styles.tabSelectorButton, styles.tabBackground(hovered, isFocused, backgroundColor)]}
                         onPress={onPress}
                     >
                         <TabIcon
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 7dd842ccb846..48c72d9b257c 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3440,6 +3440,10 @@ const styles = (theme) => ({
         color: isSelected ? theme.textLight : theme.textSupporting,
     }),
 
+    tabBackground: (hovered, isFocused, backgroundColor) => ({
+        backgroundColor: hovered && !isFocused ? theme.highlightBG : backgroundColor,
+    }),
+
     /**
      * @param {String} backgroundColor
      * @param {Number} height

From 79ec65c7c39fa9877ad1fa76de8dea7eee550353 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Fri, 29 Sep 2023 23:05:11 +0700
Subject: [PATCH 13/32] remove defaultprops unnecessary code

---
 src/components/TabSelector/TabSelectorItem.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/TabSelector/TabSelectorItem.js b/src/components/TabSelector/TabSelectorItem.js
index 9f5ac1a71867..7e600e1898ee 100644
--- a/src/components/TabSelector/TabSelectorItem.js
+++ b/src/components/TabSelector/TabSelectorItem.js
@@ -38,7 +38,6 @@ const defaultProps = {
     icon: () => {},
     title: '',
     backgroundColor: '',
-    : '',
     inactiveOpacity: 1,
     activeOpacity: 0,
     isFocused: false,

From e523fe9e3423c78320b617c7313a0f01d12bd33c Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Fri, 29 Sep 2023 23:57:04 +0700
Subject: [PATCH 14/32] add tabActiveOpacity and tabInactiveOpacity

---
 src/components/TabSelector/TabSelectorItem.js | 8 ++++----
 src/styles/styles.js                          | 4 ++++
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/TabSelector/TabSelectorItem.js b/src/components/TabSelector/TabSelectorItem.js
index 7e600e1898ee..d9fb9d2a5f68 100644
--- a/src/components/TabSelector/TabSelectorItem.js
+++ b/src/components/TabSelector/TabSelectorItem.js
@@ -57,13 +57,13 @@ function TabSelectorItem({icon, title, onPress, backgroundColor, activeOpacity,
                     >
                         <TabIcon
                             icon={icon}
-                            activeOpacity={hovered && !isFocused ? 1 : activeOpacity}
-                            inactiveOpacity={hovered && !isFocused ? 0 : inactiveOpacity}
+                            activeOpacity={styles.tabActiveOpacity(hovered, isFocused, activeOpacity)}
+                            inactiveOpacity={styles.tabInactiveOpacity(hovered, isFocused, inactiveOpacity)}
                         />
                         <TabLabel
                             title={title}
-                            activeOpacity={hovered && !isFocused ? 1 : activeOpacity}
-                            inactiveOpacity={hovered && !isFocused ? 0 : inactiveOpacity}
+                            activeOpacity={styles.tabActiveOpacity(hovered, isFocused, activeOpacity)}
+                            inactiveOpacity={styles.tabInactiveOpacity(hovered, isFocused, inactiveOpacity)}
                         />
                     </AnimatedPressableWithFeedback>
                 )}
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 48c72d9b257c..6d50e4354ac5 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3444,6 +3444,10 @@ const styles = (theme) => ({
         backgroundColor: hovered && !isFocused ? theme.highlightBG : backgroundColor,
     }),
 
+    tabActiveOpacity: (hovered, isFocused, activeOpacity) => hovered && !isFocused ? 1 : activeOpacity,
+
+    tabInactiveOpacity: (hovered, isFocused, inactiveOpacity) => hovered && !isFocused ? 1 : inactiveOpacity,
+        
     /**
      * @param {String} backgroundColor
      * @param {Number} height

From 74b15c4e8a92c532e5b947698221402a511afef0 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Sat, 30 Sep 2023 00:03:46 +0700
Subject: [PATCH 15/32] run prettier

---
 src/styles/styles.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/styles/styles.js b/src/styles/styles.js
index 6d50e4354ac5..2a6e44f9585f 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3444,10 +3444,10 @@ const styles = (theme) => ({
         backgroundColor: hovered && !isFocused ? theme.highlightBG : backgroundColor,
     }),
 
-    tabActiveOpacity: (hovered, isFocused, activeOpacity) => hovered && !isFocused ? 1 : activeOpacity,
+    tabActiveOpacity: (hovered, isFocused, activeOpacity) => (hovered && !isFocused ? 1 : activeOpacity),
+
+    tabInactiveOpacity: (hovered, isFocused, inactiveOpacity) => (hovered && !isFocused ? 1 : inactiveOpacity),
 
-    tabInactiveOpacity: (hovered, isFocused, inactiveOpacity) => hovered && !isFocused ? 1 : inactiveOpacity,
-        
     /**
      * @param {String} backgroundColor
      * @param {Number} height

From 610fcb03c908ac4c0b3ce8bb08fe16885257a592 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Sat, 30 Sep 2023 04:56:03 +0700
Subject: [PATCH 16/32] fix tabInactiveOpacity

---
 src/styles/styles.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/styles.js b/src/styles/styles.js
index 2a6e44f9585f..f6deceaf519b 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3446,7 +3446,7 @@ const styles = (theme) => ({
 
     tabActiveOpacity: (hovered, isFocused, activeOpacity) => (hovered && !isFocused ? 1 : activeOpacity),
 
-    tabInactiveOpacity: (hovered, isFocused, inactiveOpacity) => (hovered && !isFocused ? 1 : inactiveOpacity),
+    tabInactiveOpacity: (hovered, isFocused, inactiveOpacity) => (hovered && !isFocused ? 0 : inactiveOpacity),
 
     /**
      * @param {String} backgroundColor

From a2def14424eeed80927b641acbf9c5a7d6b68d3d Mon Sep 17 00:00:00 2001
From: Mark Louis <53453740+marklouisdeshaun@users.noreply.github.com>
Date: Tue, 3 Oct 2023 14:29:20 -0600
Subject: [PATCH 17/32] Update Tax-Exempt.md

Adding tax exempt resource to the help site
---
 .../billing-and-subscriptions/Tax-Exempt.md   | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/docs/articles/expensify-classic/billing-and-subscriptions/Tax-Exempt.md b/docs/articles/expensify-classic/billing-and-subscriptions/Tax-Exempt.md
index c4948b5b3083..33fbec003a91 100644
--- a/docs/articles/expensify-classic/billing-and-subscriptions/Tax-Exempt.md
+++ b/docs/articles/expensify-classic/billing-and-subscriptions/Tax-Exempt.md
@@ -1,5 +1,20 @@
 ---
 title: Tax Exempt
-description: Tax Exempt
+description: Tax-exempt status in Expensify for organizations recognized by the IRS or local tax authorities. 
 ---
-## Resource Coming Soon!
+# Overview
+If your organization is recognized by the IRS or other local tax authorities as tax-exempt, that means you don’t need to pay any tax on your Expensify monthly bill.  Please follow these instructions to request tax-exempt status.
+# How to request tax-exempt status in Expensify
+1. Go to **Settings > Account > Payments**. 
+1. Click on the option that says **Request Tax-Exempt Status**.
+1. After you've requested tax-exempt status, Concierge (our support service) will start a conversation with you. They will ask you to upload a PDF of your tax-exempt documentation. This document should include your VAT number (or "RUT" in Chile). You can use one of the following documents: 501(c), ST-119, or a foreign tax-exempt declaration.
+1. Our team will review your document and let you know if we need any more information.
+1. Once everything is verified, we'll update your account accordingly.
+
+Once your account is marked as tax-exempt, the corresponding state tax will no longer be applied to future billing. 
+
+If you need to remove your tax-exempt status, let your Account Manager know or contact Concierge.
+
+# FAQ
+## What happens to my past Expensify bills that incorrectly had tax added to them? 
+Expensify can provide a refund for the tax you were charged on your previous bills. Please let your Account Manager know or contact Concierge if this is the case.

From 3b9681688f808b085239df146f73782568f81a67 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Thu, 5 Oct 2023 18:58:25 +0700
Subject: [PATCH 18/32] fix tab opacity

---
 src/components/TabSelector/TabIcon.js  | 8 ++++----
 src/components/TabSelector/TabLabel.js | 8 ++++----
 src/styles/styles.js                   | 8 ++++++--
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/components/TabSelector/TabIcon.js b/src/components/TabSelector/TabIcon.js
index 85f1cd912ff6..f197fa7131fd 100644
--- a/src/components/TabSelector/TabIcon.js
+++ b/src/components/TabSelector/TabIcon.js
@@ -19,20 +19,20 @@ const propTypes = {
 
 const defaultProps = {
     icon: '',
-    inactiveOpacity: 1,
-    activeOpacity: 0,
+    inactiveOpacity: {opacity: 1},
+    activeOpacity: {opacity: 0},
 };
 
 function TabIcon({icon, activeOpacity, inactiveOpacity}) {
     return (
         <View>
-            <Animated.View style={{opacity: inactiveOpacity}}>
+            <Animated.View style={inactiveOpacity}>
                 <Icon
                     src={icon}
                     fill={themeColors.icon}
                 />
             </Animated.View>
-            <Animated.View style={[StyleSheet.absoluteFill, {opacity: activeOpacity}]}>
+            <Animated.View style={[StyleSheet.absoluteFill, activeOpacity]}>
                 <Icon
                     src={icon}
                     fill={themeColors.iconMenu}
diff --git a/src/components/TabSelector/TabLabel.js b/src/components/TabSelector/TabLabel.js
index 32c8a384d814..819b766b1731 100644
--- a/src/components/TabSelector/TabLabel.js
+++ b/src/components/TabSelector/TabLabel.js
@@ -18,17 +18,17 @@ const propTypes = {
 
 const defaultProps = {
     title: '',
-    inactiveOpacity: 1,
-    activeOpacity: 0,
+    inactiveOpacity: {opacity: 1},
+    activeOpacity: {opacity: 0},
 };
 
 function TabLabel({title, activeOpacity, inactiveOpacity}) {
     return (
         <View>
-            <Animated.View style={[{opacity: activeOpacity}]}>
+            <Animated.View style={[activeOpacity]}>
                 <Text style={styles.tabText(true)}>{title}</Text>
             </Animated.View>
-            <Animated.View style={[StyleSheet.absoluteFill, {opacity: inactiveOpacity}]}>
+            <Animated.View style={[StyleSheet.absoluteFill, inactiveOpacity]}>
                 <Text style={styles.tabText(false)}>{title}</Text>
             </Animated.View>
         </View>
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 75d5375dae27..c84875aeee68 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3454,9 +3454,13 @@ const styles = (theme) => ({
         backgroundColor: hovered && !isFocused ? theme.highlightBG : backgroundColor,
     }),
 
-    tabActiveOpacity: (hovered, isFocused, activeOpacity) => (hovered && !isFocused ? 1 : activeOpacity),
+    tabActiveOpacity: (hovered, isFocused, activeOpacity) => ({
+        opacity: hovered && !isFocused ? 1 : activeOpacity,
+    }),
 
-    tabInactiveOpacity: (hovered, isFocused, inactiveOpacity) => (hovered && !isFocused ? 0 : inactiveOpacity),
+    tabInactiveOpacity: (hovered, isFocused, inactiveOpacity) => ({
+        opacity: hovered && !isFocused ? 0 : inactiveOpacity,
+    }),
 
     /**
      * @param {String} backgroundColor

From 2dccca98fea2a0f062f8e3e022310519794e18ff Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Thu, 5 Oct 2023 19:38:50 +0700
Subject: [PATCH 19/32] extract style logic outside the style object

---
 src/styles/styles.js | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/styles/styles.js b/src/styles/styles.js
index c84875aeee68..63b9c93af247 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3454,13 +3454,9 @@ const styles = (theme) => ({
         backgroundColor: hovered && !isFocused ? theme.highlightBG : backgroundColor,
     }),
 
-    tabActiveOpacity: (hovered, isFocused, activeOpacity) => ({
-        opacity: hovered && !isFocused ? 1 : activeOpacity,
-    }),
+    tabActiveOpacity: (hovered, isFocused, activeOpacity) => (hovered && !isFocused ? { opacity: 1 } : { opacity: activeOpacity }),
 
-    tabInactiveOpacity: (hovered, isFocused, inactiveOpacity) => ({
-        opacity: hovered && !isFocused ? 0 : inactiveOpacity,
-    }),
+    tabInactiveOpacity: (hovered, isFocused, inactiveOpacity) => (hovered && !isFocused ? { opacity: 0 } : { opacity: inactiveOpacity }),
 
     /**
      * @param {String} backgroundColor

From d3d77875601f04aabc55d252c88e94819daf24ad Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Thu, 5 Oct 2023 21:23:22 +0700
Subject: [PATCH 20/32] run prettier

---
 src/styles/styles.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/styles/styles.js b/src/styles/styles.js
index 63b9c93af247..fc796d564d2a 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3454,9 +3454,9 @@ const styles = (theme) => ({
         backgroundColor: hovered && !isFocused ? theme.highlightBG : backgroundColor,
     }),
 
-    tabActiveOpacity: (hovered, isFocused, activeOpacity) => (hovered && !isFocused ? { opacity: 1 } : { opacity: activeOpacity }),
+    tabActiveOpacity: (hovered, isFocused, activeOpacity) => (hovered && !isFocused ? {opacity: 1} : {opacity: activeOpacity}),
 
-    tabInactiveOpacity: (hovered, isFocused, inactiveOpacity) => (hovered && !isFocused ? { opacity: 0 } : { opacity: inactiveOpacity }),
+    tabInactiveOpacity: (hovered, isFocused, inactiveOpacity) => (hovered && !isFocused ? {opacity: 0} : {opacity: inactiveOpacity}),
 
     /**
      * @param {String} backgroundColor

From c4ff0e27504d519e989b2b250677627e2cf5c843 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Thu, 5 Oct 2023 21:46:19 +0700
Subject: [PATCH 21/32] add activeOpacity, inactiveOpacity to tabOpacity style
 function

---
 src/components/TabSelector/TabSelectorItem.js | 8 ++++----
 src/styles/styles.js                          | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/TabSelector/TabSelectorItem.js b/src/components/TabSelector/TabSelectorItem.js
index d9fb9d2a5f68..e95386fcf11c 100644
--- a/src/components/TabSelector/TabSelectorItem.js
+++ b/src/components/TabSelector/TabSelectorItem.js
@@ -57,13 +57,13 @@ function TabSelectorItem({icon, title, onPress, backgroundColor, activeOpacity,
                     >
                         <TabIcon
                             icon={icon}
-                            activeOpacity={styles.tabActiveOpacity(hovered, isFocused, activeOpacity)}
-                            inactiveOpacity={styles.tabInactiveOpacity(hovered, isFocused, inactiveOpacity)}
+                            activeOpacity={styles.tabActiveOpacity(hovered, isFocused, activeOpacity, inactiveOpacity)}
+                            inactiveOpacity={styles.tabInactiveOpacity(hovered, isFocused, activeOpacity, inactiveOpacity)}
                         />
                         <TabLabel
                             title={title}
-                            activeOpacity={styles.tabActiveOpacity(hovered, isFocused, activeOpacity)}
-                            inactiveOpacity={styles.tabInactiveOpacity(hovered, isFocused, inactiveOpacity)}
+                            activeOpacity={styles.tabActiveOpacity(hovered, isFocused, activeOpacity, inactiveOpacity)}
+                            inactiveOpacity={styles.tabInactiveOpacity(hovered, isFocused, activeOpacity, inactiveOpacity)}
                         />
                     </AnimatedPressableWithFeedback>
                 )}
diff --git a/src/styles/styles.js b/src/styles/styles.js
index fc796d564d2a..40c1ab878ac6 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3454,9 +3454,9 @@ const styles = (theme) => ({
         backgroundColor: hovered && !isFocused ? theme.highlightBG : backgroundColor,
     }),
 
-    tabActiveOpacity: (hovered, isFocused, activeOpacity) => (hovered && !isFocused ? {opacity: 1} : {opacity: activeOpacity}),
+    tabActiveOpacity: (hovered, isFocused, activeOpacity, inactiveOpacity) => (hovered && !isFocused ? {opacity: inactiveOpacity} : {opacity: activeOpacity}),
 
-    tabInactiveOpacity: (hovered, isFocused, inactiveOpacity) => (hovered && !isFocused ? {opacity: 0} : {opacity: inactiveOpacity}),
+    tabInactiveOpacity: (hovered, isFocused,  activeOpacity, inactiveOpacity) => (hovered && !isFocused ? {opacity: activeOpacity} : {opacity: inactiveOpacity}),
 
     /**
      * @param {String} backgroundColor

From cb4c757eb3352eb785fbea79b7645ec630127314 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Thu, 5 Oct 2023 21:51:33 +0700
Subject: [PATCH 22/32] run prettier

---
 src/styles/styles.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/styles.js b/src/styles/styles.js
index 40c1ab878ac6..faa9b395a928 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3456,7 +3456,7 @@ const styles = (theme) => ({
 
     tabActiveOpacity: (hovered, isFocused, activeOpacity, inactiveOpacity) => (hovered && !isFocused ? {opacity: inactiveOpacity} : {opacity: activeOpacity}),
 
-    tabInactiveOpacity: (hovered, isFocused,  activeOpacity, inactiveOpacity) => (hovered && !isFocused ? {opacity: activeOpacity} : {opacity: inactiveOpacity}),
+    tabInactiveOpacity: (hovered, isFocused, activeOpacity, inactiveOpacity) => (hovered && !isFocused ? {opacity: activeOpacity} : {opacity: inactiveOpacity}),
 
     /**
      * @param {String} backgroundColor

From d1208c4e3a1f7cd3b01d10c490145f42075f3645 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Thu, 5 Oct 2023 23:35:22 +0700
Subject: [PATCH 23/32] unify tabOpacity style function

---
 src/components/TabSelector/TabSelectorItem.js | 8 ++++----
 src/styles/styles.js                          | 4 +---
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/components/TabSelector/TabSelectorItem.js b/src/components/TabSelector/TabSelectorItem.js
index e95386fcf11c..fc047c993205 100644
--- a/src/components/TabSelector/TabSelectorItem.js
+++ b/src/components/TabSelector/TabSelectorItem.js
@@ -57,13 +57,13 @@ function TabSelectorItem({icon, title, onPress, backgroundColor, activeOpacity,
                     >
                         <TabIcon
                             icon={icon}
-                            activeOpacity={styles.tabActiveOpacity(hovered, isFocused, activeOpacity, inactiveOpacity)}
-                            inactiveOpacity={styles.tabInactiveOpacity(hovered, isFocused, activeOpacity, inactiveOpacity)}
+                            activeOpacity={styles.tabOpacity(hovered, isFocused, activeOpacity, inactiveOpacity)}
+                            inactiveOpacity={styles.tabOpacity(hovered, isFocused, inactiveOpacity, activeOpacity)}
                         />
                         <TabLabel
                             title={title}
-                            activeOpacity={styles.tabActiveOpacity(hovered, isFocused, activeOpacity, inactiveOpacity)}
-                            inactiveOpacity={styles.tabInactiveOpacity(hovered, isFocused, activeOpacity, inactiveOpacity)}
+                            activeOpacity={styles.tabOpacity(hovered, isFocused, activeOpacity, inactiveOpacity)}
+                            inactiveOpacity={styles.tabOpacity(hovered, isFocused, inactiveOpacity, activeOpacity)}
                         />
                     </AnimatedPressableWithFeedback>
                 )}
diff --git a/src/styles/styles.js b/src/styles/styles.js
index faa9b395a928..28d9015616f4 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3454,9 +3454,7 @@ const styles = (theme) => ({
         backgroundColor: hovered && !isFocused ? theme.highlightBG : backgroundColor,
     }),
 
-    tabActiveOpacity: (hovered, isFocused, activeOpacity, inactiveOpacity) => (hovered && !isFocused ? {opacity: inactiveOpacity} : {opacity: activeOpacity}),
-
-    tabInactiveOpacity: (hovered, isFocused, activeOpacity, inactiveOpacity) => (hovered && !isFocused ? {opacity: activeOpacity} : {opacity: inactiveOpacity}),
+    tabOpacity: (hovered, isFocused, activeOpacityValue, inactiveOpacityValue) => (hovered && !isFocused ? {opacity: inactiveOpacityValue} : {opacity: activeOpacityValue}),
 
     /**
      * @param {String} backgroundColor

From 8bf5ead3b45a135132ec9f5fef55bed5424991f6 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Thu, 5 Oct 2023 23:46:25 +0700
Subject: [PATCH 24/32] Revert "fix tab opacity"

This reverts commit 3b9681688f808b085239df146f73782568f81a67.
---
 src/components/TabSelector/TabIcon.js  | 8 ++++----
 src/components/TabSelector/TabLabel.js | 8 ++++----
 src/styles/styles.js                   | 2 +-
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/TabSelector/TabIcon.js b/src/components/TabSelector/TabIcon.js
index f197fa7131fd..85f1cd912ff6 100644
--- a/src/components/TabSelector/TabIcon.js
+++ b/src/components/TabSelector/TabIcon.js
@@ -19,20 +19,20 @@ const propTypes = {
 
 const defaultProps = {
     icon: '',
-    inactiveOpacity: {opacity: 1},
-    activeOpacity: {opacity: 0},
+    inactiveOpacity: 1,
+    activeOpacity: 0,
 };
 
 function TabIcon({icon, activeOpacity, inactiveOpacity}) {
     return (
         <View>
-            <Animated.View style={inactiveOpacity}>
+            <Animated.View style={{opacity: inactiveOpacity}}>
                 <Icon
                     src={icon}
                     fill={themeColors.icon}
                 />
             </Animated.View>
-            <Animated.View style={[StyleSheet.absoluteFill, activeOpacity]}>
+            <Animated.View style={[StyleSheet.absoluteFill, {opacity: activeOpacity}]}>
                 <Icon
                     src={icon}
                     fill={themeColors.iconMenu}
diff --git a/src/components/TabSelector/TabLabel.js b/src/components/TabSelector/TabLabel.js
index 819b766b1731..32c8a384d814 100644
--- a/src/components/TabSelector/TabLabel.js
+++ b/src/components/TabSelector/TabLabel.js
@@ -18,17 +18,17 @@ const propTypes = {
 
 const defaultProps = {
     title: '',
-    inactiveOpacity: {opacity: 1},
-    activeOpacity: {opacity: 0},
+    inactiveOpacity: 1,
+    activeOpacity: 0,
 };
 
 function TabLabel({title, activeOpacity, inactiveOpacity}) {
     return (
         <View>
-            <Animated.View style={[activeOpacity]}>
+            <Animated.View style={[{opacity: activeOpacity}]}>
                 <Text style={styles.tabText(true)}>{title}</Text>
             </Animated.View>
-            <Animated.View style={[StyleSheet.absoluteFill, inactiveOpacity]}>
+            <Animated.View style={[StyleSheet.absoluteFill, {opacity: inactiveOpacity}]}>
                 <Text style={styles.tabText(false)}>{title}</Text>
             </Animated.View>
         </View>
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 28d9015616f4..2da270a332d0 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3454,7 +3454,7 @@ const styles = (theme) => ({
         backgroundColor: hovered && !isFocused ? theme.highlightBG : backgroundColor,
     }),
 
-    tabOpacity: (hovered, isFocused, activeOpacityValue, inactiveOpacityValue) => (hovered && !isFocused ? {opacity: inactiveOpacityValue} : {opacity: activeOpacityValue}),
+    tabOpacity: (hovered, isFocused, activeOpacityValue, inactiveOpacityValue) => (hovered && !isFocused ? inactiveOpacityValue : activeOpacityValue),
 
     /**
      * @param {String} backgroundColor

From f05000d4c7d69725822cf15675a9d16f8e05985e Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Fri, 6 Oct 2023 15:59:50 +0900
Subject: [PATCH 25/32] feat: add new comp for iframe

---
 src/components/IFrame.js | 62 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 src/components/IFrame.js

diff --git a/src/components/IFrame.js b/src/components/IFrame.js
new file mode 100644
index 000000000000..04a6c8d43075
--- /dev/null
+++ b/src/components/IFrame.js
@@ -0,0 +1,62 @@
+import React, {useEffect} from 'react';
+
+function getNewDotURL(url) {
+    const urlObj = new URL(url);
+    const paramString = urlObj.searchParams.get('param') ?? '';
+    const pathname = urlObj.pathname.slice(1);
+
+    let params;
+    try {
+        params = JSON.parse(paramString);
+    } catch {
+        params = {};
+    }
+
+    if (pathname === 'inbox') {
+        return 'home';
+    }
+
+    if (pathname === 'expenses') {
+        return `${params.viewMode === 'charts' ? 'insights' : 'expenses'}/${paramString}`;
+    }
+
+    if (pathname === 'admin_policies') {
+        const {section} = params;
+        return section === 'individual' ? 'individual_workspaces' : 'group_workspaces';
+    }
+
+    if (pathname === 'policy') {
+        const workspaceID = params.policyID || '';
+        const section = urlObj.hash.slice(1) || 'overview';
+
+        return `workspace/${workspaceID}/${section}`;
+    }
+
+    if (pathname === 'settings') {
+        const {section} = params;
+        return `settings/${section}`;
+    }
+
+    if (pathname.includes('domain')) {
+        return pathname;
+    }
+
+    return pathname;
+}
+
+export default function ReportScreen() {
+    useEffect(() => {
+        window.addEventListener('message', (event) => {
+            const url = event.data;
+            const newDotURL = getNewDotURL(url);
+        });
+    }, []);
+
+    return (
+        <iframe
+            style={{flex: 1}}
+            src="https://expensify.com.dev"
+            title="OldDot"
+        />
+    );
+}

From fea00f5f6a64bc1da45efc68f58f541d968b0c2c Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Fri, 6 Oct 2023 17:29:52 +0900
Subject: [PATCH 26/32] feat: convert NewDot URL to OldDot URL

---
 src/components/IFrame.js | 46 +++++++++++++++++++++++++++++++++++++---
 1 file changed, 43 insertions(+), 3 deletions(-)

diff --git a/src/components/IFrame.js b/src/components/IFrame.js
index 04a6c8d43075..b2c1b6e7d04c 100644
--- a/src/components/IFrame.js
+++ b/src/components/IFrame.js
@@ -1,4 +1,6 @@
-import React, {useEffect} from 'react';
+/* eslint-disable es/no-nullish-coalescing-operators */
+import React, {useEffect, useState} from 'react';
+import Navigation from '../libs/Navigation/Navigation';
 
 function getNewDotURL(url) {
     const urlObj = new URL(url);
@@ -17,7 +19,7 @@ function getNewDotURL(url) {
     }
 
     if (pathname === 'expenses') {
-        return `${params.viewMode === 'charts' ? 'insights' : 'expenses'}/${paramString}`;
+        return `${params.viewMode === 'charts' ? 'insights' : 'expenses'}${paramString ? `/?param=${paramString}` : ''}`;
     }
 
     if (pathname === 'admin_policies') {
@@ -44,8 +46,46 @@ function getNewDotURL(url) {
     return pathname;
 }
 
+function getOldDotURL(url) {
+    const urlObj = new URL(url);
+    const pathname = urlObj.pathname;
+    const paths = pathname.slice(1).split('/');
+
+    if (pathname === 'home') {
+        return 'inbox';
+    }
+
+    if (pathname === 'expenses' ?? pathname === 'insights') {
+        return `expenses/${urlObj.search}`;
+    }
+
+    if (pathname === 'individual_workspaces' || pathname === 'group_workspaces') {
+        const param = {section: pathname === 'individual_workspaces' ? 'individual' : 'group'};
+        return `admin_policies?param=${JSON.stringify(param)}`;
+    }
+
+    if (pathname === 'workspace') {
+        const [, workspaceID, section] = paths;
+        const param = {policyID: workspaceID};
+        return `policy/?param${JSON.stringify(param)}#${section}`;
+    }
+
+    if (pathname === 'settings') {
+        const [, section] = paths;
+        const param = {section};
+        return `settings?param=${JSON.stringify(param)}`;
+    }
+
+    return pathname;
+}
+
 export default function ReportScreen() {
+    const [oldDotURL, setOldDotURL] = useState('https://expensify.com.dev');
+
     useEffect(() => {
+        const route = Navigation.getActiveRoute();
+        setOldDotURL(`https://expensify.com.dev/${getOldDotURL(route)}`);
+
         window.addEventListener('message', (event) => {
             const url = event.data;
             const newDotURL = getNewDotURL(url);
@@ -55,7 +95,7 @@ export default function ReportScreen() {
     return (
         <iframe
             style={{flex: 1}}
-            src="https://expensify.com.dev"
+            src={oldDotURL}
             title="OldDot"
         />
     );

From 00945f4f8416c70f69c639e2398910b6f2874add Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Sat, 7 Oct 2023 06:33:07 +0700
Subject: [PATCH 27/32] Resolve issue hover not working after pressing back
 from another screen

---
 src/components/TabSelector/TabSelectorItem.js | 46 +++++++++----------
 src/styles/styles.js                          |  4 +-
 2 files changed, 24 insertions(+), 26 deletions(-)

diff --git a/src/components/TabSelector/TabSelectorItem.js b/src/components/TabSelector/TabSelectorItem.js
index fc047c993205..168a783ad659 100644
--- a/src/components/TabSelector/TabSelectorItem.js
+++ b/src/components/TabSelector/TabSelectorItem.js
@@ -1,11 +1,10 @@
-import {Animated, View} from 'react-native';
+import {Animated, View, StyleSheet} from 'react-native';
 import React from 'react';
 import PropTypes from 'prop-types';
 import styles from '../../styles/styles';
 import PressableWithFeedback from '../Pressable/PressableWithFeedback';
 import TabIcon from './TabIcon';
 import TabLabel from './TabLabel';
-import Hoverable from '../Hoverable';
 
 const propTypes = {
     /** Function to call when onPress */
@@ -47,28 +46,27 @@ const AnimatedPressableWithFeedback = Animated.createAnimatedComponent(Pressable
 
 function TabSelectorItem({icon, title, onPress, backgroundColor, activeOpacity, inactiveOpacity, isFocused}) {
     return (
-        <View style={[styles.flex1]}>
-            <Hoverable>
-                {(hovered) => (
-                    <AnimatedPressableWithFeedback
-                        accessibilityLabel={title}
-                        style={[styles.tabSelectorButton, styles.tabBackground(hovered, isFocused, backgroundColor)]}
-                        onPress={onPress}
-                    >
-                        <TabIcon
-                            icon={icon}
-                            activeOpacity={styles.tabOpacity(hovered, isFocused, activeOpacity, inactiveOpacity)}
-                            inactiveOpacity={styles.tabOpacity(hovered, isFocused, inactiveOpacity, activeOpacity)}
-                        />
-                        <TabLabel
-                            title={title}
-                            activeOpacity={styles.tabOpacity(hovered, isFocused, activeOpacity, inactiveOpacity)}
-                            inactiveOpacity={styles.tabOpacity(hovered, isFocused, inactiveOpacity, activeOpacity)}
-                        />
-                    </AnimatedPressableWithFeedback>
-                )}
-            </Hoverable>
-        </View>
+        <AnimatedPressableWithFeedback
+            accessibilityLabel={title}
+            style={[styles.tabSelectorButton, {backgroundColor}]}
+            wrapperStyle={[styles.flex1]}
+            onPress={onPress}
+        >
+            {({hovered}) => (
+                <View style={[styles.tabSelectorButton, StyleSheet.absoluteFill, styles.tabBackground(hovered, isFocused, undefined)]}>
+                    <TabIcon
+                        icon={icon}
+                        activeOpacity={styles.tabOpacity(hovered, isFocused, activeOpacity, inactiveOpacity)}
+                        inactiveOpacity={styles.tabOpacity(hovered, isFocused, inactiveOpacity, activeOpacity)}
+                    />
+                    <TabLabel
+                        title={title}
+                        activeOpacity={styles.tabOpacity(hovered, isFocused, activeOpacity, inactiveOpacity)}
+                        inactiveOpacity={styles.tabOpacity(hovered, isFocused, inactiveOpacity, activeOpacity)}
+                    />
+                </View>
+            )}
+        </AnimatedPressableWithFeedback>
     );
 }
 
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 2da270a332d0..81b3b139dcd6 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3450,8 +3450,8 @@ const styles = (theme) => ({
         color: isSelected ? theme.textLight : theme.textSupporting,
     }),
 
-    tabBackground: (hovered, isFocused, backgroundColor) => ({
-        backgroundColor: hovered && !isFocused ? theme.highlightBG : backgroundColor,
+    tabBackground: (hovered, isFocused) => ({
+        backgroundColor: hovered && !isFocused ? theme.highlightBG : undefined,
     }),
 
     tabOpacity: (hovered, isFocused, activeOpacityValue, inactiveOpacityValue) => (hovered && !isFocused ? inactiveOpacityValue : activeOpacityValue),

From bab483bd9c85bae4ce042e1d0950e2936d21c9ff Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Sat, 7 Oct 2023 20:10:35 +0700
Subject: [PATCH 28/32] tidy up code

---
 src/components/TabSelector/TabSelectorItem.js | 16 +++++++---------
 src/styles/styles.js                          |  4 ++--
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/components/TabSelector/TabSelectorItem.js b/src/components/TabSelector/TabSelectorItem.js
index 168a783ad659..30675de538ae 100644
--- a/src/components/TabSelector/TabSelectorItem.js
+++ b/src/components/TabSelector/TabSelectorItem.js
@@ -1,4 +1,4 @@
-import {Animated, View, StyleSheet} from 'react-native';
+import {Animated, StyleSheet} from 'react-native';
 import React from 'react';
 import PropTypes from 'prop-types';
 import styles from '../../styles/styles';
@@ -42,18 +42,16 @@ const defaultProps = {
     isFocused: false,
 };
 
-const AnimatedPressableWithFeedback = Animated.createAnimatedComponent(PressableWithFeedback);
-
 function TabSelectorItem({icon, title, onPress, backgroundColor, activeOpacity, inactiveOpacity, isFocused}) {
     return (
-        <AnimatedPressableWithFeedback
+        <PressableWithFeedback
             accessibilityLabel={title}
-            style={[styles.tabSelectorButton, {backgroundColor}]}
+            style={[styles.tabSelectorButton]}
             wrapperStyle={[styles.flex1]}
             onPress={onPress}
         >
-            {({hovered}) => (
-                <View style={[styles.tabSelectorButton, StyleSheet.absoluteFill, styles.tabBackground(hovered, isFocused, undefined)]}>
+            {({ hovered }) => (
+                <Animated.View style={[styles.tabSelectorButton, StyleSheet.absoluteFill, styles.tabBackground(hovered, isFocused, backgroundColor)]}>
                     <TabIcon
                         icon={icon}
                         activeOpacity={styles.tabOpacity(hovered, isFocused, activeOpacity, inactiveOpacity)}
@@ -64,9 +62,9 @@ function TabSelectorItem({icon, title, onPress, backgroundColor, activeOpacity,
                         activeOpacity={styles.tabOpacity(hovered, isFocused, activeOpacity, inactiveOpacity)}
                         inactiveOpacity={styles.tabOpacity(hovered, isFocused, inactiveOpacity, activeOpacity)}
                     />
-                </View>
+                </Animated.View>
             )}
-        </AnimatedPressableWithFeedback>
+        </PressableWithFeedback>
     );
 }
 
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 8afdd83e0672..d4aacfff96aa 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3491,8 +3491,8 @@ const styles = (theme) => ({
         color: isSelected ? theme.textLight : theme.textSupporting,
     }),
 
-    tabBackground: (hovered, isFocused) => ({
-        backgroundColor: hovered && !isFocused ? theme.highlightBG : undefined,
+    tabBackground: (hovered, isFocused, background) => ({
+        backgroundColor: hovered && !isFocused ? theme.highlightBG : background,
     }),
 
     tabOpacity: (hovered, isFocused, activeOpacityValue, inactiveOpacityValue) => (hovered && !isFocused ? inactiveOpacityValue : activeOpacityValue),

From e2f3650a5b96fcd83ebba3395172a9ffec631939 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Sat, 7 Oct 2023 20:22:48 +0700
Subject: [PATCH 29/32] run prettier

---
 src/components/TabSelector/TabSelectorItem.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TabSelector/TabSelectorItem.js b/src/components/TabSelector/TabSelectorItem.js
index 30675de538ae..6611b8acf914 100644
--- a/src/components/TabSelector/TabSelectorItem.js
+++ b/src/components/TabSelector/TabSelectorItem.js
@@ -50,7 +50,7 @@ function TabSelectorItem({icon, title, onPress, backgroundColor, activeOpacity,
             wrapperStyle={[styles.flex1]}
             onPress={onPress}
         >
-            {({ hovered }) => (
+            {({hovered}) => (
                 <Animated.View style={[styles.tabSelectorButton, StyleSheet.absoluteFill, styles.tabBackground(hovered, isFocused, backgroundColor)]}>
                     <TabIcon
                         icon={icon}

From e3575fdb780db6f8fb4dbd51ebf5569cdd7bdf95 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Mon, 9 Oct 2023 11:45:43 +0900
Subject: [PATCH 30/32] fix: get URL from the window

---
 src/components/IFrame.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/IFrame.js b/src/components/IFrame.js
index b2c1b6e7d04c..49986a67ecc2 100644
--- a/src/components/IFrame.js
+++ b/src/components/IFrame.js
@@ -1,6 +1,5 @@
 /* eslint-disable es/no-nullish-coalescing-operators */
 import React, {useEffect, useState} from 'react';
-import Navigation from '../libs/Navigation/Navigation';
 
 function getNewDotURL(url) {
     const urlObj = new URL(url);
@@ -80,11 +79,10 @@ function getOldDotURL(url) {
 }
 
 export default function ReportScreen() {
-    const [oldDotURL, setOldDotURL] = useState('https://expensify.com.dev');
+    const [oldDotURL, setOldDotURL] = useState('https://www.expensify.com.dev');
 
     useEffect(() => {
-        const route = Navigation.getActiveRoute();
-        setOldDotURL(`https://expensify.com.dev/${getOldDotURL(route)}`);
+        setOldDotURL(`https://expensify.com.dev/${getOldDotURL(window.location.href)}`);
 
         window.addEventListener('message', (event) => {
             const url = event.data;

From ce63e759612b0f021d701ff77ca6bffdc35aac0c Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Mon, 9 Oct 2023 11:58:13 +0900
Subject: [PATCH 31/32] fix: silence lint error

---
 src/components/IFrame.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/IFrame.js b/src/components/IFrame.js
index 49986a67ecc2..650984ecfb0d 100644
--- a/src/components/IFrame.js
+++ b/src/components/IFrame.js
@@ -86,6 +86,8 @@ export default function ReportScreen() {
 
         window.addEventListener('message', (event) => {
             const url = event.data;
+            // TODO: use this value to navigate to a new path
+            // eslint-disable-next-line no-unused-vars
             const newDotURL = getNewDotURL(url);
         });
     }, []);

From b63ee532489fca34cf62c587ec98f45a947421e3 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Mon, 9 Oct 2023 16:00:33 +0900
Subject: [PATCH 32/32] fix: the logical OR

---
 src/components/IFrame.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/IFrame.js b/src/components/IFrame.js
index 650984ecfb0d..129af4254c42 100644
--- a/src/components/IFrame.js
+++ b/src/components/IFrame.js
@@ -54,7 +54,7 @@ function getOldDotURL(url) {
         return 'inbox';
     }
 
-    if (pathname === 'expenses' ?? pathname === 'insights') {
+    if (pathname === 'expenses' || pathname === 'insights') {
         return `expenses/${urlObj.search}`;
     }