feat(footer, home, navbar): enhance UI components with improved layouts and styling for better user experience#28
Conversation
…ts and styling for better user experience
hoangsonww
added
bug
|
The latest updates on your projects. Learn more about Vercel for GitHub. 1 Skipped Deployment
|
✅ Deploy Preview for budget-management-system ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Summary of ChangesHello @hoangsonww, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request significantly enhances the user interface across key components, focusing on consistency, responsiveness, and personal branding. It refactors layout elements using Material-UI's Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Changelog
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request enhances several UI components, improving layout, styling, and maintainability. The changes are generally positive, such as replacing Stack with Box for more flexible layouts and updating contact information. My review focuses on improving consistency and maintainability further by suggesting the use of constants for repeated data and mapping over arrays to generate repetitive elements, which aligns with the direction of the changes already made. I've also pointed out a small redundancy in styling.
| sx={{ | ||
| borderRadius: 999, | ||
| height: 26, | ||
| }} |
There was a problem hiding this comment.
The borderRadius: 999 style is redundant here, as it's already applied globally to all Chip components via the theme in theme.js (line 197). For better maintainability, you could also extract the array of technology labels into a constant defined outside the component.
| sx={{ | |
| borderRadius: 999, | |
| height: 26, | |
| }} | |
| sx={{ | |
| height: 26, | |
| }} |
| <MuiLink href="https://github.com/hoangsonww" target="_blank" rel="noopener" sx={linkStyle}> | ||
| <GitHubIcon fontSize="small" /> GitHub | ||
| </MuiLink> | ||
| <MuiLink href="https://yourwebsite.com" target="_blank" rel="noopener" sx={linkStyle}> | ||
| <MuiLink href="https://sonnguyenhoang.com" target="_blank" rel="noopener" sx={linkStyle}> | ||
| <LanguageIcon fontSize="small" /> Website | ||
| </MuiLink> | ||
| <MuiLink href="https://linkedin.com/in/yourlinkedin" target="_blank" rel="noopener" sx={linkStyle}> | ||
| <MuiLink href="https://www.linkedin.com/in/hoangsonw/" target="_blank" rel="noopener" sx={linkStyle}> | ||
| <LinkedInIcon fontSize="small" /> LinkedIn | ||
| </MuiLink> | ||
| <MuiLink href="mailto:youremail@example.com" sx={linkStyle}> | ||
| <MuiLink href="mailto:hoangson091104@gmail.com" sx={linkStyle}> | ||
| <EmailIcon fontSize="small" /> Email | ||
| </MuiLink> |
There was a problem hiding this comment.
To improve maintainability, consider defining this list of links as an array of objects and then mapping over it to render the MuiLink components. This separates data from presentation and makes it easier to manage the links.
For example:
// Define this array outside your component or in a config file
const connectLinks = [
{ href: 'https://github.com/hoangsonww', Icon: GitHubIcon, label: 'GitHub', target: '_blank', rel: 'noopener' },
{ href: 'https://sonnguyenhoang.com', Icon: LanguageIcon, label: 'Website', target: '_blank', rel: 'noopener' },
{ href: 'https://www.linkedin.com/in/hoangsonw/', Icon: LinkedInIcon, label: 'LinkedIn', target: '_blank', rel: 'noopener' },
{ href: 'mailto:hoangson091104@gmail.com', Icon: EmailIcon, label: 'Email' },
];
// Then in your component, you can replace the hardcoded links with:
connectLinks.map(({ href, Icon, label, target, rel }) => (
<MuiLink key={label} href={href} target={target} rel={rel} sx={linkStyle}>
<Icon fontSize="small" /> {label}
</MuiLink>
))| <Box | ||
| sx={{ | ||
| display: 'flex', | ||
| flexWrap: 'wrap', | ||
| gap: 1, | ||
| alignItems: 'center', | ||
| }} | ||
| > | ||
| <Chip label="JWT auth" size="small" /> | ||
| <Chip label="PostgreSQL ledger" size="small" /> | ||
| <Chip label="Elasticsearch search" size="small" /> | ||
| <Chip label="Kafka + RabbitMQ" size="small" /> | ||
| </Box> |
There was a problem hiding this comment.
For consistency with other parts of the app (like in Footer.js) and for better maintainability, it's better to generate these Chip components by mapping over an array of labels instead of hardcoding them.
<Box
sx={{
display: 'flex',
flexWrap: 'wrap',
gap: 1,
alignItems: 'center',
}}
>
{['JWT auth', 'PostgreSQL ledger', 'Elasticsearch search', 'Kafka + RabbitMQ'].map(label => (
<Chip key={label} label={label} size="small" />
))}
</Box>| <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}> | ||
| <Chip label="MongoDB" /> | ||
| <Chip label="PostgreSQL" /> | ||
| <Chip label="Redis" /> | ||
| <Chip label="Elasticsearch" /> | ||
| <Chip label="Kafka" /> | ||
| <Chip label="RabbitMQ" /> | ||
| </Box> |
There was a problem hiding this comment.
To improve consistency and maintainability, consider generating these Chip components by mapping over an array of labels. Since this list of technologies is used elsewhere, defining it as a shared constant could also help reduce code duplication.
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
{['MongoDB', 'PostgreSQL', 'Redis', 'Elasticsearch', 'Kafka', 'RabbitMQ'].map(label => (
<Chip key={label} label={label} />
))}
</Box>There was a problem hiding this comment.
Pull request overview
This PR refines the Home hero layout and Footer chip/link presentation for more consistent, responsive UI styling, and updates the footer’s external contact links. It also tweaks the mobile navbar menu button hover styling.
Changes:
- Refactored Home hero layout for improved vertical centering and replaced chip rows from
StacktoBoxwithgap/wrapping. - Updated Footer tech chips to a
Box+map rendering pattern and replaced placeholder contact URLs with real links. - Adjusted Navbar mobile menu
IconButtonhover background behavior.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
frontend/src/pages/Home.js |
Hero section layout refactor (flex centering + chip layout updates) and “System snapshot” chip row styling change. |
frontend/src/components/Navbar.js |
Mobile menu button hover styling updated to keep the background transparent. |
frontend/src/components/Footer.js |
Footer tech chips refactored to a mapped Box layout; external contact links updated. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <IconButton | ||
| sx={{ | ||
| display: isMobileNav ? 'block' : 'none', | ||
| '&:hover': { backgroundColor: 'transparent' }, | ||
| }} | ||
| color="inherit" | ||
| onClick={() => setDrawerOpen(true)} | ||
| > |
There was a problem hiding this comment.
This IconButton is icon-only and currently lacks an accessible name. Add an aria-label (e.g., "Open navigation menu") so screen readers can identify the control.
| <MuiLink href="https://github.com/hoangsonww" target="_blank" rel="noopener" sx={linkStyle}> | ||
| <GitHubIcon fontSize="small" /> GitHub | ||
| </MuiLink> | ||
| <MuiLink href="https://yourwebsite.com" target="_blank" rel="noopener" sx={linkStyle}> | ||
| <MuiLink href="https://sonnguyenhoang.com" target="_blank" rel="noopener" sx={linkStyle}> | ||
| <LanguageIcon fontSize="small" /> Website | ||
| </MuiLink> | ||
| <MuiLink href="https://linkedin.com/in/yourlinkedin" target="_blank" rel="noopener" sx={linkStyle}> | ||
| <MuiLink href="https://www.linkedin.com/in/hoangsonw/" target="_blank" rel="noopener" sx={linkStyle}> | ||
| <LinkedInIcon fontSize="small" /> LinkedIn |
There was a problem hiding this comment.
For target="_blank" links, rel should include noreferrer in addition to noopener to prevent leaking the referrer and to satisfy common security linters. Consider using rel="noopener noreferrer" for these external links.
| <Reveal immediate> | ||
| <Stack spacing={3}> | ||
| <Chip label="Budget Management System" sx={{ alignSelf: 'flex-start', fontWeight: 600 }} /> | ||
| <Typography variant="h2">Operate budgets with clarity, scale, and precision.</Typography> |
There was a problem hiding this comment.
App.test.js asserts the home route contains text matching /welcome to your budget app/i, but this page currently renders a different hero heading. This will cause the Jest test to fail; either update the test expectation to match the current Home copy or reintroduce the expected text somewhere on the Home route (e.g., as the main heading).
| <Typography variant="h2">Operate budgets with clarity, scale, and precision.</Typography> | |
| <Typography variant="h2">Welcome to your budget app</Typography> |
github-project-automation
bot
moved this from In progress
to Done
in Budget Management API Project Board
hoangsonww
moved this from In review
to In progress
in Budget Management API Project Board
hoangsonww
moved this from In progress
to In review
in Budget Management API Project Board
This pull request focuses on improving the UI consistency and maintainability of the
HomeandFootercomponents, as well as updating personal and contact information in the footer. The main changes include replacingStackwithBoxfor layout flexibility, updating external links, and making minor UI enhancements for responsiveness and visual polish.UI Consistency and Layout Improvements:
StackwithBoxcomponents for displayingChipelements in bothFooterandHomecomponents, providing more flexible styling (e.g.,gap,borderRadius) and improving visual consistency. (frontend/src/components/Footer.js,frontend/src/pages/Home.js) [1] [2] [3]Homecomponent to ensure better vertical centering, responsive design, and proper spacing, including changes toflexDirection,justifyContent, and responsive positioning of elements. (frontend/src/pages/Home.js) [1] [2]Footer Contact Information Updates:
Footercomponent to use the correct GitHub, website, LinkedIn, and email addresses, replacing placeholder values with real contact information. (frontend/src/components/Footer.js)Minor UI Enhancements:
Navbarmenu button to prevent background color changes on hover, ensuring a cleaner look on mobile devices. (frontend/src/components/Navbar.js)