fix(styles): UI/UX micro-interaction polish (#552)

Author: bilalbayram

src/features/settings/components/sections/SettingsComposerSection.tsx

@@ -32,7 +32,7 @@ export function SettingsComposerSection({
     >
       <div className="settings-field">
         <div className="settings-field-label">Follow-up behavior</div>
-        <div className="settings-segmented" aria-label="Follow-up behavior">
+        <div className={`settings-segmented${appSettings.followUpMessageBehavior === "steer" ? " is-second-active" : ""}`} aria-label="Follow-up behavior">
           <label
             className={`settings-segmented-option${
               appSettings.followUpMessageBehavior === "queue" ? " is-active" : ""

src/styles/base.css

@@ -229,3 +229,30 @@ button.window-caption-control:focus-visible,
     display: none;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+
+  /* Restore functional spinners — these communicate loading state */
+  .working-spinner,
+  .git-panel-spinner,
+  .commit-message-loader,
+  .commit-button-spinner,
+  .sidebar-refresh-icon.spinning,
+  .worktree-deleting-spinner,
+  .sidebar-account-spinner,
+  .settings-agents-generate-loader,
+  .composer-action-spinner,
+  .compact-codex-refresh-icon.spinning,
+  .home-usage-refresh-icon.spinning {
+    animation-duration: var(--ds-spinner-dur) !important;
+    animation-iteration-count: infinite !important;
+  }
+}

src/styles/buttons.css

@@ -10,7 +10,7 @@ button {
   font-size: 13px;
   font-weight: 600;
   cursor: pointer;
-  transition: transform 0.15s ease, box-shadow 0.15s ease;
+  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, filter 0.15s ease;
   -webkit-app-region: no-drag;
 }
 
@@ -52,3 +52,21 @@ button:hover:not(:disabled) {
   transform: translateY(-1px);
   box-shadow: 0 12px 18px rgba(0, 0, 0, 0.2);
 }
+
+button:active:not(:disabled) {
+  transform: scale(var(--ds-active-scale));
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+  transition-duration: 50ms;
+}
+
+.icon-button:active:not(:disabled) {
+  transform: scale(var(--ds-active-scale-sm));
+}
+
+.primary:active:not(:disabled) {
+  filter: brightness(0.92);
+}
+
+.ghost:active:not(:disabled) {
+  background: rgba(255, 255, 255, 0.06);
+}

src/styles/compact-tablet.css

@@ -38,7 +38,7 @@
   flex-direction: column;
   align-items: center;
   gap: 6px;
-  transition: all 0.15s ease;
+  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
 }
 
 .tablet-nav-item:hover {

src/styles/composer.css

@@ -486,7 +486,7 @@
   border-radius: 999px;
   border: 2px solid rgba(255, 120, 120, 0.35);
   border-top-color: rgba(255, 120, 120, 0.9);
-  animation: composer-action-spin 0.8s linear infinite;
+  animation: composer-action-spin var(--ds-spinner-dur) linear infinite;
 }
 
 

src/styles/diff.css

@@ -997,7 +997,7 @@
   border-radius: 50%;
   border: 2px solid var(--border-subtle);
   border-top-color: var(--text-strong);
-  animation: spin 0.9s linear infinite;
+  animation: spin var(--ds-spinner-dur) linear infinite;
 }
 
 @keyframes spin {
@@ -1102,7 +1102,7 @@
 .commit-message-loader {
   width: 14px;
   height: 14px;
-  animation: spin 1s linear infinite;
+  animation: spin var(--ds-spinner-dur) linear infinite;
 }
 
 .commit-message-error {
@@ -1150,7 +1150,7 @@
   border-radius: 50%;
   border: 2px solid var(--border-subtle);
   border-top-color: var(--text-emphasis);
-  animation: spin 0.9s linear infinite;
+  animation: spin var(--ds-spinner-dur) linear infinite;
 }
 
 /* Push section */

src/styles/ds-modal.css

@@ -10,6 +10,7 @@
   background: var(--ds-modal-backdrop);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
+  animation: ds-modal-backdrop-in var(--ds-dur-entrance) var(--ds-ease-out) both;
 }
 
 .app.reduced-transparency .ds-modal-backdrop {
@@ -30,6 +31,7 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+  animation: ds-modal-card-in var(--ds-dur-slow) var(--ds-ease-out) both;
 }
 
 .ds-modal :where(input, textarea, select):focus-visible {
@@ -62,6 +64,8 @@
   padding: 10px 12px;
   font-size: 13px;
   width: 100%;
+  transition: border-color var(--ds-dur-normal) var(--ds-ease-out-soft),
+              box-shadow var(--ds-dur-normal) var(--ds-ease-out-soft);
 }
 
 .ds-modal-textarea {
@@ -97,3 +101,19 @@
   padding: 6px 12px;
   border-radius: 10px;
 }
+
+@keyframes ds-modal-backdrop-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes ds-modal-card-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}

src/styles/ds-popover.css

@@ -3,6 +3,7 @@
   border: 1px solid var(--ds-popover-border, var(--border-muted));
   box-shadow: var(--ds-popover-shadow, 0 14px 34px rgba(0, 0, 0, 0.3));
   border-radius: 10px;
+  animation: ds-popover-in var(--ds-dur-fast) var(--ds-ease-out) both;
 }
 
 .ds-popover-item {
@@ -19,6 +20,8 @@
   font-size: 12px;
   text-align: left;
   cursor: pointer;
+  transition: background-color var(--ds-dur-fast) var(--ds-ease-out-soft),
+              color var(--ds-dur-fast) var(--ds-ease-out-soft);
 }
 
 .ds-popover-item:disabled {
@@ -55,3 +58,16 @@
   min-width: 0;
   flex: 1;
 }
+
+@keyframes ds-popover-in {
+  from {
+    opacity: 0;
+    translate: 0 -4px;
+    scale: 0.98;
+  }
+  to {
+    opacity: 1;
+    translate: 0 0;
+    scale: 1;
+  }
+}

src/styles/ds-tokens.css

@@ -41,4 +41,18 @@
   /* Global layer scale (keep numeric so it works with z-index + calc()). */
   --ds-layer-modal: 10000;
   --ds-layer-toast: 11000;
+
+  /* ── Motion ── */
+  --ds-dur-fast: 120ms;
+  --ds-dur-normal: 160ms;
+  --ds-dur-slow: 220ms;
+  --ds-dur-entrance: 200ms;
+
+  --ds-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --ds-ease-out-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  --ds-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+
+  --ds-spinner-dur: 0.7s;
+  --ds-active-scale: 0.97;
+  --ds-active-scale-sm: 0.92;
 }

src/styles/home.css

@@ -213,7 +213,7 @@
 }
 
 .home-usage-refresh-icon.spinning {
-  animation: home-spin 0.8s linear infinite;
+  animation: home-spin var(--ds-spinner-dur) linear infinite;
 }
 
 .home-usage-grid {