refactor: improve web UI with rounded corners and micro-interactions

[sthbryan]

Summary

Make the web dashboard more friendly and rounded with:

• Rounded corners (rounded-3xl for cards, rounded-2xl for modals, rounded-xl for inputs)
• Micro-interactions (hover transitions, click scale feedback)
• New Rust and Rust Dark themes inspired by rust-lang.org
• Accessibility support for prefers-reduced-motion

Changes

• Apply rounded corners to all major components
• Add smooth hover transitions and click feedback
• Create Rust (light) and Rust Dark themes
• Add prefers-reduced-motion media query

[Copilot]

Pull request overview

This PR updates the Svelte web dashboard styling by introducing two new “Rust” themes and applying more rounded corners plus small interaction effects (hover/click feedback), with an attempt to improve accessibility via prefers-reduced-motion.

Changes:

• Added new rust (light) and rust-dark themes and registered them in theme imports and theme selection data.
• Updated multiple UI components to use larger border radii and added hover/active micro-interactions.
• Added a global prefers-reduced-motion CSS rule intended to reduce motion.

Reviewed changes

Copilot reviewed 13 out of 13 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
web-svelte/src/styles/themes/_rust.css	Adds the Rust light theme CSS variables.
web-svelte/src/styles/themes/_rust-dark.css	Adds the Rust dark theme CSS variables.
web-svelte/src/styles/themes.css	Imports the new Rust theme files.
web-svelte/src/styles/app.css	Adds a prefers-reduced-motion media query for animations/transitions.
web-svelte/src/lib/stores/theme.svelte.ts	Registers new theme IDs in the theme store.
web-svelte/src/lib/data/themes.ts	Adds Rust themes to theme grouping/selection data.
web-svelte/src/lib/components/TunnelCard.svelte	Updates card rounding and adds hover scale micro-interaction.
web-svelte/src/lib/components/NewConnection.svelte	Updates section/input rounding and sizing.
web-svelte/src/lib/components/EditConnection.svelte	Updates section/input rounding and button micro-interactions.
web-svelte/src/lib/components/Dropdown.svelte	Updates rounding for the trigger/menu/options.
web-svelte/src/lib/components/DeleteModal.svelte	Updates close button rounding and consolidates transition classes.
web-svelte/src/lib/components/ConnectionsPanel.svelte	Updates panel rounding and hover shadow behavior.
web-svelte/src/lib/components/Button.svelte	Updates rounding and adds active scale feedback.

Comments suppressed due to low confidence (1)

web-svelte/src/lib/stores/theme.svelte.ts:32

• Theme is used as a type parameter (e.g. $state<Theme>, return type of getInitialTheme, and casts in THEMES.includes(...)), but the type Theme = typeof THEMES[number]; alias was removed and no replacement/import exists. This will fail TypeScript checking/build. Reintroduce the Theme type alias (or import an equivalent) so these annotations compile; consider also typing set(theme: Theme) to avoid repeated casts.

] as const;

const STORAGE_KEY = 'ftm-theme';

let currentTheme = $state<Theme>('dracula');

function getInitialTheme(): Theme {
  if (typeof window === 'undefined') return 'dracula';

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.