Trim issue modal styling

- Remove duplicate button base styles from the issue detail modal CSS
- Keep only the layout and state-specific variants that the shared primitives still need
- Let the shared Button and TextArea own the common control styling

webui/src/routes/issues/-ui/issue-detail-modal.module.css

@@ -666,25 +666,6 @@
   margin-bottom: 14px;
 }
 
-.issueActionButton {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 16px;
-  border-radius: 8px;
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  border: 1px solid transparent;
-  transition: all 0.2s ease;
-  font-family: inherit;
-}
-
-.issueActionButton:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
 .issueActionDownload {
   background: rgba(var(--accent-light-rgb), 0.12);
   color: rgb(var(--accent-light-rgb));
@@ -708,23 +689,7 @@
 }
 
 .issueDetailResponseTextarea {
-  width: 100%;
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  color: #fff;
-  padding: 10px 12px;
-  border-radius: 8px;
-  font-size: 13px;
-  outline: none;
-  resize: vertical;
   min-height: 70px;
-  font-family: inherit;
-  transition: border-color 0.2s;
-  box-sizing: border-box;
-}
-
-.issueDetailResponseTextarea:focus {
-  border-color: rgba(var(--accent-light-rgb), 0.5);
 }
 
 .issueDetailAdminResponse {
@@ -836,25 +801,6 @@
   padding: 0 22px 22px;
 }
 
-.modalButton {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 12px 16px;
-  border-radius: 14px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(255, 255, 255, 0.05);
-  color: #fff;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  font-family: inherit;
-}
-
-.modalButton:hover:not(:disabled) {
-  background: rgba(255, 255, 255, 0.08);
-}
-
 .modalButtonSecondary {
   background: rgba(255, 255, 255, 0.04);
 }
@@ -870,16 +816,6 @@
   font-weight: 700;
 }
 
-.modalButtonDanger {
-  background: rgba(239, 68, 68, 0.14);
-  border-color: rgba(239, 68, 68, 0.28);
-  color: #ffd0d0;
-}
-
-.modalButtonGhost {
-  background: rgba(255, 255, 255, 0.04);
-}
-
 .modalButtonProgress {
   background: rgba(77, 166, 255, 0.15);
   color: #4da6ff;
@@ -911,7 +847,6 @@
 }
 
 .modalButtonDelete:hover:not(:disabled),
-.modalButtonDanger:hover:not(:disabled),
 .modalButtonProgress:hover:not(:disabled),
 .modalButtonResolve:hover:not(:disabled),
 .modalButtonDismiss:hover:not(:disabled),
@@ -1013,12 +948,12 @@
     justify-content: center;
   }
 
-  .issueActionButton,
+  .issueActionButtons > button,
-  .modalButton {
+  .modalFooter > button {
     width: 100%;
   }
 
-  .issueActionButton {
+  .issueActionButtons > button {
     justify-content: center;
   }
 

webui/src/routes/issues/-ui/issue-detail-modal.tsx

@@ -5,6 +5,7 @@ import {
   launchAlbumDownloadWorkflow,
   launchAlbumWishlistWorkflow,
 } from '@/platform/workflows/album-workflows';
+import { Button, FormField, TextArea } from '@/components/form';
 
 import type { IssueRecord } from '../-issues.types';
 
@@ -85,8 +86,8 @@ export function IssueDetailModal({
         return (
           <>
             {issue.status === 'open' && (
-              <button
+              <Button
-                className={`${styles.modalButton} ${styles.modalButtonProgress}`}
+                className={styles.modalButtonProgress}
                 type="button"
                 onClick={() =>
                   updateMutation.mutate({
@@ -98,10 +99,10 @@ export function IssueDetailModal({
                 disabled={updateMutation.isPending}
               >
                 Mark In Progress
-              </button>
+              </Button>
             )}
-            <button
+            <Button
-              className={`${styles.modalButton} ${styles.modalButtonResolve}`}
+              className={styles.modalButtonResolve}
               type="button"
               onClick={() =>
                 updateMutation.mutate({
@@ -113,9 +114,9 @@ export function IssueDetailModal({
               disabled={updateMutation.isPending}
             >
               Resolve
-            </button>
+            </Button>
-            <button
+            <Button
-              className={`${styles.modalButton} ${styles.modalButtonDismiss}`}
+              className={styles.modalButtonDismiss}
               type="button"
               onClick={() =>
                 updateMutation.mutate({
@@ -127,14 +128,14 @@ export function IssueDetailModal({
               disabled={updateMutation.isPending}
             >
               Dismiss
-            </button>
+            </Button>
           </>
         );
       }
 
       return (
-        <button
+        <Button
-          className={`${styles.modalButton} ${styles.modalButtonReopen}`}
+          className={styles.modalButtonReopen}
           type="button"
           onClick={() =>
             updateMutation.mutate({ issueId: issue.id, status: 'open', adminResponse })
@@ -142,14 +143,14 @@ export function IssueDetailModal({
           disabled={updateMutation.isPending}
         >
           Reopen
-        </button>
+        </Button>
       );
     }
 
     if (issue.status === 'open') {
       return (
-        <button
+        <Button
-          className={`${styles.modalButton} ${styles.modalButtonDelete}`}
+          className={styles.modalButtonDelete}
           type="button"
           onClick={() => {
             if (window.confirm('Withdraw this issue?')) {
@@ -159,7 +160,7 @@ export function IssueDetailModal({
           disabled={deleteMutation.isPending}
         >
           Withdraw
-        </button>
+        </Button>
       );
     }
 
@@ -441,38 +442,44 @@ export function IssueDetailModal({
               ) : null}
 
               {issue.entity_type !== 'artist' && isAdmin && (
-                <div className={styles.issueDetailSection}>
+              <div className={styles.issueDetailSection}>
-                  <div className={styles.issueDetailSectionTitle}>Admin Actions</div>
+                <div className={styles.issueDetailSectionTitle}>Admin Actions</div>
-                  <div className={styles.issueActionButtons}>
+                <div className={styles.issueActionButtons}>
-                    <button
+                  <Button
-                      className={`${styles.issueActionButton} ${styles.issueActionDownload}`}
+                    className={styles.issueActionDownload}
-                      type="button"
+                    type="button"
-                      disabled={downloadWorkflowMutation.isPending}
+                    disabled={downloadWorkflowMutation.isPending}
-                      onClick={() => downloadWorkflowMutation.mutate(albumWorkflowInput)}
+                    onClick={() => downloadWorkflowMutation.mutate(albumWorkflowInput)}
-                    >
+                  >
-                      {downloadWorkflowMutation.isPending ? 'Loading...' : 'Download Album'}
+                    {downloadWorkflowMutation.isPending ? 'Loading...' : 'Download Album'}
-                    </button>
+                  </Button>
-                    <button
+                  <Button
-                      className={`${styles.issueActionButton} ${styles.issueActionWishlist}`}
+                    className={styles.issueActionWishlist}
-                      type="button"
+                    type="button"
-                      disabled={wishlistWorkflowMutation.isPending}
+                    disabled={wishlistWorkflowMutation.isPending}
-                      onClick={() => wishlistWorkflowMutation.mutate(albumWorkflowInput)}
+                    onClick={() => wishlistWorkflowMutation.mutate(albumWorkflowInput)}
-                    >
+                  >
-                      {wishlistWorkflowMutation.isPending ? 'Loading...' : 'Add to Wishlist'}
+                    {wishlistWorkflowMutation.isPending ? 'Loading...' : 'Add to Wishlist'}
-                    </button>
+                  </Button>
-                  </div>
                 </div>
+              </div>
               )}
 
               {isAdmin && (
                 <div className={styles.issueDetailSection}>
-                  <div className={styles.issueDetailSectionTitle}>Admin Response</div>
+                  <FormField
-                  <textarea
+                    label="Admin Response"
-                    className={styles.issueDetailResponseTextarea}
+                    htmlFor="issue-detail-response-input"
-                    value={adminResponse}
+                    helperText="Write a response to the reporter."
-                    onChange={(event) => setAdminResponse(event.target.value)}
+                  >
-                    placeholder="Write a response to the reporter..."
+                    <TextArea
-                  />
+                      className={styles.issueDetailResponseTextarea}
+                      id="issue-detail-response-input"
+                      value={adminResponse}
+                      onChange={(event) => setAdminResponse(event.target.value)}
+                      placeholder="Write a response to the reporter..."
+                    />
+                  </FormField>
                 </div>
               )}
 
@@ -487,19 +494,19 @@ export function IssueDetailModal({
         </div>
 
         <div className={styles.modalFooter}>
-          <button
+          <Button
-            className={`${styles.modalButton} ${styles.modalButtonSecondary}`}
+            className={styles.modalButtonSecondary}
             type="button"
             onClick={onClose}
           >
             Close
-          </button>
+          </Button>
           {!isLoading && !error && issue && (
             <>
               {statusButtons}
               {isAdmin && (
-                <button
+                <Button
-                  className={`${styles.modalButton} ${styles.modalButtonDelete}`}
+                  className={styles.modalButtonDelete}
                   type="button"
                   onClick={() => {
                     if (window.confirm('Delete this issue?')) {
@@ -509,7 +516,7 @@ export function IssueDetailModal({
                   disabled={deleteMutation.isPending}
                 >
                   Delete
-                </button>
+                </Button>
               )}
             </>
           )}

webui/src/routes/issues/-ui/issue-domain-host.tsx

@@ -327,7 +327,7 @@ function ReportIssueModal({
 
         <FormActions className={styles.modalFooter}>
           <Button
-            className={`${styles.modalButton} ${styles.modalButtonSecondary}`}
+            className={styles.modalButtonSecondary}
             type="button"
             onClick={onClose}
           >
@@ -344,7 +344,7 @@ function ReportIssueModal({
               const isSubmitting = state.isSubmitting || createMutation.isPending;
               return (
                 <Button
-                  className={`${styles.modalButton} ${styles.modalButtonPrimary}`}
+                  className={styles.modalButtonPrimary}
                   type="submit"
                   disabled={!state.category || !state.title.trim() || isSubmitting}
                 >