refactor: align web and rss design surfaces

Author: gildesmarais

frontend/src/components/App.tsx

@@ -196,7 +196,7 @@ export function App() {
     return (
       <section class="workspace-shell workspace-shell--centered workspace-shell--loading">
         <BrandLockup />
-        <div class="status-card" aria-live="polite">
+        <div class="ui-card ui-card--notice ui-card--roomy status-card" aria-live="polite">
           <div class="status-card__spinner" aria-hidden="true" />
           <div>
             <strong>Loading instance</strong>
@@ -214,7 +214,7 @@ export function App() {
       </header>
 
       {(metadataError || tokenStateError) && (
-        <section class="notice notice--error" role="alert">
+        <section class="ui-card ui-card--notice ui-card--padded notice notice--error" role="alert">
           <div class="notice__title">Instance metadata unavailable</div>
           <p>{metadataError ?? tokenStateError}</p>
         </section>

frontend/src/components/AppPanels.tsx

@@ -118,11 +118,11 @@ export function CreateFeedPanel({
           onInput={(event) => onFeedFieldChange('url', (event.target as HTMLInputElement).value)}
         />
 
-        <label class="field-block field-block--select field-block--subtle" htmlFor="strategy">
+        <label class="field-block field-block--select" htmlFor="strategy">
           <select
             id="strategy"
             name="strategy"
-            class="input input--select input--subtle"
+            class="input input--minimal"
             value={feedFormData.strategy}
             disabled={strategiesLoading || showTokenPrompt}
             onChange={(event) => onFeedFieldChange('strategy', (event.target as HTMLSelectElement).value)}
@@ -147,7 +147,11 @@ export function CreateFeedPanel({
           <>
             <p class="field-help field-help--alert">Custom feed generation is disabled for this instance.</p>
             {featuredFeeds.length > 0 && (
-              <div class="notice" role="status" aria-label="Included feeds">
+              <div
+                class="ui-card ui-card--notice ui-card--padded notice"
+                role="status"
+                aria-label="Included feeds"
+              >
                 <div class="notice__title">Try a working included feed</div>
                 <p>Start with one of the embedded configs from this instance:</p>
                 {featuredFeeds.map((feed) => (
@@ -184,7 +188,7 @@ export function CreateFeedPanel({
               id="access-token"
               name="access-token"
               type="password"
-              class="input input--mono input--subtle"
+              class="input input--mono input--minimal"
               aria-label="Access token"
               placeholder="Paste access token"
               autocomplete="off"
@@ -222,14 +226,14 @@ export function CreateFeedPanel({
       )}
 
       {conversionError && (
-        <div class="notice notice--error" role="alert">
+        <div class="ui-card ui-card--notice ui-card--padded notice notice--error" role="alert">
           <div class="notice__title">Feed generation failed</div>
           <p>{conversionError}</p>
         </div>
       )}
 
       {feedFieldErrors.form && (
-        <div class="notice notice--error" role="alert">
+        <div class="ui-card ui-card--notice ui-card--padded notice notice--error" role="alert">
           <p>{feedFieldErrors.form}</p>
         </div>
       )}

frontend/src/components/DominantField.tsx

@@ -45,7 +45,7 @@ export function DominantField({
           id={id}
           name={id}
           type={type}
-          class="input input--mono input--hero"
+          class="input input--mono input--lg"
           placeholder={placeholder}
           autocomplete={type === 'url' ? 'url' : 'off'}
           autoFocus={autoFocus}

frontend/src/components/ResultDisplay.tsx

@@ -94,7 +94,10 @@ export function ResultDisplay({ result, onCreateAnother }: ResultDisplayProps) {
 
   return (
     <section class="result-shell layout-stack" aria-live="polite">
-      <header class="result-hero layout-rail-reading layout-stack" style={{ '--stack-gap': 'var(--space-3)' }}>
+      <header
+        class="result-hero layout-rail-reading layout-stack"
+        style={{ '--stack-gap': 'var(--space-3)' }}
+      >
         <p class="result-kicker ui-eyebrow">Feed created</p>
         <h1 class="result-title">Your feed is ready</h1>
         <p class="result-meta layout-rail-copy">{result.name}</p>
@@ -163,7 +166,7 @@ export function ResultDisplay({ result, onCreateAnother }: ResultDisplayProps) {
       )}
 
       {copyNotice && (
-        <div class="notice notice--success" role="status">
+        <div class="ui-card ui-card--notice ui-card--padded notice notice--success" role="status">
           <p>{copyNotice}</p>
         </div>
       )}