add header and background design

apps/expo/src/components/BrandPill.tsx

@@ -0,0 +1,28 @@
+import { Image, Text, View } from "tamagui";
+
+import Icon from "../../assets/images/icon-transparent.png";
+
+export function BrandPill() {
+  return (
+    <View
+      flexDirection="row"
+      alignItems="center"
+      justifyContent="center"
+      paddingHorizontal="$2.5"
+      paddingVertical="$2"
+      gap={2}
+      opacity={0.8}
+      backgroundColor="$pillBackground"
+      borderRadius={24}
+      pressStyle={{
+        opacity: 1,
+        scale: 1.05,
+      }}
+    >
+      <Image source={Icon} height={20} width={20} />
+      <Text fontSize="$4" fontWeight="$bold" paddingRight={5}>
+        movie-web
+      </Text>
+    </View>
+  );
+}

apps/expo/src/components/layout/Header.tsx

@@ -0,0 +1,41 @@
+import { Linking } from "react-native";
+import { FontAwesome6, MaterialIcons } from "@expo/vector-icons";
+import { Circle, View } from "tamagui";
+
+import { DISCORD_LINK, GITHUB_LINK } from "~/constants/core";
+import { BrandPill } from "../BrandPill";
+
+export function Header() {
+  return (
+    <View alignItems="center" gap="$3" flexDirection="row">
+      <BrandPill />
+
+      <Circle
+        backgroundColor="$pillBackground"
+        size="$2.5"
+        pressStyle={{
+          opacity: 1,
+          scale: 1.05,
+        }}
+        onPress={async () => {
+          await Linking.openURL(DISCORD_LINK);
+        }}
+      >
+        <MaterialIcons name="discord" size={20} color="white" />
+      </Circle>
+      <Circle
+        backgroundColor="$pillBackground"
+        size="$2.5"
+        pressStyle={{
+          opacity: 1,
+          scale: 1.05,
+        }}
+        onPress={async () => {
+          await Linking.openURL(GITHUB_LINK);
+        }}
+      >
+        <FontAwesome6 name="github" size={20} color="white" />
+      </Circle>
+    </View>
+  );
+}

apps/expo/src/components/layout/ScreenLayout.tsx

@@ -1,24 +1,34 @@
-import { Text, View } from "tamagui";
+import { View } from "tamagui";
+import { LinearGradient } from "tamagui/linear-gradient";
+
+import { Header } from "./Header";
 
 interface Props {
-  title?: React.ReactNode | string;
-  subtitle?: string;
   children?: React.ReactNode;
 }
 
-export default function ScreenLayout({ title, subtitle, children }: Props) {
+export default function ScreenLayout({ children }: Props) {
   return (
-    <View flex={1} padding={44} backgroundColor="$screenBackground">
-      {typeof title === "string" && (
-        <Text fontWeight="bold" fontSize={24}>
-          {title}
-        </Text>
-      )}
-      {typeof title !== "string" && title}
-      <Text fontSize={16} fontWeight="bold" marginTop={1}>
-        {subtitle}
-      </Text>
-      <View paddingVertical={12}>{children}</View>
-    </View>
+    <LinearGradient
+      flex={1}
+      paddingVertical="$4"
+      paddingHorizontal="$7"
+      colors={[
+        "$shade900",
+        "$purple900",
+        "$purple800",
+        "$shade700",
+        "$shade900",
+      ]}
+      locations={[0.02, 0.15, 0.2, 0.4, 0.8]}
+      start={[0, 0]}
+      end={[1, 1]}
+      flexGrow={1}
+    >
+      <Header />
+      <View paddingVertical="$4" flexGrow={1}>
+        {children}
+      </View>
+    </LinearGradient>
   );
 }

apps/expo/src/components/player/Header.tsx

@@ -1,7 +1,7 @@
-import { Image, Text, View } from "tamagui";
+import { Text, View } from "tamagui";
 
 import { usePlayerStore } from "~/stores/player/store";
-import Icon from "../../../assets/images/icon-transparent.png";
+import { BrandPill } from "../BrandPill";
 import { BackButton } from "./BackButton";
 import { Controls } from "./Controls";
 
@@ -39,21 +39,8 @@ export const Header = () => {
               : ""}
           </Text>
         )}
-        <View
-          height="$3.5"
-          width="$11"
-          flexDirection="row"
-          alignItems="center"
-          justifyContent="center"
-          gap={2}
-          paddingHorizontal="$4"
-          paddingVertical="$1"
-          opacity={0.8}
-          backgroundColor="$pillBackground"
-          borderRadius={24}
-        >
-          <Image source={Icon} height={24} width={24} />
-          <Text fontWeight="bold">movie-web</Text>
+        <View alignItems="center" justifyContent="center" width={130}>
+          <BrandPill />
         </View>
       </View>
     );

apps/expo/src/components/player/QualitySelector.tsx

@@ -28,7 +28,7 @@ export const QualitySelector = () => {
       (key) => qualities[key as keyof typeof qualities]!.url === videoSrc.uri,
     );
 
-    qualityMap = Object.keys(qualities).map((key: string) => ({
+    qualityMap = Object.keys(qualities).map((key) => ({
       quality: key,
       url: qualities[key as keyof typeof qualities]!.url,
     }));

apps/expo/src/components/player/ScraperProcess.tsx

@@ -24,6 +24,7 @@ import { useScrape } from "~/hooks/player/useSourceScrape";
 import { convertMetaToScrapeMedia } from "~/lib/meta";
 import { PlayerStatus } from "~/stores/player/slices/interface";
 import { usePlayerStore } from "~/stores/player/store";
+import { BackButton } from "./BackButton";
 import { ScrapeCard, ScrapeItem } from "./ScrapeCard";
 
 interface ScraperProcessProps {
@@ -169,6 +170,9 @@ export const ScraperProcess = ({
         justifyContent="center"
         backgroundColor="$screenBackground"
       >
+        <View position="absolute" top={40} left={40}>
+          <BackButton />
+        </View>
         <ScrollView
           ref={scrollViewRef}
           contentContainerStyle={{

apps/expo/src/components/ui/Input.tsx

@@ -17,7 +17,6 @@ export const MWInput = styled(Input, {
         outlineStyle: "none",
         focusStyle: {
           borderColor: "$colorTransparent",
-          backgroundColor: "$searchFocused",
         },
       },
     },

apps/expo/src/components/ui/Searchbar.tsx

@@ -51,7 +51,6 @@ export function SearchBar({
 
   return (
     <View
-      marginBottom={12}
       flexDirection="row"
       alignItems="center"
       borderRadius={999}
@@ -67,8 +66,7 @@ export function SearchBar({
         onChangeText={handleChange}
         ref={inputRef}
         placeholder="What are you looking for?"
-        width="80%"
-        borderColor={isFocused ? theme.colorTransparent : theme.inputBorder}
+        width="75%"
         backgroundColor={
           isFocused ? theme.searchFocused : theme.searchBackground
         }