From e2f492ccae9afcc98ae7eb76bb94dc973aed60d8 Mon Sep 17 00:00:00 2001
From: yyamashita <yyamashita@mosquit.one>
Date: Sat, 9 May 2026 14:11:33 +0900
Subject: simplize css

---
 app/routes/band-by-uuid.tsx | 77 ++++++++++++++-------------------------------
 1 file changed, 23 insertions(+), 54 deletions(-)

(limited to 'app/routes/band-by-uuid.tsx')

diff --git a/app/routes/band-by-uuid.tsx b/app/routes/band-by-uuid.tsx
index 9cb4d33..99a8b5c 100644
--- a/app/routes/band-by-uuid.tsx
+++ b/app/routes/band-by-uuid.tsx
@@ -26,50 +26,33 @@ const STATUS_LABEL: Record<string, string> = {
 export default function BandDetail() {
   const { band, links, artists, latest } = useLoaderData<typeof loader>();
   return (
-    <main className="max-w-3xl mx-auto px-4 py-8">
-      <div className="flex items-start justify-between mb-6">
-        <div>
-          <h1 className="text-2xl font-bold">{band.name}</h1>
-          <div className="flex items-center gap-3 mt-1 text-sm text-gray-400">
+    <main>
+      <div className="detail-header">
+        <div className="detail-info">
+          <h1>{band.name}</h1>
+          <div className="detail-subtitle">
             {band.area && <span>{band.area}</span>}
             <span>{STATUS_LABEL[band.status] ?? band.status}</span>
           </div>
           {band.description && (
-            <p className="mt-3 text-gray-300 text-sm leading-relaxed">{band.description}</p>
+            <p className="detail-desc">{band.description}</p>
           )}
         </div>
-        <div className="flex items-center gap-3 text-sm shrink-0 ml-4">
-          <Link
-            to={`/bands/of/${band.id}/history`}
-            className="text-gray-400 hover:text-gray-200 transition-colors"
-          >
-            履歴
-          </Link>
-          <Link
-            to={`/bands/of/${band.id}/edit`}
-            className="bg-gray-800 hover:bg-gray-700 text-gray-200 px-3 py-1.5 rounded transition-colors"
-          >
-            編集
-          </Link>
+        <div className="detail-actions">
+          <Link to={`/bands/of/${band.id}/history`} className="history">履歴</Link>
+          <Link to={`/bands/of/${band.id}/edit`} className="edit">編集</Link>
         </div>
       </div>
 
       {artists.length > 0 && (
-        <section className="mb-6">
-          <h2 className="text-xs font-medium text-gray-500 uppercase tracking-wider mb-3">
-            メンバー
-          </h2>
-          <ul className="space-y-2">
+        <section>
+          <h2>メンバー</h2>
+          <ul className="member-list">
             {artists.map((a) => (
-              <li key={a.artist_id} className="flex items-center gap-3 flex-wrap">
-                <Link
-                  to={`/artists/of/${a.artist_id}`}
-                  className="text-blue-400 hover:text-blue-300 transition-colors font-medium"
-                >
-                  {a.artist_name}
-                </Link>
+              <li key={a.artist_id}>
+                <Link to={`/artists/of/${a.artist_id}`}>{a.artist_name}</Link>
                 {a.role && a.role.split(", ").filter(Boolean).map((r, i) => (
-                  <span key={i} className="text-gray-500 text-xs bg-gray-900 px-1.5 py-0.5 rounded">{r}</span>
+                  <span key={i} className="badge">{r}</span>
                 ))}
               </li>
             ))}
@@ -78,19 +61,12 @@ export default function BandDetail() {
       )}
 
       {links.length > 0 && (
-        <section className="mb-6">
-          <h2 className="text-xs font-medium text-gray-500 uppercase tracking-wider mb-3">
-            リンク
-          </h2>
-          <ul className="space-y-1.5">
+        <section>
+          <h2>リンク</h2>
+          <ul className="link-list">
             {links.map((l) => (
               <li key={l.id}>
-                <a
-                  href={l.url}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-blue-400 hover:text-blue-300 transition-colors text-sm"
-                >
+                <a href={l.url} target="_blank" rel="noopener noreferrer">
                   {LINK_TYPE_LABEL[l.label] ?? l.label}
                 </a>
               </li>
@@ -99,21 +75,14 @@ export default function BandDetail() {
         </section>
       )}
 
-      <hr className="border-gray-800 my-6" />
-      <div className="text-xs text-gray-600 space-y-1 font-mono">
+      <hr />
+      <div className="meta">
         <p>/bands/of/{band.id}</p>
         <p>
-          <Link
-            to={`/bands/named/${band.slug}`}
-            className="hover:text-gray-400 transition-colors"
-          >
-            /bands/named/{band.slug}
-          </Link>
+          <Link to={`/bands/named/${band.slug}`}>/bands/named/{band.slug}</Link>
         </p>
         {latest && (
-          <p className="font-sans text-gray-500 mt-2">
-            最終更新: {latest.created_at} — {latest.message}
-          </p>
+          <p className="updated">最終更新: {latest.created_at} — {latest.message}</p>
         )}
       </div>
     </main>
-- 
cgit v1.2.3