chore(agenda): prevent displacement of date adjustment button in Agenda

Refs #422
polito · Jan 16, 2024 · 9414784 · 9414784
1 parent e274655
commit 9414784
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 14 deletions.
diff --git a/lib/ui/components/Tabs.tsx b/lib/ui/components/Tabs.tsx
@@ -34,11 +34,14 @@ export const Tabs = ({
       accessible={Platform.select({ android: true, ios: false })}
       accessibilityRole="tablist"
       horizontal
-      contentContainerStyle={{
-        paddingHorizontal: spacing[4],
-        paddingVertical: spacing[2],
-        gap: spacing[2],
-      }}
+      contentContainerStyle={[
+        {
+          paddingHorizontal: spacing[4],
+          paddingVertical: spacing[2],
+          gap: spacing[2],
+        },
+        rest.contentContainerStyle,
+      ]}
       style={[{ flexGrow: 0, flexShrink: 0 }, style]}
       {...rest}
     >

diff --git a/src/features/agenda/screens/AgendaWeekScreen.tsx b/src/features/agenda/screens/AgendaWeekScreen.tsx
@@ -10,6 +10,7 @@ import {
 import { ActivityIndicator } from '@lib/ui/components/ActivityIndicator';
 import { HeaderAccessory } from '@lib/ui/components/HeaderAccessory';
 import { IconButton } from '@lib/ui/components/IconButton';
+import { Tabs } from '@lib/ui/components/Tabs';
 import { Calendar } from '@lib/ui/components/calendar/Calendar';
 import { CalendarHeader } from '@lib/ui/components/calendar/CalendarHeader';
 import { useStylesheet } from '@lib/ui/hooks/useStylesheet';
@@ -24,8 +25,8 @@ import { DateTime, IANAZone } from 'luxon';
 
 import { usePreferencesContext } from '../../../core/contexts/PreferencesContext';
 import { useOfflineDisabled } from '../../../core/hooks/useOfflineDisabled';
-import { AgendaFilters } from '../components/AgendaFilters';
 import { AgendaStackParamList } from '../components/AgendaNavigator';
+import { AgendaTypeFilter } from '../components/AgendaTypeFilter';
 import { BookingCard } from '../components/BookingCard';
 import { DeadlineCard } from '../components/DeadlineCard';
 import { ExamCard } from '../components/ExamCard';
@@ -217,14 +218,16 @@ export const AgendaWeekScreen = ({ navigation, route }: Props) => {
   return (
     <>
       <HeaderAccessory justify="space-between">
-        <AgendaFilters />
-        <WeekFilter
-          current={currentWeek}
-          getNext={getNextWeek}
-          getPrev={getPrevWeek}
-          isNextWeekDisabled={isNextWeekDisabled}
-          isPrevWeekDisabled={isPrevWeekDisabled}
-        ></WeekFilter>
+        <Tabs contentContainerStyle={styles.tabs}>
+          <AgendaTypeFilter />
+          <WeekFilter
+            current={currentWeek}
+            getNext={getNextWeek}
+            getPrev={getPrevWeek}
+            isNextWeekDisabled={isNextWeekDisabled}
+            isPrevWeekDisabled={isPrevWeekDisabled}
+          />
+        </Tabs>
       </HeaderAccessory>
       <DatePicker
         modal
@@ -298,6 +301,11 @@ export const AgendaWeekScreen = ({ navigation, route }: Props) => {
 
 const createStyles = ({ spacing }: Theme) =>
   StyleSheet.create({
+    tabs: {
+      alignItems: 'center',
+      paddingHorizontal: spacing[4],
+      paddingVertical: spacing[1],
+    },
     headerContainer: {
       display: 'flex',
       flexDirection: 'row',