fix: adjust layout styles in various components

neuland-ingolstadt · Dec 12, 2024 · 39975ef · 39975ef
1 parent e52f8c7
commit 39975ef
Show file tree

Hide file tree

Showing 8 changed files with 14 additions and 15 deletions.
diff --git a/android/app/build.gradle b/android/app/build.gradle
@@ -91,7 +91,7 @@ android {
         applicationId 'app.neuland'
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 263
+        versionCode 264
         versionName "0.11.0"
     }
     signingConfigs {

diff --git a/app.config.json b/app.config.json
@@ -36,7 +36,7 @@
         "android": {
             "package": "app.neuland",
             "userInterfaceStyle": "automatic",
-            "versionCode": 263
+            "versionCode": 264
         },
         "sdkVersion": "52.0.0",
         "experiments": {

diff --git a/src/app/(tabs)/timetable.tsx b/src/app/(tabs)/timetable.tsx
@@ -17,7 +17,7 @@ export default function FoodRootScreen(): JSX.Element {
             </Head>
             <WorkaroundStack
                 name={'dashboard'}
-                titleKey={'navigation.food'}
+                titleKey={'navigation.timetable'}
                 component={TimetableScreen}
                 fallback
             />

diff --git a/src/components/Food/HeaderRight.tsx b/src/components/Food/HeaderRight.tsx
@@ -37,7 +37,7 @@ export const FoodHeaderRight = (): JSX.Element => {
 
 const stylesheet = createStyleSheet((theme) => ({
     headerButton: {
-        marginHorizontal: 14,
+        marginHorizontal: 12,
     },
     icon: {
         color: theme.colors.text,

diff --git a/src/components/Map/BottomSheetDetailModal.tsx b/src/components/Map/BottomSheetDetailModal.tsx
@@ -10,7 +10,6 @@ import Color from 'color'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { Linking, Platform, Pressable, Share, Text, View } from 'react-native'
-import { useBottomTabBarHeight } from 'react-native-bottom-tabs'
 import { type SharedValue } from 'react-native-reanimated'
 import { createStyleSheet, useStyles } from 'react-native-unistyles'
 
@@ -83,7 +82,6 @@ export const BottomSheetDetailModal = ({
     modalSection,
 }: BottomSheetDetailModalProps): JSX.Element => {
     const { styles } = useStyles(stylesheet)
-    const tabBarHeight = useBottomTabBarHeight()
     return (
         <BottomSheetModalProvider>
             <BottomSheetModal
@@ -94,7 +92,6 @@ export const BottomSheetDetailModal = ({
                 backgroundComponent={BottomSheetBackground}
                 animatedPosition={currentPositionModal}
                 handleIndicatorStyle={styles.indicator}
-                bottomInset={tabBarHeight}
             >
                 <BottomSheetView style={styles.contentContainer}>
                     <View style={styles.modalSectionHeaderContainer}>

diff --git a/src/components/Map/BottomSheetMap.tsx b/src/components/Map/BottomSheetMap.tsx
@@ -5,7 +5,6 @@ import { type FeatureCollection } from 'geojson'
 import React, { useContext, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Platform, Pressable, Text, View } from 'react-native'
-import { useBottomTabBarHeight } from 'react-native-bottom-tabs'
 import Animated, { type SharedValue } from 'react-native-reanimated'
 import {
     useAnimatedStyle,
@@ -61,7 +60,6 @@ const MapBottomSheet: React.FC<MapBottomSheetProps> = ({
     }
 
     const width = t('misc.cancel').length * 11
-    const tabBarHeight = useBottomTabBarHeight()
     return (
         <BottomSheet
             ref={bottomSheetRef}
@@ -76,7 +74,6 @@ const MapBottomSheet: React.FC<MapBottomSheetProps> = ({
                     textInputRef.current?.blur()
                 }
             }}
-            bottomInset={tabBarHeight}
             enableDynamicSizing={false}
             handleIndicatorStyle={styles.indicator}
         >

diff --git a/src/components/Map/MapScreen.tsx b/src/components/Map/MapScreen.tsx
@@ -63,6 +63,7 @@ import {
     Text,
     View,
 } from 'react-native'
+import { useBottomTabBarHeight } from 'react-native-bottom-tabs'
 import Animated, {
     runOnJS,
     useAnimatedStyle,
@@ -80,6 +81,7 @@ import LoadingIndicator from '../Universal/LoadingIndicator'
 import { modalSection } from './ModalSections'
 
 const MapScreen = (): JSX.Element => {
+    const tabBarHeight = useBottomTabBarHeight()
     const navigation = useNavigation()
     const [mapLoadState, setMapLoadState] = useState(LoadingState.LOADING)
     const { styles, theme } = useStyles(stylesheet)
@@ -698,7 +700,7 @@ const MapScreen = (): JSX.Element => {
     }, [availableFilteredGeoJSON])
 
     return (
-        <>
+        <View style={{ ...styles.map, marginBottom: tabBarHeight }}>
             <>
                 {mapLoadState === LoadingState.ERROR && (
                     <View style={styles.errorContainer}>
@@ -918,7 +920,7 @@ const MapScreen = (): JSX.Element => {
                     userKind === USER_GUEST
                 )}
             />
-        </>
+        </View>
     )
 }
 

diff --git a/src/components/Timetable/HeaderButtons.tsx b/src/components/Timetable/HeaderButtons.tsx
@@ -2,7 +2,7 @@ import { usePreferencesStore } from '@/hooks/usePreferencesStore'
 import { trackEvent } from '@aptabase/react-native'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Platform, Pressable } from 'react-native'
+import { Pressable } from 'react-native'
 import { createStyleSheet, useStyles } from 'react-native-unistyles'
 
 import PlatformIcon from '../Universal/Icon'
@@ -13,7 +13,6 @@ export function HeaderLeft(): JSX.Element {
     const setTimetableMode = usePreferencesStore(
         (state) => state.setTimetableMode
     )
-    const marginRight = Platform.OS === 'ios' ? 0 : 10
     const { t } = useTranslation(['accessibility'])
 
     return (
@@ -26,7 +25,7 @@ export function HeaderLeft(): JSX.Element {
                 })
             }}
             hitSlop={10}
-            style={{ marginRight }}
+            style={styles.headerButton}
             accessibilityLabel={t('button.timetableMode')}
         >
             <PlatformIcon
@@ -60,6 +59,7 @@ export function HeaderRight({ setToday }: HeaderRightProps): JSX.Element {
     return (
         <Pressable
             onPressOut={setToday}
+            style={styles.headerButton}
             hitSlop={10}
             accessibilityLabel={t('button.timetableBack')}
         >
@@ -79,6 +79,9 @@ export function HeaderRight({ setToday }: HeaderRightProps): JSX.Element {
 }
 
 const stylesheet = createStyleSheet((theme) => ({
+    headerButton: {
+        marginHorizontal: 12,
+    },
     icon: {
         color: theme.colors.text,
     },