Bugfix/rahul-v1

app/(auth)/pre-signin.tsx

@@ -1,29 +1,30 @@
-import React, { useState, useRef } from "react";
-import {
-  View,
-  Text,
-  Image,
-  Pressable,
-  Dimensions,
-  Platform,
-} from "react-native";
-import { Title, Paragraph } from "react-native-paper";
-import stylesFn from "@/styles/tab1.styles";
-import { useTheme } from "@react-navigation/native";
-import AppLayout from "@/layouts/app-layout";
-import { slides } from "@/constants/Slides";
-import Colors from "@/constants/Colors";
-import { useRouter } from "expo-router";
-import { imageUrl } from "@/utils/url";
 import Button from "@/components/ui/button";
 import SocialButton from "@/components/ui/button/social-button";
+import Colors from "@/constants/Colors";
+import { slides } from "@/constants/Slides";
+import { useBreakpoints } from "@/hooks";
+import AppLayout from "@/layouts/app-layout";
+import stylesFn from "@/styles/tab1.styles";
+import { imageUrl } from "@/utils/url";
 import {
   faArrowRight,
   faEnvelopeOpen,
   faUserPlus,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
-import { useSharedValue, runOnJS } from "react-native-reanimated";
+import { useTheme } from "@react-navigation/native";
+import { useRouter } from "expo-router";
+import React, { useRef, useState } from "react";
+import {
+  Dimensions,
+  Image,
+  Platform,
+  Pressable,
+  Text,
+  View,
+} from "react-native";
+import { Paragraph, Title } from "react-native-paper";
+import { runOnJS, useSharedValue } from "react-native-reanimated";
 import Carousel, {
   ICarouselInstance,
   Pagination,
@@ -63,6 +64,7 @@ const PreSignIn = () => {
     });
   };
 
+  const { xl } = useBreakpoints();
   return (
     <AppLayout>
       {Platform.OS === "web" ? (
@@ -71,7 +73,7 @@ const PreSignIn = () => {
             ref={swiperRef} // Attach the ref to Swiper
             style={styles.wrapper}
             loop={false}
-            width={Dimensions.get("window").width}
+            width={xl ? 800 : Dimensions.get("window").width}
             data={slides}
             onProgressChange={(_, absoluteProgress) => {
               runOnJS((value: number) => {

app/(main)/(drawer)/(tabs)/_layout.tsx

@@ -1,13 +1,13 @@
-import React from "react";
 import { Tabs } from "expo-router";
+import React from "react";
 
-import Colors from "@/constants/Colors";
-import { useClientOnlyValue } from "@/components/useClientOnlyValue";
-import { useBreakpoints } from "@/hooks";
-import { useTheme } from "@react-navigation/native";
+import Header from "@/components/explore-influencers/header";
+import ProfileIcon from "@/components/explore-influencers/profile-icon";
 import NotificationIcon from "@/components/notifications/notification-icon";
 import { View } from "@/components/theme/Themed";
-import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
+import { useClientOnlyValue } from "@/components/useClientOnlyValue";
+import Colors from "@/constants/Colors";
+import { useBreakpoints } from "@/hooks";
 import {
   faComment,
   faFileLines,
@@ -16,12 +16,12 @@ import {
 } from "@fortawesome/free-regular-svg-icons";
 import {
   faComment as faCommentSolid,
-  faHeart as faHeartSolid,
   faFileLines as faFileLinesSolid,
+  faHeart as faHeartSolid,
   faStar as faStarSolid,
 } from "@fortawesome/free-solid-svg-icons";
-import Header from "@/components/explore-influencers/header";
-import ProfileIcon from "@/components/explore-influencers/profile-icon";
+import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
+import { useTheme } from "@react-navigation/native";
 
 const TabLayout = () => {
   const { xl } = useBreakpoints();
@@ -36,13 +36,31 @@ const TabLayout = () => {
         tabBarShowLabel: true,
         tabBarHideOnKeyboard: true,
         tabBarStyle: {
-          display: xl ? "none" : "flex", // Hide the tab bar on desktop screens
-          paddingHorizontal: 8,
+          display: xl ? "none" : "flex",
+          paddingHorizontal: 12,
+          paddingVertical: 6,
+          height: 70,
+          borderTopWidth: 1,
+          borderTopColor: Colors(theme).border,
+          shadowColor: "#000",
+          shadowOffset: { width: 0, height: -1 },
+          shadowOpacity: 0.05,
+          shadowRadius: 4,
+          backgroundColor: Colors(theme).background,
         },
         headerTitleAlign: "left",
         headerTitleStyle: {
-          fontSize: 24,
-          fontWeight: "bold",
+          fontSize: 22,
+          fontWeight: "600",
+        },
+        headerStyle: {
+          backgroundColor: Colors(theme).background,
+          borderBottomWidth: 1,
+          borderBottomColor: Colors(theme).border,
+          shadowColor: "#000",
+          shadowOffset: { width: 0, height: 1 },
+          shadowOpacity: 0.05,
+          shadowRadius: 4,
         },
       }}
     >
@@ -54,7 +72,7 @@ const TabLayout = () => {
             <FontAwesomeIcon
               color={color}
               icon={focused ? faHeartSolid : faHeart}
-              size={24}
+              size={22}
             />
           ),
           headerTitle() {
@@ -80,7 +98,7 @@ const TabLayout = () => {
             <FontAwesomeIcon
               color={color}
               icon={focused ? faCommentSolid : faComment}
-              size={24}
+              size={22}
             />
           ),
           title: "Messages",
@@ -96,7 +114,7 @@ const TabLayout = () => {
             <FontAwesomeIcon
               color={color}
               icon={focused ? faStarSolid : faStar}
-              size={24}
+              size={22}
             />
           ),
           headerRight: () => <NotificationIcon />,
@@ -110,7 +128,7 @@ const TabLayout = () => {
             <FontAwesomeIcon
               color={color}
               icon={focused ? faFileLinesSolid : faFileLines}
-              size={24}
+              size={22}
             />
           ),
           headerRight: () => <NotificationIcon />,

components/drawer-layout/BrandActionItem.tsx

@@ -1,18 +1,19 @@
-import { useTheme } from "@react-navigation/native";
-import { Pressable, StyleSheet } from "react-native";
-import { Text, View } from "../theme/Themed";
 import Colors from "@/constants/Colors";
 import stylesFn from "@/styles/brand-item/BrandItem.styles";
-import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
-import { faChevronRight } from "@fortawesome/free-solid-svg-icons";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
+import { faChevronRight } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
+import { useTheme } from "@react-navigation/native";
+import { Pressable, StyleSheet } from "react-native";
+import { Text, View } from "../theme/Themed";
 
 interface BrandActionItemProps {
   active?: boolean;
   icon?: IconProp;
   onPress: () => void;
   showChevron?: boolean;
   title: string;
+  removeBottomBorder?: boolean
 }
 
 const BrandActionItem: React.FC<BrandActionItemProps> = ({
@@ -21,6 +22,7 @@ const BrandActionItem: React.FC<BrandActionItemProps> = ({
   onPress,
   showChevron = true,
   title,
+  removeBottomBorder
 }) => {
   const theme = useTheme();
   const styles = stylesFn(theme);
@@ -34,6 +36,7 @@ const BrandActionItem: React.FC<BrandActionItemProps> = ({
             borderTopColor: Colors(theme).aliceBlue,
             borderTopWidth: StyleSheet.hairlineWidth,
             backgroundColor: active ? Colors(theme).primary : Colors(theme).background,
+            borderBottomWidth: removeBottomBorder ? 0 : undefined,
           },
         ]}
       >