Stxling fixes

components/timetable/HourSlice.tsx

@@ -12,15 +12,16 @@ interface HourSliceProps extends CardProps<TimetableLecture> {
   animationsDisabled: boolean,
   smallMode: boolean,
   onPress: (lecture: Lecture) => void,
+  expand?: number
 }
 
 function getDelayBasedOnPosition(top: number, left: number) {
   return (top + left * 2) * 0.3
 }
 
-function HourSlice({style, item, onPress, smallMode = false, animationsDisabled = true}: HourSliceProps) {
+function HourSlice({style, item, onPress, smallMode = false, animationsDisabled = true, expand = 0}: HourSliceProps) {
   const {course, eventType, start_time, end_time, color, colorText, rooms, lecturers, executionType, usersNote} = item.lecture
-  const { colors } = useTheme()
+  const { colors, theme } = useTheme()
   const hexColor = (color === null || color === '') ? colors.onBackground : `#${color}`
 
   const top = useSharedValue(animationsDisabled ? 0 : 50)
@@ -37,10 +38,13 @@ function HourSlice({style, item, onPress, smallMode = false, animationsDisabled
   })
 
   const textSize = { fontSize: smallMode ? 12 : 14}
-  // TODO: in week view, make slices wider
   return (
-    <Pressable style={[styles.pressable, style]} onPress={onPressed}>
-      <Animated.View style={[styles.container, {top, opacity}, { backgroundColor: colors.surface, borderColor: colors.surfaceVariant }]}>
+    <Pressable style={[styles.pressable, {
+      ...style,
+      left: style.left - expand,
+      width: style.width + 2*expand
+    }]} onPress={onPressed}>
+      <Animated.View style={[styles.container, {top, opacity}, { backgroundColor: theme === 'dark' ? colors.surface : '#ffffffff', borderColor: colors.surfaceVariant }]}>
           <View style={styles.titleContainer}>
             <View style={styles.courseNameContainer}>
               <Text style={[styles.courseName, textSize]} numberOfLines={0}>{course ? course : eventType}</Text>
@@ -65,14 +69,15 @@ export default HourSlice
 
 const styles = StyleSheet.create({
   pressable: {
-    borderRadius: 10,
-    overflow: 'hidden',
-    borderWidth: 1
+
   },
   container: {
     flex: 1,
     paddingHorizontal: 5,
     paddingTop: 5,
+    borderRadius: 10,
+    overflow: 'hidden',
+    borderWidth: 1
   },
   titleContainer: {
     flexDirection: 'row',

screens/MainScreen/OptionsScreen.tsx

@@ -67,20 +67,18 @@ function OptionsScreen() {
   const pickerStyle: Partial<PickerProps> = {
     dropdownIconColor: colors.onBackground,
     dropdownIconRippleColor: colors.touchColor,
-    itemStyle: {
-      color: colors.onBackground,
-      //textAlign: 'right'
-    },
     style: {
-      flex: 2
-      //height: 54,
-      //textAlign: 'right'
+      flex: 2,
+      // Apply the background color to the parent Picker component to fill the "margins"
+      backgroundColor: colors.background, 
     }
   }
 
   const pickerItmeStyle: Partial<PickerItemProps> = {
     color: colors.onBackground,
-    //fontFamily: ''
+    style: {
+      backgroundColor: colors.background,
+    }
   }
 
   return (
@@ -90,20 +88,21 @@ function OptionsScreen() {
         <Text style={styles.header}>General</Text>
         <SettingsButton onPress={restartSetup}>Restart setup</SettingsButton>
         <SettingsButton onPress={changeSelectedGroups}>Change selected groups</SettingsButton>
-        <Text style={styles.header}>Appearance</Text>
+        <Text style={[styles.header, { marginBottom: 16 }]}>Appearance</Text>
         <View style={styles.pickerContainer}>
-          <Text style={{alignSelf: 'center', flex: 3}}>Theme</Text>
+          <Text style={{ fontWeight: '600' }}>Theme</Text>
           <Picker 
             {...pickerStyle}
+            mode="dropdown"
             selectedValue={theme} onValueChange={changeTheme}>
             <Picker.Item {...pickerItmeStyle} label="System" value={Theme.SYSTEM} />
             <Picker.Item {...pickerItmeStyle} label="Light" value={Theme.LIGHT} />
             <Picker.Item {...pickerItmeStyle} label="Dark" value={Theme.DARK} />
           </Picker>
         </View>
         <View style={styles.pickerContainer}>
-          <Text style={{alignSelf: 'center', flex: 3}}>Default timetable view</Text>
-          <Picker {...pickerStyle} selectedValue={defaultView} onValueChange={changeDefaultView}>
+          <Text style={{ fontWeight: '600' }}>Default timetable view</Text>
+          <Picker mode="dropdown" {...pickerStyle} selectedValue={defaultView} onValueChange={changeDefaultView}>
             <Picker.Item {...pickerItmeStyle} label="Day view" value={DefaultView.DAY_VIEW} />
             <Picker.Item {...pickerItmeStyle} label="Week view" value={DefaultView.WEEK_VIEW} />
           </Picker>
@@ -143,9 +142,5 @@ const styles = StyleSheet.create({
     height: 54
   },
   pickerContainer: {
-    flexDirection: 'row',
-    //alignContent: 'center',
-    justifyContent: 'space-between',
-    height: 54
   }
 })

screens/MainScreen/TimeTableScreen.tsx

@@ -186,7 +186,7 @@ function TimeTableScreen({ route }: TimeTableScreenProps) {
     setShowDatePicker(false)
   }
 
-  const WeekNum = useMemo(() => <AnimatedRollingNumber textStyle={{fontSize: 16, color: colors.onBackground}} value={getSchoolWeekNumber(date)} />, [date])
+  const WeekNum = useMemo(() => <AnimatedRollingNumber key={theme} textStyle={{fontSize: 16, color: colors.onBackground}} value={getSchoolWeekNumber(date)} />, [date, theme])
   return (
     <Container>
       <LectureDetails modalVisible={!!modalLecture} lecture={modalLecture!} onRequestClose={() => {setModalLecture(null)}} />
@@ -201,7 +201,7 @@ function TimeTableScreen({ route }: TimeTableScreenProps) {
         <GestureDetector gesture={swipeGesture} >
         <Timetable 
           items={lectures} 
-          renderItem={({key, ...props}) => <HourSlice key={key} {...props} onPress={lecturePressed} smallMode={isWeekView} animationsDisabled={!timetableAnimationsEnabled}/>} 
+          renderItem={({key, ...props}) => <HourSlice key={key} expand={isWeekView ? 8 : 0} {...props} onPress={lecturePressed} smallMode={isWeekView} animationsDisabled={!timetableAnimationsEnabled}/>} 
           date={(isWeekView ? undefined : date) as any}
           range={isWeekView ? week : undefined}
 
@@ -277,14 +277,14 @@ function TimeTableScreen({ route }: TimeTableScreenProps) {
         /> : 
         <View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginHorizontal: 8}}>
           <View style={styles.arrowButtonContainerStyle}>
-            <IconButton name="chevron-back-outline"  style={{ backgroundColor: 'transparent'}} onPress={() => setDate(dayjs(date).subtract(1, 'week').toDate())} />
+            <IconButton iconColor={colors.onBackground} name="chevron-back-outline"  style={{ backgroundColor: 'transparent'}} onPress={() => setDate(dayjs(date).subtract(1, 'week').toDate())} />
           </View>
           <View style={{alignItems: 'center'}}>
             <Text style={{color: colors.onBackground}}>Week</Text>
             {WeekNum}
           </View>
           <View style={styles.arrowButtonContainerStyle}>
-            <IconButton name="chevron-forward-outline"  style={{ backgroundColor: 'transparent'}} onPress={() => setDate(dayjs(date).add(1, 'week').toDate())}/>
+            <IconButton iconColor={colors.onBackground} name="chevron-forward-outline" style={{ backgroundColor: 'transparent'}} onPress={() => setDate(dayjs(date).add(1, 'week').toDate())}/>
           </View>
         </View>}
       </CalendarProvider>