Skip to content

refactor(ui): #150 remove DaisyUI v4 dead classes, adopt v5 names #151

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
TortoiseWolfe merged 2 commits into from
Jun 24, 2026
Merged

refactor(ui): #150 remove DaisyUI v4 dead classes, adopt v5 names #151

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2ed0db1
refactor(ui): #150 remove DaisyUI v4 dead classes, adopt v5 names
TurtleWolfe Jun 24, 2026
e33abec
test(e2e): #150 update form selectors after DaisyUI v5 class removal
TurtleWolfe Jun 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 10 additions & 14 deletions src/app/messages/new-group/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,18 +134,18 @@ function NewGroupContent() {
<main className="flex-1 overflow-y-auto">
<div className="mx-auto max-w-lg p-4">
{/* Group Name Input */}
<div className="form-control mb-6">
<div className="mb-6">
<label htmlFor="group-name" className="label">
<span className="label-text font-medium">Group Name</span>
<span className="label-text-alt text-base-content/80">
<span className="font-medium">Group Name</span>
<span className="text-base-content/80">
{groupName.length}/{GROUP_CONSTRAINTS.MAX_NAME_LENGTH}
</span>
</label>
<input
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(
Expand All @@ -154,9 +154,7 @@ function NewGroupContent() {
}
disabled={isCreating}
/>
<p className="label-text-alt text-base-content/80 mt-2">
{autoNamePreview}
</p>
<p className="text-base-content/80 mt-2">{autoNamePreview}</p>
</div>

{/* Selected Members Section */}
Expand Down Expand Up @@ -251,10 +249,10 @@ function NewGroupContent() {
)}

{/* Search Input */}
<div className="form-control mb-4">
<div className="mb-4">
<label htmlFor="member-search" className="label">
<span className="label-text font-medium">Add Members</span>
<span className="label-text-alt">
<span className="font-medium">Add Members</span>
<span>
{selectedMembers.length}/{GROUP_CONSTRAINTS.MAX_MEMBERS - 1}{' '}
selected
</span>
Expand All @@ -265,7 +263,7 @@ function NewGroupContent() {
ref={searchInputRef}
type="text"
placeholder="Search your connections..."
className="input input-bordered min-h-12 w-full pl-10"
className="input min-h-12 w-full pl-10"
value={searchQuery}
onChange={handleSearchChange}
disabled={isCreating || isAtCapacity}
Expand All @@ -286,9 +284,7 @@ function NewGroupContent() {
</svg>
</div>
{isAtCapacity && (
<p className="label-text-alt text-warning mt-1">
Maximum members reached
</p>
<p className="text-warning mt-1">Maximum members reached</p>
)}
</div>

Expand Down
22 changes: 11 additions & 11 deletions src/app/messages/setup/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,26 +223,26 @@ export default function MessagingSetupPage() {
/>

{/* Visible email field */}
<div className="form-control">
<div>
<label className="label" htmlFor="setup-email">
<span className="label-text">Account</span>
<span>Account</span>
</label>
<input
id="setup-email"
type="email"
name="email"
value={user?.email || ''}
readOnly
className="input input-bordered bg-base-200 min-h-11 w-full"
className="input bg-base-200 min-h-11 w-full"
autoComplete="username email"
/>
</div>

{/* Password field */}
<div className="form-control">
<div>
<label className="label" htmlFor="setup-password">
<span className="label-text">Messaging Password</span>
<span className="label-text-alt text-warning">Save this!</span>
<span>Messaging Password</span>
<span className="text-warning">Save this!</span>
</label>
<div className="relative">
<input
Expand All @@ -251,7 +251,7 @@ export default function MessagingSetupPage() {
type={showPassword ? 'text' : 'password'}
value={password}
onChange={(e) => 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}
Expand All @@ -270,24 +270,24 @@ export default function MessagingSetupPage() {
</div>

{/* Confirm password */}
<div className="form-control">
<div>
<label className="label" htmlFor="setup-confirm">
<span className="label-text">Confirm Password</span>
<span>Confirm Password</span>
</label>
<input
id="setup-confirm"
name="confirm-password"
type={showPassword ? 'text' : 'password'}
value={confirmPassword}
onChange={(e) => 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
/>
<label className="label">
<span className="label-text-alt text-warning">
<span className="text-warning">
Your password manager should prompt to save this password
</span>
</label>
Expand Down
8 changes: 4 additions & 4 deletions src/components/atomic/Card/Card.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ describe('Card', () => {

it('applies compact class when compact prop is true', () => {
const { container } = render(<Card compact>Content</Card>);
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)', () => {
Expand All @@ -63,7 +63,7 @@ describe('Card', () => {

it('applies bordered class when bordered prop is true', () => {
const { container } = render(<Card bordered>Content</Card>);
expect(container.firstChild).toHaveClass('card-bordered');
expect(container.firstChild).toHaveClass('card-border');
});

it('applies custom className', () => {
Expand All @@ -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');
});

Expand Down
4 changes: 2 additions & 2 deletions src/components/atomic/Card/Card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,10 @@ export const Card: React.FC<CardProps> = ({
// 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)
Expand Down
2 changes: 1 addition & 1 deletion src/components/atomic/MessageBubble/MessageBubble.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
4 changes: 2 additions & 2 deletions src/components/atomic/TagFilter/TagFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,13 +91,13 @@ export default function TagFilter({
<div className={`space-y-3 ${className}`} data-testid="tag-filter">
{/* Search Input */}
{showSearch && (
<div className="form-control">
<div>
<input
type="text"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
placeholder={searchPlaceholder}
className="input input-bordered input-sm w-full"
className="input input-sm w-full"
aria-label="Search tags"
/>
</div>
Expand Down
30 changes: 14 additions & 16 deletions src/components/auth/AccountSettings/AccountSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -248,42 +248,40 @@ export default function AccountSettings({
<h3 className="card-title">Profile Settings</h3>

{/* Display Name Field */}
<div className="form-control">
<div>
<label htmlFor="displayname-input" className="label">
<span className="label-text">Display Name</span>
<span>Display Name</span>
</label>
<input
id="displayname-input"
type="text"
value={displayName}
onChange={(e) => setDisplayName(e.target.value)}
className="input input-bordered min-h-11"
className="input min-h-11"
placeholder="e.g., John Doe"
disabled={loading || isUpdatingProfile}
/>
<label className="label">
<span className="label-text-alt">
Your friendly name shown to other users
</span>
<span>Your friendly name shown to other users</span>
</label>
</div>

{/* Bio Field */}
<div className="form-control">
<div>
<label htmlFor="bio-textarea" className="label">
<span className="label-text">Bio</span>
<span>Bio</span>
</label>
<textarea
id="bio-textarea"
value={bio}
onChange={(e) => setBio(e.target.value)}
className="textarea textarea-bordered"
className="textarea"
rows={3}
placeholder="Tell us about yourself..."
disabled={loading || isUpdatingProfile}
/>
<label className="label">
<span className="label-text-alt">Maximum 500 characters</span>
<span>Maximum 500 characters</span>
</label>
</div>

Expand Down Expand Up @@ -370,29 +368,29 @@ export default function AccountSettings({
<form onSubmit={handleChangePassword} className="card bg-base-200">
<div className="card-body">
<h3 className="card-title">Change Password</h3>
<div className="form-control">
<div>
<label htmlFor="new-password-input" className="label">
<span className="label-text">New Password</span>
<span>New Password</span>
</label>
<input
id="new-password-input"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="input input-bordered min-h-11"
className="input min-h-11"
disabled={loading || isUpdatingProfile}
/>
</div>
<div className="form-control">
<div>
<label htmlFor="confirm-password-input" className="label">
<span className="label-text">Confirm Password</span>
<span>Confirm Password</span>
</label>
<input
id="confirm-password-input"
type="password"
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)}
className="input input-bordered min-h-11"
className="input min-h-11"
disabled={loading || isUpdatingProfile}
/>
</div>
Expand Down
6 changes: 3 additions & 3 deletions src/components/auth/ForgotPasswordForm/ForgotPasswordForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,16 +107,16 @@ export default function ForgotPasswordForm({
onSubmit={handleSubmit}
className={`space-y-4${className ? ` ${className}` : ''}`}
>
<div className="form-control">
<div>
<label className="label" htmlFor="email">
<span className="label-text">Email</span>
<span>Email</span>
</label>
<input
id="email"
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="input input-bordered min-h-11"
className="input min-h-11"
placeholder="you@example.com"
required
disabled={loading}
Expand Down
18 changes: 9 additions & 9 deletions src/components/auth/ReAuthModal/ReAuthModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -329,24 +329,24 @@ export function ReAuthModal({
/>

{/* Email field for password manager compatibility - shown for all users */}
<div className="form-control mb-4">
<div className="mb-4">
<label className="label" htmlFor="reauth-email">
<span className="label-text">Account</span>
<span>Account</span>
</label>
<input
id="reauth-email"
type="email"
name="email"
value={user?.email || ''}
readOnly
className="input input-bordered bg-base-200 min-h-11 w-full"
className="input bg-base-200 min-h-11 w-full"
autoComplete="username"
/>
</div>

<div className="form-control">
<div>
<label className="label" htmlFor="reauth-password">
<span className="label-text">
<span>
{mode === 'setup' || oauthUser
? 'Messaging Password'
: 'Password'}
Expand All @@ -360,7 +360,7 @@ export function ReAuthModal({
type={showPassword ? 'text' : 'password'}
value={password}
onChange={(e) => 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={
mode === 'setup'
? 'Create a messaging password'
Expand Down Expand Up @@ -424,17 +424,17 @@ export function ReAuthModal({
setup is the primary path for OAuth users from /messages
(FR-021, Feature 013). */}
{mode === 'setup' && (
<div className="form-control mt-4">
<div className="mt-4">
<label className="label" htmlFor="reauth-confirm-password">
<span className="label-text">Confirm Password</span>
<span>Confirm Password</span>
</label>
<input
id="reauth-confirm-password"
name="confirm-password"
type={showPassword ? 'text' : 'password'}
value={confirmPassword}
onChange={(e) => 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}
Expand Down
Loading
Loading