Cleanup about tailwind classes#580
Cleanup about tailwind classes#580prashantkumarniraj wants to merge 7 commits intoAOSSIE-Org:mainfrom
Conversation
📝 WalkthroughWalkthroughFour files updated to introduce centralized organization statistics configuration and modernize social links. New Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 1 | ❌ 5❌ Failed checks (5 warnings)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
⚔️ Resolve merge conflicts (beta)
Tip Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord. 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: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/pages/index.jsx (1)
100-111:⚠️ Potential issue | 🔴 CriticalThe "Learn More About Us" button is missing its text content.
The
<Link href="/about">contains only decorative<span>elements for the hover animation effect but no visible text. This was removed by the latest commit ("Clean up conflicting Tailwind utility classes") and renders the button as an empty colored rectangle — both a UX and accessibility issue.Previous commits show the text was wrapped in a
<span className="relative font-mono text-xl font-black tracking-tighter">Learn More About Us</span>. Please restore it between the decorative layers.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/index.jsx` around lines 100 - 111, The Link to "/about" currently contains only decorative spans and no visible label; restore the missing text by inserting the content span used previously (e.g., <span className="relative font-mono text-xl font-black tracking-tighter">Learn More About Us</span>) inside the Link, between the decorative overlay spans so it sits on top and remains visible and accessible; ensure the text span is placed alongside the existing decorative elements in the Link component so hover animations still apply and include the exact phrase "Learn More About Us".
🧹 Nitpick comments (2)
src/components/Footer.jsx (1)
64-70: Aria-label says "Twitter" but icon is now the X logo.The
faXTwittericon represents the rebranded "X" platform. Consider updating the aria-label to"Follow on X"for consistency with the visual icon.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/Footer.jsx` around lines 64 - 70, The aria-label on the social Link inside the Footer component is inconsistent with the faXTwitter icon; update the Link's aria-label from "Follow on Twitter" to "Follow on X" in the Footer.jsx component (locate the Link element using the FontAwesomeIcon with icon={faXTwitter}) so screen readers match the visual X branding.src/pages/index.jsx (1)
104-106: Formatting is broken — closing tags are misaligned.Lines 105-106 have inconsistent indentation with closing
</span>tags at column 0. Even if the structure is intentional, the formatting should match the rest of the file.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/index.jsx` around lines 104 - 106, The two closing JSX span tags for the element with className "absolute bottom-0 right-0 mb-3 mr-2 h-14 w-full rounded-lg bg-[`#00843D`] ..." are misaligned/indented at column 0; fix the JSX formatting so the closing </span> tags are properly nested and indented to match their corresponding opening <span> (the inner span with that className and its outer wrapper span/group element), preserving the current DOM structure and ensuring indentation style matches surrounding JSX.
🤖 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/Footer.jsx`:
- Line 33: Update the static copyright string in the Footer component: locate
the Footer component (Footer.jsx) where the JSX contains "© 2016-2025
AOSSIE. All rights reserved." and either change the end year to 2026 or replace
the hard-coded end year with a dynamic value (e.g., compute new
Date().getFullYear()) so the footer shows the current year automatically.
In `@src/pages/about.jsx`:
- Around line 147-149: The ABOUT h1 in about.jsx lacks a base Tailwind
text-size, so on small screens it inherits body size; update the <h1> element
(the ABOUT heading) to include a base text size utility such as text-3xl or
text-4xl in addition to the existing md:text-5xl and lg:text-6xl classes (e.g.,
add text-3xl before md:text-5xl) so the heading displays correctly on screens
below the md breakpoint.
---
Outside diff comments:
In `@src/pages/index.jsx`:
- Around line 100-111: The Link to "/about" currently contains only decorative
spans and no visible label; restore the missing text by inserting the content
span used previously (e.g., <span className="relative font-mono text-xl
font-black tracking-tighter">Learn More About Us</span>) inside the Link,
between the decorative overlay spans so it sits on top and remains visible and
accessible; ensure the text span is placed alongside the existing decorative
elements in the Link component so hover animations still apply and include the
exact phrase "Learn More About Us".
---
Nitpick comments:
In `@src/components/Footer.jsx`:
- Around line 64-70: The aria-label on the social Link inside the Footer
component is inconsistent with the faXTwitter icon; update the Link's aria-label
from "Follow on Twitter" to "Follow on X" in the Footer.jsx component (locate
the Link element using the FontAwesomeIcon with icon={faXTwitter}) so screen
readers match the visual X branding.
In `@src/pages/index.jsx`:
- Around line 104-106: The two closing JSX span tags for the element with
className "absolute bottom-0 right-0 mb-3 mr-2 h-14 w-full rounded-lg
bg-[`#00843D`] ..." are misaligned/indented at column 0; fix the JSX formatting so
the closing </span> tags are properly nested and indented to match their
corresponding opening <span> (the inner span with that className and its outer
wrapper span/group element), preserving the current DOM structure and ensuring
indentation style matches surrounding JSX.
| @@ -33,20 +33,40 @@ export function Footer() { | |||
| © 2016-2025 AOSSIE. All rights reserved. | |||
There was a problem hiding this comment.
Copyright year is outdated.
The copyright reads "2016-2025" but the current year is 2026. Consider updating to "2016-2026" or dynamically generating the end year.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/Footer.jsx` at line 33, Update the static copyright string in
the Footer component: locate the Footer component (Footer.jsx) where the JSX
contains "© 2016-2025 AOSSIE. All rights reserved." and either change the
end year to 2026 or replace the hard-coded end year with a dynamic value (e.g.,
compute new Date().getFullYear()) so the footer shows the current year
automatically.
| <h1 style={{ marginBottom: '20px' }} className="font-mono font-extrabold tracking-tighter text-[#32a852] dark:text-yellow-400 md:text-5xl lg:text-6xl"> | ||
| ABOUT | ||
| </h1> |
There was a problem hiding this comment.
Missing base font-size class for the ABOUT heading on small screens.
With Tailwind's preflight, h1 elements are reset to font-size: inherit, so without a base size utility (e.g., text-3xl or text-4xl), this heading will render at body-text size on screens below the md breakpoint. The old code likely had a default size that was removed during cleanup.
Proposed fix
- <h1 style={{ marginBottom: '20px' }} className="font-mono font-extrabold tracking-tighter text-[`#32a852`] dark:text-yellow-400 md:text-5xl lg:text-6xl">
+ <h1 style={{ marginBottom: '20px' }} className="font-mono font-extrabold tracking-tighter text-[`#32a852`] dark:text-yellow-400 text-3xl md:text-5xl lg:text-6xl">📝 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.
| <h1 style={{ marginBottom: '20px' }} className="font-mono font-extrabold tracking-tighter text-[#32a852] dark:text-yellow-400 md:text-5xl lg:text-6xl"> | |
| ABOUT | |
| </h1> | |
| <h1 style={{ marginBottom: '20px' }} className="font-mono font-extrabold tracking-tighter text-[`#32a852`] dark:text-yellow-400 text-3xl md:text-5xl lg:text-6xl"> | |
| ABOUT | |
| </h1> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/pages/about.jsx` around lines 147 - 149, The ABOUT h1 in about.jsx lacks
a base Tailwind text-size, so on small screens it inherits body size; update the
<h1> element (the ABOUT heading) to include a base text size utility such as
text-3xl or text-4xl in addition to the existing md:text-5xl and lg:text-6xl
classes (e.g., add text-3xl before md:text-5xl) so the heading displays
correctly on screens below the md breakpoint.
1 participant
Fixes #548
Not applicable — this PR performs a code cleanup only and does not introduce any visual or layout changes.
This PR cleans up conflicting and redundant Tailwind CSS utility classes on the About page.
Each element now uses a single utility per property per breakpoint, removing unnecessary overrides and improving readability and maintainability.
No visual or functional changes were introduced.
Checklist
I have reviewed and understood all changes made in this PR.
AI tools were used only as an aid, and the final implementation was verified manually to ensure correctness, build stability, and alignment with the project’s requirements.
Summary by CodeRabbit
Release Notes
New Features
Bug Fixes
Updates