style(web): improve tabbar styles based on screen width

neuland-ingolstadt · Dec 17, 2024 · 11b027b · 11b027b
1 parent e2ce5f7
commit 11b027b
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 10 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git 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
@@ -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
@@ -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,