Feat/theme

app/components/device/new/device-info.tsx

@@ -121,36 +121,53 @@ export function DeviceSelectionStep() {
 					return (
 						<Card
 							key={device.name}
+							role="button"
+							tabIndex={0}
 							className={cn(
-								'relative transform cursor-pointer overflow-hidden transition-all duration-300 ease-in-out hover:scale-105',
-								selectedDevice === device.name
-									? 'bg-primary/10 ring-primary ring-2'
-									: 'hover:bg-gray-50',
+								'border-border bg-card text-card-foreground relative transform cursor-pointer overflow-hidden rounded-xl border transition-all duration-300 ease-in-out',
+								'hover:border-primary/40 hover:bg-muted/40 hover:-translate-y-0.5 hover:shadow-md',
+								'focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none',
+								selectedDevice === device.name &&
+									'border-primary bg-primary/10 ring-primary/40 shadow-sm ring-2',
 							)}
 							onClick={() => {
 								if (selectedDevice === 'senseBox:Home') {
 									return
 								}
 								handleDeviceChange(device.name)
 							}}
+							onKeyDown={(event) => {
+								if (event.key === 'Enter' || event.key === ' ') {
+									event.preventDefault()
+
+									if (selectedDevice === 'senseBox:Home') {
+										return
+									}
+
+									handleDeviceChange(device.name)
+								}
+							}}
 						>
 							<CardContent className="flex flex-row p-0">
-								<img
-									src={device.image}
-									alt={device.name}
-									className={cn(
-										'w-24 self-stretch',
-										device.imageHasPadding
-											? 'object-cover'
-											: 'object-contain p-4',
-									)}
-								/>
+								<div className="border-border flex w-24 shrink-0 items-center justify-center border-r bg-white">
+									<img
+										src={device.image}
+										alt={device.name}
+										className={cn(
+											'h-full w-full',
+											device.imageHasPadding
+												? 'object-cover'
+												: 'object-contain p-4',
+										)}
+									/>
+								</div>
+
 								<div className="flex min-w-0 flex-1 flex-col justify-center p-3">
 									{selectedDevice === 'senseBox:Home' && (
 										<Button
 											variant="ghost"
 											size="icon"
-											className="absolute top-2 right-2"
+											className="text-muted-foreground hover:bg-muted hover:text-foreground absolute top-2 right-2"
 											onClick={(e) => {
 												e.stopPropagation()
 												handleClose()
@@ -159,17 +176,21 @@ export function DeviceSelectionStep() {
 											<X className="h-4 w-4" />
 										</Button>
 									)}
-									<h3 className="text-lg font-semibold wrap-break-word">
+
+									<h3 className="text-foreground text-lg font-semibold wrap-break-word">
 										{device.name}
 									</h3>
+
 									{device.name === 'senseBox:Home' &&
 										selectedDevice === 'senseBox:Home' && (
 											<>
 												<Separator className="my-2" />
+
 												<div className="w-full max-w-xs">
-													<h4 className="mb-2 text-sm font-medium">
+													<h4 className="text-muted-foreground mb-2 text-sm font-medium">
 														{t('connection_type')}
 													</h4>
+
 													<RadioGroup
 														value={selectedConnectionType}
 														onValueChange={(value) =>
@@ -183,7 +204,10 @@ export function DeviceSelectionStep() {
 																className="flex items-center space-x-2"
 															>
 																<RadioGroupItem value={type} id={type} />
-																<Label htmlFor={type} className="text-sm">
+																<Label
+																	htmlFor={type}
+																	className="text-foreground text-sm"
+																>
 																	{type}
 																</Label>
 															</div>

app/components/device/new/general-info.tsx

@@ -14,6 +14,7 @@ import {
 	TooltipProvider,
 	TooltipTrigger,
 } from '~/components/ui/tooltip'
+import { cn } from '~/lib/utils'
 
 type ExposureOption = 'outdoor' | 'indoor' | 'mobile' | 'unknown'
 
@@ -140,17 +141,23 @@ export function GeneralInfoStep() {
 					{exposureOptions.map((option) => (
 						<Button
 							key={option.value}
-							type="button" // Prevent form submission
+							type="button"
 							onClick={() => setValue('exposure', option.value)}
-							variant={'outline'}
-							className={`flex items-center gap-2 transition-all duration-200 ease-in-out ${
+							variant="outline"
+							aria-pressed={currentExposure === option.value}
+							className={cn(
+								'flex items-center gap-2 transition-all duration-200 ease-in-out',
 								currentExposure === option.value
-									? 'bg-green-100 shadow-md hover:bg-green-100'
-									: 'hover:bg-gray-100'
-							}`}
+									? [
+											'border-primary bg-primary/10 text-primary ring-primary/40 shadow-md ring-2',
+											'hover:bg-primary/15',
+											'dark:border-primary dark:bg-primary/20 dark:text-primary dark:hover:bg-primary/25',
+										]
+									: 'hover:bg-muted',
+							)}
 						>
 							{option.icon}
-							<span className="text-sm">{t(option.label)}</span>
+							<span className="text-sm">{option.label}</span>
 						</Button>
 					))}
 				</div>

app/components/device/new/location-info.tsx

@@ -136,7 +136,7 @@ export function LocationStep() {
 				</BaseMap>
 			</div>
 
-			<div className="flex w-full items-center justify-around bg-gray-50 p-4 dark:bg-gray-800">
+			<div className="bg-background flex w-full items-center justify-around p-4">
 				<div>
 					<Label htmlFor="latitude">{t('latitude')}</Label>
 					<Input

app/components/device/new/new-device-stepper.tsx

@@ -178,7 +178,7 @@ export default function NewDeviceStepper() {
 			<FormProvider {...form}>
 				<Form
 					onSubmit={form.handleSubmit(onSubmit, onError)}
-					className="flex h-full w-1/2 flex-col justify-between space-y-6 rounded-lg border bg-white p-6"
+					className="bg-card flex h-full w-1/2 flex-col justify-between space-y-6 rounded-lg border p-6"
 				>
 					<div className="space-y-4">
 						{/* Breadcrumb Navigation */}
@@ -192,8 +192,8 @@ export default function NewDeviceStepper() {
 													onClick={() => stepper.navigation.goTo(step.id)}
 													className={` ${
 														stepper.state.current.index === step.index
-															? 'font-bold text-black'
-															: 'cursor-pointer text-gray-500 hover:text-black'
+															? 'text-foreground font-bold'
+															: 'hover:text-foreground text-muted-foreground cursor-pointer'
 													} `}
 												>
 													{t(step.label)}

app/components/device/new/summary-info.tsx

@@ -1,7 +1,6 @@
 import { MapPin, Tag, Smartphone, Cpu, Cog } from 'lucide-react'
 import { useFormContext } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
-import { Badge } from '@/components/ui/badge'
 import { Card, CardContent } from '@/components/ui/card'
 
 export function SummaryInfo() {

app/components/landing/header/language-selector.tsx

@@ -1,6 +1,11 @@
 import { Languages } from 'lucide-react'
 import { useFetcher } from 'react-router'
 import { Button } from '~/components/ui/button'
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from '~/components/ui/tooltip'
 import { useRootRouteLoaderData } from '~/root'
 
 export default function LanguageSelector() {
@@ -16,21 +21,24 @@ export default function LanguageSelector() {
 		)
 	}
 
+	const languageLabel = locale === 'de' ? 'Deutsch' : 'English'
+	const nextLanguageLabel = locale === 'de' ? 'English' : 'Deutsch'
+
 	return (
-		<div className="group relative">
-			<Button
-				variant="topbar"
-				size="topbarPill"
-				onClick={toggleLanguage}
-				disabled={fetcher.state !== 'idle'}
-				aria-label={`Current language: ${locale.toUpperCase()}`}
-			>
-				<Languages />
-			</Button>
+		<Tooltip>
+			<TooltipTrigger asChild>
+				<Button
+					variant="topbar"
+					size="topbarPill"
+					onClick={toggleLanguage}
+					disabled={fetcher.state !== 'idle'}
+					aria-label={`Current language: ${languageLabel}. Switch to ${nextLanguageLabel}.`}
+				>
+					<Languages />
+				</Button>
+			</TooltipTrigger>
 
-			<div className="bg-popover text-popover-foreground pointer-events-none absolute top-full left-1/2 mt-2 -translate-x-1/2 rounded-md px-2 py-1 text-xs opacity-0 shadow-md transition-opacity group-hover:opacity-100">
-				{locale.toUpperCase()}
-			</div>
-		</div>
+			<TooltipContent side="bottom">{languageLabel}</TooltipContent>
+		</Tooltip>
 	)
 }

app/components/landing/header/theme-toggle.tsx

@@ -0,0 +1,75 @@
+import { Moon, Sun } from 'lucide-react'
+import { useFetcher } from 'react-router'
+import { Button } from '~/components/ui/button'
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from '~/components/ui/tooltip'
+import type { ThemePreference } from '~/lib/theme'
+import { useRootRouteLoaderData } from '~/root'
+
+function applyThemePreference(preference: ThemePreference) {
+	const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+
+	const resolvedTheme =
+		preference === 'dark' || (preference === 'system' && prefersDark)
+			? 'dark'
+			: 'light'
+
+	const root = document.documentElement
+
+	root.classList.remove('light', 'dark')
+	root.classList.add(resolvedTheme)
+	root.style.colorScheme = resolvedTheme
+}
+
+function getCurrentResolvedTheme(): 'light' | 'dark' {
+	return document.documentElement.classList.contains('dark') ? 'dark' : 'light'
+}
+
+export default function ThemeToggle() {
+	const { themePreference } = useRootRouteLoaderData()
+	const fetcher = useFetcher()
+
+	const toggleTheme = () => {
+		const currentTheme = getCurrentResolvedTheme()
+
+		const nextThemePreference: ThemePreference =
+			currentTheme === 'dark' ? 'light' : 'dark'
+
+		applyThemePreference(nextThemePreference)
+
+		void fetcher.submit(
+			{ 'set-theme': nextThemePreference },
+			{ method: 'post', action: '/' },
+		)
+	}
+
+	const tooltipText =
+		themePreference === 'system'
+			? 'System theme'
+			: `${themePreference[0].toUpperCase()}${themePreference.slice(1)} theme`
+
+	return (
+		<TooltipProvider>
+			<Tooltip>
+				<TooltipTrigger asChild>
+					<Button
+						variant="topbar"
+						size="topbarPill"
+						onClick={toggleTheme}
+						disabled={fetcher.state !== 'idle'}
+						aria-label={`Toggle theme. Current preference: ${themePreference}`}
+					>
+						<Sun className="block dark:hidden" />
+						<Moon className="hidden dark:block" />
+					</Button>
+				</TooltipTrigger>
+
+				<TooltipContent side="bottom">{tooltipText}</TooltipContent>
+			</Tooltip>
+		</TooltipProvider>
+	)
+}

app/components/language-select.tsx

@@ -0,0 +1,53 @@
+import { useFetcher } from 'react-router'
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from '~/components/ui/select'
+import { useRootRouteLoaderData } from '~/root'
+
+const supportedLocales = ['en', 'de'] as const
+
+type SupportedLocale = (typeof supportedLocales)[number]
+
+function isSupportedLocale(value: unknown): value is SupportedLocale {
+	return (
+		typeof value === 'string' &&
+		(supportedLocales as readonly string[]).includes(value)
+	)
+}
+
+export function LanguageSelect() {
+	const { locale } = useRootRouteLoaderData()
+	const fetcher = useFetcher<{ ok: boolean }>()
+
+	const optimisticLocale = fetcher.formData?.get('set-language')
+	const currentLocale = isSupportedLocale(optimisticLocale)
+		? optimisticLocale
+		: locale
+
+	return (
+		<Select
+			value={currentLocale}
+			disabled={fetcher.state !== 'idle'}
+			onValueChange={(nextLocale) => {
+				if (!isSupportedLocale(nextLocale)) return
+
+				void fetcher.submit(
+					{ 'set-language': nextLocale },
+					{ method: 'post', action: '/' },
+				)
+			}}
+		>
+			<SelectTrigger className="border-input bg-background text-foreground w-36">
+				<SelectValue />
+			</SelectTrigger>
+			<SelectContent>
+				<SelectItem value="en">English</SelectItem>
+				<SelectItem value="de">Deutsch</SelectItem>
+			</SelectContent>
+		</Select>
+	)
+}

app/components/map/topbar.tsx

@@ -4,6 +4,7 @@ import NavBar from '../header/nav-bar'
 import Info from '../header/info'
 import LanguageSelector from '../landing/header/language-selector'
 import { TooltipProvider } from '../ui/tooltip'
+import ThemeToggle from '../landing/header/theme-toggle'
 
 interface MapHeaderProps {
 	devices: any
@@ -34,6 +35,7 @@ export default function MapHeader({
 
 					<div className="flex shrink-0 items-center gap-4">
 						<LanguageSelector />
+						<ThemeToggle />
 
 						<div className="h-7 w-px bg-black/10 dark:bg-white/15" />