Enhance Theme-Based Shadows and Improve Typography Weight for Sponsors Section

[rahul-vyas-dev]

PR Description

This PR introduces visual improvements to the sponsors component by refining shadow behavior and typography styling.

Changes Made

1. Improved Theme-Based Shadows

• Replaced default Tailwind shadows with custom box-shadow values.
• Implemented centered shadows (0 0 blur) to ensure consistent shadow visibility on all sides of the container.
• Added theme-specific shadow colors to better match each theme’s visual identity:

2. Typography Enhancement

• Updated text size to text-lg for improved readability and better visual hierarchy.

Impact

• Creates a more modern and polished UI appearance
• Ensures shadows are evenly distributed around components instead of bottom-heavy
• Improves readability and consistency across themes

Visual changes

See details

Before After Before After Before After

Checklist

• My code follows the project's code style and conventions
• I have made corresponding changes to the documentation
• My changes generate no new warnings or errors
• I have joined the Discord server and I will share a link to this PR with the project maintainers there
• I have read the Contributing Guidelines

⚠️ AI Notice - Important!

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

• Chores

  • Version bumped to 1.2.0

• Style

  • Increased description text size in the support section
  • Enhanced sponsors container with theme-adaptive visual styling

[coderabbitai]

Walkthrough

Version bump to 1.2.0 in package.json. Styling enhancements to SupportUsButton component: increased description text size and added theme-based shadow utilities to sponsors container.

Changes

Cohort / File(s)	Summary
Version Update package.json	Bumped package version from 1.1.0 to 1.2.0.
Component Styling src/components/SupportUsButton.tsx	Added text-lg class to description text and theme-based shadow utilities (AOSSIE, light, dark, minimal, corporate) to sponsors container for enhanced visual presentation.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related PRs

• chore: add support us button component with customizable themes and b… #6: Directly modifies the same SupportUsButton component with styling/class name adjustments.
• chore: add TypeScript types for support us button component and updat… #5: Introduces the Theme type definition and props used by SupportUsButton that this PR applies shadows to.
• chore: add Tailwind CSS setup with configuration and styles #3: Configures Tailwind CSS, which enables the utility classes added in this PR.

Suggested labels

Typescript Lang

Poem

🐰 A nibble of version, a hop of new style,
Shadow and text, placed all the while,
Tailwind classes bloom where themes do play,
The button looks brighter—hooray, hooray! ✨

🚥 Pre-merge checks | ✅ 2

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main changes: adding theme-based shadows to the sponsors section and improving typography weight for the organization description text.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

📝 Coding Plan

• Generate coding plan for human review comments

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Tip

CodeRabbit can use your project's `biome` configuration to improve the quality of JS/TS/CSS/JSON code reviews.

Add a configuration file to your project to customize how CodeRabbit runs biome.

[coderabbitai]

Actionable comments posted: 1

🤖 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/SupportUsButton.tsx`:
- Around line 252-259: The dark-theme shadow uses an invalid rgba() call
(rgba(0.5,0.5,0.5,0.5)) which breaks CSS; update the Theme === "dark" shadow
expression to use a valid color format (e.g., rgba(127,127,127,0.5) or a hex
with alpha) in the string returned for the dark branch so the shadow CSS is
valid and the dark theme renders correctly.

🪄 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

Run ID: 84dbd5b7-a4d0-4509-b269-09d2fb7f27b7

📥 Commits

Reviewing files that changed from the base of the PR and between d8263c5 and c4da0f2.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (2)

• package.json
• src/components/SupportUsButton.tsx