feat: revamp bottom nav UI and enhance theme support#62
Open
feat: revamp bottom nav UI and enhance theme support#62
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
Review Summary by QodoRevamp bottom navigation UI with glassmorphism and enhanced theming
WalkthroughsDescription• Revamped bottom navigation with glassmorphism design and smooth animations • Added brand accent color variable for consistent Bitcoin orange styling • Enhanced theme support with dynamic background color handling • Improved layout spacing with adjusted padding for bottom nav clearance Diagramflowchart LR
A["Theme System"] -->|"Brand accent variable"| B["CSS Variables"]
B -->|"Dynamic colors"| C["Bottom Navigation"]
D["Layout"] -->|"Adjusted padding"| E["Dashboard Layout"]
E -->|"Clearance"| C
F["Framer Motion"] -->|"Spring animations"| C
C -->|"Glassmorphism design"| G["Enhanced UI"]
File Changes1. src/styles/theme.css
|
Contributor
Code Review by Qodo
1. useTheme bypasses Zustand store
|
📝 WalkthroughWalkthroughThis PR adds theme-aware styling to the bottom navigation component with animated active states and pill-shaped design, introduces Telegram background color support in the theme context, adjusts dashboard layout padding, and establishes brand accent and body background CSS variables for consistent theming across the application. 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)
Tip Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs). 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 |
![qodo-code-review[bot]](https://avatars.githubusercontent.com/in/484649?s=60&v=4){kind=small}
Comment on lines
+8
to
+22
| import { useTheme } from "@/app/context/theme"; | ||
|
|
||
| const navItems = [ | ||
| { | ||
| href: "/dashboard", | ||
| icon: MdWallet, | ||
| label: "Wallet", | ||
| }, | ||
| // { | ||
| // href: "/dashboard/invite", | ||
| // icon: FaUserPlus, | ||
| // label: "Invite", | ||
| // }, | ||
| { | ||
| href: "/dashboard/subscription", | ||
| icon: Sprout, | ||
| label: "Membership", | ||
| }, | ||
| { | ||
| href: "/dashboard/history", | ||
| icon: MdHistory, | ||
| label: "History", | ||
| }, | ||
| ]; | ||
| { href: "/dashboard", icon: MdWallet, label: "Wallet" }, | ||
| { href: "/dashboard/subscription", icon: Sprout, label: "Membership" }, | ||
| { href: "/dashboard/history", icon: MdHistory, label: "History" }, | ||
| ] as const; | ||
|
|
||
| export default function BottomNavigation() { | ||
| const pathname = usePathname(); | ||
| const { isDark } = useTheme(); | ||
|
|
||
| const inactiveColor = isDark ? "rgba(255,255,255,0.35)" : "rgba(0,0,0,0.35)"; | ||
| const pillBg = isDark ? "rgba(0,0,0,0.45)" : "rgba(255,255,255,0.55)"; | ||
| const pillBorder = isDark ? "1px solid rgba(255,255,255,0.09)" : "1px solid rgba(0,0,0,0.09)"; |
Contributor
There was a problem hiding this comment.
1. usetheme bypasses zustand store 📘 Rule violation ⛯ Reliability
New UI state (isDark) is read from a React Context (useTheme) instead of the documented global UI state pattern using the Zustand store at @/lib/store. This introduces an alternative state source that can diverge from the prescribed architecture and complicate maintenance.
Agent Prompt
## Issue description
`BottomNavigation` now uses `useTheme` (React Context) to read `isDark`, which bypasses the documented global UI state pattern that requires Zustand (`@/lib/store`) for global UI state.
## Issue Context
The project’s compliance checklist mandates using Zustand for global UI state. Theme mode (`isDark`) is global UI state and is now used to drive navigation UI styling.
## Fix Focus Areas
- src/components/bottomNavigation.tsx[8-25]
- src/lib/store.ts[1-111]
- src/app/context/theme.tsx[28-94]
ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/app/context/theme.tsx (1)
116-124:⚠️ Potential issue | 🟡 MinorComment is inconsistent with the new behavior.
The comment at line 117 states "Only update text and component colors, not background colors" but the new code block (lines 121-124) explicitly sets
--tg-theme-bg-colorfromparams.bg_color. Consider updating the comment to reflect the actual behavior.📝 Proposed fix
// Update CSS custom properties with Telegram theme colors -// Only update text and component colors, not background colors (handled by BotFather settings) +// Updates text, component, and background colors from Telegram theme params function updateCSSVariables(params: TelegramThemeParams) {🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/app/context/theme.tsx` around lines 116 - 124, The comment above updateCSSVariables is outdated: it claims "Only update text and component colors, not background colors" yet the function now sets the background CSS variable (--tg-theme-bg-color) when params.bg_color is present; update the comment to reflect that background colors are also updated (or rephrase to describe exactly which vars are changed), and ensure the comment references updateCSSVariables and the --tg-theme-bg-color behavior so readers understand the function's actual effect.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Outside diff comments:
In `@src/app/context/theme.tsx`:
- Around line 116-124: The comment above updateCSSVariables is outdated: it
claims "Only update text and component colors, not background colors" yet the
function now sets the background CSS variable (--tg-theme-bg-color) when
params.bg_color is present; update the comment to reflect that background colors
are also updated (or rephrase to describe exactly which vars are changed), and
ensure the comment references updateCSSVariables and the --tg-theme-bg-color
behavior so readers understand the function's actual effect.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 7d70ac8d-3776-4f9b-b209-32399ebb59e4
📒 Files selected for processing (4)
src/app/context/theme.tsxsrc/app/dashboard/layout.tsxsrc/components/bottomNavigation.tsxsrc/styles/theme.css
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
1 participant
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
New Features
Style