From 2ed0db1f8fdc56c2beba22b115bfb6ba4bfd6d80 Mon Sep 17 00:00:00 2001 From: TurtleWolfe Date: Wed, 24 Jun 2026 00:41:05 +0000 Subject: [PATCH 1/2] refactor(ui): #150 remove DaisyUI v4 dead classes, adopt v5 names MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit DaisyUI 5.0.0-beta.9 renamed/removed several v4 classes the components still carried. Verified against the compiled CSS that the removed classes emit zero rules in v5 (so removal is visually neutral) and that the renames map to existing v5 classes. - card-bordered -> card-border, card-compact -> card-sm (renames). Also updates the custom .card-bordered a11y rule in colorblind-patterns.css so colorblind-mode bordered cards keep their 2px border. - Remove dead input-bordered / textarea-bordered / select-bordered (the base .input/.textarea/.select are bordered by default in v5). One ValidatedInput usage that had only input-bordered (no base) is fixed by dropping the dead class — the component supplies .input itself. - Remove dead form-control wrappers and label-text / label-text-alt spans; kept the div/label/span structure and real Tailwind utilities (text-error, text-warning, font-medium, spacing). Empty className="" left behind by the strip were removed. 32 files. Gates: type-check, lint, build clean; 24 Card tests + 125 form/molecular tests pass; sign-in form render-checked (inputs still bordered, labels intact). Closes #150 Co-Authored-By: Claude Opus 4.8 (1M context) --- src/app/messages/new-group/page.tsx | 24 ++++---- src/app/messages/setup/page.tsx | 22 +++---- src/components/atomic/Card/Card.test.tsx | 8 +-- src/components/atomic/Card/Card.tsx | 4 +- .../atomic/MessageBubble/MessageBubble.tsx | 2 +- src/components/atomic/TagFilter/TagFilter.tsx | 4 +- .../auth/AccountSettings/AccountSettings.tsx | 30 +++++----- .../ForgotPasswordForm/ForgotPasswordForm.tsx | 6 +- .../auth/ReAuthModal/ReAuthModal.tsx | 18 +++--- .../ResetPasswordForm/ResetPasswordForm.tsx | 12 ++-- src/components/auth/SignInForm/SignInForm.tsx | 16 ++--- src/components/auth/SignUpForm/SignUpForm.tsx | 22 +++---- .../forms/ContactForm/ContactForm.tsx | 58 +++++++------------ src/components/forms/FormField.tsx | 6 +- src/components/forms/ValidatedInput.tsx | 2 +- .../GeolocationConsent/GeolocationConsent.tsx | 6 +- .../AccountDeletionModal.tsx | 8 +-- .../ColorblindToggle/ColorblindToggle.tsx | 16 +++-- .../DateRangeFilter/DateRangeFilter.tsx | 12 ++-- .../DateRangePicker/DateRangePicker.tsx | 12 ++-- .../molecular/FontSwitcher/FontSwitcher.tsx | 2 +- .../molecular/MessageInput/MessageInput.tsx | 2 +- .../molecular/UserSearch/UserSearch.tsx | 6 +- .../A11yDevOverlay/A11yDevOverlay.tsx | 2 +- .../AdminAuditTrail/AdminAuditTrail.tsx | 7 +-- .../AdminUserManagement.tsx | 7 +-- .../CaptainShipCrewWithNPC.tsx | 6 +- .../ConversationList/ConversationList.tsx | 10 ++-- .../CreateGroupModal/CreateGroupModal.tsx | 23 ++++---- .../payment/PaymentHistory/PaymentHistory.tsx | 12 ++-- .../privacy/ConsentModal/ConsentModal.tsx | 2 +- src/styles/colorblind-patterns.css | 2 +- 32 files changed, 168 insertions(+), 201 deletions(-) diff --git a/src/app/messages/new-group/page.tsx b/src/app/messages/new-group/page.tsx index db826fe4..ac32d928 100644 --- a/src/app/messages/new-group/page.tsx +++ b/src/app/messages/new-group/page.tsx @@ -134,10 +134,10 @@ function NewGroupContent() {
{/* Group Name Input */} -
+
@@ -145,7 +145,7 @@ function NewGroupContent() { id="group-name" type="text" placeholder="Enter group name (optional)" - className="input input-bordered min-h-12 w-full" + className="input min-h-12 w-full" value={groupName} onChange={(e) => setGroupName( @@ -154,9 +154,7 @@ function NewGroupContent() { } disabled={isCreating} /> -

- {autoNamePreview} -

+

{autoNamePreview}

{/* Selected Members Section */} @@ -251,10 +249,10 @@ function NewGroupContent() { )} {/* Search Input */} -
+
{isAtCapacity && ( -

- Maximum members reached -

+

Maximum members reached

)}
diff --git a/src/app/messages/setup/page.tsx b/src/app/messages/setup/page.tsx index 10164780..3c4e167f 100644 --- a/src/app/messages/setup/page.tsx +++ b/src/app/messages/setup/page.tsx @@ -223,9 +223,9 @@ export default function MessagingSetupPage() { /> {/* Visible email field */} -
+
{/* Password field */} -
+
setPassword(e.target.value)} - className="input input-bordered min-h-11 w-full pr-12" + className="input min-h-11 w-full pr-12" placeholder="Create a messaging password" autoComplete="new-password" disabled={loading} @@ -270,9 +270,9 @@ export default function MessagingSetupPage() {
{/* Confirm password */} -
+
setConfirmPassword(e.target.value)} - className="input input-bordered min-h-11 w-full" + className="input min-h-11 w-full" placeholder="Confirm your password" autoComplete="new-password" disabled={loading} required /> diff --git a/src/components/atomic/Card/Card.test.tsx b/src/components/atomic/Card/Card.test.tsx index b219d74f..9288b66d 100644 --- a/src/components/atomic/Card/Card.test.tsx +++ b/src/components/atomic/Card/Card.test.tsx @@ -48,7 +48,7 @@ describe('Card', () => { it('applies compact class when compact prop is true', () => { const { container } = render(Content); - expect(container.firstChild).toHaveClass('card-compact'); + expect(container.firstChild).toHaveClass('card-sm'); }); it('applies side class when side prop is true (mobile-first: md:card-side)', () => { @@ -63,7 +63,7 @@ describe('Card', () => { it('applies bordered class when bordered prop is true', () => { const { container } = render(Content); - expect(container.firstChild).toHaveClass('card-bordered'); + expect(container.firstChild).toHaveClass('card-border'); }); it('applies custom className', () => { @@ -81,9 +81,9 @@ describe('Card', () => { const card = container.firstChild; expect(card).toHaveClass('card'); expect(card).toHaveClass('bg-base-100'); - expect(card).toHaveClass('card-compact'); + expect(card).toHaveClass('card-sm'); expect(card).toHaveClass('glass'); - expect(card).toHaveClass('card-bordered'); + expect(card).toHaveClass('card-border'); expect(card).toHaveClass('custom'); }); diff --git a/src/components/atomic/Card/Card.tsx b/src/components/atomic/Card/Card.tsx index 78586811..8cd105ff 100644 --- a/src/components/atomic/Card/Card.tsx +++ b/src/components/atomic/Card/Card.tsx @@ -37,10 +37,10 @@ export const Card: React.FC = ({ // side layout only on tablet+ (stacks on mobile) const classes = [ baseClasses, - compact && 'card-compact', + compact && 'card-sm', side && 'md:card-side', glass && 'glass', - bordered && 'card-bordered', + bordered && 'card-border', className, ] .filter(Boolean) diff --git a/src/components/atomic/MessageBubble/MessageBubble.tsx b/src/components/atomic/MessageBubble/MessageBubble.tsx index 26cda2b3..12eae48b 100644 --- a/src/components/atomic/MessageBubble/MessageBubble.tsx +++ b/src/components/atomic/MessageBubble/MessageBubble.tsx @@ -283,7 +283,7 @@ const MessageBubble = memo( ref={textareaRef} value={editContent} onChange={(e) => setEditContent(e.target.value)} - className="textarea textarea-bordered min-h-11 w-full resize-none" + className="textarea min-h-11 w-full resize-none" disabled={isSubmitting} aria-label="Edit message content" maxLength={10000} diff --git a/src/components/atomic/TagFilter/TagFilter.tsx b/src/components/atomic/TagFilter/TagFilter.tsx index ab995a6e..dd3680bb 100644 --- a/src/components/atomic/TagFilter/TagFilter.tsx +++ b/src/components/atomic/TagFilter/TagFilter.tsx @@ -91,13 +91,13 @@ export default function TagFilter({
{/* Search Input */} {showSearch && ( -
+
setSearchQuery(e.target.value)} placeholder={searchPlaceholder} - className="input input-bordered input-sm w-full" + className="input input-sm w-full" aria-label="Search tags" />
diff --git a/src/components/auth/AccountSettings/AccountSettings.tsx b/src/components/auth/AccountSettings/AccountSettings.tsx index 317c5c61..5d6f86a6 100644 --- a/src/components/auth/AccountSettings/AccountSettings.tsx +++ b/src/components/auth/AccountSettings/AccountSettings.tsx @@ -248,42 +248,40 @@ export default function AccountSettings({

Profile Settings

{/* Display Name Field */} -
+
setDisplayName(e.target.value)} - className="input input-bordered min-h-11" + className="input min-h-11" placeholder="e.g., John Doe" disabled={loading || isUpdatingProfile} />
{/* Bio Field */} -
+