Feature: Responsive Footer using BackgroundTile for new-design#325
Feature: Responsive Footer using BackgroundTile for new-design#325reach2saksham wants to merge 8 commits intoAOSSIE-Org:new-designfrom
Conversation
- add Footer component - integrate i18n translations - use BackgroundTile design system component - add responsive layout
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
📝 WalkthroughWalkthroughIntroduces a new Footer component with an animated wavy background tile, new semantic CSS tokens for theming tiles and footer elements, and internationalized navigation content. Updates the main page layout to include the footer and adds localization strings for multiple languages. Changes
Sequence DiagramsequenceDiagram
participant Page as Page Component
participant Footer as Footer Component
participant BackgroundTile as BackgroundTile
participant Canvas as HTML Canvas
participant ThemeProvider as Theme Provider
participant i18n as i18n Service
participant DOM as DOM
Page->>Footer: Render Footer
Footer->>ThemeProvider: Query current theme
ThemeProvider-->>Footer: Return dark/light state
Footer->>BackgroundTile: Render with heightVh prop
BackgroundTile->>DOM: Mount canvas element
BackgroundTile->>BackgroundTile: Initialize RAF animation loop
BackgroundTile->>DOM: Read --line-color CSS variable
DOM-->>BackgroundTile: Return theme color
BackgroundTile->>Canvas: Set up ResizeObserver
Note over Canvas: User scrolls/uses wheel
DOM-->>BackgroundTile: Emit scroll/wheel event
BackgroundTile->>BackgroundTile: Update amplitude target
BackgroundTile->>BackgroundTile: Advance animation frame
BackgroundTile->>Canvas: Draw Bezier wavy path
Canvas-->>DOM: Render animated wave
Footer->>i18n: Fetch Footer translations
i18n-->>Footer: Return localized links & titles
Footer->>DOM: Render navigation columns
Note over DOM: Animation continues smoothly until interaction stops
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
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 |
|
@CodeRabbit review |
✅ Actions performedReview triggered.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
src/app/[locale]/page.tsx (1)
24-26: Consider removing the redundantbottom-0class.The
bottom-0utility has no effect here since the parent uses flexbox layout withflex-coland the main content usesflex-1. The footer will naturally position at the bottom. The class would only apply if the element hadposition: absolute/fixed/sticky.♻️ Suggested simplification
{/* Footer*/} - <div className="bottom-0 pb-4"> + <div className="pb-4"> <Footer /> </div>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/app/`[locale]/page.tsx around lines 24 - 26, Remove the redundant bottom-0 Tailwind class on the wrapper around the Footer in page.tsx: locate the div containing <Footer /> (currently className="bottom-0 pb-4") and change it to only include the needed spacing (e.g., className="pb-4") or remove the wrapper entirely if not needed, keeping the Footer component intact.src/components/ui/BackgroundTile.tsx (1)
9-14: UnusedheightVhprop.The
heightVhprop is defined in the interface and accepted as a parameter with a default value, but it's never used in the component. The container's height is determined by CSS (h-fullclass) rather than this prop.♻️ Either remove the unused prop or apply it
Option 1: Remove the unused prop
-interface BackgroundTileProps { - /** Height of the tile in viewport height units. Defaults to 50. */ - heightVh?: number; -} - -const BackgroundTile = ({ heightVh = 50 }: BackgroundTileProps) => { +const BackgroundTile = () => {Option 2: Use the prop for height styling
const BackgroundTile = ({ heightVh = 50 }: BackgroundTileProps) => { // ... existing code ... return ( <div style={{ background: "var(--tile-bg, `#1a1a1a`)", border: "0.8px solid var(--tile-stroke, rgba(255,255,255,0.08))", borderRadius: "24px", width: "100%", + height: `${heightVh}vh`, overflow: "hidden", position: "relative", }} - className="w-full h-full" + className="w-full" >🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/ui/BackgroundTile.tsx` around lines 9 - 14, The BackgroundTile component currently declares BackgroundTileProps and accepts heightVh but never uses it; either remove the prop/interface or apply it to the container height—locate the BackgroundTile function and BackgroundTileProps and either delete heightVh from the interface and parameter list (and any related default) or set the container element's height using the prop (e.g., add a style or computed class to the outer div using height: `${heightVh}vh`) so the prop actually controls the tile height.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/components/ui/Footer.tsx`:
- Around line 38-51: The branding image logic uses theme (from useTheme()) which
can be "system", causing wrong asset selection; update the logic to use
resolvedTheme (from useTheme) instead of theme when computing brandingSrc while
keeping the mounted check intact: call useTheme to get resolvedTheme, keep
mounted/setMounted and useEffect as-is, and replace uses of theme === "dark"
with resolvedTheme === "dark" so the dark/light branding picks the actual
resolved theme value.
---
Nitpick comments:
In `@src/app/`[locale]/page.tsx:
- Around line 24-26: Remove the redundant bottom-0 Tailwind class on the wrapper
around the Footer in page.tsx: locate the div containing <Footer /> (currently
className="bottom-0 pb-4") and change it to only include the needed spacing
(e.g., className="pb-4") or remove the wrapper entirely if not needed, keeping
the Footer component intact.
In `@src/components/ui/BackgroundTile.tsx`:
- Around line 9-14: The BackgroundTile component currently declares
BackgroundTileProps and accepts heightVh but never uses it; either remove the
prop/interface or apply it to the container height—locate the BackgroundTile
function and BackgroundTileProps and either delete heightVh from the interface
and parameter list (and any related default) or set the container element's
height using the prop (e.g., add a style or computed class to the outer div
using height: `${heightVh}vh`) so the prop actually controls the tile height.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 864245f0-c797-4966-aed3-2f32212f45a2
⛔ Files ignored due to path filters (2)
public/assets/icons/resonate_branding_dark.svgis excluded by!**/*.svgpublic/assets/icons/resonate_branding_light.svgis excluded by!**/*.svg
📒 Files selected for processing (6)
src/app/[locale]/globals.csssrc/app/[locale]/page.tsxsrc/components/ui/BackgroundTile.tsxsrc/components/ui/Footer.tsxsrc/messages/en.jsonsrc/messages/hi.json
| const { theme } = useTheme(); | ||
| const [mounted, setMounted] = useState(false); | ||
| const t = useTranslations("Footer"); | ||
|
|
||
| useEffect(() => { | ||
| setMounted(true); | ||
| }, []); | ||
|
|
||
| const brandingSrc = | ||
| !mounted | ||
| ? "/assets/icons/resonate_branding_light.svg" | ||
| : theme === "dark" | ||
| ? "/assets/icons/resonate_branding_dark.svg" | ||
| : "/assets/icons/resonate_branding_light.svg"; |
There was a problem hiding this comment.
Use resolvedTheme instead of theme for accurate theme detection.
When the user has "system" theme selected, theme returns "system" rather than the actual resolved value ("dark" or "light"). This causes the branding image to always show the light variant when system theme is active, since "system" !== "dark".
🐛 Proposed fix
- const { theme } = useTheme();
+ const { resolvedTheme } = useTheme();
const [mounted, setMounted] = useState(false);
const t = useTranslations("Footer");
useEffect(() => {
setMounted(true);
}, []);
const brandingSrc =
!mounted
? "/assets/icons/resonate_branding_light.svg"
- : theme === "dark"
+ : resolvedTheme === "dark"
? "/assets/icons/resonate_branding_dark.svg"
: "/assets/icons/resonate_branding_light.svg";📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const { theme } = useTheme(); | |
| const [mounted, setMounted] = useState(false); | |
| const t = useTranslations("Footer"); | |
| useEffect(() => { | |
| setMounted(true); | |
| }, []); | |
| const brandingSrc = | |
| !mounted | |
| ? "/assets/icons/resonate_branding_light.svg" | |
| : theme === "dark" | |
| ? "/assets/icons/resonate_branding_dark.svg" | |
| : "/assets/icons/resonate_branding_light.svg"; | |
| const { resolvedTheme } = useTheme(); | |
| const [mounted, setMounted] = useState(false); | |
| const t = useTranslations("Footer"); | |
| useEffect(() => { | |
| setMounted(true); | |
| }, []); | |
| const brandingSrc = | |
| !mounted | |
| ? "/assets/icons/resonate_branding_light.svg" | |
| : resolvedTheme === "dark" | |
| ? "/assets/icons/resonate_branding_dark.svg" | |
| : "/assets/icons/resonate_branding_light.svg"; |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/ui/Footer.tsx` around lines 38 - 51, The branding image logic
uses theme (from useTheme()) which can be "system", causing wrong asset
selection; update the logic to use resolvedTheme (from useTheme) instead of
theme when computing brandingSrc while keeping the mounted check intact: call
useTheme to get resolvedTheme, keep mounted/setMounted and useEffect as-is, and
replace uses of theme === "dark" with resolvedTheme === "dark" so the dark/light
branding picks the actual resolved theme value.
… to BackgrounTile line render
- add Footer component - integrate i18n translations - use BackgroundTile design system component - add responsive layout
|
@M4dhav This PR is ready to be merged from my side. |
1 participant
Description
This PR introduces a responsive Footer component for the Resonate website and integrates it with the existing
BackgroundTiledesign component. The footer follows the new design system and ensures a consistent UI across different screen sizes.Fixes #296
Type of change
Files Modified
src/components/ui/Footer.tsxsrc/components/ui/BackgroundTile.tsxsrc/app/[locale]/page.tsxsrc/app/[locale]/globals.csssrc/messages/en.jsonsrc/messages/hi.jsonNote: This PR depends on the
feat/background-tilebranch.It should be reviewed and merged after the BackgroundTile implementation is merged into the base branch.
Please delete options that are not relevant.
How Has This Been Tested?
Please include screenshots below if applicable:
footer.mp4
Checklist:
Maintainer Checklist
Summary by CodeRabbit
Release Notes
New Features
Style