refactor(agenda): improve lectures appearance in agenda

lib/ui/components/AgendaCard.tsx

@@ -1,8 +1,12 @@
-import { PropsWithChildren } from 'react';
-import { StyleSheet, TouchableHighlight, View } from 'react-native';
+import { PropsWithChildren, useMemo } from 'react';
+import { StyleSheet, TouchableHighlight, ViewProps } from 'react-native';
+import { isTablet as isTabletHelper } from 'react-native-device-info';
 
+import { faLocationDot } from '@fortawesome/free-solid-svg-icons';
 import { Col } from '@lib/ui/components/Col';
+import { Icon } from '@lib/ui/components/Icon';
 import { Row } from '@lib/ui/components/Row';
+import { Stack } from '@lib/ui/components/Stack';
 import { useStylesheet } from '@lib/ui/hooks/useStylesheet';
 import { useTheme } from '@lib/ui/hooks/useTheme';
 import { Theme } from '@lib/ui/types/Theme';
@@ -20,7 +24,7 @@ export interface AgendaCardProps {
   /**
    * The color of the event type
    */
-  color: string;
+  color?: string;
   /**
    * Extra information on this event
    */
@@ -58,6 +62,7 @@ export interface AgendaCardProps {
    * If true, the card will be compact
    */
   isCompact?: boolean;
+  style?: ViewProps['style'];
 }
 
 /**
@@ -75,9 +80,25 @@ export const AgendaCard = ({
   type,
   location,
   onPress,
+  style,
 }: PropsWithChildren<AgendaCardProps>) => {
   const styles = useStylesheet(createStyles);
-  const { colors, spacing } = useTheme();
+  const { colors, dark, palettes, shapes, spacing, fontSizes } = useTheme();
+
+  const isTablet = useMemo(() => isTabletHelper(), []);
+  const showsIcon = useMemo(
+    () => iconColor && (icon || isTablet),
+    [icon, iconColor, isTablet],
+  );
+
+  const secondaryIfLecture = useMemo(
+    () =>
+      ['lezione', 'lecture'].includes(type.toLowerCase())
+        ? { color: colors.lectureCardSecondary }
+        : undefined,
+    [type, colors.lectureCardSecondary],
+  );
+
   return (
     <Card
       rounded
@@ -92,47 +113,100 @@ export const AgendaCard = ({
         {
           marginVertical: isCompact ? undefined : spacing[2],
         },
+        style,
+        isCompact &&
+          !isTablet && {
+            borderRadius: shapes.md,
+          },
       ]}
     >
       <TouchableHighlight
         underlayColor={colors.touchableHighlight}
         style={[
           styles.touchable,
           isCompact ? styles.compactTouchable : undefined,
+          isCompact &&
+            !isTablet && {
+              paddingHorizontal: spacing[1],
+              paddingVertical: spacing[1],
+            },
         ]}
         onPress={onPress}
       >
-        <Col gap={isCompact ? 0.5 : 2}>
+        <Col
+          gap={isCompact ? 0.5 : 2}
+          style={
+            !isTablet &&
+            isCompact && { height: '100%', justifyContent: 'space-between' }
+          }
+        >
+          {/* Time and event type are only shown if the card is not compact */}
           {!isCompact && (
-            <Row align="flex-end" justify="space-between">
-              <Text style={styles.time}>{time && time}</Text>
-              <Text uppercase variant="caption">
+            <Row align="flex-end" justify="space-between" flexGrow={1}>
+              <Row gap={2}>
+                <Text style={[styles.time, secondaryIfLecture]}>
+                  {time && time}
+                </Text>
+                {!isCompact && live && <LiveIndicator showText />}
+              </Row>
+              <Text uppercase variant="caption" style={secondaryIfLecture}>
                 {type}
               </Text>
             </Row>
           )}
-          <Row>
-            {iconColor && <AgendaIcon icon={icon} color={iconColor} />}
+
+          <Stack
+            {...(isCompact
+              ? { direction: 'column', flexGrow: 1 }
+              : { align: 'center', gap: 2 })}
+          >
+            {showsIcon && <AgendaIcon icon={icon} color={iconColor!} />}
             <Text
               style={[
                 styles.title,
-                iconColor ? styles.titleWithIcon : undefined,
+                isCompact ? styles.titleCompact : undefined,
               ]}
-              numberOfLines={isCompact ? 1 : undefined}
             >
               {title}
             </Text>
-          </Row>
-          {live && (
-            <View>
-              <LiveIndicator />
-            </View>
-          )}
+          </Stack>
+
+          {/* Extra children are only shown if the card is not compact */}
           {!isCompact && children}
-          {location && (
-            <Text style={!isCompact ? styles.location : undefined}>
-              {location}
-            </Text>
+
+          {!isCompact && location && (
+            <Row gap={1} mt={1.5} align="center">
+              <Icon
+                icon={faLocationDot}
+                color={palettes.gray[dark ? 300 : 600]}
+                size={isCompact && !isTablet ? fontSizes.xs : undefined}
+              />
+              <Text
+                variant="secondaryText"
+                numberOfLines={1}
+                ellipsizeMode="tail"
+                style={{ color: palettes.gray[dark ? 100 : 700] }}
+              >
+                {location}
+              </Text>
+            </Row>
+          )}
+          {isCompact && location && (
+            <Row gap={1} mt={1.5} align="center">
+              <Text
+                variant="secondaryText"
+                numberOfLines={1}
+                ellipsizeMode="tail"
+                style={{ color: palettes.gray[dark ? 100 : 700] }}
+              >
+                {location}
+              </Text>
+              <Icon
+                icon={faLocationDot}
+                color={palettes.gray[dark ? 300 : 600]}
+                size={!isTablet ? fontSizes.xs : undefined}
+              />
+            </Row>
           )}
         </Col>
       </TouchableHighlight>
@@ -149,10 +223,19 @@ const createStyles = ({
   dark,
 }: Theme) =>
   StyleSheet.create({
+    titleContainer: {
+      flex: 1,
+      alignItems: 'center',
+    },
     title: {
       flex: 1,
       fontWeight: fontWeights.semibold,
       fontSize: fontSizes.md,
+      lineHeight: fontSizes.md * 1.3,
+    },
+    titleCompact: {
+      fontSize: fontSizes.xs,
+      lineHeight: fontSizes.xs * 1.3,
     },
     titleWithIcon: {
       marginLeft: spacing[1.5],
@@ -176,7 +259,4 @@ const createStyles = ({
       fontWeight: fontWeights.semibold,
       marginTop: spacing[1.5],
     },
-    location: {
-      marginTop: spacing[1.5],
-    },
   });

lib/ui/types/Theme.ts

@@ -92,10 +92,10 @@ export interface Colors {
   tabBarInactive: string;
   title: string;
   touchableHighlight: string;
-  agendaBooking: string;
-  agendaDeadline: string;
-  agendaExam: string;
-  agendaLecture: string;
+  bookingCardBorder: string;
+  deadlineCardBorder: string;
+  examCardBorder: string;
+  lectureCardSecondary: string;
   translucentSurface: string;
   white: string;
 }

src/core/themes/dark.ts

@@ -29,7 +29,7 @@ export const darkTheme: Theme = {
     })!,
     divider: lightTheme.palettes.gray[500],
     touchableHighlight: 'rgba(255, 255, 255, .08)',
-    agendaLecture: lightTheme.palettes.navy[100],
+    lectureCardSecondary: lightTheme.palettes.gray[300],
     tabBarInactive: lightTheme.palettes.gray[400],
   },
 };

src/core/themes/light.ts

@@ -158,10 +158,10 @@ export const lightTheme: Theme = {
     tabBar: navy[200],
     translucentSurface: 'rgba(0, 0, 0, .1)',
     tabBarInactive: gray[500],
-    agendaBooking: green[600],
-    agendaDeadline: red[700],
-    agendaExam: orange[600],
-    agendaLecture: navy[500],
+    bookingCardBorder: green[600],
+    deadlineCardBorder: red[700],
+    examCardBorder: orange[600],
+    lectureCardSecondary: gray[600],
   },
   palettes: {
     navy,