From 11b027b5d44a0ca4ffae93ff0c94c4bce6dab4dd Mon Sep 17 00:00:00 2001
From: Robert Eggl <github@roberteggl.dev>
Date: Tue, 17 Dec 2024 11:27:45 +0100
Subject: [PATCH] style(web): improve tabbar styles based on screen width

---
 bun.lockb                            | Bin 661072 -> 661072 bytes
 src/app/(screens)/about.tsx          |   8 ++++++--
 src/components/Layout/Tabbar.web.tsx |   7 +++++++
 src/components/allCards.tsx          |  15 +++++++--------
 4 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/bun.lockb b/bun.lockb
index 311511a17e848ad36a0655bf0cbe570027fe8d05..8c8285c2bb5acbc10333254c8b9ee7dee614b720 100755
GIT binary patch
delta 49
zcmcbxM&rU7jfNJ+7N!>F7M2#)Eo_lBjF#J@YS^+E8I9YI*0KRHI}mehKU&M#Jp%yH
CniBi~

delta 49
zcmcbxM&rU7jfNJ+7N!>F7M2#)Eo_lBj27FYYS^+E8I9VH*0KRHI}mehKU&M#Jp%yH
CY!dna

diff --git a/src/app/(screens)/about.tsx b/src/app/(screens)/about.tsx
index 48c41e9e..c448da37 100644
--- a/src/app/(screens)/about.tsx
+++ b/src/app/(screens)/about.tsx
@@ -10,6 +10,7 @@ import { type FormListSections } from '@/types/components'
 import { trackEvent } from '@aptabase/react-native'
 import { alert } from 'burnt'
 import * as Application from 'expo-application'
+import Constants from 'expo-constants'
 import * as Haptics from 'expo-haptics'
 import { useRouter } from 'expo-router'
 import React, { useState } from 'react'
@@ -42,8 +43,11 @@ export default function About(): JSX.Element {
     const addUnlockedAppIcon = usePreferencesStore(
         (state) => state.addUnlockedAppIcon
     )
-    const version = `${Application.nativeApplicationVersion}`
-    const versionWithCode = `${version} (${Application.nativeBuildVersion})`
+    const version =
+        Application.nativeApplicationVersion ??
+        Constants.expoConfig?.version ??
+        'unknown'
+    const versionWithCode = `${version} (${Application.nativeBuildVersion ?? '0'})`
     const [displayVersion, setDisplayVersion] = useState(version)
 
     const toggleVersion = (): void => {
diff --git a/src/components/Layout/Tabbar.web.tsx b/src/components/Layout/Tabbar.web.tsx
index d821ce9f..6f99f6da 100644
--- a/src/components/Layout/Tabbar.web.tsx
+++ b/src/components/Layout/Tabbar.web.tsx
@@ -13,6 +13,7 @@ const DefaultTabs = (): JSX.Element => {
     const { theme: styleTheme } = useStyles()
     const { t } = useTranslation('navigation')
     const isMobile = Dimensions.get('window').width < 900
+    const isPad = Dimensions.get('window').width < 1300
 
     return (
         <>
@@ -26,6 +27,12 @@ const DefaultTabs = (): JSX.Element => {
                     tabBarStyle: {
                         backgroundColor: styleTheme.colors.card,
                     },
+                    tabBarLabelPosition: isMobile
+                        ? undefined
+                        : isPad
+                          ? 'below-icon'
+                          : 'beside-icon',
+                    tabBarVariant: isMobile ? 'uikit' : 'material',
                 }}
             >
                 <Tabs.Screen
diff --git a/src/components/allCards.tsx b/src/components/allCards.tsx
index 84334d79..81a4d706 100644
--- a/src/components/allCards.tsx
+++ b/src/components/allCards.tsx
@@ -37,13 +37,6 @@ export const AllCards: Card[] = [
         allowed: [USER_STUDENT, USER_EMPLOYEE, USER_GUEST],
         card: () => <EventsCard />,
     },
-    {
-        key: 'food',
-        removable: true,
-        initial: [USER_GUEST],
-        allowed: [USER_GUEST, USER_STUDENT, USER_EMPLOYEE],
-        card: () => <FoodCard />,
-    },
     {
         key: 'library',
         removable: true,
@@ -72,7 +65,13 @@ export const AllCards: Card[] = [
         allowed: [USER_STUDENT, USER_EMPLOYEE],
         card: () => <BaseCard title="lecturers" onPressRoute="lecturers" />,
     },
-
+    {
+        key: 'food',
+        removable: true,
+        initial: [USER_GUEST, USER_STUDENT, USER_EMPLOYEE],
+        allowed: [USER_GUEST, USER_STUDENT, USER_EMPLOYEE],
+        card: () => <FoodCard />,
+    },
     {
         key: 'login',
         removable: false,