809: refactor footer

[luoh00]

809

Description of changes

Refactored footer component to look more like the one in Mantine UI.

Checklist before review

• I have done a thorough self-review of the PR
• Copilot has reviewed my latest changes, and all comments have been fixed and/or closed.
• If I have made database changes, I have made sure I followed all the db repo rules listed in the wiki here. (check if no db changes)
• All tests have passed
• I have successfully deployed this PR to staging
• I have done manual QA in both dev (and staging if possible) and attached screenshots below.

Screenshots

Dev

Staging

[github-actions]

Available PR Commands

• /ai - Triggers all AI review commands at once
• /review - AI review of the PR changes
• /describe - AI-powered description of the PR
• /improve - AI-powered suggestions
• /deploy - Deploy to staging

See: https://github.com/tahminator/codebloom/wiki/CI-Commands

[luoh00]

/deploy

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 Security concerns Reverse tabnabbing: ActionIcon anchors use target="_blank" without rel="noopener noreferrer". Add rel="noopener noreferrer" to all external links opened in a new tab.

⚡ Recommended focus areas for review Broken Link The Discord icon link's href points to Instagram instead of the Discord invite URL, causing a mismatch between label/text and destination. <Anchor href={"https://discord.com/invite/jKaPfHtcaD"} c={"dimmed"} size={"sm"} variant={"subtle"} > <Text>Join our Discord</Text> </Anchor> <FooterIconLink href={"https://www.instagram.com/patinanetwork"} ariaLabel={"Patina Network Discord"} > <FaDiscord size={16} /> </FooterIconLink> Security External links opened via ActionIcon use target="_blank" without rel="noopener noreferrer", which risks reverse tabnabbing. Add the rel attribute. <ActionIcon component="a" href={href} target="_blank" color={"dark.0"} variant="transparent" size="md" aria-label={ariaLabel} > CSS Variable The gap uses calc(var(--spacing) * N), but --spacing is likely undefined; use Mantine spacing tokens (e.g., var(--mantine-spacing-xl)) or fixed values to ensure consistent spacing. display: flex; justify-content: flex-end; gap: calc(var(--spacing) * 20); @mixin smaller-than $mantine-breakpoint-sm { flex-direction: column; gap: calc(var(--spacing) * 2); }

[luoh00]

/deploy

[luoh00]

/deploy

[tahminator]

/ai

[tahminator]

/review

[tahminator]

/describe

[tahminator]

/improve

[github-actions]

Preparing PR description...

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 PR contains tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Layout & Responsiveness The PR introduces significant changes to the footer's layout and responsiveness using Mantine components and CSS modules. While screenshots are provided, it's crucial to manually verify the footer's appearance and behavior across various screen sizes, especially around the sm breakpoint, to ensure the layout is consistent and free of visual regressions or unexpected breaks. <div data-testid={"footer-logo-mission-desktop"} className={`mantine-visible-from-sm ${styles.footerLeft}`} > <Flex> <img src={Logo} width={45} alt={"Logo"} /> <Text pt={8} pl={6} fw={550} size={"md"}> Codebloom </Text> </Flex> <Flex> <Text pl={8} c={"dimmed"} size={"sm"}> {missionText} </Text> </Flex> <GotoAdminPageButton /> </div> <div className={styles.footerRight}> <div data-testid={"footer-logo-mission-mobile"} className={`mantine-hidden-from-sm`} > <Flex> <img src={Logo} width={45} alt={"Logo"} /> <Text pt={8} pl={6} fw={550} size={"md"}> Codebloom </Text> </Flex> <Flex> <Text c={"dimmed"} size={"sm"}> {missionText} </Text> </Flex> <GotoAdminPageButton /> </div> <div data-testid={"footer-links-section"}> <Text fw={550} pb={4}> About </Text> <Box pt={1} pb={3}> <Anchor href="/privacy" c="dimmed" size="sm" variant="subtle"> Privacy Policy </Anchor> </Box> <Flex align="center"> <Anchor href={"https://github.com/tahminator/codebloom"} c={"dimmed"} size={"sm"} variant={"subtle"} > <Text>View GitHub</Text> </Anchor> <FooterIconLink href={"https://github.com/tahminator/codebloom"} ariaLabel={"CodeBloom GitHub"} > <FaGithub size={16} /> </FooterIconLink> </Flex> </div> <div> <Text fw={550} pb={4}> Community </Text> <Flex align={"center"}> <Anchor href={"https://www.instagram.com/patinanetwork"} c={"dimmed"} size={"sm"} variant={"subtle"} > <Text>Follow on Instagram</Text> </Anchor> <FooterIconLink href={"https://www.instagram.com/patinanetwork"} ariaLabel={"Patina Network Instagram"} > <FaInstagram size={16} /> </FooterIconLink> </Flex> <Flex align={"center"}> <Anchor href={"https://discord.com/invite/jKaPfHtcaD"} c={"dimmed"} size={"sm"} variant={"subtle"} > <Text>Join our Discord</Text> </Anchor> <FooterIconLink href={"https://discord.com/invite/jKaPfHtcaD"} ariaLabel={"Patina Network Discord"} > <FaDiscord size={16} /> </FooterIconLink> </Flex> </div> Accessibility The "About" and "Community" sections now feature both text links (e.g., 'View GitHub') and corresponding icon links (FooterIconLink) that point to the same destination. While aria-label is used for icons, having redundant links in close proximity might impact accessibility for screen reader users or create a cluttered experience. Consider if both text and icon links are necessary or if they can be combined more effectively. <Flex align="center"> <Anchor href={"https://github.com/tahminator/codebloom"} c={"dimmed"} size={"sm"} variant={"subtle"} > <Text>View GitHub</Text> </Anchor> <FooterIconLink href={"https://github.com/tahminator/codebloom"} ariaLabel={"CodeBloom GitHub"} > <FaGithub size={16} /> </FooterIconLink> </Flex>

[luoh00]

/deploy