fix: resolve footer alignment issues (#31)#34
fix: resolve footer alignment issues (#31)#34ankitkr104 wants to merge 1 commit intoDjedAlliance:mainfrom
Conversation
- Remove side gaps and ensure full-width coverage - Fix uneven spacing between footer sections - Align text and icons properly - Reduce footer height for better proportions - Add consistent padding and gap spacing - Implement responsive layout for mobile devices - Style social icons with glass effect matching navbar - Ensure consistent layout across different screen sizes Fixes DjedAlliance#31
📝 WalkthroughWalkthroughApp.css receives comprehensive footer styling including layout containers, interactive social icon states, and responsive mobile adjustments. Footer.tsx markup is refactored with semantic structure improvements, reorganizing logo placement, copyright text, and social links into dedicated sections. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes 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)
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 |
![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.css (1)
456-480: Consider extracting shared social icon styles.The
.footer-social a,.footer-social a:hover, and.footer-social imgrules are nearly identical to.navbar-social a(lines 231-255). Consider extracting these into a shared utility class to reduce duplication.♻️ Example shared class approach
/* Shared social icon button styles */ .social-icon-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0.5rem; background: rgba(243, 193, 129, 0.1); border: 1px solid rgba(243, 193, 129, 0.2); border-radius: 50%; transition: all 0.3s ease; } .social-icon-btn:hover { background: rgba(243, 193, 129, 0.2); border-color: rgba(243, 193, 129, 0.4); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(243, 193, 129, 0.3); } .social-icon-btn img { width: 20px; height: 20px; object-fit: contain; }Then apply
social-icon-btnclass to both navbar and footer social links.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/App.css` around lines 456 - 480, Extract the duplicated rules used by .footer-social a, .footer-social a:hover, .footer-social img and the similar .navbar-social a block into a shared utility class (e.g., .social-icon-btn), update the markup/classes for the navbar and footer social link anchors to use that class, and remove the duplicate CSS blocks; ensure the shared class contains the base styles (display, size, padding, background, border, border-radius, transition), the :hover variant contains the hover transforms, border-color and box-shadow, and an img rule for sizing/object-fit so both navbar and footer use the same styles.src/components/pages/footer/Footer.tsx (1)
12-12: Consider adding width/height attributes to prevent layout shift.Adding explicit
widthandheightattributes helps browsers reserve space before images load, reducing Cumulative Layout Shift (CLS).♻️ Example
- <img src={Logo} alt="Djed Alliance logo" /> + <img src={Logo} alt="Djed Alliance logo" width={32} height={32} />Similarly for social icons (width/height of 20).
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/pages/footer/Footer.tsx` at line 12, Add explicit width and height attributes to the <img src={Logo} alt="Djed Alliance logo" /> element in Footer.tsx to prevent layout shift (set appropriate pixel values matching the actual asset); also add width={20} height={20} (or equivalent CSS inline size attributes) to the social icon image elements/components used in the footer so each icon reserves space before loading. Ensure values match the real image dimensions or intended display size and update any JSX props (e.g., <img> attributes or icon props) rather than relying solely on external CSS.
🤖 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/App.css`:
- Line 424: The font-family declaration that uses a quoted Montserrat triggers
stylelint's font-family-name-quotes rule; update the font-family property that
currently lists Montserrat in quotes to use the unquoted Montserrat while
keeping the existing sans-serif fallback so the declaration uses the unquoted
font family name.
---
Nitpick comments:
In `@src/App.css`:
- Around line 456-480: Extract the duplicated rules used by .footer-social a,
.footer-social a:hover, .footer-social img and the similar .navbar-social a
block into a shared utility class (e.g., .social-icon-btn), update the
markup/classes for the navbar and footer social link anchors to use that class,
and remove the duplicate CSS blocks; ensure the shared class contains the base
styles (display, size, padding, background, border, border-radius, transition),
the :hover variant contains the hover transforms, border-color and box-shadow,
and an img rule for sizing/object-fit so both navbar and footer use the same
styles.
In `@src/components/pages/footer/Footer.tsx`:
- Line 12: Add explicit width and height attributes to the <img src={Logo}
alt="Djed Alliance logo" /> element in Footer.tsx to prevent layout shift (set
appropriate pixel values matching the actual asset); also add width={20}
height={20} (or equivalent CSS inline size attributes) to the social icon image
elements/components used in the footer so each icon reserves space before
loading. Ensure values match the real image dimensions or intended display size
and update any JSX props (e.g., <img> attributes or icon props) rather than
relying solely on external CSS.
| } | ||
|
|
||
| .footer-copyright { | ||
| font-family: 'Montserrat', sans-serif; |
There was a problem hiding this comment.
Remove quotes around font family name.
Stylelint reports font-family-name-quotes error. Per CSS conventions, generic font family names like Montserrat should not be quoted when they don't contain special characters.
🔧 Proposed fix
.footer-copyright {
- font-family: 'Montserrat', sans-serif;
+ font-family: Montserrat, sans-serif;
font-size: 14px;
color: `#F9EBDB`;
margin: 0;
}📝 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.
| font-family: 'Montserrat', sans-serif; | |
| font-family: Montserrat, sans-serif; |
🧰 Tools
🪛 Stylelint (17.3.0)
[error] 424-424: Unexpected quotes around "Montserrat" (font-family-name-quotes)
(font-family-name-quotes)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/App.css` at line 424, The font-family declaration that uses a quoted
Montserrat triggers stylelint's font-family-name-quotes rule; update the
font-family property that currently lists Montserrat in quotes to use the
unquoted Montserrat while keeping the existing sans-serif fallback so the
declaration uses the unquoted font family name.
|
Hi @ankitkr104 , Please cross check #33 Just a suggestion from my side, since the website is developed natively using tailwind css, using basic css and classes for simple feats and fixes like glass effect and alignment by removing the original tailwind css and introducing css based classes would be a un-fruitful approach for the future of this website and will also reduce it's maintainability by abnormal increment in code for small things. |
2 participants
Fixes #31
Screenshots:
Checklist
Summary by CodeRabbit