simplize css

1 files changed, 22 insertions, 44 deletions

diff --git a/app/routes/artist-new.tsx b/app/routes/artist-new.tsx
index 168a7cc..ce91dab 100644
--- a/app/routes/artist-new.tsx
+++ b/app/routes/artist-new.tsx
@@ -44,19 +44,17 @@ export default function ArtistNew() {
   const [links, setLinks] = useState<{ label: string; url: string }[]>([]);
 
   return (
-    <main className="max-w-3xl mx-auto px-4 py-8">
-      <div className="flex items-center gap-3 mb-6">
-        <Link to="/" className="text-gray-400 hover:text-gray-200 transition-colors">←</Link>
-        <h1 className="text-xl font-semibold">New Artist</h1>
+    <main>
+      <div className="page-header">
+        <Link to="/" className="back">←</Link>
+        <h1>New Artist</h1>
       </div>
 
-      <Form method="post" className="space-y-5">
+      <Form method="post">
         <input type="hidden" name="links" value={JSON.stringify(links)} />
 
         <div>
-          <label className="block text-sm font-medium text-gray-300 mb-1">
-            名前 <span className="text-red-400">*</span>
-          </label>
+          <label>名前 <span className="req">*</span></label>
           <input
             name="name"
             value={name}
@@ -64,45 +62,41 @@ export default function ArtistNew() {
               setName(e.target.value);
               if (!slugManual) setSlug(toSlug(e.target.value));
             }}
-            className="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-gray-100 focus:outline-none focus:border-blue-500"
           />
-          {errors.name && <p className="text-red-400 text-sm mt-1">{errors.name}</p>}
+          {errors.name && <p className="error">{errors.name}</p>}
         </div>
 
         <div>
-          <label className="block text-sm font-medium text-gray-300 mb-1">
-            Slug <span className="text-red-400">*</span>
-          </label>
+          <label>Slug <span className="req">*</span></label>
           <input
             name="slug"
             value={slug}
             onChange={(e) => { setSlugManual(true); setSlug(e.target.value); }}
-            className="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-gray-100 focus:outline-none focus:border-blue-500 font-mono text-sm"
+            className="mono"
           />
-          {errors.slug && <p className="text-red-400 text-sm mt-1">{errors.slug}</p>}
+          {errors.slug && <p className="error">{errors.slug}</p>}
         </div>
 
         <div>
-          <label className="block text-sm font-medium text-gray-300 mb-2">リンク</label>
-          <div className="space-y-2">
+          <label>リンク</label>
+          <div className="links-form">
             {links.map((link, i) => (
-              <div key={i} className="flex gap-2">
+              <div key={i} className="link-row">
                 <input
+                  className="label-input"
                   value={link.label}
                   onChange={(e) => setLinks(links.map((l, idx) => idx === i ? { ...l, label: e.target.value } : l))}
                   placeholder="ラベル (例: X)"
-                  className="w-28 bg-gray-800 border border-gray-700 rounded px-3 py-2 text-gray-100 focus:outline-none focus:border-blue-500 text-sm"
                 />
                 <input
                   value={link.url}
                   onChange={(e) => setLinks(links.map((l, idx) => idx === i ? { ...l, url: e.target.value } : l))}
                   placeholder="https://..."
-                  className="flex-1 bg-gray-800 border border-gray-700 rounded px-3 py-2 text-gray-100 focus:outline-none focus:border-blue-500 text-sm"
                 />
                 <button
                   type="button"
+                  className="btn-icon"
                   onClick={() => setLinks(links.filter((_, idx) => idx !== i))}
-                  className="text-gray-500 hover:text-red-400 px-2 transition-colors"
                 >
                   ×
                 </button>
@@ -111,38 +105,22 @@ export default function ArtistNew() {
           </div>
           <button
             type="button"
+            className="btn-text"
             onClick={() => setLinks([...links, { label: "", url: "" }])}
-            className="mt-2 text-blue-400 hover:text-blue-300 text-sm transition-colors"
           >
             + リンクを追加
           </button>
         </div>
 
         <div>
-          <label className="block text-sm font-medium text-gray-300 mb-1">
-            更新メッセージ <span className="text-red-400">*</span>
-          </label>
-          <input
-            name="message"
-            placeholder="例: 初回登録"
-            className="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-gray-100 focus:outline-none focus:border-blue-500"
-          />
-          {errors.message && <p className="text-red-400 text-sm mt-1">{errors.message}</p>}
+          <label>更新メッセージ <span className="req">*</span></label>
+          <input name="message" placeholder="例: 初回登録" />
+          {errors.message && <p className="error">{errors.message}</p>}
         </div>
 
-        <div className="flex gap-3 pt-2">
-          <button
-            type="submit"
-            className="bg-blue-600 hover:bg-blue-500 text-white px-4 py-2 rounded font-medium transition-colors"
-          >
-            作成
-          </button>
-          <Link
-            to="/"
-            className="bg-gray-800 hover:bg-gray-700 text-gray-300 px-4 py-2 rounded transition-colors"
-          >
-            キャンセル
-          </Link>
+        <div className="actions">
+          <button type="submit">作成</button>
+          <Link to="/" className="btn">キャンセル</Link>
         </div>
       </Form>
     </main>