fixed calendar after tablet merge

app/(auth)/_layout.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import { Drawer } from "expo-router/drawer";
 import { useSignOut } from "@/hooks/firebase/useSignOut";
-import {DrawerContentScrollView,} from "@react-navigation/drawer";
+import { DrawerContentScrollView } from "@react-navigation/drawer";
 import { Button, ButtonSize, Text, View } from "react-native-ui-lib";
 import { ImageBackground, StyleSheet } from "react-native";
 import DrawerButton from "@/components/shared/DrawerButton";
@@ -20,9 +20,9 @@ import {
   userSettingsView,
 } from "@/components/pages/calendar/atoms";
 import Ionicons from "@expo/vector-icons/Ionicons";
-import Constants from "expo-constants";
 import * as Device from "expo-device";
 import { DeviceType } from "expo-device";
+import FeedbackNavIcon from "@/assets/svgs/FeedbackNavIcon";
 
 export default function TabLayout() {
   const { mutateAsync: signOut } = useSignOut();
@@ -35,14 +35,20 @@ export default function TabLayout() {
     <Drawer
       initialRouteName={"index"}
       detachInactiveScreens
-            screenOptions={({ navigation }) => ({
+      screenOptions={({ navigation, route }) => ({
         headerShown: true,
-                headerRight: () =>
+        headerRight: () => {
-          Device.deviceType === DeviceType.TABLET ? (
+          // Only show ViewSwitch on calendar and todos pages
+          const showViewSwitch = ["calendar", "todos", "index"].includes(
+            route.name
+          );
+          return Device.deviceType === DeviceType.TABLET && showViewSwitch ? (
+            <View marginR-16>
               <ViewSwitch navigation={navigation} />
-          ) : (
+            </View>
-            <></>
+          ) : null;
-          ),
+        },
+        headerStyle: { height: Device.deviceType === DeviceType.TABLET ? 100 : undefined},
         drawerStyle: {
           width: "90%",
           backgroundColor: "#f9f8f7",
@@ -67,7 +73,7 @@ export default function TabLayout() {
             <View
               style={{
                 flexDirection: "row",
-                                paddingHorizontal: 30
+                paddingHorizontal: 30,
               }}
             >
               <View style={{ flex: 1, paddingRight: 5 }}>
@@ -95,7 +101,8 @@ export default function TabLayout() {
                     setUserView(true);
                     setIsFamilyView(false);
                   }}
-                                    icon={<NavGroceryIcon/>}/>
+                  icon={<NavGroceryIcon />}
+                />
                 <DrawerButton
                   color="#ea156d"
                   title={"Feedback"}
@@ -161,7 +168,13 @@ export default function TabLayout() {
                     setUserView(true);
                     setIsFamilyView(false);
                   }}
-                                    icon={<Ionicons name="notifications-outline" size={24} color={"#ffa200"} />}
+                  icon={
+                    <Ionicons
+                      name="notifications-outline"
+                      size={24}
+                      color={"#ffa200"}
+                    />
+                  }
                 />
               </View>
             </View>

app/(auth)/calendar/index.tsx

@@ -30,7 +30,7 @@ export default function Screen() {
   }, [setRefreshTrigger]);
   
   return (
-    <View style={{ backgroundColor: "white" }}>
+    <>
       {Device.deviceType === DeviceType.TABLET ? (
         <TabletCalendarPage />
       ) : (
@@ -58,6 +58,6 @@ export default function Screen() {
       <CalendarPage />
     </ScrollView>
       )}
-    </View>
+    </>
   );
 }

app/(unauth)/index.tsx

@@ -2,6 +2,8 @@ import {SafeAreaView} from "react-native-safe-area-context";
 import {Button, Image, Text, View} from "react-native-ui-lib";
 import React from "react";
 import {useRouter} from "expo-router";
+import * as Device from "expo-device";
+import { DeviceType } from "expo-device";
 
 export default function Screen() {
     const router = useRouter()
@@ -25,7 +27,7 @@ export default function Screen() {
 
                 <View flexG/>
 
-                <View width={"100%"}>
+                <View width={"100%"} centerH>
                     <Button
                         label="Continue"
                         marginT-50
@@ -34,7 +36,7 @@ export default function Screen() {
                             fontSize: 16,
                         }}
                         onPress={() => router.push("/(unauth)/get_started")}
-                        style={{height: 50}}
+                        style={{height: 50, width: Device.deviceType === DeviceType.TABLET ? 629 : "100%"}}
                         backgroundColor="#fd1775"
                     />
                 </View>

components/pages/(tablet_pages)/tablet_components/TabletContainer.tsx

@@ -32,6 +32,7 @@ const styles = StyleSheet.create({
   container: {
     backgroundColor: "white",
     flex: 1,
+    flexDirection: 'row',
     borderTopColor: "#a9a9a9",
     borderTopWidth: 1,
   },

components/pages/settings/UserSettings.tsx

@@ -1,7 +1,13 @@
-import {FloatingButton, Text, TouchableOpacity, View,} from "react-native-ui-lib";
+import {
+  Button,
+  FloatingButton,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native-ui-lib";
 import React, { useState } from "react";
 import { Ionicons } from "@expo/vector-icons";
-import {ScrollView, StyleSheet} from "react-native";
+import { Dimensions, ScrollView, StyleSheet } from "react-native";
 import MyProfile from "./user_settings_views/MyProfile";
 import MyGroup from "./user_settings_views/MyGroup";
 import { useAtom, useSetAtom } from "jotai";
@@ -11,7 +17,7 @@ import PlusIcon from "@/assets/svgs/PlusIcon";
 const UserSettings = () => {
   const setPageIndex = useSetAtom(settingsPageIndex);
   const [userView, setUserView] = useAtom(userSettingsView);
-    const [onNewUserClick, setOnNewUserClick] = useState<(boolean)>(false);
+  const [onNewUserClick, setOnNewUserClick] = useState<boolean>(false);
 
   return (
     <View flexG>
@@ -74,22 +80,24 @@ const UserSettings = () => {
             </TouchableOpacity>
           </View>
           {userView && <MyProfile />}
-                    {!userView && <MyGroup onNewUserClick={onNewUserClick} setOnNewUserClick={setOnNewUserClick}/>}
+          {!userView && (
+            <MyGroup
+              onNewUserClick={onNewUserClick}
+              setOnNewUserClick={setOnNewUserClick}
+            />
+          )}
         </View>
       </ScrollView>
       {!userView && (
-                <FloatingButton
+        <View marginH-28>
-                    fullWidth
+          <Button
-                    hideBackgroundOverlay
+            style={styles.bottomButton}
-                    visible
+            labelStyle={{ fontFamily: "Manrope_600SemiBold", fontSize: 15 }}
-                    button={{
+            label=" Add a user device"
-                        label: " Add a user device",
+            iconSource={() => <PlusIcon height={13} width={14} />}
-                        iconSource: () => <PlusIcon height={13} width={14}/>,
+            onPress={() => setOnNewUserClick(true)}
-                        onPress: () => setOnNewUserClick(true),
-                        style: styles.bottomButton,
-                        labelStyle: {fontFamily: "Manrope_600SemiBold", fontSize: 15},
-                    }}
           />
+        </View>
       )}
     </View>
   );
@@ -99,8 +107,8 @@ const styles = StyleSheet.create({
   bottomButton: {
     position: "absolute",
     bottom: 15,
-        marginHorizontal: 28,
+    marginHorizontal: 0,
-        width: 337,
+    width: "100%",
     backgroundColor: "#e8156c",
     height: 53.26,
   },