Repository navigation
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughThis PR is a broad Tailwind CSS styling pass across buttons and links throughout the app, replacing brightness/opacity-based hover effects with background-color-based hover styles using ChangesButton/link hover styling unification
Estimated code review effort: 2 (Simple) | ~15 minutes Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 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 |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Code Review
This pull request standardizes button hover states, active states, and transitions across the application to ensure visual consistency. It replaces various custom hover effects (like opacity and brightness adjustments) with consistent color-based hover classes (such as hover:bg-primary-3 and hover:bg-Subbrown-3) and adds appropriate transition classes. Additionally, it introduces reusable button class constants in group creation/editing pages and implements dynamic hover color mapping in the ButtonWithoutImg component based on color tokens. I have no further feedback to provide as there are no review comments.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
src/app/(main)/setting/support/SupportPageClient.tsx (1)
43-43: 📐 Maintainability & Code Quality | 🔵 TrivialKeep this button on the same color-hover pattern as the rest of the update.
hover:brightness-90dims the whole button, not just the background, andtransition-allis broader than needed here. If the intent is consistency with the other updated actions, this should stay on a background-color hover withtransition-colors.♻️ Suggested tweak
- className="w-full h-[56px] bg-primary-3 text-white rounded-[12px] subhead_4_1 hover:brightness-90 transition-all shadow-md active:scale-[0.98] cursor-pointer" + className="w-full h-[56px] bg-primary-3 text-white rounded-[12px] subhead_4_1 hover:bg-primary-2 transition-colors shadow-md active:scale-[0.98] cursor-pointer"🤖 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/`(main)/setting/support/SupportPageClient.tsx at line 43, The button styling in SupportPageClient should match the rest of the updated actions by using a background-color hover instead of dimming the whole element. Update the button className on the support page to replace hover:brightness-90 with the same hover background treatment used elsewhere, and narrow the animation from transition-all to transition-colors so the hover behavior stays consistent.src/components/base-ui/Settings/EditProfile/ProfileImageSection.tsx (1)
84-84: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueConsider extracting duplicated button className.
The upload and reset buttons share an identical className string. Since this PR already introduces shared button class constants elsewhere (e.g.,
PRIMARY_FILLED_BUTTON_CLASSin the group edit/create flows), extracting a local constant here would reduce duplication and improve consistency.♻️ Suggested refactor
+const PRIMARY_BUTTON_CLASS = + "flex flex-1 items-center justify-center gap-[10px] rounded-[8px] bg-primary-1 px-[16px] cursor-pointer transition-colors hover:bg-primary-3 h-[36px] md:h-[48px]"; + <button onClick={handleUploadClick} - className="flex flex-1 items-center justify-center gap-[10px] rounded-[8px] bg-primary-1 px-[16px] cursor-pointer transition-colors hover:bg-primary-3 - h-[36px] md:h-[48px]" + className={PRIMARY_BUTTON_CLASS} > ... <button onClick={onReset} - className="flex flex-1 items-center justify-center gap-[10px] rounded-[8px] bg-primary-1 px-[16px] cursor-pointer transition-colors hover:bg-primary-3 - h-[36px] md:h-[48px]" + className={PRIMARY_BUTTON_CLASS} >Also applies to: 97-97
🤖 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/base-ui/Settings/EditProfile/ProfileImageSection.tsx` at line 84, The upload and reset buttons in ProfileImageSection share the same long className string, so extract it into a local shared constant and reuse it for both button elements. Update the JSX in ProfileImageSection to reference that constant instead of duplicating the className, following the same pattern used by shared button class constants like PRIMARY_FILLED_BUTTON_CLASS in the group edit/create flows.
🤖 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/`(main)/groups/create/CreateGroupPageClient.tsx:
- Around line 37-43: The button style constants are duplicated in
CreateGroupPageClient and the group admin edit page, so move
PRIMARY_FILLED_BUTTON_CLASS, SELECTABLE_BUTTON_ACTIVE_CLASS, and
SELECTABLE_BUTTON_IDLE_CLASS into a shared module and import them from both
places. Create a common source for these group button styles so the values are
defined once and stay in sync, then update the existing references in
CreateGroupPageClient and the edit page to use the shared exports.
- Around line 379-385: The button styling in CreateGroupPageClient mixes two
conflicting disabled opacity utilities when DuplicationCheckisConfirmed is true,
so update the conditional class logic to keep only one disabled-opacity rule per
state. In the className branch around DuplicationCheckisConfirmed, make the
default disabled state use the normal disabled opacity, and in the confirmed
state replace it with the intended disabled opacity value without also
inheriting the other disabled opacity utility from the shared base classes.
---
Nitpick comments:
In `@src/app/`(main)/setting/support/SupportPageClient.tsx:
- Line 43: The button styling in SupportPageClient should match the rest of the
updated actions by using a background-color hover instead of dimming the whole
element. Update the button className on the support page to replace
hover:brightness-90 with the same hover background treatment used elsewhere, and
narrow the animation from transition-all to transition-colors so the hover
behavior stays consistent.
In `@src/components/base-ui/Settings/EditProfile/ProfileImageSection.tsx`:
- Line 84: The upload and reset buttons in ProfileImageSection share the same
long className string, so extract it into a local shared constant and reuse it
for both button elements. Update the JSX in ProfileImageSection to reference
that constant instead of duplicating the className, following the same pattern
used by shared button class constants like PRIMARY_FILLED_BUTTON_CLASS in the
group edit/create flows.
🪄 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: 86457dfa-614b-4a7c-bf55-2cc24d6e1280
📒 Files selected for processing (43)
src/app/(admin)/admin/(app)/news/[id]/page.tsxsrc/app/(admin)/admin/(app)/news/page.tsxsrc/app/(admin)/admin/(auth)/login/page.tsxsrc/app/(main)/groups/GroupsPageClient.tsxsrc/app/(main)/groups/[id]/GroupDetailClient.tsxsrc/app/(main)/groups/[id]/admin/bookcase/[meetingId]/edit/page.tsxsrc/app/(main)/groups/[id]/admin/bookcase/new/page.tsxsrc/app/(main)/groups/[id]/admin/edit/page.tsxsrc/app/(main)/groups/[id]/admin/notice/[noticeId]/page.tsxsrc/app/(main)/groups/[id]/admin/notice/new/page.tsxsrc/app/(main)/groups/create/CreateGroupPageClient.tsxsrc/app/(main)/setting/password/PasswordChangePageClient.tsxsrc/app/(main)/setting/profile/ProfileEditPageClient.tsxsrc/app/(main)/setting/support/SupportPageClient.tsxsrc/app/(main)/stories/[id]/edit/StoryEditPageClient.tsxsrc/app/(main)/stories/new/StoryNewPageClient.tsxsrc/components/base-ui/Admin/ConfirmModal.tsxsrc/components/base-ui/Admin/stories/bookstory_detail.tsxsrc/components/base-ui/BookStory/Common/bookstory_card.tsxsrc/components/base-ui/BookStory/Detatil/bookstory_detail.tsxsrc/components/base-ui/Bookcase/bookid/BookshelfDeleteConfirmModal.tsxsrc/components/base-ui/Comment/comment_edit_form.tsxsrc/components/base-ui/Float.tsxsrc/components/base-ui/Join/steps/ProfileImage/ProfileImageUploader.tsxsrc/components/base-ui/Landing/LandingChatSection.tsxsrc/components/base-ui/Landing/LandingHero.tsxsrc/components/base-ui/Landing/LandingNav.tsxsrc/components/base-ui/Login/components/LoginForm.tsxsrc/components/base-ui/Profile/OtherUser/ProfileUserInfo.tsxsrc/components/base-ui/Search/search_bookresult.tsxsrc/components/base-ui/Settings/EditProfile/ProfileImageSection.tsxsrc/components/base-ui/button_without_img.tsxsrc/components/base-ui/home/Club/HomeClubSection.tsxsrc/components/base-ui/home/Club/home_bookclub.tsxsrc/components/base-ui/home/Recommendation/list_subscribe_element.tsxsrc/components/base-ui/home/Recommendation/list_subscribe_large.tsxsrc/components/base-ui/home/Subscription/list_subscribe_element.tsxsrc/components/base-ui/home/Subscription/list_subscribe_large.tsxsrc/components/common/ConfirmModal.tsxsrc/components/common/UnsavedChangesConfirmModal.tsxsrc/components/common/modals/report-block/ActionSelectionModal.tsxsrc/components/common/modals/report-block/BlockConfirmModal.tsxsrc/components/common/modals/report-block/ReportModal.tsx
Comment on lines
+37
to
+43
| const PRIMARY_FILLED_BUTTON_CLASS = | ||
| "bg-primary-1 text-White transition-colors hover:bg-primary-3 disabled:bg-Gray-2 disabled:hover:bg-Gray-2 disabled:cursor-not-allowed"; | ||
| const SELECTABLE_BUTTON_ACTIVE_CLASS = | ||
| "bg-primary-1 border-primary-1 text-White transition-colors hover:bg-primary-3 hover:border-primary-3"; | ||
| const SELECTABLE_BUTTON_IDLE_CLASS = | ||
| "bg-Subbrown-4 border-Subbrown-3 text-primary-3 transition-colors hover:bg-Subbrown-3"; | ||
|
|
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win
Duplicate shared button-class constants across two files.
PRIMARY_FILLED_BUTTON_CLASS, SELECTABLE_BUTTON_ACTIVE_CLASS, and SELECTABLE_BUTTON_IDLE_CLASS are defined identically here and in src/app/(main)/groups/[id]/admin/edit/page.tsx (lines 38-44). Extracting these to a shared module (e.g. src/constants/groupButtonStyles.ts) would prevent the two copies from drifting apart over time.
🤖 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/`(main)/groups/create/CreateGroupPageClient.tsx around lines 37 - 43,
The button style constants are duplicated in CreateGroupPageClient and the group
admin edit page, so move PRIMARY_FILLED_BUTTON_CLASS,
SELECTABLE_BUTTON_ACTIVE_CLASS, and SELECTABLE_BUTTON_IDLE_CLASS into a shared
module and import them from both places. Create a common source for these group
button styles so the values are defined once and stay in sync, then update the
existing references in CreateGroupPageClient and the edit page to use the shared
exports.
Comment on lines
+379
to
385
| active:opacity-80 | ||
| disabled:opacity-50 disabled:cursor-not-allowed | ||
| `, | ||
| DuplicationCheckisConfirmed | ||
| ? "bg-primary-1 text-White border border-primary-1 disabled:opacity-100 disabled:cursor-default" | ||
| : "border border-Subbrown-3 bg-Subbrown-4 text-primary-3" | ||
| ? `${SELECTABLE_BUTTON_ACTIVE_CLASS} disabled:hover:bg-primary-1 disabled:hover:border-primary-1 disabled:opacity-100 disabled:cursor-default` | ||
| : SELECTABLE_BUTTON_IDLE_CLASS | ||
| )} |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Move the disabled opacity into a single branch src/app/(main)/groups/create/CreateGroupPageClient.tsx:379 combines disabled:opacity-50 with disabled:opacity-100 when DuplicationCheckisConfirmed is true. Since the button remains disabled there, the final opacity depends on Tailwind utility order; keep only one disabled opacity utility per state.
🤖 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/`(main)/groups/create/CreateGroupPageClient.tsx around lines 379 -
385, The button styling in CreateGroupPageClient mixes two conflicting disabled
opacity utilities when DuplicationCheckisConfirmed is true, so update the
conditional class logic to keep only one disabled-opacity rule per state. In the
className branch around DuplicationCheckisConfirmed, make the default disabled
state use the normal disabled opacity, and in the confirmed state replace it
with the intended disabled opacity value without also inheriting the other
disabled opacity utility from the shared base classes.
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit