feat: Add dark/light mode support to /hotel listing page (#383)#387
Conversation
|
@Danielodingz Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits. You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀 |
|
Hello @sotoJ24 please review PR and merge, Thank you |
📝 WalkthroughWalkthroughThis PR adjusts Tailwind dark/light mode classes across the rent page and hotel components. Changes include modifying border and text color classes on ApartmentCard, tab state styling in BedroomTabs (with unresolved merge conflict markers), import formatting in HotelHeader, and rent page container/header text color updates. ChangesDark-mode styling tweaks
Estimated code review effort: 2 (Simple) | ~10 minutes Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 2 | ❌ 3❌ Failed checks (3 warnings)
✅ Passed checks (2 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 Biome (2.5.1)src/app/rent/page.tsxFile contains syntax errors that prevent linting: Line 65: Expected an expression for the left hand side of the ... [truncated 693 characters] ...
src/components/hotel/ApartmentCard.tsxFile contains syntax errors that prevent linting: Line 23: Expected a JSX attribute but instead found '<<<<<<'.; Line 23: expected ... [truncated 1562 characters] ... Expected corresponding JSX closing tag for 'HEAD'.; Line 82: Unexpected token. Did you mean src/components/hotel/BedroomTabs.tsxFile contains syntax errors that prevent linting: Line 22: Expected an expression but instead found '<<'.; Line 22: Expected an expression but instead found '<<'.; Line 23: Expected a JSX attribute but instead found '? 'border-gray-200 bg-gray-100 text-gray-900 dark:border-slate-600 dark:bg-s; Line 22: Expected corresponding JSX closing tag for 'HEAD'.; Line 28: Unexpected token. Did you mean 🔧 ESLint
ESLint install failed. For unrecoverable errors, disable the tool in CodeRabbit configuration. 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: 1
🧹 Nitpick comments (3)
src/components/hotel/FilterSidebar.tsx (2)
99-117: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAdd dark-mode variants to the price slider visuals.
The histogram bars (
bg-orange-300), track (bg-orange-200), and thumb borders (border-white) lackdark:counterparts. In dark mode, the pale orange bars can appear too bright against a dark background, and the white thumb borders create a jarring halo effect. Add dark variants so the slider remains visually coherent.🎨 Proposed additions
- className="w-full rounded-t-sm bg-orange-300" + className="w-full rounded-t-sm bg-orange-300 dark:bg-orange-500"- <div className="relative h-1 rounded-full bg-orange-200"> + <div className="relative h-1 rounded-full bg-orange-200 dark:bg-orange-900">- className="absolute top-1/2 h-4 w-4 -translate-y-1/2 rounded-full border-2 border-white bg-orange-500 shadow" + className="absolute top-1/2 h-4 w-4 -translate-y-1/2 rounded-full border-2 border-white dark:border-slate-800 bg-orange-500 shadow"🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/hotel/FilterSidebar.tsx` around lines 99 - 117, Add dark-mode Tailwind variants to the price slider visuals in FilterSidebar so the histogram bars, track, and thumb borders remain balanced on dark backgrounds. Update the slider-related classes in the price distribution and range track markup to include dark: counterparts for bg-orange-300, bg-orange-200, and border-white, and keep the styling consistent for both thumb spans and the track inside the same component.
41-46: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAdd dark-mode variants to the checkbox input.
The checkbox border uses
border-gray-300without adark:counterpart, so in dark mode the checkbox border will appear too light against the sidebar background. Adddark:border-slate-600(anddark:bg-slate-800if the project uses@tailwindcss/forms) to keep the input visually grounded.🎨 Proposed addition
className="h-4 w-4 rounded border-gray-300 text-orange-500 focus:ring-orange-500" + className="h-4 w-4 rounded border-gray-300 dark:border-slate-600 text-orange-500 focus:ring-orange-500"🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/hotel/FilterSidebar.tsx` around lines 41 - 46, The checkbox input in the FilterSidebar component needs dark-mode styling so it doesn’t выглядеть too bright against the sidebar background. Update the checkbox className in the relevant input inside FilterSidebar to include a dark border variant such as dark:border-slate-600, and add dark:bg-slate-800 as needed if form styles are affecting the default checkbox background. Keep the change localized to the checkbox element so the label and surrounding layout remain unchanged.src/components/hotel/ApartmentCard.tsx (1)
45-64: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAdd dark-mode text variants to secondary text elements.
The "Per month" label and apartment address both use
text-gray-500without adark:counterpart. On the dark card background (dark:bg-slate-800), gray-500 yields roughly a 3:1 contrast ratio, which falls below the WCAG AA threshold for small text. Adddark:text-gray-400to keep these elements readable in dark mode.🎨 Proposed fixes
- <span className="pb-1 text-xs text-gray-500">Per month</span> + <span className="pb-1 text-xs text-gray-500 dark:text-gray-400">Per month</span>- <p className="line-clamp-1 text-xs text-gray-500"> + <p className="line-clamp-1 text-xs text-gray-500 dark:text-gray-400">🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/hotel/ApartmentCard.tsx` around lines 45 - 64, The secondary text in ApartmentCard needs dark-mode variants because the “Per month” label and the apartment address currently use only text-gray-500, which is too low-contrast on dark backgrounds. Update the relevant text elements in ApartmentCard to include a dark:text-gray-400 counterpart alongside the existing light theme class. Use the ApartmentCard component and the spans/paragraphs around formatListingPrice and apartment.address as the targets for this change.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/hotel/HotelHeader.tsx`:
- Line 14: The header styling in HotelHeader currently combines border-b with
border, which adds an unwanted outline on all sides. Update the header className
in HotelHeader to keep only the bottom divider and remove the all-sides border
utility, preserving the existing dark mode and background classes.
---
Nitpick comments:
In `@src/components/hotel/ApartmentCard.tsx`:
- Around line 45-64: The secondary text in ApartmentCard needs dark-mode
variants because the “Per month” label and the apartment address currently use
only text-gray-500, which is too low-contrast on dark backgrounds. Update the
relevant text elements in ApartmentCard to include a dark:text-gray-400
counterpart alongside the existing light theme class. Use the ApartmentCard
component and the spans/paragraphs around formatListingPrice and
apartment.address as the targets for this change.
In `@src/components/hotel/FilterSidebar.tsx`:
- Around line 99-117: Add dark-mode Tailwind variants to the price slider
visuals in FilterSidebar so the histogram bars, track, and thumb borders remain
balanced on dark backgrounds. Update the slider-related classes in the price
distribution and range track markup to include dark: counterparts for
bg-orange-300, bg-orange-200, and border-white, and keep the styling consistent
for both thumb spans and the track inside the same component.
- Around line 41-46: The checkbox input in the FilterSidebar component needs
dark-mode styling so it doesn’t выглядеть too bright against the sidebar
background. Update the checkbox className in the relevant input inside
FilterSidebar to include a dark border variant such as dark:border-slate-600,
and add dark:bg-slate-800 as needed if form styles are affecting the default
checkbox background. Keep the change localized to the checkbox element so the
label and surrounding layout remain unchanged.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 12542644-b190-432a-b590-9c90403cdcb4
📒 Files selected for processing (5)
src/app/hotel/page.tsxsrc/components/hotel/ApartmentCard.tsxsrc/components/hotel/BedroomTabs.tsxsrc/components/hotel/FilterSidebar.tsxsrc/components/hotel/HotelHeader.tsx
| export default function HotelHeader() { | ||
| return ( | ||
| <header className="border-b border-[#e8e1da] bg-white"> | ||
| <header className="border-b border dark:border-slate-700 bg-white dark:bg-slate-900"> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Drop the all-sides border on the header.
Line 14 combines border-b with border, so the header gets a 1px outline on every edge instead of just the bottom divider.
Suggested fix
- <header className="border-b border dark:border-slate-700 bg-white dark:bg-slate-900">
+ <header className="border-b border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900">📝 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.
| <header className="border-b border dark:border-slate-700 bg-white dark:bg-slate-900"> | |
| <header className="border-b border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900"> |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/hotel/HotelHeader.tsx` at line 14, The header styling in
HotelHeader currently combines border-b with border, which adds an unwanted
outline on all sides. Update the header className in HotelHeader to keep only
the bottom divider and remove the all-sides border utility, preserving the
existing dark mode and background classes.
sotoJ24
left a comment
sotoJ24
left a comment
There was a problem hiding this comment.
Dear @Danielodingz, well done, could you please update you're branch, everything else well done
|
Hello @sotoJ24 please review PR and merge, Thank you |
945efaa to
e28914b
Compare
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/app/rent/page.tsx`:
- Around line 65-69: Resolve the leftover git merge conflict markers in the rent
page JSX so the file parses again: remove every literal <<<<<<<, =======, and
>>>>>>> block in the affected sections and keep the intended dark-mode className
values in the relevant JSX elements. Use the rent/page.tsx component markup
around the conflicting divs to locate the affected areas, and ensure all three
conflict regions are fully resolved consistently.
In `@src/components/hotel/ApartmentCard.tsx`:
- Around line 23-27: Resolve the merge conflict markers in ApartmentCard by
removing all literal <<<<<<<, =======, and >>>>>>> blocks so the JSX parses
correctly. Keep the HEAD version of the conflicting className sections in
ApartmentCard, since those retain the dark: overrides needed for dark/light mode
support. Make sure the affected card markup sections with the price label,
favorite icon state, and address text are cleaned up consistently across all
conflict areas.
In `@src/components/hotel/BedroomTabs.tsx`:
- Around line 22-28: Resolve the merge conflict in BedroomTabs by removing the
conflict markers and choosing the intended Tailwind class strings for the tab
active/inactive states. Use the existing conditional styling block in the
BedroomTabs component to merge the HEAD and 945efaa variants into a single valid
expression so the file parses and the hotel page build succeeds.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: c2c58ba4-6a23-417f-aabd-cfc632bb7eb1
📒 Files selected for processing (4)
src/app/rent/page.tsxsrc/components/hotel/ApartmentCard.tsxsrc/components/hotel/BedroomTabs.tsxsrc/components/hotel/HotelHeader.tsx
✅ Files skipped from review due to trivial changes (1)
- src/components/hotel/HotelHeader.tsx
| <<<<<<< HEAD:src/app/rent/page.tsx | ||
| <div className="min-h-screen bg-white text-gray-900 dark:bg-slate-900 dark:text-white"> | ||
| ======= | ||
| <div className="min-h-screen bg-white dark:bg-slate-900 text-gray-900 dark:text-white"> | ||
| >>>>>>> 945efaa (feat: Add dark/light mode support to /hotel listing page (#383)):src/app/hotel/page.tsx |
There was a problem hiding this comment.
🎯 Functional Correctness | 🔴 Critical | ⚡ Quick win
Unresolved git merge conflict markers left in file — breaks the build.
Lines 65-69, 91-97, and 103-107 contain literal <<<<<<< HEAD, =======, >>>>>>> conflict markers. This is invalid JS/TSX and will fail to parse/compile, as confirmed by the static analysis output (multiple parse errors from line 65 onward).
🔧 Proposed fix — resolve conflicts, keep dark-mode classes
-<<<<<<< HEAD:src/app/rent/page.tsx
- <div className="min-h-screen bg-white text-gray-900 dark:bg-slate-900 dark:text-white">
-=======
- <div className="min-h-screen bg-white dark:bg-slate-900 text-gray-900 dark:text-white">
->>>>>>> 945efaa (feat: Add dark/light mode support to /hotel listing page (`#383`)):src/app/hotel/page.tsx
+ <div className="min-h-screen bg-white text-gray-900 dark:bg-slate-900 dark:text-white">-<<<<<<< HEAD:src/app/rent/page.tsx
- <h1 className="text-[24px] leading-tight text-gray-900 sm:text-[30px] dark:text-white">
- Available for rent in{" "}
-=======
- <h1 className="text-[24px] leading-tight text-gray-900 dark:text-white sm:text-[30px]">
- Available for rent in{' '}
->>>>>>> 945efaa (feat: Add dark/light mode support to /hotel listing page (`#383`)):src/app/hotel/page.tsx
+ <h1 className="text-[24px] leading-tight text-gray-900 sm:text-[30px] dark:text-white">
+ Available for rent in{" "}-<<<<<<< HEAD:src/app/rent/page.tsx
- <div className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
-=======
- <div className="flex items-center gap-2 text-sm text-gray-900 dark:text-white">
->>>>>>> 945efaa (feat: Add dark/light mode support to /hotel listing page (`#383`)):src/app/hotel/page.tsx
+ <div className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">Also applies to: 91-97, 103-107
🧰 Tools
🪛 Biome (2.5.1)
[error] 65-65: Expected an expression for the left hand side of the << operator.
(parse)
[error] 65-65: Expected an expression but instead found '<<'.
(parse)
[error] 65-65: Expected an expression but instead found '<<'.
(parse)
[error] 65-65: expected > but instead found app
(parse)
[error] 66-66: Expected a semicolon or an implicit semicolon after a statement, but found none
(parse)
[error] 67-67: Expected an expression but instead found '==='.
(parse)
[error] 67-67: Expected an expression but instead found '==='.
(parse)
[error] 67-67: Expected an expression but instead found '='.
(parse)
[error] 66-67: Invalid assignment to "min-h-screen bg-white text-gray-900 dark:bg-slate-900 dark:text-white"> ======
(parse)
[error] 69-69: Unexpected token. Did you mean {'>'} or >?
(parse)
[error] 69-69: Unexpected token. Did you mean {'>'} or >?
(parse)
[error] 69-69: Unexpected token. Did you mean {'>'} or >?
(parse)
[error] 69-69: Unexpected token. Did you mean {'>'} or >?
(parse)
[error] 69-69: Unexpected token. Did you mean {'>'} or >?
(parse)
[error] 69-69: Unexpected token. Did you mean {'>'} or >?
(parse)
[error] 69-69: Unexpected token. Did you mean {'>'} or >?
(parse)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/app/rent/page.tsx` around lines 65 - 69, Resolve the leftover git merge
conflict markers in the rent page JSX so the file parses again: remove every
literal <<<<<<<, =======, and >>>>>>> block in the affected sections and keep
the intended dark-mode className values in the relevant JSX elements. Use the
rent/page.tsx component markup around the conflicting divs to locate the
affected areas, and ensure all three conflict regions are fully resolved
consistently.
Source: Linters/SAST tools
| <<<<<<< HEAD | ||
| className="group w-full overflow-hidden rounded-[16px] border border-gray-200 bg-white text-left transition hover:-translate-y-0.5 hover:shadow-[0_12px_30px_rgba(0,0,0,0.08)] dark:border-slate-700 dark:bg-slate-800" | ||
| ======= | ||
| className="group w-full overflow-hidden rounded-[16px] border dark:border-slate-700 bg-white dark:bg-slate-800 text-left transition hover:-translate-y-0.5 hover:shadow-[0_12px_30px_rgba(0,0,0,0.08)]" | ||
| >>>>>>> 945efaa (feat: Add dark/light mode support to /hotel listing page (#383)) |
There was a problem hiding this comment.
🎯 Functional Correctness | 🔴 Critical | ⚡ Quick win
Unresolved git merge conflict markers left in file — breaks the build.
Lines 23-27, 48-58, 65-69, and 78-82 contain literal <<<<<<< HEAD/=======/>>>>>>> conflict markers, producing invalid JSX. Static analysis confirms cascading parse failures starting at line 23.
Resolving these also matters for the PR objective: the 945efaa side drops several dark: overrides (price label, favorite-icon inactive state, address text) that the HEAD side retains. Since this PR's goal is to add/preserve dark-mode support, the HEAD side should be kept, not the side that strips dark variants.
🔧 Proposed fix — resolve conflicts, keep dark-mode classes
-<<<<<<< HEAD
- className="group w-full overflow-hidden rounded-[16px] border border-gray-200 bg-white text-left transition hover:-translate-y-0.5 hover:shadow-[0_12px_30px_rgba(0,0,0,0.08)] dark:border-slate-700 dark:bg-slate-800"
-=======
- className="group w-full overflow-hidden rounded-[16px] border dark:border-slate-700 bg-white dark:bg-slate-800 text-left transition hover:-translate-y-0.5 hover:shadow-[0_12px_30px_rgba(0,0,0,0.08)]"
->>>>>>> 945efaa (feat: Add dark/light mode support to /hotel listing page (`#383`))
+ className="group w-full overflow-hidden rounded-[16px] border border-gray-200 bg-white text-left transition hover:-translate-y-0.5 hover:shadow-[0_12px_30px_rgba(0,0,0,0.08)] dark:border-slate-700 dark:bg-slate-800"-<<<<<<< HEAD
- <span className="text-[30px] font-semibold leading-none text-green-600 dark:text-green-400">
- {formatListingPrice(apartment.price)}
- </span>
- <span className="pb-1 text-xs text-gray-500 dark:text-gray-400">Per month</span>
-=======
- <span className="text-[30px] font-semibold leading-none text-green-600">
- {formatListingPrice(apartment.price)}
- </span>
- <span className="pb-1 text-xs text-gray-500">Per month</span>
->>>>>>> 945efaa (feat: Add dark/light mode support to /hotel listing page (`#383`))
+ <span className="text-[30px] font-semibold leading-none text-green-600 dark:text-green-400">
+ {formatListingPrice(apartment.price)}
+ </span>
+ <span className="pb-1 text-xs text-gray-500 dark:text-gray-400">Per month</span> apartment.favorite
? 'fill-red-500 text-red-500'
-<<<<<<< HEAD
- : 'text-red-500 dark:text-red-500',
-=======
- : 'text-red-500'
->>>>>>> 945efaa (feat: Add dark/light mode support to /hotel listing page (`#383`))
+ : 'text-red-500 dark:text-red-500',-<<<<<<< HEAD
- <p className="line-clamp-1 text-xs text-gray-500 dark:text-gray-400">
-=======
- <p className="line-clamp-1 text-xs text-gray-500">
->>>>>>> 945efaa (feat: Add dark/light mode support to /hotel listing page (`#383`))
+ <p className="line-clamp-1 text-xs text-gray-500 dark:text-gray-400">Also applies to: 48-58, 65-69, 78-82
🧰 Tools
🪛 Biome (2.5.1)
[error] 23-23: Expected a JSX attribute but instead found '<<<<<<'.
(parse)
[error] 23-23: expected > but instead found <
(parse)
[error] 25-25: Expected a JSX attribute but instead found '======='.
(parse)
[error] 27-27: Unexpected token. Did you mean {'>'} or >?
(parse)
[error] 27-27: Unexpected token. Did you mean {'>'} or >?
(parse)
[error] 27-27: Unexpected token. Did you mean {'>'} or >?
(parse)
[error] 27-27: Unexpected token. Did you mean {'>'} or >?
(parse)
[error] 27-27: Unexpected token. Did you mean {'>'} or >?
(parse)
[error] 27-27: Unexpected token. Did you mean {'>'} or >?
(parse)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/hotel/ApartmentCard.tsx` around lines 23 - 27, Resolve the
merge conflict markers in ApartmentCard by removing all literal <<<<<<<,
=======, and >>>>>>> blocks so the JSX parses correctly. Keep the HEAD version
of the conflicting className sections in ApartmentCard, since those retain the
dark: overrides needed for dark/light mode support. Make sure the affected card
markup sections with the price label, favorite icon state, and address text are
cleaned up consistently across all conflict areas.
Source: Linters/SAST tools
| <<<<<<< HEAD | ||
| ? 'border-gray-200 bg-gray-100 text-gray-900 dark:border-slate-600 dark:bg-slate-700 dark:text-white' | ||
| : 'border-gray-200 bg-white text-gray-700 hover:border-gray-300 dark:border-slate-600 dark:bg-slate-800 dark:text-gray-300' | ||
| ======= | ||
| ? 'border dark:border-slate-700 bg-orange-50 dark:bg-slate-800 text-gray-900 dark:text-white' | ||
| : 'border dark:border-slate-700 bg-white dark:bg-slate-900 text-gray-500 dark:text-gray-400 hover:border-gray-300 dark:hover:border-slate-600' | ||
| >>>>>>> 945efaa (feat: Add dark/light mode support to /hotel listing page (#383)) |
There was a problem hiding this comment.
🎯 Functional Correctness | 🔴 Critical | ⚡ Quick win
Resolve the merge conflict before merge.
The conflict markers are still in the file, so BedroomTabs.tsx will not parse and the hotel page build will fail.
Proposed fix
-<<<<<<< HEAD
- ? 'border-gray-200 bg-gray-100 text-gray-900 dark:border-slate-600 dark:bg-slate-700 dark:text-white'
- : 'border-gray-200 bg-white text-gray-700 hover:border-gray-300 dark:border-slate-600 dark:bg-slate-800 dark:text-gray-300'
-=======
- ? 'border dark:border-slate-700 bg-orange-50 dark:bg-slate-800 text-gray-900 dark:text-white'
- : 'border dark:border-slate-700 bg-white dark:bg-slate-900 text-gray-500 dark:text-gray-400 hover:border-gray-300 dark:hover:border-slate-600'
->>>>>>> 945efaa (feat: Add dark/light mode support to /hotel listing page (`#383`))
+ ? '...resolved selected classes...'
+ : '...resolved unselected classes...'🧰 Tools
🪛 Biome (2.5.1)
[error] 22-22: Expected an expression but instead found '<<'.
(parse)
[error] 22-22: Expected an expression but instead found '<<'.
(parse)
[error] 23-27: Expected a JSX attribute but instead found '? 'border-gray-200 bg-gray-100 text-gray-900 dark:border-slate-600 dark:bg-slate-700 dark:text-white'
: 'border-gray-200 bg-white text-gray-700 hover:border-gray-300 dark:border-slate-600 dark:bg-slate-800 dark:text-gray-300'
? 'border dark:border-slate-700 bg-orange-50 dark:bg-slate-800 text-gray-900 dark:text-white'
: 'border dark:border-slate-700 bg-white dark:bg-slate-900 text-gray-500 dark:text-gray-400 hover:border-gray-300 dark:hover:border-slate-600''.
(parse)
[error] 22-28: Expected corresponding JSX closing tag for 'HEAD'.
(parse)
[error] 28-28: Unexpected token. Did you mean {'>'} or >?
(parse)
[error] 28-28: Unexpected token. Did you mean {'>'} or >?
(parse)
[error] 28-28: Unexpected token. Did you mean {'>'} or >?
(parse)
[error] 28-28: Unexpected token. Did you mean {'>'} or >?
(parse)
[error] 28-28: Unexpected token. Did you mean {'>'} or >?
(parse)
[error] 28-28: Unexpected token. Did you mean {'>'} or >?
(parse)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/hotel/BedroomTabs.tsx` around lines 22 - 28, Resolve the merge
conflict in BedroomTabs by removing the conflict markers and choosing the
intended Tailwind class strings for the tab active/inactive states. Use the
existing conditional styling block in the BedroomTabs component to merge the
HEAD and 945efaa variants into a single valid expression so the file parses and
the hotel page build succeeds.
Source: Linters/SAST tools
|
Hello @sotoJ24 please branch updated, please merge |
2 participants
Closes #383
☯[feat] Add dark/light mode support to /hotel listing page
Description
This PR addresses issue #383 by implementing full dark and light mode support for the
/hotellisting page and its child components. Previously, these components used hardcoded light-mode hex colors, which caused the page to ignore the global theme toggle.All hardcoded hex values have been completely removed from the affected files and replaced with Tailwind semantic classes and dark-variant equivalents to ensure the UI respects the user's selected theme seamlessly, while keeping the light mode aesthetics unchanged.
Changes Made
Replaced all hardcoded hex color classes with Tailwind semantic and
dark:variant classes across the following files:src/app/hotel/page.tsxsrc/components/hotel/HotelHeader.tsxsrc/components/hotel/FilterSidebar.tsxsrc/components/hotel/ApartmentCard.tsxsrc/components/hotel/BedroomTabs.tsxKey Color Replacements:
bg-white->bg-white dark:bg-slate-900text-[#1c1c1c]/text-[#1d1d1d]/text-[#202020]->text-gray-900 dark:text-whitetext-[#515151]/text-[#5c5c5c]/text-[#8a8a8a]->text-gray-500 dark:text-gray-400Card/sidebar backgrounds->bg-white dark:bg-slate-800(orbg-gray-100 dark:bg-slate-800)border dark:border-slate-700orange-500,green-600,red-500)Acceptance Criteria Met
/hotelpage background, text, sidebar, cards, and borders.hotel/page.tsxor its direct child components.Summary by CodeRabbit