fix(web): notification styles

[pujitm]

---

• To see the specific tasks where the Asana app for GitHub is being used, see below:
  • https://app.asana.com/0/0/1208791188826609

Summary by CodeRabbit

Release Notes

• New Features

  • Enhanced visual representation of notifications with updated colors and styles.
  • Improved styling for buttons and tabs for a more modern look.
  • Full-width notification sidebar for better visibility.

• Bug Fixes

  • Adjusted layout and spacing in the notification sidebar for better usability.
  • Minor layout adjustments in the notifications list for improved spacing.

• Chores

  • Expanded Tailwind CSS configuration with new colors and spacing options for improved design flexibility.

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

The changes in this pull request encompass modifications to several components related to notifications, including Indicator.vue, Item.vue, Sidebar.vue, and various components in the shadcn library. Updates include changes to styling, such as color and padding adjustments, as well as structural alterations to enhance visual consistency. New color entries and spacing options have been added to the Tailwind CSS configuration. Overall, the updates focus on improving the aesthetic and layout of notification components without altering their core functionality.

Changes

File Path	Change Summary
web/components/Notifications/Indicator.vue	Updated color properties and class names for notification indicators. No changes to logic or exported entities.
web/components/Notifications/Item.vue	Moved import statement, adjusted color values, and modified layout and button styles for improved consistency.
web/components/Notifications/Sidebar.vue	Altered layout, spacing, and styling of the sidebar components, including button classes and tab margins.
web/components/shadcn/button/index.ts	Modified buttonVariants to change styles for default and xs size variants.
web/components/shadcn/select/SelectTrigger.vue	Updated padding values in the <SelectTrigger> component. No changes to logic.
web/components/shadcn/tabs/TabsList.vue	Changed class binding for TabsList component, affecting its styling.
web/components/shadcn/tabs/TabsTrigger.vue	Adjusted padding and font size in the TabsTrigger component for a larger appearance.
web/tailwind.config.ts	Added new colors and spacing options to the Tailwind CSS configuration.
web/components/Notifications/List.vue	Adjusted padding and updated props definition for importance. Retained existing logic for loading behavior.

Possibly related PRs

• feat(web): delete notifications from archive view #941: The changes in Item.vue regarding the notification logic and styling are related to the modifications made in the same file in the main PR, particularly in how notifications are displayed and managed.
• feat(web): implement notification filtering #943: The updates in List.vue to include the importance property and its handling are relevant as they align with the changes in the main PR that also involve notification display logic.
• feat(web): enhance notifications indicator in UPC #950: The changes in Indicator.vue regarding the notification indicator's logic and styling are directly related to the modifications made in the same file in the main PR.
• fix(web): notifications consistency on unraid servers #961: The adjustments in notifications.service.ts to improve notification handling and consistency are relevant as they enhance the overall notification management system, which is a focus of the main PR.
• feat(web): notification settings link & delete all button #962: The addition of the deleteAllNotifications mutation and its integration into the notification management system is relevant as it expands the functionality of notifications, which is a key aspect of the main PR.
• feat(web): support markdown in notification messages #963: The introduction of markdown support in Item.vue enhances the display of notifications, which is related to the changes in the main PR that also focus on notification presentation.
• feat(web): add an 'all' option to notification filter #964: The enhancement of the notification filtering functionality in List.vue is relevant as it complements the changes in the main PR that involve notification display and management.
• feat(api): pull date & time format from notification settings #967: The modifications to pull date and time formats from notification settings are relevant as they relate to how notifications are presented, aligning with the main PR's focus on notification styling and logic.

Suggested reviewers

• zackspear
• elibosley
• mdatelle

🐰 In a world of colors bright,
Notifications take their flight.
With styles anew and logic clear,
A modern look, we hold so dear!
Hopping through the code we go,
Enhancing all, with a joyful glow! 🐇✨

---

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[github-actions]

This plugin has been deployed to Cloudflare R2 and is available for testing.
Download it at this URL: https://preview.dl.unraid.net/unraid-api/pr/968/dynamix.unraid.net.staging.plg

[coderabbitai]

Actionable comments posted: 3

🧹 Outside diff range and nitpick comments (4)

web/components/Notifications/Item.vue (1)

99-120: Consider removing unnecessary z-index

The z-20 class on the buttons appears unnecessary unless there's a specific stacking context issue to solve. If there's no specific z-index requirement, consider removing it for simpler maintenance.

-        class="relative z-20 rounded"
+        class="relative rounded"

web/components/Notifications/Sidebar.vue (1)

36-36: Consider using design system tokens and improving mobile responsiveness.

The current implementation has two potential issues:

1. Using a hard-coded color value (#f2f2f2) instead of a design system token reduces maintainability
2. Setting max-w-[100vw] without proper mobile constraints could cause overflow issues

Consider this improvement:

-class="w-full max-w-[100vw] sm:max-w-[540px] h-screen px-0 bg-[#f2f2f2]"
+class="w-full max-w-[95vw] sm:max-w-[540px] h-screen px-0 bg-background"

web/tailwind.config.ts (2)

48-50: LGTM! Consider documenting color usage.

The new colors yellow-accent and lime are well-placed in the unraid colors section and follow the existing naming convention. They appear to be used for notification states (warnings and unread notifications respectively).

Consider adding comments to document the intended usage of these colors (e.g., // Used for warning notifications and // Used for unread notifications) to help maintain consistency across the codebase.

---

107-107: LGTM! Consider documenting the spacing value.

The new 4.5 spacing value (1.125rem/18px) is a logical addition for fine-tuning notification layouts.

Consider adding a comment to document where this specific spacing value is intended to be used, as it's a non-standard increment in the spacing scale.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between b2acde3 and 8734540.

📒 Files selected for processing (8)

• web/components/Notifications/Indicator.vue (2 hunks)
• web/components/Notifications/Item.vue (4 hunks)
• web/components/Notifications/Sidebar.vue (6 hunks)
• web/components/shadcn/button/index.ts (1 hunks)
• web/components/shadcn/select/SelectTrigger.vue (1 hunks)
• web/components/shadcn/tabs/TabsList.vue (1 hunks)
• web/components/shadcn/tabs/TabsTrigger.vue (1 hunks)
• web/tailwind.config.ts (2 hunks)

✅ Files skipped from review due to trivial changes (2)

• web/components/shadcn/select/SelectTrigger.vue
• web/components/shadcn/tabs/TabsList.vue

🔇 Additional comments (11)

web/components/shadcn/tabs/TabsTrigger.vue (1)

21-21: LGTM! Verify visual alignment with related components.

The padding and font size adjustments maintain good accessibility practices while improving visual consistency. The component properly handles focus states, disabled states, and active states.

Let's verify consistency with related components:

✅ Verification successful

Visual consistency verified across shadcn components

The padding and text size changes in TabsTrigger align well with the design system:

• text-sm is consistently used across interactive elements (buttons, triggers, menu items)
• The increased padding (px-4.5 py-2.5) maintains proper proportions with other components:
  • Matches SelectTrigger's horizontal padding (px-4.5)
  • Slightly larger than dropdown items (py-1.5) as expected for primary navigation
  • Proportional to standard button padding (px-4 py-2)

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check for similar padding and text size patterns across related components
# to ensure visual consistency

# Search for similar padding patterns in other components
echo "Checking padding patterns across components:"
rg -l "px-[34]\.[5] py-[23]\.[5]" "web/components/"

# Search for text-sm usage in similar contexts
echo "Checking text-sm usage in triggers and interactive elements:"
rg "text-sm.*(?:trigger|button|tab)" "web/components/"

Length of output: 379

---

Script:

#!/bin/bash
# Let's try a different approach to check for visual consistency

# Check for any padding patterns in shadcn components
echo "Checking padding patterns in shadcn components:"
rg "px-\d+\.?\d* py-\d+\.?\d*" web/components/shadcn/

# Check for text-sm usage in shadcn components
echo "Checking text-sm usage in shadcn components:"
rg "text-sm" web/components/shadcn/

# List all files in shadcn/tabs to understand the tab system better
echo "Listing tab-related components:"
fd . web/components/shadcn/tabs/

# Check for similar interactive elements in shadcn
echo "Checking other interactive elements:"
rg "(?:button|trigger)" web/components/shadcn/ -l

Length of output: 7074

web/components/shadcn/button/index.ts (1)

21-21: Verify impact of height removal on notification layouts

Removing the fixed height (h-10) from the default button size could affect layout consistency in notifications. While this makes buttons more flexible, it might cause unwanted layout shifts.

✅ Verification successful

Button height removal is safe for notification layouts

The verification shows that notification components already handle button heights appropriately:

• All button instances in notifications use either size="sm" or have custom classes (h-auto, class="relative z-20 rounded")
• No components rely on the default button height
• Layout stability is maintained through explicit container heights (min-h-0, h-10) rather than button dimensions

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check for button usage in notification components to assess impact

# Look for button components in notification-related files
echo "Checking button usage in notification components..."
rg -A 3 "buttonVariants|Button" "web/components/Notifications"

# Look for explicit height classes that might have been added to compensate
echo "Checking for height-related classes in notification components..."
rg "h-\d+" "web/components/Notifications"

Length of output: 3663

web/components/Notifications/Indicator.vue (2)

76-79: LGTM! Verify new color tokens in Tailwind config.

The styling updates improve visibility and maintain consistent branding. The border addition enhances contrast.

Let's verify the new color definitions in the Tailwind configuration:

✅ Verification successful

Color tokens are properly defined in Tailwind configuration

The new color tokens are correctly defined in web/tailwind.config.ts:

• yellow-accent: '#E9BF41'
• lime: '#63A659'
• unraid-red: '#E22828'

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Check Tailwind config for new color definitions
rg -A 5 "yellow-accent|lime" --type js --type ts | grep -A 5 "colors.*{" 

Length of output: 74

---

Script:

#!/bin/bash
# Let's try a broader search for the Tailwind config file first
fd "tailwind.config" --type f

# Then search for color tokens in the config
rg -l "colors.*{" --type js --type ts

# Also check for these specific colors in any file
rg "yellow-accent|unraid-red|lime" --type js --type ts

Length of output: 7925

---

46-46: LGTM! Verify color consistency across the design system.

The change from text-red-500 to text-unraid-red aligns with brand consistency.

Let's verify the usage of this custom color across the codebase:

✅ Verification successful

Color usage is consistent with design system

The change from text-red-500 to text-unraid-red is verified to be correct and consistent with the design system. The color is:

• Properly defined in the Tailwind config as 'unraid-red': '#E22828'
• Used consistently across multiple components for error states, alerts, and critical notifications
• Applied uniformly for both text (text-unraid-red) and background (bg-unraid-red) contexts

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Check for consistent usage of unraid-red color
rg "text-unraid-red|bg-unraid-red" --type vue

Length of output: 75

---

Script:

#!/bin/bash
# Check for consistent usage of unraid-red color across all files
# Using ripgrep without file type filter since .vue extension might not be recognized
rg "text-unraid-red|bg-unraid-red"

# Also check tailwind config for color definition
fd "tailwind.config" --exec cat {}

Length of output: 13008

web/components/Notifications/Item.vue (3)

25-27: LGTM: Error handling looks good

The error handling appropriately logs errors and falls back to the raw description when markdown parsing fails.

---

69-71: Good improvements to layout structure

The new layout structure with flex and group hover utilities provides better visual organization and interaction states.

---

35-45: Verify new color classes in Tailwind config

The new color classes (text-lime, text-yellow-accent, text-unraid-red) need to be verified in the Tailwind configuration.

✅ Verification successful

All color classes are properly defined in Tailwind config

The verification confirms that all three color classes are correctly defined in web/tailwind.config.ts:

• lime: '#63A659'
• yellow-accent: '#E9BF41'
• unraid-red: '#E22828'

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Check if these colors are defined in the Tailwind config
rg -A 5 "lime|yellow-accent|unraid-red" web/tailwind.config.ts

Length of output: 382

web/components/Notifications/Sidebar.vue (4)

37-38: LGTM! Spacing improvements look good.

The updated gap values provide better visual hierarchy and spacing consistency.

---

41-41: LGTM! Button styling is appropriate for a secondary action.

The compact styling works well for an inline settings link.

---

51-51: LGTM! Improved layout flexibility.

The addition of flex-wrap and increased gap spacing enhances both mobile responsiveness and readability.

---

86-87: LGTM! Filter select styling improvements look good.

The height adjustment and placeholder styling provide better visual hierarchy.

[github-actions]

This plugin has been deployed to Cloudflare R2 and is available for testing.
Download it at this URL: https://preview.dl.unraid.net/unraid-api/pr/968/dynamix.unraid.net.staging.plg

[github-actions]

This plugin has been deployed to Cloudflare R2 and is available for testing.
Download it at this URL: https://preview.dl.unraid.net/unraid-api/pr/968/dynamix.unraid.net.staging.plg

[github-actions]

This plugin has been deployed to Cloudflare R2 and is available for testing.
Download it at this URL: https://preview.dl.unraid.net/unraid-api/pr/968/dynamix.unraid.net.staging.plg

[github-actions]

This plugin has been deployed to Cloudflare R2 and is available for testing.
Download it at this URL: https://preview.dl.unraid.net/unraid-api/pr/968/dynamix.unraid.net.staging.plg

[github-actions]

This plugin has been deployed to Cloudflare R2 and is available for testing.
Download it at this URL: https://preview.dl.unraid.net/unraid-api/pr/968/dynamix.unraid.net.staging.plg

[github-actions]

This plugin has been deployed to Cloudflare R2 and is available for testing.
Download it at this URL: https://preview.dl.unraid.net/unraid-api/pr/968/dynamix.unraid.net.staging.plg