From b58f353a5a56ed21641cd5fe1c49198da1c37904 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lukas=20H=C3=A4rtel?= <lukashaertel@gmail.com>
Date: Sun, 21 Aug 2022 12:15:22 +0200
Subject: [PATCH] Fix theme and action sheet

* Action sheet moved to event tabs, styled for theme.
* Badges for events put with title line to scale properly.
* Use badge-inv-pad for mask requirement.
* Add selection to context, move search context as event tab context.
* Fix bottom sheet web issue.
* Remove bottom sheet web guard.
* Allow optionally transparent badges.
* Adapt theme for navigation provider.
* Label theme fields in documentation.
* Add schedule translations.
* Move event tabs context provider down the tree.
---
 src/App.tsx                                   | 27 +++---
 src/app/Events/EventActionsSheet.tsx          | 39 +++++---
 src/app/Events/EventCard.tsx                  |  8 +-
 src/app/Events/EventCardContent.tsx           | 42 ++++-----
 src/app/Events/EventContent.tsx               | 18 ++--
 src/app/Events/EventsListByDayScreen.tsx      |  5 +
 src/app/Events/EventsListByRoomScreen.tsx     |  4 +
 src/app/Events/EventsListByTrackScreen.tsx    |  4 +
 src/app/Events/EventsListGeneric.tsx          | 62 ++++++-------
 .../Events/EventsListSearchResultsScreen.tsx  |  5 +-
 src/app/Events/EventsSearchScreen.tsx         |  8 +-
 src/app/Events/EventsSectionedListGeneric.tsx | 67 +++++++------
 .../Events/EventsTabsContext.tsx}             | 37 +++++---
 src/app/Events/EventsTabsScreen.tsx           | 93 +++++++++++--------
 src/app/Events/PersonalScheduleList.tsx       |  5 +
 src/app/Maps/MapContent.tsx                   | 45 +++++----
 src/app/ScreenStart.tsx                       |  2 +-
 src/components/Containers/BadgeInvPad.tsx     |  4 +-
 src/context/NavigationProvider.tsx            | 23 ++++-
 src/context/Theme.tsx                         | 93 +++++++++++++++++--
 src/i18n/translations.de.json                 |  2 +
 src/i18n/translations.en.json                 |  1 +
 webpack.config.js                             |  2 +-
 23 files changed, 375 insertions(+), 221 deletions(-)
 rename src/{components/Searching/EventsSearchContext.tsx => app/Events/EventsTabsContext.tsx} (61%)

diff --git a/src/App.tsx b/src/App.tsx
index c83eb616..059ec640 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,7 +6,6 @@ import { PlatformBackgroundSyncManager } from "./components/Managers/BackgroundS
 import { PlatformNotificationReceivedManager } from "./components/Managers/NotificationReceivedManager";
 import { PlatformNotificationRespondedManager } from "./components/Managers/NotificationRespondedManager";
 import { PlatformTokenManager } from "./components/Managers/TokenManager";
-import { EventsSearchProvider } from "./components/Searching/EventsSearchContext";
 import { SynchronizationProvider } from "./components/Synchronization/SynchronizationProvider";
 import { NavigationProvider } from "./context/NavigationProvider";
 
@@ -17,24 +16,22 @@ export default function App() {
     return (
         <BottomSheetModalProvider>
             <SynchronizationProvider>
-                <EventsSearchProvider>
-                    <NavigationProvider>
-                        <ScreenStart />
+                <NavigationProvider>
+                    <ScreenStart />
 
-                        {/* Handle device token acquisition. */}
-                        <PlatformTokenManager />
+                    {/* Handle device token acquisition. */}
+                    <PlatformTokenManager />
 
-                        {/* Handle handling notifications in foreground. */}
-                        <PlatformNotificationReceivedManager />
-                        <PlatformNotificationRespondedManager />
+                    {/* Handle handling notifications in foreground. */}
+                    <PlatformNotificationReceivedManager />
+                    <PlatformNotificationRespondedManager />
 
-                        {/* Handle notifications in background. */}
-                        <PlatformBackgroundSyncManager />
+                    {/* Handle notifications in background. */}
+                    <PlatformBackgroundSyncManager />
 
-                        {/* Set up analytics. */}
-                        <AnalyticsManager />
-                    </NavigationProvider>
-                </EventsSearchProvider>
+                    {/* Set up analytics. */}
+                    <AnalyticsManager />
+                </NavigationProvider>
             </SynchronizationProvider>
         </BottomSheetModalProvider>
     );
diff --git a/src/app/Events/EventActionsSheet.tsx b/src/app/Events/EventActionsSheet.tsx
index 39e60425..1974b1f5 100644
--- a/src/app/Events/EventActionsSheet.tsx
+++ b/src/app/Events/EventActionsSheet.tsx
@@ -1,39 +1,54 @@
 import BottomSheet, { BottomSheetScrollView } from "@gorhom/bottom-sheet";
-import { FC, useEffect, useRef } from "react";
+import { debounce } from "lodash";
+import { FC, useEffect, useMemo, useRef } from "react";
 import { StyleSheet } from "react-native";
 
+import { useThemeBackground } from "../../context/Theme";
 import { EventDetails } from "../../store/eurofurence.types";
 import { EventContent } from "./EventContent";
 
 type EventActionsSheetProps = {
-    eventRecord: EventDetails | undefined;
+    event: EventDetails | null;
     onClose?: () => void;
 };
 
-export const EventActionsSheet: FC<EventActionsSheetProps> = ({ eventRecord, onClose }) => {
+export const EventActionsSheet: FC<EventActionsSheetProps> = ({ event, onClose }) => {
     const sheetRef = useRef<BottomSheet>(null);
+    const styleBackground = useThemeBackground("background");
+    const styleHandle = useThemeBackground("inverted");
+
+    const close = useMemo(() => (onClose ? debounce(onClose, 100) : undefined), [onClose]);
 
     useEffect(() => {
-        if (eventRecord) {
+        if (event) {
             sheetRef.current?.snapToIndex(0);
         } else {
             sheetRef.current?.close();
         }
-    }, [eventRecord]);
-
-    if (eventRecord === undefined) {
-        return null;
-    }
+    }, [sheetRef, event]);
 
     return (
-        <BottomSheet snapPoints={["25%", "50%", "75%"]} index={-1} enablePanDownToClose ref={sheetRef} onClose={onClose}>
-            <BottomSheetScrollView style={styles.container}>{eventRecord && <EventContent event={eventRecord} />}</BottomSheetScrollView>
+        <BottomSheet
+            backgroundStyle={styleBackground}
+            handleStyle={styles.handle}
+            handleIndicatorStyle={styleHandle}
+            ref={sheetRef}
+            snapPoints={["25%", "50%", "75%"]}
+            index={-1}
+            enablePanDownToClose
+            onClose={close}
+        >
+            <BottomSheetScrollView style={styles.content}>{!event ? null : <EventContent event={event} />}</BottomSheetScrollView>
         </BottomSheet>
     );
 };
 
 const styles = StyleSheet.create({
-    container: {
+    handle: {
+        borderTopLeftRadius: 15,
+        borderTopRightRadius: 15,
+    },
+    content: {
         paddingHorizontal: 30,
         paddingBottom: 100,
     },
diff --git a/src/app/Events/EventCard.tsx b/src/app/Events/EventCard.tsx
index b15c8190..6993b75a 100644
--- a/src/app/Events/EventCard.tsx
+++ b/src/app/Events/EventCard.tsx
@@ -39,19 +39,19 @@ export const EventCard: FC<EventCardProps> = ({ type = "duration", event, onPres
             // Return simple label with duration text.
             return (
                 <Col type="center">
-                    <Label type="caption" color={done ? "important" : "invText"}>
+                    <Label type="caption" color={done ? "important" : "white"}>
                         {time}
                     </Label>
-                    <Label color={done ? "important" : "invText"}>{runtime}</Label>
+                    <Label color={done ? "important" : "white"}>{runtime}</Label>
                 </Col>
             );
         } else {
             return (
                 <Col type="center">
-                    <Label type="caption" color={done ? "important" : "invText"}>
+                    <Label type="caption" color={done ? "important" : "white"}>
                         {time}
                     </Label>
-                    <Label color={done ? "important" : "invText"}>{day}</Label>
+                    <Label color={done ? "important" : "white"}>{day}</Label>
                 </Col>
             );
         }
diff --git a/src/app/Events/EventCardContent.tsx b/src/app/Events/EventCardContent.tsx
index 8b552930..cb6549fe 100644
--- a/src/app/Events/EventCardContent.tsx
+++ b/src/app/Events/EventCardContent.tsx
@@ -4,6 +4,7 @@ import { ColorValue, ImageBackground, ImageSourcePropType, StyleSheet, Touchable
 
 import { Indicator } from "../../components/Atoms/Indicator";
 import { Label } from "../../components/Atoms/Label";
+import { Row } from "../../components/Containers/Row";
 import { useTheme } from "../../context/Theme";
 import { IconNames } from "../../types/IconNames";
 import { appStyles } from "../AppStyles";
@@ -31,7 +32,7 @@ export const EventCardContent: FC<EventCardProps> = memo(({ badges, glyph, pre,
     const stylePre = useMemo<ViewStyle>(() => ({ backgroundColor: done ? theme.darken : theme.primary }), [done, theme]);
     const styleBadgeFrame = useMemo<ViewStyle>(() => ({ backgroundColor: theme.secondary }), [theme]);
     const colorBadge = useMemo<ColorValue>(() => theme.white, [theme]);
-    const colorGlyph = useMemo<ColorValue>(() => (done ? theme.soften : theme.white), [done, theme]);
+    const colorGlyph = useMemo<ColorValue>(() => theme.lighten, [theme]);
     return (
         <TouchableOpacity style={[styles.container, appStyles.shadow, styleContainer]} onPress={onPress} onLongPress={onLongPress}>
             <View style={[styles.pre, stylePre]}>
@@ -62,7 +63,17 @@ export const EventCardContent: FC<EventCardProps> = memo(({ badges, glyph, pre,
                 </View>
             ) : (
                 <View style={styles.mainText}>
-                    <Label type="h3">{title}</Label>
+                    <Row>
+                        <Label style={styles.title} type="h3">
+                            {title}
+                        </Label>
+
+                        {badges?.map((icon) => (
+                            <View key={icon} style={[styles.badgeFrame, styleBadgeFrame]}>
+                                <Icon name={icon} color={colorBadge} size={badgeIconSize} />
+                            </View>
+                        )) ?? null}
+                    </Row>
                     <Label type="h4" variant="narrow">
                         {subtitle}
                     </Label>
@@ -72,16 +83,6 @@ export const EventCardContent: FC<EventCardProps> = memo(({ badges, glyph, pre,
                 </View>
             )}
 
-            {!badges ? null : (
-                <View style={styles.badgeContainer}>
-                    {badges.map((icon) => (
-                        <View key={icon} style={[styles.badgeFrame, styleBadgeFrame]}>
-                            <Icon name={icon} color={colorBadge} size={badgeIconSize} />
-                        </View>
-                    ))}
-                </View>
-            )}
-
             {!happening ? null : (
                 <View style={styles.indicator}>
                     <Indicator color={theme.white} />
@@ -109,20 +110,14 @@ const styles = StyleSheet.create({
         justifyContent: "center",
     },
     glyph: {
-        opacity: 0.2,
+        opacity: 0.25,
         transform: [{ rotate: "-15deg" }],
     },
-    badgeContainer: {
-        position: "absolute",
-        top: 0,
-        right: 0,
-        flexDirection: "row",
-    },
     badgeFrame: {
-        borderRadius: 16,
-        flex: 1,
+        borderRadius: 20,
+        aspectRatio: 1,
         padding: 4,
-        margin: 8,
+        marginLeft: 8,
     },
     pre: {
         overflow: "hidden",
@@ -139,6 +134,9 @@ const styles = StyleSheet.create({
         flex: 1,
         padding: 16,
     },
+    title: {
+        flex: 1,
+    },
     subtitleArea: {
         flexDirection: "row",
         justifyContent: "space-between",
diff --git a/src/app/Events/EventContent.tsx b/src/app/Events/EventContent.tsx
index b6d694fc..d1f84e2f 100644
--- a/src/app/Events/EventContent.tsx
+++ b/src/app/Events/EventContent.tsx
@@ -1,4 +1,3 @@
-import Icon from "@expo/vector-icons/MaterialCommunityIcons";
 import moment from "moment";
 import React, { FC, useCallback } from "react";
 import { useTranslation } from "react-i18next";
@@ -16,6 +15,7 @@ import { appBase, conAbbr } from "../../configuration";
 import { useTheme } from "../../context/Theme";
 import { useAppNavigation } from "../../hooks/useAppNavigation";
 import { useEventReminder } from "../../hooks/useEventReminder";
+import { captureException } from "../../sentryHelpers";
 import { useAppSelector } from "../../store";
 import { selectValidLinksByTarget } from "../../store/eurofurence.selectors";
 import { EventDetails } from "../../store/eurofurence.types";
@@ -56,7 +56,7 @@ export const EventContent: FC<EventContentProps> = ({ event, parentPad = 0 }) =>
                 message: `Check out ${event.Title} on ${conAbbr}!\n${appBase}/Web/Events/${event.Id}`,
             },
             {}
-        );
+        ).catch(captureException);
     }, [event]);
 
     return (
@@ -85,15 +85,12 @@ export const EventContent: FC<EventContentProps> = ({ event, parentPad = 0 }) =>
             </MarkdownContent>
 
             {!event.MaskRequired ? null : (
-                <Row variant={"center"} style={{ marginBottom: 20 }}>
-                    <Icon name={"face-mask"} style={{ flexGrow: 1 }} size={20} color={theme.secondary} />
-                    <Label type="para" style={{ flexGrow: 9 }} color={theme.secondary}>
-                        {t("mask_required")}
-                    </Label>
-                </Row>
+                <BadgeInvPad padding={parentPad} icon="face-mask" textColor={theme.secondary} textType="regular" textVariant="regular">
+                    {t("mask_required")}
+                </BadgeInvPad>
             )}
 
-            <Row>
+            <Row style={styles.marginBefore}>
                 <Button style={styles.rowLeft} outline={isFavorited} icon={isFavorited ? "heart-outline" : "heart"} onPress={toggleReminder}>
                     {isFavorited ? t("remove_favorite") : t("add_favorite")}
                 </Button>
@@ -158,6 +155,9 @@ const styles = StyleSheet.create({
     share: {
         marginVertical: 15,
     },
+    marginBefore: {
+        marginTop: 20,
+    },
     posterLine: {
         marginTop: 20,
         alignItems: "center",
diff --git a/src/app/Events/EventsListByDayScreen.tsx b/src/app/Events/EventsListByDayScreen.tsx
index f7973d80..5fb2f64f 100644
--- a/src/app/Events/EventsListByDayScreen.tsx
+++ b/src/app/Events/EventsListByDayScreen.tsx
@@ -15,6 +15,7 @@ import { IconNames } from "../../types/IconNames";
 import { ScreenAreasParamsList } from "../ScreenAreas";
 import { ScreenStartParamsList } from "../ScreenStart";
 import { EventsSectionedListGeneric } from "./EventsSectionedListGeneric";
+import { useEventsTabsContext } from "./EventsTabsContext";
 import { EventsTabsScreenParamsList } from "./EventsTabsScreen";
 
 /**
@@ -35,6 +36,9 @@ export type EventsListByDayScreenProps =
 export const EventsListByDayScreen: FC<EventsListByDayScreenProps> = memo(({ route }) => {
     const { t } = useTranslation("Events");
     const [now] = useNow();
+
+    const { setSelected } = useEventsTabsContext();
+
     // Get the day. Use it to resolve events to display.
     // TODO: @lukashaertel pls fix
     const day = useAppSelector((state) => eventDaysSelectors.selectById(state, route.name));
@@ -76,6 +80,7 @@ export const EventsListByDayScreen: FC<EventsListByDayScreenProps> = memo(({ rou
     return (
         <EventsSectionedListGeneric
             eventsGroups={eventsGroups}
+            select={setSelected}
             leader={
                 <Label type="h1" variant="middle" mt={30}>
                     {day?.Name ?? ""}
diff --git a/src/app/Events/EventsListByRoomScreen.tsx b/src/app/Events/EventsListByRoomScreen.tsx
index fefc1574..e16a574c 100644
--- a/src/app/Events/EventsListByRoomScreen.tsx
+++ b/src/app/Events/EventsListByRoomScreen.tsx
@@ -15,6 +15,7 @@ import { IconNames } from "../../types/IconNames";
 import { ScreenAreasParamsList } from "../ScreenAreas";
 import { ScreenStartParamsList } from "../ScreenStart";
 import { EventsSectionedListGeneric } from "./EventsSectionedListGeneric";
+import { useEventsTabsContext } from "./EventsTabsContext";
 import { EventsTabsScreenParamsList } from "./EventsTabsScreen";
 
 /**
@@ -36,6 +37,8 @@ export const EventsListByRoomScreen: FC<EventsListByRoomScreenProps> = ({ route
     const { t } = useTranslation("Events");
     const isEventDone = useIsEventDone();
 
+    const { setSelected } = useEventsTabsContext();
+
     // Get the room. Use it to resolve events to display.
     const room = useAppSelector((state) => eventRoomsSelectors.selectById(state, route.name));
     const eventsByRoom = useAppSelector((state) => selectEventsByRoom(state, room?.Id ?? ""));
@@ -72,6 +75,7 @@ export const EventsListByRoomScreen: FC<EventsListByRoomScreenProps> = ({ route
     return (
         <EventsSectionedListGeneric
             eventsGroups={eventsGroups}
+            select={setSelected}
             leader={
                 <Label type="h1" variant="middle" mt={30}>
                     {room?.Name ?? ""}
diff --git a/src/app/Events/EventsListByTrackScreen.tsx b/src/app/Events/EventsListByTrackScreen.tsx
index fce52ae5..9df231af 100644
--- a/src/app/Events/EventsListByTrackScreen.tsx
+++ b/src/app/Events/EventsListByTrackScreen.tsx
@@ -15,6 +15,7 @@ import { IconNames } from "../../types/IconNames";
 import { ScreenAreasParamsList } from "../ScreenAreas";
 import { ScreenStartParamsList } from "../ScreenStart";
 import { EventsSectionedListGeneric } from "./EventsSectionedListGeneric";
+import { useEventsTabsContext } from "./EventsTabsContext";
 import { EventsTabsScreenParamsList } from "./EventsTabsScreen";
 
 /**
@@ -36,6 +37,8 @@ export const EventsListByTrackScreen: FC<EventsListByTrackScreenProps> = ({ rout
     const { t } = useTranslation("Events");
     const isEventDone = useIsEventDone();
 
+    const { setSelected } = useEventsTabsContext();
+
     // Get the track. Use it to resolve events to display.
     const track = useAppSelector((state) => eventTracksSelectors.selectById(state, route.name));
     const eventsByTrack = useAppSelector((state) => selectEventsByTrack(state, track?.Id ?? ""));
@@ -72,6 +75,7 @@ export const EventsListByTrackScreen: FC<EventsListByTrackScreenProps> = ({ rout
     return (
         <EventsSectionedListGeneric
             eventsGroups={eventsGroups}
+            select={setSelected}
             leader={
                 <Label type="h1" variant="middle" mt={30}>
                     {track?.Name ?? ""}
diff --git a/src/app/Events/EventsListGeneric.tsx b/src/app/Events/EventsListGeneric.tsx
index 770b37fc..d201bcdd 100644
--- a/src/app/Events/EventsListGeneric.tsx
+++ b/src/app/Events/EventsListGeneric.tsx
@@ -1,8 +1,7 @@
-import { FC, ReactNode, useCallback, useState } from "react";
-import { FlatList, StyleSheet, Vibration, View } from "react-native";
+import { FC, ReactNode, useCallback } from "react";
+import { FlatList, StyleSheet, Vibration } from "react-native";
 
 import { EventDetails } from "../../store/eurofurence.types";
-import { EventActionsSheet } from "./EventActionsSheet";
 import { EventCard } from "./EventCard";
 import { EventsListByDayScreenProps } from "./EventsListByDayScreen";
 import { EventsListByRoomScreenProps } from "./EventsListByRoomScreen";
@@ -25,14 +24,13 @@ export type EventsListGenericProps = {
         | EventsListByTrackScreenProps["navigation"];
     leader?: ReactNode;
     events: EventDetails[];
+    select?: (event: EventDetails) => void;
+    empty?: ReactNode;
     trailer?: ReactNode;
     cardType?: "duration" | "time";
 };
 
-export const EventsListGeneric: FC<EventsListGenericProps> = ({ navigation, leader, events, trailer, cardType = "duration" }) => {
-    // Set event for action sheet
-    const [selectedEvent, setSelectedEvent] = useState<EventDetails | undefined>(undefined);
-
+export const EventsListGeneric: FC<EventsListGenericProps> = ({ navigation, leader, events, select, empty, trailer, cardType = "duration" }) => {
     // Prepare navigation callback. This clones the respective parameters, as otherwise illegal mutation will occur.
     const navigateTo = useCallback(
         (event: EventDetails) =>
@@ -43,32 +41,30 @@ export const EventsListGeneric: FC<EventsListGenericProps> = ({ navigation, lead
     );
 
     return (
-        <View style={StyleSheet.absoluteFill}>
-            <FlatList
-                style={styles.list}
-                contentContainerStyle={styles.container}
-                scrollEnabled={true}
-                ListHeaderComponent={<>{leader}</>}
-                ListFooterComponent={<>{trailer}</>}
-                data={events}
-                keyExtractor={(item) => item.Id}
-                initialNumToRender={5}
-                maxToRenderPerBatch={5}
-                renderItem={(entry: { item: EventDetails }) => (
-                    <EventCard
-                        key={entry.item.Id}
-                        event={entry.item}
-                        type={cardType}
-                        onPress={() => navigateTo(entry.item)}
-                        onLongPress={() => {
-                            Vibration.vibrate(50);
-                            setSelectedEvent(entry.item);
-                        }}
-                    />
-                )}
-            />
-            <EventActionsSheet eventRecord={selectedEvent} onClose={() => setSelectedEvent(undefined)} />
-        </View>
+        <FlatList
+            style={styles.list}
+            contentContainerStyle={styles.container}
+            scrollEnabled={true}
+            ListHeaderComponent={<>{leader}</>}
+            ListFooterComponent={<>{trailer}</>}
+            ListEmptyComponent={<>{empty}</>}
+            data={events}
+            keyExtractor={(item) => item.Id}
+            initialNumToRender={5}
+            maxToRenderPerBatch={5}
+            renderItem={(entry: { item: EventDetails }) => (
+                <EventCard
+                    key={entry.item.Id}
+                    event={entry.item}
+                    type={cardType}
+                    onPress={() => navigateTo(entry.item)}
+                    onLongPress={() => {
+                        Vibration.vibrate(50);
+                        select && select(entry.item);
+                    }}
+                />
+            )}
+        />
     );
 };
 
diff --git a/src/app/Events/EventsListSearchResultsScreen.tsx b/src/app/Events/EventsListSearchResultsScreen.tsx
index b0c3a282..3b66fc30 100644
--- a/src/app/Events/EventsListSearchResultsScreen.tsx
+++ b/src/app/Events/EventsListSearchResultsScreen.tsx
@@ -8,10 +8,10 @@ import { Section } from "../../components/Atoms/Section";
 import { Button } from "../../components/Containers/Button";
 import { PagesScreenProps } from "../../components/Navigators/PagesNavigator";
 import { TabScreenProps } from "../../components/Navigators/TabsNavigator";
-import { useEventsSearchContext } from "../../components/Searching/EventsSearchContext";
 import { ScreenAreasParamsList } from "../ScreenAreas";
 import { ScreenStartParamsList } from "../ScreenStart";
 import { EventsListGeneric } from "./EventsListGeneric";
+import { useEventsTabsContext } from "./EventsTabsContext";
 import { EventsTabsScreenParamsList } from "./EventsTabsScreen";
 
 /**
@@ -30,7 +30,7 @@ export type EventsListSearchResultsScreenProps =
     >;
 
 export const EventsListSearchResultsScreen: FC<EventsListSearchResultsScreenProps> = ({ navigation }) => {
-    const { search, setSearch, results } = useEventsSearchContext();
+    const { search, setSearch, results, setSelected } = useEventsTabsContext();
 
     const onClear = useCallback(() => {
         setSearch("");
@@ -43,6 +43,7 @@ export const EventsListSearchResultsScreen: FC<EventsListSearchResultsScreenProp
         <EventsListGeneric
             navigation={navigation}
             events={events}
+            select={setSelected}
             cardType="time"
             leader={
                 <View style={{ paddingBottom: 30 }}>
diff --git a/src/app/Events/EventsSearchScreen.tsx b/src/app/Events/EventsSearchScreen.tsx
index a344a69f..cfa26691 100644
--- a/src/app/Events/EventsSearchScreen.tsx
+++ b/src/app/Events/EventsSearchScreen.tsx
@@ -12,10 +12,10 @@ import { Row } from "../../components/Containers/Row";
 import { Tab } from "../../components/Containers/Tab";
 import { PagesScreenProps } from "../../components/Navigators/PagesNavigator";
 import { TabScreenProps } from "../../components/Navigators/TabsNavigator";
-import { useEventsSearchContext } from "../../components/Searching/EventsSearchContext";
 import { useTheme } from "../../context/Theme";
 import { ScreenAreasParamsList } from "../ScreenAreas";
 import { ScreenStartParamsList } from "../ScreenStart";
+import { useEventsTabsContext } from "./EventsTabsContext";
 import { EventsTabsScreenParamsList } from "./EventsTabsScreen";
 
 /**
@@ -35,7 +35,7 @@ export type EventsSearchScreenProps =
 
 export const EventsSearchScreen: FC<EventsSearchScreenProps> = ({ navigation }) => {
     const { t } = useTranslation("Events");
-    const { search, setSearch, results } = useEventsSearchContext();
+    const { search, setSearch, results } = useEventsTabsContext();
 
     // Hide keyboard on navigating away from this page.
     const isFocused = useIsFocused();
@@ -48,14 +48,14 @@ export const EventsSearchScreen: FC<EventsSearchScreenProps> = ({ navigation })
     const onTrack = useCallback(() => navigation.getParent()?.setParams({ filterType: "tracks" }), [navigation]);
 
     const theme = useTheme();
-    const border = useMemo<ViewStyle>(() => ({ borderBottomColor: theme.text }), [theme]);
+    const searchStyle = useMemo<ViewStyle>(() => ({ color: theme.text, borderBottomColor: theme.text }), [theme]);
     const roundedStyle = useMemo<ViewStyle>(() => ({ backgroundColor: theme.secondary }), [theme]);
     return (
         <Floater>
             <View style={styles.end}>
                 <View style={styles.searchArea}>
                     <Label type="caption">Enter your query</Label>
-                    <TextInput style={[styles.searchField, border]} value={search} onChangeText={setSearch} placeholder="Enter query" />
+                    <TextInput style={[styles.searchField, searchStyle]} value={search} onChangeText={setSearch} placeholder="Enter query" />
 
                     {!results ? null : <Button onPress={() => navigation.jumpTo("Results")}>View all {results.length} results</Button>}
                 </View>
diff --git a/src/app/Events/EventsSectionedListGeneric.tsx b/src/app/Events/EventsSectionedListGeneric.tsx
index 894d01d3..91a26cc4 100644
--- a/src/app/Events/EventsSectionedListGeneric.tsx
+++ b/src/app/Events/EventsSectionedListGeneric.tsx
@@ -1,10 +1,9 @@
-import { FC, ReactNode, useCallback, useState } from "react";
-import { SectionList, StyleSheet, Vibration, View } from "react-native";
+import { FC, ReactNode, useCallback } from "react";
+import { SectionList, StyleSheet, Vibration } from "react-native";
 
 import { useSynchronizer } from "../../components/Synchronization/SynchronizationProvider";
 import { useAppNavigation } from "../../hooks/useAppNavigation";
 import { EventDetails } from "../../store/eurofurence.types";
-import { EventActionsSheet } from "./EventActionsSheet";
 import { EventCard } from "./EventCard";
 import { EventSection, EventSectionProps } from "./EventSection";
 
@@ -18,49 +17,47 @@ export type EventsSectionedListItem = EventSectionProps & {
 export type EventsSectionedListGenericProps = {
     leader?: ReactNode;
     eventsGroups: EventsSectionedListItem[];
+    select?: (event: EventDetails) => void;
+    empty?: ReactNode;
     trailer?: ReactNode;
     cardType?: "duration" | "time";
 };
 
-export const EventsSectionedListGeneric: FC<EventsSectionedListGenericProps> = ({ leader, eventsGroups, trailer, cardType = "duration" }) => {
+export const EventsSectionedListGeneric: FC<EventsSectionedListGenericProps> = ({ leader, eventsGroups, select, empty, trailer, cardType = "duration" }) => {
     const navigation = useAppNavigation("Areas");
-    // Set event for action sheet
-    const [selectedEvent, setSelectedEvent] = useState<EventDetails | undefined>(undefined);
 
     // Prepare navigation callback. This clones the respective parameters, as otherwise illegal mutation will occur.
     const navigateTo = useCallback((event) => navigation.push("Event", { id: event.Id }), [navigation]);
     const synchronizer = useSynchronizer();
 
     return (
-        <View style={StyleSheet.absoluteFill}>
-            <SectionList
-                refreshing={synchronizer.isSynchronizing}
-                onRefresh={synchronizer.synchronize}
-                style={styles.list}
-                contentContainerStyle={styles.container}
-                scrollEnabled={true}
-                ListHeaderComponent={<>{leader}</>}
-                ListFooterComponent={<>{trailer}</>}
-                sections={eventsGroups}
-                keyExtractor={(item) => item.Id}
-                initialNumToRender={5}
-                maxToRenderPerBatch={5}
-                renderSectionHeader={({ section }) => <EventSection title={section.title} subtitle={section.subtitle} icon={section.icon} />}
-                renderItem={(entry: { item: EventDetails }) => (
-                    <EventCard
-                        key={entry.item.Id}
-                        event={entry.item}
-                        type={cardType}
-                        onPress={() => navigateTo(entry.item)}
-                        onLongPress={() => {
-                            Vibration.vibrate(50);
-                            setSelectedEvent(entry.item);
-                        }}
-                    />
-                )}
-            />
-            <EventActionsSheet eventRecord={selectedEvent} onClose={() => setSelectedEvent(undefined)} />
-        </View>
+        <SectionList
+            refreshing={synchronizer.isSynchronizing}
+            onRefresh={synchronizer.synchronize}
+            style={styles.list}
+            contentContainerStyle={styles.container}
+            scrollEnabled={true}
+            ListHeaderComponent={<>{leader}</>}
+            ListFooterComponent={<>{trailer}</>}
+            ListEmptyComponent={<>{empty}</>}
+            sections={eventsGroups}
+            keyExtractor={(item) => item.Id}
+            initialNumToRender={5}
+            maxToRenderPerBatch={5}
+            renderSectionHeader={({ section }) => <EventSection title={section.title} subtitle={section.subtitle} icon={section.icon} />}
+            renderItem={(entry: { item: EventDetails }) => (
+                <EventCard
+                    key={entry.item.Id}
+                    event={entry.item}
+                    type={cardType}
+                    onPress={() => navigateTo(entry.item)}
+                    onLongPress={() => {
+                        Vibration.vibrate(50);
+                        select && select(entry.item);
+                    }}
+                />
+            )}
+        />
     );
 };
 
diff --git a/src/components/Searching/EventsSearchContext.tsx b/src/app/Events/EventsTabsContext.tsx
similarity index 61%
rename from src/components/Searching/EventsSearchContext.tsx
rename to src/app/Events/EventsTabsContext.tsx
index 4b63d8e9..86b4cc9c 100644
--- a/src/components/Searching/EventsSearchContext.tsx
+++ b/src/app/Events/EventsTabsContext.tsx
@@ -4,26 +4,38 @@ import { useAppSelector } from "../../store";
 import { eventsSelector } from "../../store/eurofurence.selectors";
 import { EventDetails } from "../../store/eurofurence.types";
 
-export type EventsSearchContextType = {
+export type EventsTabsContextType = {
+    selected: null | EventDetails;
+    setSelected: (event: null | EventDetails) => void;
     search: string;
     setSearch: (results: string) => void;
     results: null | EventDetails[];
+    hasResults: boolean;
 };
 
-export const EventsSearchContext = createContext<EventsSearchContextType>({
+export const EventsTabsContext = createContext<EventsTabsContextType>({
+    selected: null,
+    setSelected: () => undefined,
     search: "",
     setSearch: () => undefined,
     results: null,
+    hasResults: false,
 });
 
-export const EventsSearchProvider: FC = ({ children }) => {
+export const EventsTabsContextProvider: FC = ({ children }) => {
     // Source of all events.
     const events = useAppSelector(eventsSelector.selectAll);
 
+    // State of detail view selection.
+    const [selected, setSelected] = useState<null | EventDetails>(null);
+
     // State of query and results.
     const [search, setSearch] = useState<string>("");
     const [results, setResults] = useState<null | EventDetails[]>(null);
 
+    // Check if results are not empty.
+    const hasResults = useMemo(() => (results?.length ?? 0) > 0, [results?.length]);
+
     // Perform search.
     useEffect(() => {
         if (search.length < 3) {
@@ -46,24 +58,19 @@ export const EventsSearchProvider: FC = ({ children }) => {
         return () => clearTimeout(handle);
     }, [events, search]);
 
-    const context = useMemo<EventsSearchContextType>(
+    const context = useMemo<EventsTabsContextType>(
         () => ({
+            selected,
+            setSelected,
             search,
             setSearch,
             results,
+            hasResults,
         }),
-        [search, setSearch, results]
+        [selected, setSelected, search, setSearch, results, hasResults]
     );
 
-    return <EventsSearchContext.Provider value={context}>{children}</EventsSearchContext.Provider>;
+    return <EventsTabsContext.Provider value={context}>{children}</EventsTabsContext.Provider>;
 };
 
-export const useEventsSearchContext = () => useContext(EventsSearchContext);
-
-export const useEventsSearchResults = () => useContext(EventsSearchContext).results;
-
-export const useEventsSearchHasResults = () => useContext(EventsSearchContext).results !== null;
-
-export const useEventsSearchQuery = () => useContext(EventsSearchContext).search;
-
-export const useEventsSearchSetQuery = () => useContext(EventsSearchContext).setSearch;
+export const useEventsTabsContext = () => useContext(EventsTabsContext);
diff --git a/src/app/Events/EventsTabsScreen.tsx b/src/app/Events/EventsTabsScreen.tsx
index 5d2e8d54..41bdeb80 100644
--- a/src/app/Events/EventsTabsScreen.tsx
+++ b/src/app/Events/EventsTabsScreen.tsx
@@ -1,25 +1,27 @@
-import { CompositeScreenProps } from "@react-navigation/core";
+import { CompositeScreenProps, useIsFocused } from "@react-navigation/core";
 import { NavigatorScreenParams } from "@react-navigation/native";
 import { StackScreenProps } from "@react-navigation/stack";
 import moment from "moment";
-import { FC, useCallback, useMemo } from "react";
+import { FC, useCallback, useEffect, useMemo } from "react";
 import { useTranslation } from "react-i18next";
+import { StyleSheet, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import { createPagesNavigator, PagesScreenProps } from "../../components/Navigators/PagesNavigator";
 import { TabScreenProps } from "../../components/Navigators/TabsNavigator";
-import { useEventsSearchHasResults } from "../../components/Searching/EventsSearchContext";
 import { useNow } from "../../hooks/useNow";
 import { useAppSelector } from "../../store";
 import { eventDaysSelectors, eventRoomsSelectors, eventTracksSelectors } from "../../store/eurofurence.selectors";
 import { EventDayRecord } from "../../store/eurofurence.types";
 import { ScreenAreasParamsList } from "../ScreenAreas";
 import { ScreenStartParamsList } from "../ScreenStart";
+import { EventActionsSheet } from "./EventActionsSheet";
 import { EventsListByDayScreen, EventsListByDayScreenParams } from "./EventsListByDayScreen";
 import { EventsListByRoomScreen, EventsListByRoomScreenParams } from "./EventsListByRoomScreen";
 import { EventsListByTrackScreen, EventsListByTrackScreenParams } from "./EventsListByTrackScreen";
 import { EventsListSearchResultsScreen, EventsListSearchResultsScreenParams } from "./EventsListSearchResultsScreen";
 import { EventsSearchScreen, EventsSearchScreenParams } from "./EventsSearchScreen";
+import { EventsTabsContextProvider, useEventsTabsContext } from "./EventsTabsContext";
 import { PersonalScheduleList } from "./PersonalScheduleList";
 
 // TODO: Might have an distinction between days, tracks, rooms as param.
@@ -61,7 +63,7 @@ export type EventsTabsScreenProps =
         PagesScreenProps<EventsTabsScreenParamsList> & TabScreenProps<ScreenAreasParamsList> & StackScreenProps<ScreenStartParamsList>
     >;
 
-export const EventsTabsScreen: FC<EventsTabsScreenProps> = ({ route }) => {
+const EventsTabsScreenContent: FC<EventsTabsScreenProps> = ({ route }) => {
     const { t } = useTranslation("Events");
     const formatDay = useCallback((day: EventDayRecord) => moment(day.Date).format("ddd"), [t]);
 
@@ -73,16 +75,22 @@ export const EventsTabsScreen: FC<EventsTabsScreenProps> = ({ route }) => {
     const tracks = useAppSelector(eventTracksSelectors.selectAll);
     const rooms = useAppSelector(eventRoomsSelectors.selectAll);
 
-    // Use to display results tab.
-    const hasSearchResults = useEventsSearchHasResults();
+    // Get context and resolve if results present and the current selection state..
+    const { hasResults, selected, setSelected } = useEventsTabsContext();
+
+    // Deselect on unfocus.
+    const isFocused = useIsFocused();
+    useEffect(() => {
+        if (!isFocused) setSelected(null);
+    }, [isFocused]);
 
     // Convert given optional type to actual filter type.
     const actualType = useMemo(() => {
-        if (hasSearchResults) return "results";
+        if (hasResults) return "results";
         // TODO: @lukashaertel pls fix
         return route.params?.filterType ?? "days";
         // TODO: @lukashaertel pls fix
-    }, [hasSearchResults, route.params?.filterType]);
+    }, [hasResults, route.params?.filterType]);
 
     // Get the current day ID.
     const currentDayId = useMemo(() => days.find((day) => moment(day.Date).isSame(now, "day"))?.Id, [days, now]);
@@ -106,34 +114,45 @@ export const EventsTabsScreen: FC<EventsTabsScreenProps> = ({ route }) => {
 
     // If the screens require too much performance we should set detach to true again.
     return (
-        <EventsTabsScreenNavigator.Navigator pagesStyle={pagesStyle} initialRouteName={initialId}>
-            {/*Tab for searching and filtering*/}
-            <EventsTabsScreenNavigator.Screen name="Search" options={{ icon: "table-search" }} component={EventsSearchScreen} />
-
-            <EventsTabsScreenNavigator.Screen name={"Your Schedule"} options={{ icon: "calendar" }} component={PersonalScheduleList} />
-
-            {actualType !== "results" ? null : <EventsTabsScreenNavigator.Screen name="Results" options={{ icon: "view-list" }} component={EventsListSearchResultsScreen} />}
-
-            {actualType !== "days"
-                ? null
-                : days.map((day) => (
-                      <EventsTabsScreenNavigator.Screen
-                          key={day.Id}
-                          name={day.Id}
-                          component={EventsListByDayScreen}
-                          options={{ title: formatDay(day), highlight: day.Name === currentDayId }}
-                      />
-                  ))}
-
-            {actualType !== "tracks"
-                ? null
-                : tracks.map((track) => <EventsTabsScreenNavigator.Screen key={track.Id} name={track.Id} component={EventsListByTrackScreen} options={{ title: track.Name }} />)}
-
-            {actualType !== "rooms"
-                ? null
-                : rooms.map((room) => (
-                      <EventsTabsScreenNavigator.Screen key={room.Id} name={room.Id} component={EventsListByRoomScreen} options={{ title: room.ShortName ?? room.Name }} />
-                  ))}
-        </EventsTabsScreenNavigator.Navigator>
+        <View style={StyleSheet.absoluteFill}>
+            <EventsTabsScreenNavigator.Navigator pagesStyle={pagesStyle} initialRouteName={initialId}>
+                {/*Tab for searching and filtering*/}
+                <EventsTabsScreenNavigator.Screen name="Search" options={{ icon: "table-search" }} component={EventsSearchScreen} />
+
+                <EventsTabsScreenNavigator.Screen name={"Your Schedule"} options={{ icon: "calendar" }} component={PersonalScheduleList} />
+
+                {actualType !== "results" ? null : <EventsTabsScreenNavigator.Screen name="Results" options={{ icon: "view-list" }} component={EventsListSearchResultsScreen} />}
+
+                {actualType !== "days"
+                    ? null
+                    : days.map((day) => (
+                          <EventsTabsScreenNavigator.Screen
+                              key={day.Id}
+                              name={day.Id}
+                              component={EventsListByDayScreen}
+                              options={{ title: formatDay(day), highlight: day.Name === currentDayId }}
+                          />
+                      ))}
+
+                {actualType !== "tracks"
+                    ? null
+                    : tracks.map((track) => (
+                          <EventsTabsScreenNavigator.Screen key={track.Id} name={track.Id} component={EventsListByTrackScreen} options={{ title: track.Name }} />
+                      ))}
+
+                {actualType !== "rooms"
+                    ? null
+                    : rooms.map((room) => (
+                          <EventsTabsScreenNavigator.Screen key={room.Id} name={room.Id} component={EventsListByRoomScreen} options={{ title: room.ShortName ?? room.Name }} />
+                      ))}
+            </EventsTabsScreenNavigator.Navigator>
+            <EventActionsSheet event={selected} onClose={() => setSelected(null)} />
+        </View>
     );
 };
+
+export const EventsTabsScreen: FC<EventsTabsScreenProps> = ({ navigation, route }) => (
+    <EventsTabsContextProvider>
+        <EventsTabsScreenContent navigation={navigation} route={route} />
+    </EventsTabsContextProvider>
+);
diff --git a/src/app/Events/PersonalScheduleList.tsx b/src/app/Events/PersonalScheduleList.tsx
index 404e6dd2..9a221f3a 100644
--- a/src/app/Events/PersonalScheduleList.tsx
+++ b/src/app/Events/PersonalScheduleList.tsx
@@ -45,6 +45,11 @@ export const PersonalScheduleList = () => {
                     {t("schedule_title")}
                 </Label>
             }
+            empty={
+                <Label type="para" variant="middle" mt={30}>
+                    {t("schedule_empty")}
+                </Label>
+            }
         />
     );
 };
diff --git a/src/app/Maps/MapContent.tsx b/src/app/Maps/MapContent.tsx
index 424d0dfa..0a5c9196 100644
--- a/src/app/Maps/MapContent.tsx
+++ b/src/app/Maps/MapContent.tsx
@@ -4,10 +4,11 @@ import { chain, clamp } from "lodash";
 import * as React from "react";
 import { FC, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Image, Platform, StyleSheet, View, ViewStyle } from "react-native";
+import { Image, StyleSheet, View, ViewStyle } from "react-native";
 
 import { Label } from "../../components/Atoms/Label";
 import { Marker } from "../../components/Atoms/Marker";
+import { useThemeBackground } from "../../context/Theme";
 import { ImageDetails, LinkFragment, MapDetails, MapEntryDetails } from "../../store/eurofurence.types";
 import { LinkItem } from "./LinkItem";
 
@@ -37,6 +38,9 @@ export const MapContent: FC<MapContentProps> = ({ map, entry, link }) => {
     const refZoom = useRef<ZoomableView>(null);
     const refSheet = useRef<BottomSheet>(null);
 
+    const styleBackground = useThemeBackground("background");
+    const styleHandle = useThemeBackground("inverted");
+
     const [results, setResults] = useState<FilterResult[]>([]);
     const onTransform = useCallback((event: ZoomableViewEvent) => {
         clearTimeout(refHandle.current);
@@ -115,30 +119,31 @@ export const MapContent: FC<MapContentProps> = ({ map, entry, link }) => {
                 </ZoomableView>
             </View>
 
-            {/*Apparently we cannot render this in a browser*/}
-            {Platform.OS === "web" ? null : (
-                <BottomSheet ref={refSheet} snapPoints={["10%", "75%"]} index={0}>
-                    {!results ? (
-                        <Label mt={15} type="em" variant="middle">
-                            {t("filtering")}
-                        </Label>
-                    ) : (
-                        <BottomSheetFlatList
-                            initialNumToRender={2}
-                            maxToRenderPerBatch={1}
-                            data={results}
-                            keyExtractor={({ key }) => key}
-                            renderItem={({ item: { map, entry, link } }) => <LinkItem map={map} entry={entry} link={link} />}
-                            contentContainerStyle={{ paddingHorizontal: 15 }}
-                        />
-                    )}
-                </BottomSheet>
-            )}
+            <BottomSheet ref={refSheet} backgroundStyle={styleBackground} handleStyle={styles.handle} handleIndicatorStyle={styleHandle} snapPoints={["10%", "75%"]} index={0}>
+                {!results ? (
+                    <Label mt={15} type="em" variant="middle">
+                        {t("filtering")}
+                    </Label>
+                ) : (
+                    <BottomSheetFlatList
+                        initialNumToRender={2}
+                        maxToRenderPerBatch={1}
+                        data={results}
+                        keyExtractor={({ key }) => key}
+                        renderItem={({ item: { map, entry, link } }) => <LinkItem map={map} entry={entry} link={link} />}
+                        contentContainerStyle={{ paddingHorizontal: 15 }}
+                    />
+                )}
+            </BottomSheet>
         </>
     );
 };
 
 const styles = StyleSheet.create({
+    handle: {
+        borderTopLeftRadius: 15,
+        borderTopRightRadius: 15,
+    },
     container: {
         flex: 1,
         paddingBottom: "10%",
diff --git a/src/app/ScreenStart.tsx b/src/app/ScreenStart.tsx
index 11a06cdd..84da1acb 100644
--- a/src/app/ScreenStart.tsx
+++ b/src/app/ScreenStart.tsx
@@ -76,7 +76,7 @@ export const ScreenStart: FC<ScreenStartProps> = React.memo(() => {
     return (
         <View style={StyleSheet.absoluteFill}>
             <StatusBar backgroundColor={theme.background} style={themeType === "light" ? "dark" : "light"} />
-            <ScreenStartNavigator.Navigator screenOptions={{ headerShown: false, cardStyle: { backgroundColor: theme.surface } }}>
+            <ScreenStartNavigator.Navigator screenOptions={{ headerShown: false }}>
                 <ScreenStartNavigator.Screen name="Areas" component={ScreenAreas} />
                 <ScreenStartNavigator.Screen name="Event" component={EventScreen} />
                 <ScreenStartNavigator.Screen name="Dealer" component={DealerScreen} />
diff --git a/src/components/Containers/BadgeInvPad.tsx b/src/components/Containers/BadgeInvPad.tsx
index fc45959f..2c84049f 100644
--- a/src/components/Containers/BadgeInvPad.tsx
+++ b/src/components/Containers/BadgeInvPad.tsx
@@ -10,7 +10,7 @@ const iconSize = 32; // Matches H1 font size.
 
 export type BadgeInvPadProps = ViewProps & {
     padding: number;
-    badgeColor: ColorValue;
+    badgeColor?: ColorValue;
     textColor: ColorValue;
     textType?: LabelProps["type"];
     textVariant?: LabelProps["variant"];
@@ -19,7 +19,7 @@ export type BadgeInvPadProps = ViewProps & {
 };
 
 export const BadgeInvPad: FC<BadgeInvPadProps> = ({ padding, badgeColor, textColor, textType = "h3", textVariant = "middle", icon, children }) => {
-    const styleContainer = useMemo<ViewStyle>(() => ({ marginHorizontal: -padding, backgroundColor: badgeColor }), [padding, badgeColor]);
+    const styleContainer = useMemo<ViewStyle>(() => ({ marginHorizontal: -padding, backgroundColor: badgeColor ?? "transparent" }), [padding, badgeColor]);
     const styleContent = useMemo<ViewStyle>(() => ({ paddingVertical: 10, paddingHorizontal: padding }), [padding]);
 
     return (
diff --git a/src/context/NavigationProvider.tsx b/src/context/NavigationProvider.tsx
index 9ed1855e..837c9bde 100644
--- a/src/context/NavigationProvider.tsx
+++ b/src/context/NavigationProvider.tsx
@@ -10,10 +10,11 @@ import { ScreenStartParamsList } from "../app/ScreenStart";
 import { conId } from "../configuration";
 import { useAnalytics } from "../hooks/useAnalytics";
 import { useNavigationStatePersistence } from "../hooks/useNavigationStatePersistence";
-import { PlatformSentry } from "../sentryHelpers";
+import { captureException, PlatformSentry } from "../sentryHelpers";
 import { useAppSelector } from "../store";
 import { eventDaysSelectors, eventRoomsSelectors, eventTracksSelectors } from "../store/eurofurence.selectors";
 import { RecordId } from "../store/eurofurence.types";
+import { useTheme, useThemeType } from "./Theme";
 
 export const sentryRoutingInstrumentation = "ReactNavigationInstrumentation" in PlatformSentry ? new PlatformSentry.ReactNavigationInstrumentation() : undefined;
 
@@ -89,6 +90,23 @@ export const NavigationProvider: FC = ({ children }) => {
     const [isReady, initialState, onStateChange] = useNavigationStatePersistence();
     const logEvent = useAnalytics();
 
+    const theme = useTheme();
+    const type = useThemeType();
+    const navTheme = useMemo(
+        () => ({
+            dark: type === "dark",
+            colors: {
+                primary: theme.primary,
+                background: theme.surface,
+                card: theme.surface,
+                text: theme.text,
+                border: theme.darken,
+                notification: theme.notification,
+            },
+        }),
+        [type, theme]
+    );
+
     const logAnalytics = useCallback(
         (state: NavigationState | undefined) => {
             if (!state) return null;
@@ -97,7 +115,7 @@ export const NavigationProvider: FC = ({ children }) => {
             logEvent("screen_view", {
                 screen_name: route.name,
                 ...route.params,
-            });
+            }).catch(captureException);
         },
         [logEvent]
     );
@@ -113,6 +131,7 @@ export const NavigationProvider: FC = ({ children }) => {
     }
     return (
         <NavigationContainer
+            theme={navTheme}
             ref={navigation}
             linking={linking}
             initialState={initialState}
diff --git a/src/context/Theme.tsx b/src/context/Theme.tsx
index df9dd5a3..98918cc7 100644
--- a/src/context/Theme.tsx
+++ b/src/context/Theme.tsx
@@ -2,25 +2,104 @@ import { useMemo } from "react";
 import { useColorScheme, ViewStyle } from "react-native";
 
 export type Theme = Record<string, string> & {
+    /**
+     * Primary brand color.
+     */
     primary: string;
+
+    /**
+     * Secondary "colorful" color.
+     */
     secondary: string;
+
+    /**
+     * Background of element displayed within a screen.
+     */
     background: string;
+
+    /**
+     * Lowest surface of the screen, i.e., the proper background color.
+     */
     surface: string;
+
+    /**
+     * Opposite of background.
+     */
     inverted: string;
+
+    /**
+     * Text color.
+     */
     text: string;
+
+    /**
+     * Text color with emphasis.
+     */
     important: string;
+
+    /**
+     Text color on inverted.
+     */
     invText: string;
+
+    /**
+     * Text color with emphasis on inverted.
+     */
     invImportant: string;
+
+    /**
+     * Warning background.
+     */
     warning: string;
+
+    /**
+     * Notification color.
+     */
     notification: string;
+
+    /**
+     * Pull towards black.
+     */
     darken: string;
+
+    /**
+     * Pull towards light.
+     */
     lighten: string;
+
+    /**
+     * Pull against background.
+     */
     soften: string;
+
+    /**
+     * White.
+     */
     white: string;
+
+    /**
+     * Background for super-sponsor badge.
+     */
     superSponsor: string;
-    superSponsorText: string;
+
+    /**
+     * Background for sponsor badge.
+     */
     sponsor: string;
+
+    /**
+     * Text on super-sponsor badge.
+     */
+    superSponsorText: string;
+
+    /**
+     * Text on sponsor badge.
+     */
     sponsorText: string;
+
+    /**
+     * Map marker.
+     */
     marker: string;
 };
 
@@ -45,7 +124,7 @@ const themes = {
         notification: "#d91c52",
         darken: "#04001440",
         lighten: "#f7f7f7a0",
-        soften: "#04001440",
+        soften: "#040014a0",
         white: "#ffffff",
         superSponsor: "#5300ff",
         superSponsorText: "#fff7f0",
@@ -55,10 +134,10 @@ const themes = {
     },
     dark: {
         primary: "#37726d",
-        secondary: "#4631cc",
-        background: "#252525",
-        surface: "#2d2d2d",
-        inverted: "#b0b0b0",
+        secondary: "#917dff",
+        background: "#212121",
+        surface: "#000000",
+        inverted: "#e0dedb",
         text: "#e0dedb",
         important: "#f1ede8",
         invText: "#131313",
@@ -66,7 +145,7 @@ const themes = {
         warning: "#ee5e22",
         notification: "#d91c52",
         darken: "#04001440",
-        lighten: "#f7f7f7a0",
+        lighten: "#f7f7f780",
         soften: "#f7f7f7a0",
         white: "#ffffff",
         superSponsor: "#5300ff",
diff --git a/src/i18n/translations.de.json b/src/i18n/translations.de.json
index e2245115..899de4df 100644
--- a/src/i18n/translations.de.json
+++ b/src/i18n/translations.de.json
@@ -77,6 +77,8 @@
     "finished": "Zu Ende",
     "morning": "Morgens",
     "night": "In der Nacht",
+    "schedule_empty": "Du hast noch keine Events in Deinen Favoriten. Füge Events zu Deinen Favoriten hinzu, um Deine Agenda zu erstellen.",
+    "schedule_title": "Deine Agenda",
     "upcoming_favorites_subtitle": "Du wirst eine Erinnerung bekommen bevor diese Events beginnen",
     "upcoming_favorites_title": "Favorisierte Events",
     "upcoming_subtitle": "Diese Events beginnenn in den nächsten 30 Minuten",
diff --git a/src/i18n/translations.en.json b/src/i18n/translations.en.json
index 04708e04..73cdc4db 100644
--- a/src/i18n/translations.en.json
+++ b/src/i18n/translations.en.json
@@ -88,6 +88,7 @@
     "finished": "Finished",
     "morning": "In the morning",
     "night": "At night",
+    "schedule_empty": "You do not have any favorite events yet. Favorite some events to create your own schedule.",
     "schedule_title": "Your Schedule",
     "today_schedule_subtitle": "You will receive a reminder before this event starts",
     "today_schedule_title": "Today's schedule",
diff --git a/webpack.config.js b/webpack.config.js
index d61e01c3..11769074 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -2,7 +2,7 @@ const createExpoWebpackConfigAsync = require("@expo/webpack-config");
 
 module.exports = async function (env, argv) {
     env.babel = {
-        dangerouslyAddModulePathsToTranspile: ["usehooks-ts", "@openspacelabs/react-native-zoomable-view"],
+        dangerouslyAddModulePathsToTranspile: ["usehooks-ts", "@openspacelabs/react-native-zoomable-view", "@gorhom/bottom-sheet"],
     };
 
     return await createExpoWebpackConfigAsync(env, argv);