From 4d658b8d148ab2a64581cc947e9fe0cc03df2c0f Mon Sep 17 00:00:00 2001
From: Bryan Villafuerte <bryamu.u@gmail.com>
Date: Mon, 11 May 2026 00:00:11 -0600
Subject: [PATCH 1/8] feat(web): add prefers-reduced-motion support for
 accessibility

---
 web-svelte/src/styles/app.css | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/web-svelte/src/styles/app.css b/web-svelte/src/styles/app.css
index d8242f4..a13a738 100644
--- a/web-svelte/src/styles/app.css
+++ b/web-svelte/src/styles/app.css
@@ -16,3 +16,10 @@ html, body {
 * {
   box-sizing: border-box;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  * {
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+  }
+}

From 96a5fc2cb96727f7c3c3e87ccea6a3ce3c0c3181 Mon Sep 17 00:00:00 2001
From: Bryan Villafuerte <bryamu.u@gmail.com>
Date: Mon, 11 May 2026 00:00:34 -0600
Subject: [PATCH 2/8] refactor(web): apply rounded-3xl corners and
 micro-interactions to buttons and panels

---
 web-svelte/src/lib/components/Button.svelte           | 5 +++--
 web-svelte/src/lib/components/ConnectionsPanel.svelte | 4 ++--
 web-svelte/src/lib/components/Dropdown.svelte         | 6 +++---
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/web-svelte/src/lib/components/Button.svelte b/web-svelte/src/lib/components/Button.svelte
index f890df9..5f3e679 100644
--- a/web-svelte/src/lib/components/Button.svelte
+++ b/web-svelte/src/lib/components/Button.svelte
@@ -74,9 +74,10 @@
   {disabled}
   {onclick}
   class={cn(
-    "inline-flex items-center justify-center rounded-lg border font-medium cursor-pointer",
-    "transition-colors duration-150",
+    "inline-flex items-center justify-center border font-medium cursor-pointer",
+    "transition-all duration-150 rounded-xl",
     "disabled:opacity-50 disabled:cursor-not-allowed",
+    "active:scale-[0.98]",
     variantClasses.base,
     variantClasses.hover,
     sizeClasses,
diff --git a/web-svelte/src/lib/components/ConnectionsPanel.svelte b/web-svelte/src/lib/components/ConnectionsPanel.svelte
index 444aa93..2afa3a5 100644
--- a/web-svelte/src/lib/components/ConnectionsPanel.svelte
+++ b/web-svelte/src/lib/components/ConnectionsPanel.svelte
@@ -41,8 +41,8 @@
   bind:this={sectionEl}
   style="opacity: 0;"
   class={cn(
-    "flex flex-col overflow-hidden rounded-xl border shadow-sm transition-all duration-200",
-    "hover:shadow-lg hover:-translate-y-px",
+    "flex flex-col overflow-hidden rounded-3xl border shadow-sm transition-all duration-200",
+    "hover:shadow-lg",
     "bg-card border-border",
   )}
 >
diff --git a/web-svelte/src/lib/components/Dropdown.svelte b/web-svelte/src/lib/components/Dropdown.svelte
index 16ece28..910a5e5 100644
--- a/web-svelte/src/lib/components/Dropdown.svelte
+++ b/web-svelte/src/lib/components/Dropdown.svelte
@@ -112,7 +112,7 @@
     aria-expanded={isOpen}
     aria-haspopup="true"
     class={cn(
-      "flex items-center gap-1.5 px-3 py-2 text-xs h-9 rounded-lg border min-h-9 cursor-pointer",
+      "flex items-center gap-1.5 px-3 py-2 text-xs h-9 rounded-xl border min-h-9 cursor-pointer",
       "bg-card border-border text-text hover:bg-hover flex-1",
     )}
   >
@@ -135,7 +135,7 @@
       aria-orientation="vertical"
       style="opacity: 0; scale: 0.95; transform: translateY(-4px);"
       class={cn(
-        "absolute min-w-[150px] max-h-[300px] rounded-lg border p-1 z-50 overflow-y-auto cursor-default",
+        "absolute min-w-[150px] max-h-[300px] rounded-2xl border p-1 z-50 overflow-y-auto cursor-default",
         menuPosition,
         "bg-card border-border",
       )}
@@ -153,7 +153,7 @@
               onSelect?.(option);
             }}
             class={cn(
-              "flex items-center gap-2 w-full px-3 py-2 text-xs rounded-lg text-left cursor-pointer",
+              "flex items-center gap-2 w-full px-3 py-2 text-xs rounded-xl text-left cursor-pointer",
               "text-text bg-transparent border-none hover:bg-hover",
               "disabled:opacity-50 disabled:cursor-not-allowed",
               option.danger && "text-red-500 hover:bg-red-500/10",

From 3479ff9b8170f8907c858207806fcc5fa31538e0 Mon Sep 17 00:00:00 2001
From: Bryan Villafuerte <bryamu.u@gmail.com>
Date: Mon, 11 May 2026 00:00:50 -0600
Subject: [PATCH 3/8] refactor(web): apply rounded corners and smooth inputs to
 NewConnection

---
 web-svelte/src/lib/components/NewConnection.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web-svelte/src/lib/components/NewConnection.svelte b/web-svelte/src/lib/components/NewConnection.svelte
index 2b249a8..c37f286 100644
--- a/web-svelte/src/lib/components/NewConnection.svelte
+++ b/web-svelte/src/lib/components/NewConnection.svelte
@@ -84,7 +84,7 @@
 <section
   bind:this={sectionEl}
   style="opacity: 0;"
-  class="rounded-xl p-5 bg-card border border-border"
+  class="rounded-2xl p-5 bg-card border border-border"
 >
   <div bind:this={headerEl} style="opacity: 0;" class="mb-5">
     <h2 class="text-base font-semibold text-text-heading flex items-center gap-2">
@@ -104,7 +104,7 @@
           placeholder={t("tunnel_name_hint")}
           required
           autocomplete="off"
-          class="w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-offset-1 bg-input-bg text-text border-border focus:ring-primary transition-all duration-200"
+          class="w-full h-9 px-3 py-2 border rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-offset-1 bg-input-bg text-text border-border focus:ring-primary transition-all duration-200"
         />
       </div>
       <div class="grid grid-cols-2 gap-4">
@@ -119,7 +119,7 @@
             min="1"
             max="65535"
             required
-            class="w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-offset-1 bg-input-bg text-text border-border focus:ring-primary transition-all duration-200"
+            class="w-full h-9 px-3 py-2 border rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-offset-1 bg-input-bg text-text border-border focus:ring-primary transition-all duration-200"
           />
         </div>
         <div class="mb-4">

From 5e2944670a9f5e98344a930c24bb7f0d8a03eab9 Mon Sep 17 00:00:00 2001
From: Bryan Villafuerte <bryamu.u@gmail.com>
Date: Mon, 11 May 2026 00:00:56 -0600
Subject: [PATCH 4/8] refactor(web): apply rounded corners and smooth inputs to
 EditConnection

---
 web-svelte/src/lib/components/EditConnection.svelte | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/web-svelte/src/lib/components/EditConnection.svelte b/web-svelte/src/lib/components/EditConnection.svelte
index dc0c164..919fa7f 100644
--- a/web-svelte/src/lib/components/EditConnection.svelte
+++ b/web-svelte/src/lib/components/EditConnection.svelte
@@ -110,7 +110,7 @@
 <section
   bind:this={sectionEl}
   style="opacity: 0;"
-  class="rounded-xl p-5 bg-card border border-border"
+  class="rounded-2xl p-5 bg-card border border-border"
 >
   <div
     bind:this={headerEl}
@@ -125,7 +125,7 @@
     <button
       type="button"
       onclick={onCancel}
-      class="p-1 rounded text-lg bg-transparent border-none text-text-muted cursor-pointer transition-colors hover:bg-hover hover:text-text"
+      class="p-1 rounded-xl text-lg bg-transparent border-none text-text-muted cursor-pointer transition-all hover:bg-hover hover:text-text"
     >
       <X size={18} />
     </button>
@@ -145,7 +145,7 @@
           placeholder={t("name_placeholder")}
           required
           autocomplete="off"
-          class="w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-offset-1 bg-input-bg text-text border-border focus:ring-primary transition-all duration-200"
+          class="w-full h-9 px-3 py-2 border rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-offset-1 bg-input-bg text-text border-border focus:ring-primary transition-all duration-200"
         />
       </div>
       <div class="grid grid-cols-2 gap-4">
@@ -161,7 +161,7 @@
             min="1"
             max="65535"
             required
-            class="w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-offset-1 bg-input-bg text-text border-border focus:ring-primary transition-all duration-200"
+            class="w-full h-9 px-3 py-2 border rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-offset-1 bg-input-bg text-text border-border focus:ring-primary transition-all duration-200"
           />
         </div>
         <div class="mb-4">

From 9b560056338f58a1f5dbf8bab04af241d8607f90 Mon Sep 17 00:00:00 2001
From: Bryan Villafuerte <bryamu.u@gmail.com>
Date: Mon, 11 May 2026 00:01:00 -0600
Subject: [PATCH 5/8] refactor(web): add rounded-3xl and hover transitions to
 TunnelCard and DeleteModal

---
 web-svelte/src/lib/components/DeleteModal.svelte | 5 ++---
 web-svelte/src/lib/components/TunnelCard.svelte  | 4 ++--
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/web-svelte/src/lib/components/DeleteModal.svelte b/web-svelte/src/lib/components/DeleteModal.svelte
index c51f97f..d1f16df 100644
--- a/web-svelte/src/lib/components/DeleteModal.svelte
+++ b/web-svelte/src/lib/components/DeleteModal.svelte
@@ -106,9 +106,8 @@
         </h3>
         <button
           class={cn(
-            "w-8 h-8 flex items-center justify-center rounded-lg cursor-pointer",
-            "bg-transparent border-none text-text-muted",
-            "transition-all duration-150 hover:rotate-90 hover:bg-hover",
+            "w-8 h-8 flex items-center justify-center rounded-xl cursor-pointer",
+            "bg-transparent border-none text-text-muted transition-all duration-150 hover:rotate-90 hover:bg-hover"
           )}
           onclick={handleCancel}
           aria-label={t("close")}
diff --git a/web-svelte/src/lib/components/TunnelCard.svelte b/web-svelte/src/lib/components/TunnelCard.svelte
index 960adaa..ed5f602 100644
--- a/web-svelte/src/lib/components/TunnelCard.svelte
+++ b/web-svelte/src/lib/components/TunnelCard.svelte
@@ -200,11 +200,11 @@
 </script>
 
 <div
-  class={cn("border rounded-xl cursor-default", "bg-card border-border")}
+  class="border rounded-3xl cursor-default transition-all duration-150 hover:scale-[1.01] bg-card border-border"
 >
   <div class="flex flex-col">
     <div
-      class="flex justify-between items-start p-4 gap-4 flex-row sm:items-stretch sm:p-3.5 sm:gap-3"
+      class="flex justify-between items-start p-5 gap-4 flex-row sm:items-stretch sm:p-3.5 sm:gap-3"
     >
       <div class="flex-1 min-w-0">
         <div

From c9b9a49298fc6a41ec423abd1d6609dfecf219fa Mon Sep 17 00:00:00 2001
From: Bryan Villafuerte <bryamu.u@gmail.com>
Date: Mon, 11 May 2026 13:52:39 -0600
Subject: [PATCH 6/8] feat(web): add Rust and Rust Dark themes inspired by
 rust-lang.org

---
 web-svelte/src/lib/data/themes.ts           |  4 +-
 web-svelte/src/lib/stores/theme.svelte.ts   |  6 +-
 web-svelte/src/styles/themes.css            |  2 +
 web-svelte/src/styles/themes/_rust-dark.css | 63 +++++++++++++++++++++
 web-svelte/src/styles/themes/_rust.css      | 63 +++++++++++++++++++++
 5 files changed, 134 insertions(+), 4 deletions(-)
 create mode 100644 web-svelte/src/styles/themes/_rust-dark.css
 create mode 100644 web-svelte/src/styles/themes/_rust.css

diff --git a/web-svelte/src/lib/data/themes.ts b/web-svelte/src/lib/data/themes.ts
index d0cf7e1..86ba515 100644
--- a/web-svelte/src/lib/data/themes.ts
+++ b/web-svelte/src/lib/data/themes.ts
@@ -24,6 +24,7 @@ export const themeGroups: ThemeGroup[] = [
       { id: 'red', color: '#ff5555' },
       { id: 'blue', color: '#8be9fd' },
       { id: 'purple', color: '#ff79c6' },
+      { id: 'rust-dark', color: '#e05824' },
     ]
   },
   {
@@ -38,6 +39,7 @@ export const themeGroups: ThemeGroup[] = [
       { id: 'red-light', color: '#ff6e6e' },
       { id: 'blue-light', color: '#8be9fd' },
       { id: 'purple-light', color: '#ff79c6' },
+      { id: 'rust', color: '#e05824' },
     ]
   }
-];
+];
\ No newline at end of file
diff --git a/web-svelte/src/lib/stores/theme.svelte.ts b/web-svelte/src/lib/stores/theme.svelte.ts
index 610644d..bfd7eaf 100644
--- a/web-svelte/src/lib/stores/theme.svelte.ts
+++ b/web-svelte/src/lib/stores/theme.svelte.ts
@@ -19,11 +19,11 @@ const THEMES = [
   'blue',
   'blue-light',
   'purple',
-  'purple-light'
+  'purple-light',
+  'rust-dark',
+  'rust'
 ] as const;
 
-type Theme = typeof THEMES[number];
-
 const STORAGE_KEY = 'ftm-theme';
 
 let currentTheme = $state<Theme>('dracula');
diff --git a/web-svelte/src/styles/themes.css b/web-svelte/src/styles/themes.css
index 0390184..5b125df 100644
--- a/web-svelte/src/styles/themes.css
+++ b/web-svelte/src/styles/themes.css
@@ -23,6 +23,8 @@
 @import './themes/_blue-light.css';
 @import './themes/_purple.css';
 @import './themes/_purple-light.css';
+@import './themes/_rust.css';
+@import './themes/_rust-dark.css';
 
 @theme {
   --color-bg: var(--color-bg);
diff --git a/web-svelte/src/styles/themes/_rust-dark.css b/web-svelte/src/styles/themes/_rust-dark.css
new file mode 100644
index 0000000..abe84a5
--- /dev/null
+++ b/web-svelte/src/styles/themes/_rust-dark.css
@@ -0,0 +1,63 @@
+/* ===========================================
+   RUST DARK - Rust Language Theme (Dark)
+   Inspired by rust-lang.org dark branding
+   =========================================== */
+
+:root[data-theme="rust-dark"] {
+  /* Base - dark warm */
+  --color-bg: #1a1210;
+  --color-card: #2a1f18;
+  --color-text: #f0e6d9;
+  --color-heading: #ffffff;
+  --color-muted: #9a8873;
+  --color-border: #3d2d24;
+  --color-border-light: #2a1f18;
+  
+  /* Primary - Rust orange */
+  --color-primary: #e05824;
+  --color-primary-hover: #f06834;
+  --color-hover: #3d2d24;
+  
+  /* Buttons */
+  --color-btn-primary: #e05824;
+  --color-btn-text: #ffffff;
+  --color-btn-primary-hover: #f06834;
+  
+  /* Start/Stop */
+  --color-btn-start: #5cb85c;
+  --color-btn-start-hover: #6fc96f;
+  --color-btn-stop: #dc2626;
+  --color-btn-stop-hover: #ef4444;
+  
+  /* Danger */
+  --color-btn-danger: #dc2626;
+  --color-btn-danger-hover: #ef4444;
+  
+  /* Status */
+  --color-status-running: #5cb85c;
+  --color-status-starting: #e05824;
+  --color-status-installing: #c97a3c;
+  --color-status-error: #dc2626;
+  --color-status-stopped: #9a8873;
+  
+  /* Logs */
+  --color-logs-bg: #120e0a;
+  --color-logs-text: #f0e6d9;
+  
+  /* URL bar */
+  --color-url-bg: #3d2d24;
+  --color-url-text: #e05824;
+  
+  /* Inputs */
+  --color-input-bg: #2a1f18;
+  --color-input-text: #f0e6d9;
+  --color-input-placeholder: #7a6a5a;
+  --color-input-disabled: #3d2d24;
+  
+  /* Badge */
+  --color-badge-text: #1a1210;
+  
+  /* Secondary button */
+  --color-secondary-btn: #3d2d24;
+  --color-secondary-btn-text: #f0e6d9;
+}
\ No newline at end of file
diff --git a/web-svelte/src/styles/themes/_rust.css b/web-svelte/src/styles/themes/_rust.css
new file mode 100644
index 0000000..317e390
--- /dev/null
+++ b/web-svelte/src/styles/themes/_rust.css
@@ -0,0 +1,63 @@
+/* ===========================================
+   RUST - Rust Language Theme (Light)
+   Inspired by rust-lang.org branding
+   =========================================== */
+
+:root[data-theme="rust"] {
+  /* Base - warm cream */
+  --color-bg: #fdf6ec;
+  --color-card: #ffffff;
+  --color-text: #3d1c0a;
+  --color-heading: #2a1205;
+  --color-muted: #8b6b4d;
+  --color-border: #e8d5c4;
+  --color-border-light: #f5ebe0;
+  
+  /* Primary - Rust orange */
+  --color-primary: #e05824;
+  --color-primary-hover: #c44d1f;
+  --color-hover: #f5ebe0;
+  
+  /* Buttons */
+  --color-btn-primary: #e05824;
+  --color-btn-text: #ffffff;
+  --color-btn-primary-hover: #c44d1f;
+  
+  /* Start/Stop */
+  --color-btn-start: #3d8b40;
+  --color-btn-start-hover: #2f7032;
+  --color-btn-stop: #b91c1c;
+  --color-btn-stop-hover: #991b1b;
+  
+  /* Danger */
+  --color-btn-danger: #b91c1c;
+  --color-btn-danger-hover: #991b1b;
+  
+  /* Status */
+  --color-status-running: #3d8b40;
+  --color-status-starting: #e05824;
+  --color-status-installing: #8b4513;
+  --color-status-error: #b91c1c;
+  --color-status-stopped: #9ca3af;
+  
+  /* Logs */
+  --color-logs-bg: #faf3e8;
+  --color-logs-text: #3d1c0a;
+  
+  /* URL bar */
+  --color-url-bg: #f5ebe0;
+  --color-url-text: #e05824;
+  
+  /* Inputs */
+  --color-input-bg: #ffffff;
+  --color-input-text: #3d1c0a;
+  --color-input-placeholder: #b89e7d;
+  --color-input-disabled: #f5ebe0;
+  
+  /* Badge */
+  --color-badge-text: #ffffff;
+  
+  /* Secondary button */
+  --color-secondary-btn: #f0e6d9;
+  --color-secondary-btn-text: #3d1c0a;
+}
\ No newline at end of file

From d50a011d3519ac781ecc0cd5b363ab072ce88dd8 Mon Sep 17 00:00:00 2001
From: Bryan Villafuerte <bryamu.u@gmail.com>
Date: Mon, 11 May 2026 13:59:54 -0600
Subject: [PATCH 7/8] refactor(web): update header text size in
 ConnectionsPanel

---
 web-svelte/src/lib/components/ConnectionsPanel.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-svelte/src/lib/components/ConnectionsPanel.svelte b/web-svelte/src/lib/components/ConnectionsPanel.svelte
index 2afa3a5..9e2bcd7 100644
--- a/web-svelte/src/lib/components/ConnectionsPanel.svelte
+++ b/web-svelte/src/lib/components/ConnectionsPanel.svelte
@@ -55,7 +55,7 @@
     )}
   >
     <h2
-      class="m-0 text-[17px] font-semibold font-serif text-text-heading flex items-center gap-2"
+      class="m-0 text-base font-semibold font-serif text-text-heading flex items-center gap-2"
     >
       {t("connections")}
     </h2>

From 24a9c10541c0bf5aa69c325a6495d3b5d47a28af Mon Sep 17 00:00:00 2001
From: Bryan Villafuerte <bryamu.u@gmail.com>
Date: Mon, 11 May 2026 14:00:13 -0600
Subject: [PATCH 8/8] refactor(web): remove hover shadow effect from
 ConnectionsPanel

---
 web-svelte/src/lib/components/ConnectionsPanel.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/web-svelte/src/lib/components/ConnectionsPanel.svelte b/web-svelte/src/lib/components/ConnectionsPanel.svelte
index 9e2bcd7..45e63cc 100644
--- a/web-svelte/src/lib/components/ConnectionsPanel.svelte
+++ b/web-svelte/src/lib/components/ConnectionsPanel.svelte
@@ -42,7 +42,6 @@
   style="opacity: 0;"
   class={cn(
     "flex flex-col overflow-hidden rounded-3xl border shadow-sm transition-all duration-200",
-    "hover:shadow-lg",
     "bg-card border-border",
   )}
 >