REF: BlueTabs to TSX (#6474)

BlueComponents.js

@@ -442,40 +442,3 @@ export function BlueBigCheckmark({ style = {} }) {
     </View>
   );
 }
-
-const tabsStyles = StyleSheet.create({
-  root: {
-    flexDirection: 'row',
-    height: 50,
-    borderColor: '#e3e3e3',
-    borderBottomWidth: 1,
-  },
-  tabRoot: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderColor: 'white',
-    borderBottomWidth: 2,
-  },
-});
-
-export const BlueTabs = ({ active, onSwitch, tabs }) => (
-  <View style={[tabsStyles.root, isIpad && { marginBottom: 30 }]}>
-    {tabs.map((Tab, i) => (
-      <TouchableOpacity
-        key={i}
-        accessibilityRole="button"
-        onPress={() => onSwitch(i)}
-        style={[
-          tabsStyles.tabRoot,
-          active === i && {
-            borderColor: BlueCurrentTheme.colors.buttonAlternativeTextColor,
-            borderBottomWidth: 2,
-          },
-        ]}
-      >
-        <Tab active={active === i} />
-      </TouchableOpacity>
-    ))}
-  </View>
-);

components/Tabs.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { StyleSheet, View, TouchableOpacity } from 'react-native';
+import { useTheme } from './themes';
+
+const tabsStyles = StyleSheet.create({
+  root: {
+    flexDirection: 'row',
+    height: 50,
+    borderColor: '#e3e3e3',
+    borderBottomWidth: 1,
+  },
+  tabRoot: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderColor: 'white',
+    borderBottomWidth: 2,
+  },
+  activeTabRoot: {
+    borderColor: 'transparent',
+    borderBottomWidth: 2,
+  },
+  marginBottom: {
+    marginBottom: 30,
+  },
+});
+
+interface TabProps {
+  active: boolean;
+}
+
+interface TabsProps {
+  active: number;
+  onSwitch: (index: number) => void;
+  tabs: React.ComponentType<TabProps>[];
+  isIpad?: boolean;
+}
+
+export const Tabs: React.FC<TabsProps> = ({ active, onSwitch, tabs, isIpad = false }) => {
+  const { colors } = useTheme();
+  return (
+    <View style={[tabsStyles.root, isIpad && tabsStyles.marginBottom]}>
+      {tabs.map((Tab, i) => (
+        <TouchableOpacity
+          key={i}
+          accessibilityRole="button"
+          onPress={() => onSwitch(i)}
+          style={[tabsStyles.tabRoot, active === i && { ...tabsStyles.activeTabRoot, borderColor: colors.buttonAlternativeTextColor }]}
+        >
+          <Tab active={active === i} />
+        </TouchableOpacity>
+      ))}
+    </View>
+  );
+};

screen/wallets/provideEntropy.js

@@ -8,9 +8,10 @@ import { useNavigation, useRoute } from '@react-navigation/native';
 import loc from '../../loc';
 import { BlueCurrentTheme, useTheme } from '../../components/themes';
 import { FContainer, FButton } from '../../components/FloatButtons';
-import { BlueSpacing20, BlueTabs } from '../../BlueComponents';
+import { BlueSpacing20 } from '../../BlueComponents';
 import navigationStyle from '../../components/navigationStyle';
 import SafeArea from '../../components/SafeArea';
+import { Tabs } from '../../components/Tabs';
 
 const ENTROPY_LIMIT = 256;
 
@@ -244,7 +245,7 @@ const Entropy = () => {
         </View>
       </TouchableOpacity>
 
-      <BlueTabs
+      <Tabs
         active={tab}
         onSwitch={setTab}
         tabs={[