Merge pull request #112 from eurofurence/fix/theme_and_action_sheet_f…

…ixes

Fix theme and action sheet

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>
     );

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,
     },

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>
             );
         }

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",

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",

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 ?? ""}

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 ?? ""}

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 ?? ""}