refactor: dedupe shared ui styles

Author: gildesmarais

frontend/index.html

@@ -8,6 +8,7 @@
       name="description"
       content="html2rss converts fixed demo pages or operator-submitted URLs into feed endpoints."
     />
+    <link rel="stylesheet" href="/shared-ui.css" />
     <link rel="icon" href="/favicon.ico" />
     <title>html2rss</title>
   </head>

frontend/src/components/App.tsx

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

frontend/src/components/AppPanels.tsx

@@ -118,7 +118,7 @@ export function CreateFeedPanel({
           onInput={(event) => onFeedFieldChange('url', (event.target as HTMLInputElement).value)}
         />
 
-        <label class="field-block field-block--select" htmlFor="strategy">
+        <label class="field-block field-block--centered field-block--compact" htmlFor="strategy">
           <select
             id="strategy"
             name="strategy"
@@ -182,7 +182,7 @@ export function CreateFeedPanel({
             <h2>Add access token</h2>
             <p class="token-gate__hint">This instance needs an access token.</p>
           </div>
-          <label class="field-block field-block--token" htmlFor="access-token">
+          <label class="field-block field-block--stretch field-block--compact" htmlFor="access-token">
             <span class="field-label field-label--ghost">Access token</span>
             <input
               id="access-token"
@@ -226,14 +226,14 @@ export function CreateFeedPanel({
       )}
 
       {conversionError && (
-        <div class="ui-card ui-card--notice ui-card--padded notice notice--error" role="alert">
+        <div class="ui-card ui-card--notice ui-card--padded notice" data-tone="error" role="alert">
           <div class="notice__title">Feed generation failed</div>
           <p>{conversionError}</p>
         </div>
       )}
 
       {feedFieldErrors.form && (
-        <div class="ui-card ui-card--notice ui-card--padded notice notice--error" role="alert">
+        <div class="ui-card ui-card--notice ui-card--padded notice" data-tone="error" role="alert">
           <p>{feedFieldErrors.form}</p>
         </div>
       )}

frontend/src/components/DominantField.tsx

@@ -39,7 +39,7 @@ export function DominantField({
 }: DominantFieldProps) {
   return (
     <div class={className ? `dominant-field ${className}` : 'dominant-field'}>
-      <label class="field-block field-block--primary field-block--hero" htmlFor={id}>
+      <label class="field-block field-block--centered" htmlFor={id}>
         <span class="field-label field-label--ghost">{label}</span>
         <input
           id={id}

frontend/src/components/ResultDisplay.tsx

@@ -166,7 +166,7 @@ export function ResultDisplay({ result, onCreateAnother }: ResultDisplayProps) {
       )}
 
       {copyNotice && (
-        <div class="ui-card ui-card--notice ui-card--padded notice notice--success" role="status">
+        <div class="ui-card ui-card--notice ui-card--padded notice" data-tone="success" role="status">
           <p>{copyNotice}</p>
         </div>
       )}