From 50d6c5ca32051f2369283e76357518feeca151aa Mon Sep 17 00:00:00 2001
From: Adrian Castro <22133246+castdrian@users.noreply.github.com>
Date: Sun, 10 Mar 2024 10:41:43 +0100
Subject: [PATCH] fix: use stylesheets here because nativewind is broken on iOS

---
 apps/expo/src/app/(tabs)/_layout.tsx          | 34 +++++---
 .../expo/src/components/player/ScrapeCard.tsx | 81 +++++++++++++++----
 2 files changed, 90 insertions(+), 25 deletions(-)

diff --git a/apps/expo/src/app/(tabs)/_layout.tsx b/apps/expo/src/app/(tabs)/_layout.tsx
index 905acc9..f431d48 100644
--- a/apps/expo/src/app/(tabs)/_layout.tsx
+++ b/apps/expo/src/app/(tabs)/_layout.tsx
@@ -1,5 +1,5 @@
 import { useRef } from "react";
-import { Platform, View } from "react-native";
+import { Platform, StyleSheet, View } from "react-native";
 import * as Haptics from "expo-haptics";
 import { Tabs } from "expo-router";
 import * as ScreenOrientation from "expo-screen-orientation";
@@ -9,7 +9,6 @@ import { defaultTheme } from "@movie-web/tailwind-config/themes";
 import { MovieWebSvg } from "~/components/Icon";
 import SvgTabBarIcon from "~/components/SvgTabBarIcon";
 import TabBarIcon from "~/components/TabBarIcon";
-import { cn } from "~/lib/utils";
 import SearchTabContext from "../../components/ui/SearchTabContext";
 
 export default function TabLayout() {
@@ -84,13 +83,10 @@ export default function TabLayout() {
             tabBarLabel: "",
             tabBarIcon: ({ focused }) => (
               <View
-                className={cn(
-                  `top-2 flex h-14 w-14 items-center justify-center overflow-hidden rounded-full text-center align-middle text-2xl text-white ${focused ? "bg-tabBar-active" : "bg-tabBar-inactive"}`,
-                  {
-                    "bg-tabBar-active": focused,
-                    "bg-tabBar-inactive": !focused,
-                  },
-                )}
+                style={[
+                  styles.searchTab,
+                  focused ? styles.active : styles.inactive,
+                ]}
               >
                 <TabBarIcon name="search" color="#FFF" />
               </View>
@@ -121,3 +117,23 @@ export default function TabLayout() {
     </SearchTabContext.Provider>
   );
 }
+
+const styles = StyleSheet.create({
+  searchTab: {
+    top: 2,
+    height: 56, // 14 units in your scale
+    width: 56, // 14 units in your scale
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden",
+    borderRadius: 100,
+    textAlign: "center",
+    // 'alignMiddle' and 'text2xl' would be dependent on your specific implementation
+  },
+  active: {
+    backgroundColor: defaultTheme.extend.colors.tabBar.active,
+  },
+  inactive: {
+    backgroundColor: defaultTheme.extend.colors.tabBar.inactive,
+  },
+});
diff --git a/apps/expo/src/components/player/ScrapeCard.tsx b/apps/expo/src/components/player/ScrapeCard.tsx
index 67bdcf7..10eb181 100644
--- a/apps/expo/src/components/player/ScrapeCard.tsx
+++ b/apps/expo/src/components/player/ScrapeCard.tsx
@@ -1,11 +1,10 @@
 import type { ReactNode } from "react";
 import React from "react";
-import { View } from "react-native";
+import { StyleSheet, View } from "react-native";
 import { MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
 
 import { defaultTheme } from "@movie-web/tailwind-config/themes";
 
-import { cn } from "~/lib/utils";
 import { Text } from "../ui/Text";
 
 export interface ScrapeItemProps {
@@ -83,37 +82,87 @@ export function ScrapeItem(props: ScrapeItemProps) {
   const text = statusTextMap[props.status];
 
   return (
-    <View className="flex flex-col">
-      <View className="flex flex-row items-center gap-4">
+    <View style={styles.scrapeItemContainer}>
+      <View style={styles.itemRow}>
         <StatusCircle type={props.status} percentage={props.percentage ?? 0} />
         <Text
-          className={cn("text-lg", {
-            "text-white": props.status === "pending",
-            "text-type-secondary": props.status !== "pending",
-          })}
+          style={[
+            styles.itemText,
+            props.status === "pending"
+              ? styles.textPending
+              : styles.textSecondary,
+          ]}
         >
           {props.name}
         </Text>
       </View>
-      <View className="flex flex-row gap-4">
-        <View style={{ width: 40 }} />
-        <View>{text && <Text className="mt-1 text-lg">{text}</Text>}</View>
+      <View style={styles.textRow}>
+        <View style={styles.spacer} />
+        <View>{text && <Text style={styles.statusText}>{text}</Text>}</View>
       </View>
-      <View className="ml-12">{props.children}</View>
+      <View style={styles.childrenContainer}>{props.children}</View>
     </View>
   );
 }
 
 export function ScrapeCard(props: ScrapeCardProps) {
   return (
-    <View className="w-96">
+    <View style={styles.cardContainer}>
       <View
-        className={cn("w-96 rounded-xl px-6 py-3", {
-          "bg-video-scraping-card": props.hasChildren,
-        })}
+        style={[
+          styles.cardContent,
+          props.hasChildren ? styles.cardBackground : null,
+        ]}
       >
         <ScrapeItem {...props} />
       </View>
     </View>
   );
 }
+
+const styles = StyleSheet.create({
+  scrapeItemContainer: {
+    flex: 1,
+    flexDirection: "column",
+  },
+  itemRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 16,
+  },
+  itemText: {
+    fontSize: 18,
+  },
+  textPending: {
+    color: "white",
+  },
+  textSecondary: {
+    color: "secondaryColor",
+  },
+  textRow: {
+    flexDirection: "row",
+    gap: 16,
+  },
+  spacer: {
+    width: 40,
+  },
+  statusText: {
+    marginTop: 4,
+    fontSize: 18,
+  },
+  childrenContainer: {
+    marginLeft: 48,
+  },
+  cardContainer: {
+    width: 384,
+  },
+  cardContent: {
+    width: 384,
+    borderRadius: 10,
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+  },
+  cardBackground: {
+    backgroundColor: "cardBackgroundColor",
+  },
+});