style: update dashboard UI and fix canonical Tailwind v4 classes#277
Conversation
- Replace dashboard background with DynamicGridBackground - Fix suggestCanonicalClasses warnings across multiple components
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
✅ Deploy Preview for develop-devlovers ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
📝 WalkthroughWalkthroughReplaced decorative dashboard background with DynamicGridBackground and simplified page layout; migrated dashboard, stats, and banner components to neutral color tokens and accent variables; updated Q&A and shared components to use parenthesized CSS variable token syntax; normalized translations across en/pl/uk (punctuation and minor phrasing). Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Fix all issues with AI agents
In `@frontend/app/not-found.tsx`:
- Around line 29-31: The decorative divs use custom utilities (w-xl, h-88, w-88,
h-104, w-104) that are not defined — update your Tailwind/theme setup in
frontend/app/globals.css by adding the missing size tokens (e.g. --spacing-xl,
--spacing-88, --spacing-104) inside the `@theme` block and ensure your Tailwind
theme/spacing extension maps those tokens to concrete values (or add matching
spacing keys like xl, 88, 104 in the Tailwind config) so the width/height
utilities referenced by w-xl, h-88, w-88, h-104 and w-104 are generated and
usable.
In `@frontend/components/q`&a/AIWordHelper.tsx:
- Line 773: The Tailwind class `**:my-2` in the div inside AIWordHelper.tsx is
invalid and does nothing; replace it with the intended child-selector variant
like `[&>*]:my-2` so direct children receive vertical margins. Locate the div
with className "leading-relaxed whitespace-pre-wrap text-gray-800 **:my-2
dark:text-gray-200" in the AIWordHelper component and change `**:my-2` to
`[&>*]:my-2` (preserving other classes and the dark variant).
In `@frontend/components/shared/LanguageSwitcher.tsx`:
- Line 72: The dropdown div in LanguageSwitcher.tsx uses a non-existent Tailwind
class `z-60`; replace it with a valid class like `z-50` (or remove it) or add a
custom z-index entry to your Tailwind config. Locate the element rendering the
dropdown (the div with className containing "absolute right-0 ... z-60 ...") and
either change `z-60` to `z-50` for proper stacking or update tailwind.config.js
to define a `60` zIndex key if you need that exact value.
In `@frontend/messages/en.json`:
- Around line 52-56: Update the two message strings with incorrect
capitalization: in the messages object entries "1" and "5" (currently "No
pressure, Just start" and "You clicked, That counts"), change "Just" to "just"
and "That" to "that" so commas are followed by lowercase words.
🧹 Nitpick comments (2)
frontend/components/dashboard/StatsCard.tsx (2)
20-25: Inconsistent CSS variable syntax with other components.This file uses the bracket arbitrary value syntax
[var(--accent-primary)]while other components in this PR (ProfileCard, page.tsx) use the Tailwind v4 canonical parentheses syntax(--accent-primary). Since the PR objective is to fixsuggestCanonicalClasseswarnings, this should be updated for consistency.♻️ Proposed fix to use canonical Tailwind v4 syntax
const cardStyles = ` relative overflow-hidden rounded-2xl border border-gray-100 dark:border-white/5 bg-white/60 dark:bg-neutral-900/60 backdrop-blur-xl - p-8 transition-all hover:border-[var(--accent-primary)]/30 dark:hover:border-[var(--accent-primary)]/30 + p-8 transition-all hover:border-(--accent-primary)/30 dark:hover:border-(--accent-primary)/30 flex flex-col items-center justify-center text-center `;
28-33: Same inconsistency in button styles.The
primaryBtnStylesalso uses bracket syntax for CSS variables, which should be updated to the canonical form.♻️ Proposed fix
const primaryBtnStyles = ` group relative inline-flex items-center justify-center rounded-full px-8 py-3 text-sm font-semibold tracking-widest uppercase text-white - bg-[var(--accent-primary)] hover:bg-[var(--accent-hover)] + bg-(--accent-primary) hover:bg-(--accent-hover) transition-all hover:scale-105 `;
| <div className="absolute -top-32 left-1/2 h-96 w-xl -translate-x-1/2 rounded-full bg-(--accent-primary)/20 blur-3xl" /> | ||
| <div className="absolute -bottom-48 left-1/4 h-88 w-88 rounded-full bg-(--accent-hover)/15 blur-3xl" /> | ||
| <div className="absolute -bottom-40 right-0 h-104 w-104 rounded-full bg-(--accent-primary)/25 blur-3xl" /> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# Find Tailwind configuration files
fd -E node_modules -type f -name 'tailwind.config.*' -o -name 'tailwind.js'Repository: DevLoversTeam/devlovers.net
Length of output: 241
🏁 Script executed:
# Check for common config locations and list the repository root
git ls-files | head -30Repository: DevLoversTeam/devlovers.net
Length of output: 913
🏁 Script executed:
# Look for postcss or other config files that might define Tailwind extensions
fd -E node_modules -type f \( -name 'postcss.config.*' -o -name 'tsconfig.json' -o -name 'next.config.*' \)Repository: DevLoversTeam/devlovers.net
Length of output: 241
🏁 Script executed:
# Find tailwind config files
find . -name "tailwind.config.*" -o -name "tailwind.js" 2>/dev/nullRepository: DevLoversTeam/devlovers.net
Length of output: 53
🏁 Script executed:
# Check the frontend directory structure
ls -la frontend/ | grep -E "config|tailwind"Repository: DevLoversTeam/devlovers.net
Length of output: 483
🏁 Script executed:
# Also check for CSS files that might define these tokens
find frontend -name "*.css" -o -name "globals.css" 2>/dev/null | head -20Repository: DevLoversTeam/devlovers.net
Length of output: 95
🏁 Script executed:
# Check postcss config
cat frontend/postcss.config.mjsRepository: DevLoversTeam/devlovers.net
Length of output: 164
🏁 Script executed:
# Check globals CSS file
cat frontend/app/globals.cssRepository: DevLoversTeam/devlovers.net
Length of output: 12494
🏁 Script executed:
# Search for tailwind configuration in all files
rg "tailwindConfig|theme.*extend" frontend/ -A 5 -B 2Repository: DevLoversTeam/devlovers.net
Length of output: 53
🏁 Script executed:
# Also search for these specific size definitions
rg "w-xl|h-88|h-104|w-104" frontend/ --type ts --type tsx --type cssRepository: DevLoversTeam/devlovers.net
Length of output: 98
🏁 Script executed:
# Read the not-found.tsx file to see the actual code
cat -n frontend/app/not-found.tsxRepository: DevLoversTeam/devlovers.net
Length of output: 3959
🏁 Script executed:
# Search for custom size definitions in CSS or config files
rg "w-xl|h-88|w-88|h-104|w-104|spacing|width|height" frontend/app/globals.cssRepository: DevLoversTeam/devlovers.net
Length of output: 141
🏁 Script executed:
# Search across entire frontend for these custom classes
rg "w-xl|h-88|w-88|h-104|w-104" frontend/ -t cssRepository: DevLoversTeam/devlovers.net
Length of output: 53
🏁 Script executed:
# Search for any other file that might define these custom sizing tokens
rg "@theme|extend.*spacing|extend.*width|extend.*height" frontend/ -A 10Repository: DevLoversTeam/devlovers.net
Length of output: 1328
🏁 Script executed:
# Check if there are any CSS module files that might define these
find frontend -name "*.module.css" -o -name "*.module.scss" 2>/dev/nullRepository: DevLoversTeam/devlovers.net
Length of output: 53
🏁 Script executed:
# Verify these are not standard Tailwind v4 defaults by checking what h-96 maps to
rg "h-96|w-80" frontend/app/globals.cssRepository: DevLoversTeam/devlovers.net
Length of output: 53
Add missing custom size tokens to Tailwind configuration.
The custom size utilities used in the decorative elements—w-xl, h-88, w-88, h-104, w-104—are not defined in the Tailwind v4 theme configuration in frontend/app/globals.css. These classes will not be generated, causing the blur divs to fail to render with intended dimensions.
Add these spacing definitions to the @theme block in frontend/app/globals.css:
--spacing-xl: /* define appropriate size */
--spacing-88: /* define appropriate size */
--spacing-104: /* define appropriate size */
Alternatively, if using custom names, ensure they map correctly to width/height utilities in the Tailwind configuration.
🤖 Prompt for AI Agents
In `@frontend/app/not-found.tsx` around lines 29 - 31, The decorative divs use
custom utilities (w-xl, h-88, w-88, h-104, w-104) that are not defined — update
your Tailwind/theme setup in frontend/app/globals.css by adding the missing size
tokens (e.g. --spacing-xl, --spacing-88, --spacing-104) inside the `@theme` block
and ensure your Tailwind theme/spacing extension maps those tokens to concrete
values (or add matching spacing keys like xl, 88, 104 in the Tailwind config) so
the width/height utilities referenced by w-xl, h-88, w-88, h-104 and w-104 are
generated and usable.
| {explanation && !isLoading && !error && ( | ||
| <div className="prose prose-sm dark:prose-invert max-w-none"> | ||
| <div className="leading-relaxed whitespace-pre-wrap text-gray-800 dark:text-gray-200 [&>*]:my-2"> | ||
| <div className="leading-relaxed whitespace-pre-wrap text-gray-800 **:my-2 dark:text-gray-200"> |
There was a problem hiding this comment.
Invalid Tailwind selector **:my-2 will not apply styles.
The **:my-2 syntax is not a valid Tailwind variant. Based on the AI summary, this appears to be replacing [&>*]:my-2 which targets direct children. The ** prefix has no meaning in Tailwind and will be ignored, causing the vertical margin on child elements to not be applied.
🔧 Proposed fix
- <div className="leading-relaxed whitespace-pre-wrap text-gray-800 **:my-2 dark:text-gray-200">
+ <div className="leading-relaxed whitespace-pre-wrap text-gray-800 [&>*]:my-2 dark:text-gray-200">📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div className="leading-relaxed whitespace-pre-wrap text-gray-800 **:my-2 dark:text-gray-200"> | |
| <div className="leading-relaxed whitespace-pre-wrap text-gray-800 [&>*]:my-2 dark:text-gray-200"> |
🤖 Prompt for AI Agents
In `@frontend/components/q`&a/AIWordHelper.tsx at line 773, The Tailwind class
`**:my-2` in the div inside AIWordHelper.tsx is invalid and does nothing;
replace it with the intended child-selector variant like `[&>*]:my-2` so direct
children receive vertical margins. Locate the div with className
"leading-relaxed whitespace-pre-wrap text-gray-800 **:my-2 dark:text-gray-200"
in the AIWordHelper component and change `**:my-2` to `[&>*]:my-2` (preserving
other classes and the dark variant).
Changes: - LanguageSwitcher.tsx: Replace z-60 with valid z-50 - en.json: Fix capitalization after commas
2 participants
Summary by CodeRabbit
Style
Documentation