UI: search button

ui/src/lib/AdvancedOptions.svelte

@@ -28,6 +28,7 @@
 	import { generateTimes } from './generateTimes';
 	import ViaStopOptions from './ViaStopOptions.svelte';
 	import Slider from './components/ui/slider/Slider.svelte';
+	import { Settings } from '@lucide/svelte';
 	let {
 		advancedOptionsOpen = $bindable(false),
 		useRoutedTransfers = $bindable(),
@@ -454,8 +455,8 @@
 {/snippet}
 
 <Dialog.Root bind:open={advancedOptionsOpen}>
-	<Dialog.Trigger class={buttonVariants({ variant: 'ghost' })}>
-		{t.advancedSearchOptions}
+	<Dialog.Trigger class={buttonVariants({ variant: 'outline' })} title={t.advancedSearchOptions}>
+		<Settings />
 	</Dialog.Trigger>
 	<Dialog.Content class="flex max-h-[90vh] max-w-2xl flex-col">
 		<Dialog.Header>

ui/src/lib/SearchMask.svelte

@@ -177,12 +177,12 @@
 	<div class="flex min-h-0 flex-row gap-2 flex-wrap">
 		<DateInput bind:value={time} />
 		<RadioGroup.Root
-			class="flex"
+			class="flex gap-0 grow"
 			bind:value={() => (arriveBy ? 'arrival' : 'departure'), (v) => (arriveBy = v === 'arrival')}
 		>
 			<Label
 				for="departure"
-				class="flex items-center rounded-md border-2 border-muted bg-popover p-1 px-2 hover:bg-accent hover:text-accent-foreground [&:has([data-state=checked])]:border-blue-600 hover:cursor-pointer"
+				class="flex grow justify-center items-center border-input rounded-l-md px-2 py-1 bg-accent text-gray-500 hover:bg-blue-100 [&:has([data-state=checked])]:bg-blue-600 [&:has([data-state=checked])]:text-white hover:cursor-pointer"
 			>
 				<RadioGroup.Item
 					value="departure"
@@ -194,7 +194,7 @@
 			</Label>
 			<Label
 				for="arrival"
-				class="flex items-center rounded-md border-2 border-muted bg-popover p-1 px-2 hover:bg-accent hover:text-accent-foreground [&:has([data-state=checked])]:border-blue-600 hover:cursor-pointer"
+				class="flex grow justify-center items-center border-input rounded-r-md px-2 py-1 bg-accent text-gray-500 hover:bg-blue-100 [&:has([data-state=checked])]:bg-blue-600 [&:has([data-state=checked])]:text-white hover:cursor-pointer"
 			>
 				<RadioGroup.Item value="arrival" id="arrival" class="sr-only" aria-label={t.arrival} />
 				<span>{t.arrival}</span>
@@ -247,5 +247,13 @@
 			bind:pedestrianProfile
 			{hasDebug}
 		/>
+		<Button
+			class="flex grow bg-blue-600 hover:!bg-blue-700 text-white font-bold"
+			variant="default"
+			title={t.search}
+			onclick={() => {}}
+		>
+			{t.search}
+		</Button>
 	</div>
 </div>

ui/src/lib/i18n/bg.ts

@@ -1,6 +1,7 @@
 import type { Translations } from './translation';
 
 const translations: Translations = {
+	search: 'Търсене',
 	ticket: 'Билет',
 	ticketOptions: 'Опции за билет',
 	includedInTicket: 'Включено в билета',

ui/src/lib/i18n/cs.ts

@@ -1,6 +1,7 @@
 import type { Translations } from './translation';
 
 const translations: Translations = {
+	search: 'Hledat',
 	ticket: 'Jízdenka',
 	ticketOptions: 'Možnosti jízdenky',
 	includedInTicket: 'Zahrnuté v jízdence',

ui/src/lib/i18n/de.ts

@@ -1,6 +1,7 @@
 import type { Translations } from './translation';
 
 const translations: Translations = {
+	search: 'Suchen',
 	ticket: 'Fahrschein',
 	ticketOptions: 'Fahrscheinoptionen',
 	includedInTicket: 'Im Fahrschein enthalten',

ui/src/lib/i18n/en.ts

@@ -1,6 +1,7 @@
 import type { Translations } from './translation';
 
 const translations: Translations = {
+	search: 'Search',
 	ticket: 'Ticket',
 	ticketOptions: 'Ticket Options',
 	includedInTicket: 'Included in ticket',

ui/src/lib/i18n/fr.ts

@@ -1,6 +1,7 @@
 import type { Translations } from './translation';
 
 const translations: Translations = {
+	search: 'Rechercher',
 	ticket: 'Billet',
 	ticketOptions: 'Options de billet',
 	includedInTicket: 'Inclus dans le billet',

ui/src/lib/i18n/pl.ts

@@ -1,6 +1,7 @@
 import type { Translations } from './translation';
 
 const translations: Translations = {
+	search: 'Wyszukaj',
 	ticket: 'Bilet',
 	ticketOptions: 'Opcje biletu',
 	includedInTicket: 'Zawarte w ramach biletu',

ui/src/lib/i18n/translation.ts

@@ -7,6 +7,7 @@ import pl from './pl';
 import cs from './cs';
 
 export type Translations = {
+	search: string;
 	ticket: string;
 	ticketOptions: string;
 	includedInTicket: string;