some small design improvements

src/lib/Mensa/MealGroupContainer.svelte

@@ -1,11 +1,20 @@
 <script lang="ts">
 	import type { MealGroup } from '$lib/types';
+	import { createEventDispatcher } from 'svelte';
 
 	export let mealGroup: MealGroup;
 	export let gradientColour: string;
+
+	const dispatch = createEventDispatcher();
 </script>
 
-<div class="space-y-1">
+<div
+	on:click={() => {
+		dispatch('click');
+	}}
+	role="presentation"
+	class="space-y-1"
+>
 	{#each mealGroup.sub_meals as submeal}
 		<div
 			class="rounded-xl bg-gradient-165 to-40% {gradientColour} bg-surface-50-900-token px-4 py-2 border-token border-surface-400-500-token space-y-2 text-center"

src/lib/Mensa/MealView.svelte

@@ -4,6 +4,7 @@
 	import type { MealGroup } from '../types';
 	import MealViewAccordion from './MealViewAccordion.svelte';
 	import MediaQuery from 'svelte-media-queries';
+	import { createEventDispatcher } from 'svelte';
 
 	export let twoColumn = false;
 	export let expandedMealCategories: Writable<Array<string>>;
@@ -15,6 +16,8 @@
 		(acc, item, index) => (acc[index % 2].push(item), acc),
 		[[], []]
 	);
+
+	const dispatch = createEventDispatcher();
 </script>
 
 <!-- hacky -->
@@ -27,6 +30,10 @@
 			<MealViewAccordion alwaysExpanded={true} mealGroups={oddArray} {expandedMealCategories} />
 		</div>
 	{:else}
-		<MealViewAccordion {mealGroups} {expandedMealCategories} />
+		<MealViewAccordion
+			{mealGroups}
+			{expandedMealCategories}
+			on:mealGroupClicked={() => dispatch('mealGroupClicked')}
+		/>
 	{/if}
 </MediaQuery>

src/lib/Mensa/MealViewAccordion.svelte

@@ -1,15 +1,17 @@
 <script lang="ts">
 	import { Accordion, AccordionItem } from '@skeletonlabs/skeleton';
 	import type { Writable } from 'svelte/store';
+	import { createEventDispatcher } from 'svelte';
 
 	import type { MealGroup } from '$lib/types';
 	import MealGroupContainer from './MealGroupContainer.svelte';
 
 	export let alwaysExpanded = false;
 	export let mealGroups: MealGroup[];
-
 	export let expandedMealCategories: Writable<Array<string>>;
 
+	const dispatch = createEventDispatcher();
+
 	function getGroupIcon(meal_type: string) {
 		const icons: { [key: string]: string } = {
 			vegan: 'fa-solid fa-leaf',
@@ -52,7 +54,7 @@
 			}
 		}
 
-		return 'bg-surface-100-800-token';
+		return 'bg-surface-50-900-token';
 	}
 
 	function getGroupGradientColour(meal_type: string) {
@@ -73,7 +75,7 @@
 			}
 		}
 
-		return 'bg-surface-100-800-token';
+		return 'bg-surface-50-900-token';
 	}
 </script>
 
@@ -87,7 +89,6 @@
 			regionCaret={alwaysExpanded ? 'hidden' : ''}
 			open={alwaysExpanded || $expandedMealCategories.includes(mealGroup.meal_type)}
 			on:toggle={(e) => {
-				if (alwaysExpanded) return;
 				expandedMealCategories.update((categories) => {
 					if (e.detail.open) {
 						return [...categories, mealGroup.meal_type];
@@ -103,6 +104,7 @@
 			<svelte:fragment slot="summary">{mealGroup.meal_type}</svelte:fragment>
 			<svelte:fragment slot="content">
 				<MealGroupContainer
+					on:click={() => dispatch('mealGroupClicked')}
 					{mealGroup}
 					gradientColour={getGroupGradientColour(mealGroup.meal_type)}
 				/>

src/lib/TilesAndModals/BasicInfoTile.svelte

@@ -59,13 +59,29 @@
 		<div class="flex-grow" />
 		{#if fachsemester && ects}
 			<div class="flex space-x-2">
-				<div class="card rounded-xl w-full p-2 space-y-2 justify-center flex flex-col">
+				<div
+					class="bg-white/40 dark:bg-surface-800 shadow rounded-xl w-full p-2 space-y-2 justify-center flex flex-col"
+				>
 					<small id="fachsem">Fachsemester: {fachsemester}</small>
-					<ProgressBar labelledby="fachsem" value={parseInt(fachsemester)} max={6} />
+					<ProgressBar
+						meter="bg-secondary-500"
+						track="bg-secondary-500/30"
+						labelledby="fachsem"
+						value={parseInt(fachsemester)}
+						max={6}
+					/>
 				</div>
-				<div class="card rounded-xl w-full p-2 space-y-2 justify-center flex flex-col">
+				<div
+					class="bg-white/40 dark:bg-surface-800 shadow rounded-xl w-full p-2 space-y-2 justify-center flex flex-col"
+				>
 					<small id="ects">ECTS: {ects} / 180</small>
-					<ProgressBar labelledby="ects" value={parseInt(ects)} max={180} />
+					<ProgressBar
+						meter="bg-primary-500"
+						track="bg-primary-500/30"
+						labelledby="ects"
+						value={parseInt(ects)}
+						max={180}
+					/>
 				</div>
 			</div>
 		{/if}

src/lib/TilesAndModals/MensaTile.svelte

@@ -166,7 +166,11 @@
 		{/if}
 		<TileInteractiveElementWrapper>
 			{#if $showMealsInTile && mealGroups}
-				<MealView bind:expandedMealCategories {mealGroups} />
+				<MealView
+					bind:expandedMealCategories
+					{mealGroups}
+					on:mealGroupClicked={() => modalStore.trigger(modal)}
+				/>
 			{/if}
 		</TileInteractiveElementWrapper>
 	</div>