Phase 5 cleanup

packages/web/src/app/(dashboard)/medicines/LibraryTab.tsx

@@ -29,11 +29,11 @@ const CATEGORY_LABELS: Record<string, string> = {
   other: 'Other',
 };
 
-const CATEGORY_COLORS: Record<string, string> = {
-  prescription: 'bg-blue-100 text-blue-700',
-  otc: 'bg-green-100 text-green-700',
-  supplement: 'bg-purple-100 text-purple-700',
-  other: 'bg-gray-100 text-gray-700',
+const CATEGORY_PILL: Record<string, string> = {
+  prescription: 'mt-pill--info',
+  otc: 'mt-pill--ok',
+  supplement: 'mt-pill--brand',
+  other: 'mt-pill--ghost',
 };
 
 export function LibraryTab({ householdId }: { householdId: string }) {
@@ -83,16 +83,13 @@ export function LibraryTab({ householdId }: { householdId: string }) {
     <div>
       <div className="flex items-center justify-between mb-4">
         <div />
-        <button
-          onClick={() => setShowForm(!showForm)}
-          className="rounded-lg bg-primary-600 px-4 py-2 text-sm font-medium text-white hover:bg-primary-700 transition-colors"
-        >
+        <button onClick={() => setShowForm(!showForm)} className="mt-btn mt-btn--primary">
           {showForm ? 'Cancel' : 'Add Medicine'}
         </button>
       </div>
 
       {error && (
-        <div className="mb-4 rounded-lg bg-red-50 border border-red-200 p-3 text-sm text-red-700">
+        <div className="mt-alert mt-alert--danger mb-4">
           {error}
           <button onClick={() => setError('')} className="ml-2 underline">
             Dismiss
@@ -117,12 +114,13 @@ export function LibraryTab({ householdId }: { householdId: string }) {
           value={search}
           onChange={(e) => setSearch(e.target.value)}
           placeholder="Search medicines..."
-          className="w-full max-w-md rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
+          className="mt-field max-w-md"
         />
         <select
           value={filterCategory}
           onChange={(e) => setFilterCategory(e.target.value)}
-          className="rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
+          className="mt-field"
+          style={{ width: 'auto' }}
         >
           <option value="">All Categories</option>
           {Object.values(MedicineCategory).map((c) => (
@@ -134,7 +132,8 @@ export function LibraryTab({ householdId }: { householdId: string }) {
         <select
           value={filterForm}
           onChange={(e) => setFilterForm(e.target.value)}
-          className="rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
+          className="mt-field"
+          style={{ width: 'auto' }}
         >
           <option value="">All Forms</option>
           {Object.values(MedicineForm).map((f) => (
@@ -176,13 +175,13 @@ export function LibraryTab({ householdId }: { householdId: string }) {
               </Link>
               <div className="flex items-center gap-3 ml-4">
                 <span
-                  className={`rounded-full px-2.5 py-0.5 text-xs font-medium ${CATEGORY_COLORS[med.category] ?? CATEGORY_COLORS['other']}`}
+                  className={`mt-pill ${CATEGORY_PILL[med.category] ?? CATEGORY_PILL['other']}`}
                 >
                   {CATEGORY_LABELS[med.category] ?? med.category}
                 </span>
                 <button
                   onClick={() => handleDelete(med._id, med.name)}
-                  className="rounded p-1 text-gray-400 hover:text-red-600 hover:bg-red-50 transition-colors"
+                  className="mt-btn mt-btn--danger-icon"
                   title="Delete"
                 >
                   <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -242,17 +241,13 @@ function CreateMedicineForm({
   }
 
   return (
-    <div className="mb-6 rounded-xl border bg-white p-6 shadow-sm">
+    <div className="mt-card mb-6">
       <h2 className="text-lg font-semibold mb-4">Add Medicine</h2>
-      {error && (
-        <div className="mb-4 rounded-lg bg-red-50 border border-red-200 p-3 text-sm text-red-700">
-          {error}
-        </div>
-      )}
+      {error && <div className="mt-alert mt-alert--danger mb-4">{error}</div>}
       <form onSubmit={handleSubmit} className="space-y-4">
         <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Name</label>
+            <label className="mt-field-label">Name</label>
             <input
               type="text"
               required
@@ -260,15 +255,15 @@ function CreateMedicineForm({
               value={formData.name}
               onChange={(e) => setFormData({ ...formData, name: e.target.value })}
               placeholder="e.g. Metformin"
-              className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
+              className="mt-field"
             />
           </div>
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Form</label>
+            <label className="mt-field-label">Form</label>
             <select
               value={formData.form}
               onChange={(e) => setFormData({ ...formData, form: e.target.value as MedicineForm })}
-              className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
+              className="mt-field"
             >
               {Object.values(MedicineForm).map((f) => (
                 <option key={f} value={f}>
@@ -279,7 +274,7 @@ function CreateMedicineForm({
           </div>
           <div className="grid grid-cols-2 gap-3">
             <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">Strength</label>
+              <label className="mt-field-label">Strength</label>
               <input
                 type="number"
                 required
@@ -288,17 +283,17 @@ function CreateMedicineForm({
                 value={formData.strength || ''}
                 onChange={(e) => setFormData({ ...formData, strength: Number(e.target.value) })}
                 placeholder="500"
-                className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
+                className="mt-field"
               />
             </div>
             <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">Unit</label>
+              <label className="mt-field-label">Unit</label>
               <select
                 value={formData.strengthUnit}
                 onChange={(e) =>
                   setFormData({ ...formData, strengthUnit: e.target.value as StrengthUnit })
                 }
-                className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
+                className="mt-field"
               >
                 {Object.values(StrengthUnit).map((u) => (
                   <option key={u} value={u}>
@@ -309,13 +304,13 @@ function CreateMedicineForm({
             </div>
           </div>
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Category</label>
+            <label className="mt-field-label">Category</label>
             <select
               value={formData.category}
               onChange={(e) =>
                 setFormData({ ...formData, category: e.target.value as MedicineCategory })
               }
-              className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
+              className="mt-field"
             >
               {Object.values(MedicineCategory).map((c) => (
                 <option key={c} value={c}>
@@ -325,30 +320,22 @@ function CreateMedicineForm({
             </select>
           </div>
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Notes (optional)</label>
+            <label className="mt-field-label">Notes (optional)</label>
             <input
               type="text"
               maxLength={1000}
               value={formData.notes ?? ''}
               onChange={(e) => setFormData({ ...formData, notes: e.target.value || undefined })}
               placeholder="Any additional notes"
-              className="w-full rounded-lg border px-3 py-2 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
+              className="mt-field"
             />
           </div>
         </div>
         <div className="flex gap-3 pt-2">
-          <button
-            type="submit"
-            disabled={submitting}
-            className="rounded-lg bg-primary-600 px-4 py-2 text-sm font-medium text-white hover:bg-primary-700 disabled:opacity-50 transition-colors"
-          >
+          <button type="submit" disabled={submitting} className="mt-btn mt-btn--primary">
             {submitting ? 'Creating...' : 'Create Medicine'}
           </button>
-          <button
-            type="button"
-            onClick={onCancel}
-            className="rounded-lg border px-4 py-2 text-sm font-medium hover:bg-gray-50 transition-colors"
-          >
+          <button type="button" onClick={onCancel} className="mt-btn mt-btn--ghost">
             Cancel
           </button>
         </div>