feat(footer, home, navbar): enhance UI components with improved layouts and styling for better user experience #28
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -50,12 +50,25 @@ function Footer() { | |
| <Typography variant="body2" color="text.secondary"> | ||
| Manage budgets, track expenses, and monitor transactions with clean UX and enterprise-ready data flows. | ||
| </Typography> | ||
| <Box | ||
| sx={{ | ||
| display: 'flex', | ||
| flexWrap: 'wrap', | ||
| gap: 1, | ||
| }} | ||
| > | ||
| {['MongoDB', 'PostgreSQL', 'Redis', 'Elasticsearch'].map(label => ( | ||
| <Chip | ||
| key={label} | ||
| label={label} | ||
| size="small" | ||
| sx={{ | ||
| borderRadius: 999, | ||
| height: 26, | ||
| }} | ||
| /> | ||
| ))} | ||
| </Box> | ||
| </Stack> | ||
| </Grid> | ||
| <Grid item xs={12} md={5}> | ||
|
|
@@ -80,16 +93,16 @@ function Footer() { | |
| </Grid> | ||
| <Grid item xs={12} md={3}> | ||
| <FooterGroup title="Connect"> | ||
| <MuiLink href="https://github.com/hoangsonww" target="_blank" rel="noopener" sx={linkStyle}> | ||
| <GitHubIcon fontSize="small" /> GitHub | ||
| </MuiLink> | ||
| <MuiLink href="https://sonnguyenhoang.com" target="_blank" rel="noopener" sx={linkStyle}> | ||
| <LanguageIcon fontSize="small" /> Website | ||
| </MuiLink> | ||
| <MuiLink href="https://www.linkedin.com/in/hoangsonw/" target="_blank" rel="noopener" sx={linkStyle}> | ||
| <LinkedInIcon fontSize="small" /> LinkedIn | ||
|
Comment on lines
+96
to
103
There was a problem hiding this comment. For |
||
| </MuiLink> | ||
| <MuiLink href="mailto:hoangson091104@gmail.com" sx={linkStyle}> | ||
| <EmailIcon fontSize="small" /> Email | ||
| </MuiLink> | ||
|
Comment on lines
+96
to
107
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 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>
)) |
||
| </FooterGroup> | ||
|
|
||
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -101,7 +101,14 @@ function Navbar({ mode, setMode }) { | |
| <> | ||
| <AppBar position="sticky" elevation={0}> | ||
| <Toolbar sx={{ py: 1, gap: 2 }}> | ||
| <IconButton | ||
| sx={{ | ||
| display: isMobileNav ? 'block' : 'none', | ||
| '&:hover': { backgroundColor: 'transparent' }, | ||
| }} | ||
| color="inherit" | ||
| onClick={() => setDrawerOpen(true)} | ||
| > | ||
|
Comment on lines
+104
to
+111
There was a problem hiding this comment. This IconButton is icon-only and currently lacks an accessible name. Add an |
||
| <MenuIcon /> | ||
| </IconButton> | ||
| <Stack direction="row" spacing={1.5} alignItems="center" sx={{ flexGrow: 1 }}> | ||
|
|
||
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
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
|
|
@@ -153,97 +153,110 @@ function Home() { | |||||
| <Box | ||||||
| sx={{ | ||||||
| pt: { xs: 6, md: 8 }, | ||||||
| pb: { xs: 10, md: 10 }, | ||||||
| minHeight: { xs: 'calc(100vh - 64px)', md: 'calc(100vh - 72px)' }, | ||||||
| display: 'flex', | ||||||
| flexDirection: 'column', | ||||||
| alignItems: 'center', | ||||||
| justifyContent: 'center', | ||||||
| background: 'linear-gradient(135deg, rgba(31, 122, 99, 0.08), rgba(242, 179, 90, 0.18))', | ||||||
| position: 'relative', | ||||||
| }} | ||||||
| > | ||||||
| <Box sx={{ width: '100%', flex: 1, display: 'flex', alignItems: 'center' }}> | ||||||
| <Container> | ||||||
| <Grid container spacing={4} alignItems="center"> | ||||||
| <Grid item xs={12} md={6}> | ||||||
| <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.
Suggested change
|
||||||
| <Typography variant="body1" color="text.secondary" sx={{ fontSize: '1.05rem' }}> | ||||||
| A production-ready finance platform that connects budgets, expenses, transactions, and task automation. Monitor everything from a single | ||||||
| dashboard with searchable history and real-time operational insight. | ||||||
| </Typography> | ||||||
| <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}> | ||||||
| <Button variant="contained" size="large" component={Link} to="/dashboard" startIcon={<RocketLaunchIcon />}> | ||||||
| Launch Dashboard | ||||||
| </Button> | ||||||
| <Button variant="outlined" size="large" component={Link} to="/budgets"> | ||||||
| Explore Budgets | ||||||
| </Button> | ||||||
| </Stack> | ||||||
| <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> | ||||||
|
Comment on lines
+186
to
+198
There was a problem hiding this comment. For consistency with other parts of the app (like in <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> |
||||||
| </Stack> | ||||||
| </Reveal> | ||||||
| </Grid> | ||||||
| <Grid item xs={12} md={6}> | ||||||
| <Grid container spacing={2}> | ||||||
| {stats.map((stat, index) => ( | ||||||
| <Grid item xs={6} key={stat.label}> | ||||||
| <Reveal delay={index * 20} immediate> | ||||||
| <Card sx={{ height: '100%' }}> | ||||||
| <CardContent> | ||||||
| <Typography variant="h4" sx={{ fontWeight: 700 }}> | ||||||
| {counts[index]} | ||||||
| {stat.suffix || ''} | ||||||
| </Typography> | ||||||
| <Typography variant="body2" color="text.secondary"> | ||||||
| {stat.label} | ||||||
| </Typography> | ||||||
| </CardContent> | ||||||
| </Card> | ||||||
| </Reveal> | ||||||
| </Grid> | ||||||
| ))} | ||||||
| <Grid item xs={12}> | ||||||
| <Reveal delay={40} immediate> | ||||||
| <Card sx={{ height: '100%' }}> | ||||||
| <CardContent> | ||||||
| <Typography variant="h6" sx={{ fontWeight: 600, mb: 1 }}> | ||||||
| System snapshot | ||||||
| </Typography> | ||||||
| <Typography variant="body2" color="text.secondary"> | ||||||
| Track budgets in MongoDB, transaction logs in PostgreSQL, cached status in Redis, and searchable expenses in Elasticsearch. The | ||||||
| platform is wired for growth and operational readiness. | ||||||
| </Typography> | ||||||
| <Divider sx={{ my: 2 }} /> | ||||||
| <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> | ||||||
|
Comment on lines
+233
to
+240
There was a problem hiding this comment. To improve consistency and maintainability, consider generating these <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
{['MongoDB', 'PostgreSQL', 'Redis', 'Elasticsearch', 'Kafka', 'RabbitMQ'].map(label => (
<Chip key={label} label={label} />
))}
</Box> |
||||||
| </CardContent> | ||||||
| </Card> | ||||||
| </Reveal> | ||||||
| </Grid> | ||||||
| </Grid> | ||||||
| </Grid> | ||||||
| </Grid> | ||||||
| </Container> | ||||||
| </Box> | ||||||
| <Box | ||||||
| sx={{ | ||||||
| position: { xs: 'static', md: 'absolute' }, | ||||||
| left: 0, | ||||||
| right: 0, | ||||||
| bottom: { md: 26 }, | ||||||
| display: 'flex', | ||||||
| justifyContent: 'center', | ||||||
| mt: { xs: 3, md: 0 }, | ||||||
| pb: { xs: 2, md: 0 }, | ||||||
| }} | ||||||
| > | ||||||
| <Button | ||||||
|
|
||||||
Oops, something went wrong.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The
borderRadius: 999style is redundant here, as it's already applied globally to allChipcomponents via the theme intheme.js(line 197). For better maintainability, you could also extract the array of technology labels into a constant defined outside the component.