8iz120vqu: Restyle the Trending minnects and Find experts panels

src/components/ExpertSearch.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { SweepButton } from "@/components/Buttons";
 import { HexAvatar } from "@/components/HexAvatar";
 import { useEffect, useRef, useState } from "react";
 import type { DiscoverCategory } from "@/lib/discover";
@@ -27,28 +28,30 @@ export function ExpertSearchView(p: ExpertSearchViewProps) {
       </div>
       <form role="search" className="search-form" onSubmit={(e) => e.preventDefault()}>
         <label htmlFor="expert-q">Search experts</label>
-        <input
-          id="expert-q"
-          type="search"
-          value={p.query}
-          placeholder="Name or topic"
-          autoComplete="off"
-          maxLength={80}
-          onChange={(e) => p.onQuery(e.target.value)}
-        />
+        <div className="search-field">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
+            <circle cx="11" cy="11" r="7" /><path d="m20 20-3.5-3.5" />
+          </svg>
+          <input
+            id="expert-q"
+            type="search"
+            value={p.query}
+            placeholder="Name or topic"
+            autoComplete="off"
+            maxLength={80}
+            onChange={(e) => p.onQuery(e.target.value)}
+          />
+        </div>
       </form>
       {p.categories.length > 0 ? (
         <div role="group" aria-label="Browse experts by category" className="chips">
           {p.categories.map((c) => (
-            <button
+            <SweepButton
               key={String(c.id)}
-              type="button"
-              className="chip"
-              aria-pressed={p.activeCategory === c.name}
+              label={c.name}
+              selected={p.activeCategory === c.name}
               onClick={() => p.onCategory(p.activeCategory === c.name ? null : c.name)}
-            >
-              {c.name}
-            </button>
+            />
           ))}
         </div>
       ) : null}
@@ -59,15 +62,20 @@ export function ExpertSearchView(p: ExpertSearchViewProps) {
           <p className="search-note">No experts found.</p>
         ) : null}
         {p.status === "ready" && p.results.length > 0 ? (
-          <ul className="rail-list">
+          <ul className="rail-list search-rows">
             {p.results.map((e) => (
-              <li key={String(e.id)} className="rail-card expert-card" data-testid="search-result">
+              <li key={String(e.id)} className="expert-row" data-testid="search-result">
                 <HexAvatar name={e.displayName} pictureUrl={e.pictureUrl} size="md" />
-                <div className="rail-text">
-                  <strong className="rail-name">{e.displayName || "Expert"}</strong>
-                  {e.byline ? <span className="rail-byline">{e.byline}</span> : null}
-                  {e.rating !== null ? <span className="rail-meta">★ {e.rating.toFixed(1)}</span> : null}
+                <div className="expert-text">
+                  <strong>{e.displayName || "Expert"}</strong>
+                  {e.byline ? <span>{e.byline}</span> : null}
                 </div>
+                {e.rating !== null ? (
+                  <span className="expert-rate" aria-label={`Rating ${e.rating.toFixed(1)}`}>
+                    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2.8 2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.6l-5.8 3.1 1.1-6.5L2.6 9.6l6.5-.9L12 2.8Z" /></svg>
+                    {e.rating.toFixed(1)}
+                  </span>
+                ) : null}
               </li>
             ))}
           </ul>