feat(ui): update SVG assets, ui fixes, enhance theme compatibility, add dev preview and refine responsiveness - #36
Conversation
…dd dev preview and refine responsiveness - Replace heart, star, arrow, and logomark SVGs with public assets using fill="currentColor" - Add brightness-0 invert filters to logomark and project logo for light/dark theme compatibility - Fix 768px-950px tablet layout overflow by shifting 2-column breakpoint to lg (1024px) - Left-align About section titles with responsive font sizes and break-words wrapping - Add golden hover color and scale interactions to sponsors - Refine mobile boundary padding and hero heading typography - Add local Vite dev preview playground (npm run dev:demo)
reach2saksham
added
enhancement
github-actions
Bot
added
no-issue-linked
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
|
Warning Review the following alerts detected in dependencies. According to your organization's Security Policy, it is recommended to resolve "Warn" alerts. Learn more about Socket for GitHub.
|
WalkthroughAdds an interactive Vite React demo for ChangesSupportUsButton demo and component refresh
Estimated code review effort: 3 (Moderate) | ~25 minutes Sequence Diagram(s)sequenceDiagram
participant Browser
participant Vite
participant App
participant SupportUsButton
Browser->>Vite: load index.html
Vite->>App: mount App through demo/main.tsx
App->>SupportUsButton: pass sampleProps and theme state
SupportUsButton-->>Browser: render preview UI
Suggested labels: Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✨ 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: 4
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@demo/App.tsx`:
- Around line 37-41: Update the header element in App to replace deprecated
bg-opacity-80 with theme-specific slash-notation background utilities: use
bg-zinc-950/80 for dark mode and bg-gray-100/80 for light mode, while preserving
the existing backdrop blur and other classes.
In `@src/components/SupportUsButton.tsx`:
- Line 47: Update the organization rendering in SupportUsButton to use the
validatedUrl value from validateUrl instead of organizationInformation.link.
Render the anchor only when validatedUrl exists; otherwise render
organizationInformation.name as plain text, preserving the existing organization
display content.
- Around line 219-229: Externalize all newly added user-visible strings through
the existing i18n resource mechanism. In src/components/SupportUsButton.tsx
ranges 219-229, 287-289, 338-340, and 365-383, update SupportUsButton to use
localized resources for hero, attribution, About, and sponsor labels. In
demo/App.tsx ranges 14-31 and 42-67, move sample copy, control labels, and state
text into demo locale resources and reference them from App.
- Around line 198-222: Update the heading layout in SupportUsButton by removing
sm:flex-nowrap from the surrounding flex container and sm:whitespace-nowrap from
the h1, then add min-w-0 to the h1 so long projectInformation.name values wrap
instead of overflowing at tablet widths.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: 13ff5d08-c538-4402-aaa6-7d62eed98337
⛔ Files ignored due to path filters (5)
package-lock.jsonis excluded by!**/package-lock.jsonpublic/aossie_logomark.svgis excluded by!**/*.svgpublic/arrow.svgis excluded by!**/*.svgpublic/heart.svgis excluded by!**/*.svgpublic/star.svgis excluded by!**/*.svg
📒 Files selected for processing (6)
demo/App.tsxdemo/main.tsxindex.htmlpackage.jsonsrc/components/SupportUsButton.tsxvite.config.ts
| <h1 className="font-medium text-3xl sm:text-3xl md:text-5xl leading-tight tracking-tight text-center sm:whitespace-nowrap"> | ||
| Support-us {projectInformation?.name && "and"}{" "} | ||
| {projectInformation?.name} | ||
| </span> | ||
| </h1> | ||
| </div> | ||
| {projectInformation?.name && ( | ||
| <div> | ||
| <span className="text-[clamp(1rem,2vw,2rem)] leading-snug italic flex justify-center items-center"> | ||
| A Project Powered by | ||
| <span className="text-lg sm:text-base md:text-xl leading-snug flex flex-wrap justify-center items-center gap-1"> | ||
| <p className="italic"> | ||
| A Project Powered by | ||
| </p> |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟠 Major | 🏗️ Heavy lift
Externalize the newly added user-visible strings.
The refreshed component and demo add hard-coded labels and content instead of resource-backed strings.
src/components/SupportUsButton.tsx#L219-L229: externalize the hero and attribution labels.src/components/SupportUsButton.tsx#L287-L289: externalize the project “About” label.src/components/SupportUsButton.tsx#L338-L340: externalize the organization “About” label.src/components/SupportUsButton.tsx#L365-L383: externalize the sponsor-section labels.demo/App.tsx#L14-L31: move visible sample copy into demo locale resources.demo/App.tsx#L42-L67: externalize control labels and state text.
As per path instructions, user-visible strings should be externalized to resource files (i18n).
📍 Affects 2 files
src/components/SupportUsButton.tsx#L219-L229(this comment)src/components/SupportUsButton.tsx#L287-L289src/components/SupportUsButton.tsx#L338-L340src/components/SupportUsButton.tsx#L365-L383demo/App.tsx#L14-L31demo/App.tsx#L42-L67
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/SupportUsButton.tsx` around lines 219 - 229, Externalize all
newly added user-visible strings through the existing i18n resource mechanism.
In src/components/SupportUsButton.tsx ranges 219-229, 287-289, 338-340, and
365-383, update SupportUsButton to use localized resources for hero,
attribution, About, and sponsor labels. In demo/App.tsx ranges 14-31 and 42-67,
move sample copy, control labels, and state text into demo locale resources and
reference them from App.
Source: Path instructions
|
Overall nice work but I have a few things to ask:
|
|
@coderabbitai review |
✅ Action performedReview finished.
|
|
Hi @rahul-vyas-dev , I kept |
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/SupportUsButton.tsx (1)
369-395: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winPrevent sponsor cards from overflowing on mobile.
The sponsor group combines fixed-width SVGs with
text-2xlnames, but neither the group nor each card hasmin-w-0/max-w-fullconstraints. Long names can exceed the narrow content width and be clipped by the component’soverflow-hiddenroot. Let cards and their text shrink/wrap on mobile, while retaining auto-sized cards on larger screens.Proposed fix
- <div className="flex flex-wrap items-center justify-center lg:justify-start gap-6 select-none flex-1"> + <div className="flex w-full min-w-0 flex-wrap items-center justify-center lg:justify-start gap-6 select-none lg:flex-1"> ... - className="group flex items-center gap-2 transition-all duration-300 hover:text-[`#ffd700`] hover:-translate-y-1 hover:scale-105 cursor-pointer active:scale-95" + className="group flex w-full max-w-full min-w-0 items-center justify-center gap-2 transition-all duration-300 hover:text-[`#ffd700`] hover:-translate-y-1 hover:scale-105 cursor-pointer active:scale-95 sm:w-auto"Also add
min-w-0to the sponsor text wrapper andbreak-wordsto the sponsor-name span.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/SupportUsButton.tsx` around lines 369 - 395, Update the sponsor group and each sponsor card in the sponsors.map block to include min-w-0 and max-w-full constraints, while preserving auto-sized cards at larger breakpoints. Add min-w-0 to the sponsor text wrapper and break-words to each sponsor-name span so long names shrink and wrap within the mobile container instead of being clipped.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@src/components/SupportUsButton.tsx`:
- Around line 369-395: Update the sponsor group and each sponsor card in the
sponsors.map block to include min-w-0 and max-w-full constraints, while
preserving auto-sized cards at larger breakpoints. Add min-w-0 to the sponsor
text wrapper and break-words to each sponsor-name span so long names shrink and
wrap within the mobile container instead of being clipped.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: dc810a19-079b-437d-bf6b-9e18641d2354
📒 Files selected for processing (2)
demo/App.tsxsrc/components/SupportUsButton.tsx
3 participants
Summary of Changes
This PR introduces major UI/UX refinements, light and dark theme compatibility enhancements, asset replacements using original SVG files, responsive layout fixes for mobile and tablet viewports, interactive sponsor hover states, and a lightweight dev preview environment.
Screenshots/Recordings:
2026-07-27.21-56-05.mp4
1. Dev Preview Environment
npm run dev:demoto open it.2. Responsive Layout & Mobile/Tablet Enhancements
md:(768px) tolg:(1024px).flex-col), preventing text truncation and border clipping.About {Project}andAbout {Organization}headings (justify-start text-left w-full) with scaled logo icons (h-8 w-8 sm:h-9 sm:w-9 lg:h-10 lg:w-10).whitespace-nowrapfrom section headings and addedbreak-words, allowing long project names to wrap naturally onto a second line without overflowing.text-3xl sm:text-3xl md:text-5xl flex-wrap sm:flex-nowrap, allowing clean 2-line wrapping on narrow mobile screens while maintaining a fluid single line on desktop.px-12 sm:px-14 md:px-20 py-10 sm:py-10 md:py-14) and inner wrapper padding (pt-16 pb-16 sm:pt-10 sm:pb-10), providing comfortable, elegant spacing for vertical dashed boundary lines away from screen edges.3. Sponsors Section Refinements
whitespace-nowrapto Line 1 ("Supported By Global ") and Line 2 ("Powerhouses") withpr-8right padding.items-center).hover:text-[#ffd700]), and scale transform (hover:-translate-y-1 hover:scale-105 active:scale-95 transition-all duration-300 cursor-pointer) to sponsor items, matching the main CTA button hover interactions.Community Backer A&Community Backer B), leaving real sponsors (Google Open Source, GitHub Sponsors, Stability Nexus).4. Developer Preview Playground
vite.config.ts,index.html,demo/main.tsx,demo/App.tsx) featuring an interactive top control bar for real-time Light/Dark theme and background logo toggling."dev:demo": "vite"script topackage.json./demoanddevDependenciesdo NOT affect the published npm package or add any weight for end users (0 bytes added to publisheddist/).5. SVG Asset Replacement & Light/Dark Theme Compatibility
public/heart.svg): Replaced inline hero heart paths with officialpublic/heart.svgpaths and appliedfill="currentColor"for dynamic theme fill color inheritance.public/star.svg): Replaced central section separator and sponsor header stars withpublic/star.svgpath data usingfill="currentColor".public/aossie_logomark.svg): Updated SVG paths from hardcodedfill="white"tofill="currentColor". Addedbrightness-0 invert(Dark Theme) andbrightness-0(Light Theme) CSS image filters so logomark images dynamically render pure white in dark mode and black in light mode.public/arrow.svg): Replaced the "A Project Powered by AOSSIE" link arrow withpublic/arrow.svgpath data using proportionalh-[0.85em] w-autosizing to match adjacent text font height.brightness-0 invert(Dark Theme) /brightness-0(Light Theme) image filters toprojectInformation?.image, ensuring colorful project logos transform into monochromatic white/black to align with the overall design system.Future Scopes & Potential Enhancements
🔍 Files Changed
src/components/SupportUsButton.tsx: Core component layout, SVG replacements, theme filters, CTA button hover styles, and responsive typography/padding.public/heart.svg: Updated fill attributes tocurrentColor.public/star.svg: Updated fill attributes tocurrentColor.public/aossie_logomark.svg: Updated fill attributes tocurrentColor.public/arrow.svg: Updated fill attributes tocurrentColor.demo/App.tsx: Interactive preview app with theme toggles and cleaned-up sample sponsors.package.json: Added"dev:demo": "vite"script and dev preview dependencies.vite.config.ts&index.html: Local dev server configuration.🧪 Verification & Testing
Additional Notes:
Checklist
We encourage contributors to use AI tools responsibly when creating Pull Requests. While AI can be a valuable aid, it is essential to ensure that your contributions meet the task requirements, build successfully, include relevant tests, and pass all linters. Submissions that do not meet these standards may be closed without warning to maintain the quality and integrity of the project. Please take the time to understand the changes you are proposing and their impact.
Summary by CodeRabbit
Summary by CodeRabbit
New Features
Improvements