fix: for descructive action added distructive colors and styles

[sujal12344]

Summary

This PR updates existing destructive actions (like Delete, Remove, Trash, Reset buttons) across the examples
to use the destructive color variant defined in the theme.

This ensures users can immediately visualize how their configured destructive color is reflected across UI components.

Changes Made

• Updated all destructive action buttons to use the variant="destructive" prop or destructive theme token.
• Verified styling consistency in all examples (dashboard, modals, alerts, etc.).
• Aligned implementation with shadcn/ui’s destructive color pattern.

Why

Previously, some destructive actions existed but did not visually reflect the destructive color theme.
This change makes the destructive color system consistent and clearly visible throughout the examples.

Screenshots

Before	After

Related Issue

Closes #201

Summary by CodeRabbit

• Style
  • Applied consistent destructive styling to Delete and Logout actions across dashboard, tasks, user navigation, profile dropdown and mail views—including the mail trash button—to improve visual distinction and clarity for irreversible operations.

[vercel]

@sujal12344 is attempting to deploy a commit to the tweakcn OSS program Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Walkthrough

Apply destructive text styling classes (e.g., text-destructive, hover:text-destructive, focus:text-destructive) to several Delete/Logout/Move-to-trash controls across example components and the shared user profile dropdown. No behavior or exported signatures were changed.

Changes

Cohort / File(s)	Summary
Dashboard Example components/examples/dashboard/components/data-table.tsx, components/examples/dashboard/components/nav-user.tsx	Added destructive text classes (text-destructive, focus:text-destructive) to Delete and Log out dropdown items for visual emphasis.
Mail Example components/examples/mail/components/mail-display.tsx	Rewrote a self-closing Move-to-trash Button to an expanded element and added destructive classes (text-destructive, hover:text-destructive, focus-visible:text-destructive).
Tasks Example components/examples/tasks/components/data-table-row-actions.tsx, components/examples/tasks/components/user-nav.tsx	Added destructive text classes (text-destructive, focus:text-destructive) to Delete and Log out menu items.
Shared Component components/user-profile-dropdown.tsx	Added destructive text classes (text-destructive, focus:text-destructive) to the Logout DropdownMenuItem.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Changes are homogeneous styling edits across multiple example components.
• Review focus: ensure className additions don't conflict with existing styles and that accessibility (focus/hover) remains correct.
• Files to spot-check: data-table.tsx, mail-display.tsx, user-profile-dropdown.tsx.

Poem

🐰 I hopped through code to give a clue,
A splash of red where danger grew.
Delete and logout now stand out bright,
A tiny warning in soft moonlight.
May users notice and choose with care.

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The PR title "fix: for descructive action added distructive colors and styles" is directly related to the main changes in the changeset. The title accurately conveys that destructive styling and colors have been added to destructive actions across multiple example components, which is the core objective of the PR. The title is not vague or generic—it clearly communicates the nature of the changes. However, the title contains spelling errors ("descructive" instead of "destructive" appears twice) and has awkward phrasing that could affect readability, though these issues do not make the title unclear or unrelated to the changeset.
Linked Issues Check	✅ Passed	The PR successfully addresses the objectives from linked issue #201 by adding destructive styling to destructive actions across multiple example components. Changes include adding destructive text color classes (text-destructive, focus:text-destructive, hover:text-destructive) to Delete buttons, logout items, and trash buttons in dashboard, mail, tasks, and profile dropdown examples. These modifications enable users to visually observe how theme destructive color changes are reflected across the UI examples, fulfilling the requirement to make destructive actions visually distinct and observable in the examples section.
Out of Scope Changes Check	✅ Passed	All code changes in this PR are directly within the scope of the linked issue #201. The modifications exclusively focus on adding destructive styling to existing destructive action elements (Delete buttons, logout items, trash buttons) across six example component files. No unrelated functionality, structural changes, or out-of-scope features have been introduced. The changes are consistently applied across multiple examples to achieve the stated objective of making theme destructive color changes observable.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 804e6f1 and ca8cd77.

📒 Files selected for processing (2)

• components/examples/dashboard/components/nav-user.tsx (1 hunks)
• components/examples/mail/components/mail-display.tsx (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• components/examples/dashboard/components/nav-user.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Vercel Agent Review

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[sujal12344]

@jnsahaj I’ve submitted a PR. Please review it and share your feedback when you get a chance.

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 240f7cd and 804e6f1.

📒 Files selected for processing (6)

• components/examples/dashboard/components/data-table.tsx (1 hunks)
• components/examples/dashboard/components/nav-user.tsx (1 hunks)
• components/examples/mail/components/mail-display.tsx (1 hunks)
• components/examples/tasks/components/data-table-row-actions.tsx (1 hunks)
• components/examples/tasks/components/user-nav.tsx (1 hunks)
• components/user-profile-dropdown.tsx (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Vercel Agent Review

🔇 Additional comments (5)

components/user-profile-dropdown.tsx (1)

123-128: LGTM! Destructive styling applied correctly.

The destructive styling on the Logout menu item appropriately signals the action's nature while preserving existing functionality.

components/examples/tasks/components/user-nav.tsx (1)

51-54: LGTM! Consistent destructive styling.

The styling matches the pattern used across other logout actions in the PR.

components/examples/tasks/components/data-table-row-actions.tsx (1)

60-63: LGTM! Destructive styling appropriately applied.

The styling correctly identifies the Delete action as destructive and maintains accessibility with focus states.

components/examples/dashboard/components/nav-user.tsx (1)

97-100: LGTM! Destructive styling matches established pattern.

The styling is consistent with other logout actions and appropriately signals the destructive nature of the action.

components/examples/dashboard/components/data-table.tsx (1)

282-284: LGTM! Destructive styling correctly applied.

The Delete action styling is consistent with the pattern used throughout the PR and appropriately signals the destructive nature of the action.