Fix theme-switching UI issues in navbar and footer (fixes #776)

[GeethaBurigalla]

Pull Request Summary

fix: align navbar GitHub button and fix footer theme colors (#776)

What changed?

Two theme-switching UI fixes from issue #776: (1) the GitHub button in the navbar now uses the same px-6 py-2 padding as the Sign In button next to it, fixing the visual misalignment between the two; (2) the footer's bottom ribbon ("Asymptotic Scales" section) now uses the existing theme-border and theme-text-muted utility classes instead of hardcoded border-slate-800 / text-slate-400, so it correctly adapts when switching from dark to light theme. Files affected: src/components/Navbar.jsx, src/components/Footer.jsx.

Why is this needed?

Closes #776

The issue reported four problems. This PR addresses #1 (GitHub/Sign In button misalignment) and #3 (footer colors not adapting to light theme). Items #2 (bottom bar staying dark) and #4 (window-control dots turning white) both trace to HeroProductPreview.jsx, which appears to be an intentional dark "code editor" style mockup with no theme variants anywhere in the component — rather than guess at an unscoped redesign, I've left those two for maintainer input (see notes below).

Type of Change

• feat - New user-facing feature or algorithm capability
• fix - Bug fix or regression fix
• docs - Documentation-only change
• style - Formatting or styling change with no behavior change
• refactor - Code restructuring with no feature or bug-fix behavior change
• perf - Performance improvement
• test - Test coverage or test infrastructure change
• build - Build system, dependency, or packaging change
• ci - GitHub Actions, Docker, Vercel, or release automation change
• chore - Maintenance change that does not affect users
• revert - Reverts a previous change

Release Notes

Release note category:

• Added
• Changed
• Fixed
• Removed
• Deprecated
• Security
• Not required

Release note entry:

• Fixed navbar GitHub button alignment and footer text/border colors not adapting to light theme.

Testing and Verification

• npm ci or npm install
• npm run format:check
• npm run lint
• npm run build
• Manual browser testing at http://localhost:5173
• Responsive testing for affected views
• No new console errors or warnings

Skipped or additional testing notes:
npm run build and responsive testing not yet run — will add before merge if requested. npm run format:check not run directly, but affected files were formatted with npx prettier --write.

UI Evidence

Before:
(navbar GitHub button shorter than Sign In button; footer ribbon border/text hardcoded to dark-theme slate colors even in light mode)

After:
(GitHub and Sign In buttons same height/padding; footer ribbon border and text adapt to the active theme)

CI/CD and Deployment Impact

• No deployment impact expected
• Updates GitHub Actions or release automation
• Updates Docker build/runtime behavior
• Updates Vercel, Nginx, redirects, or client-side routing behavior
• Adds or changes environment variables
• Adds, removes, or updates npm dependencies
• Requires maintainer follow-up after merge

Deployment notes:
Follow-up needed: issue #776 also mentions (2) a bottom bar staying dark-themed and (4) window-control dots turning white — both appear to live in HeroProductPreview.jsx, which has no theme variants at all (looks like an intentional dark IDE-style mockup). Left out of this PR pending maintainer confirmation on whether that panel should become theme-aware or stay fixed-dark by design.

Reviewer Checklist

• PR title follows Conventional Commits and matches the selected change type
• Scope is focused and unrelated changes are excluded
• Release note category and entry are accurate
• CI checks are expected to pass: format, lint, and build
• UI evidence is included when user-facing screens changed
• Documentation is updated when behavior, setup, or deployment changed

Summary by CodeRabbit

• Style
  • Updated footer colors and borders to align with the active theme.
  • Improved the desktop GitHub link’s spacing for a more balanced appearance.

[netlify]

✅ Deploy Preview for astounding-nougat-da0f6a ready!

Name	Link
🔨 Latest commit	565b82f
🔍 Latest deploy log	https://app.netlify.com/projects/astounding-nougat-da0f6a/deploys/6a675b0eb282cd000846b472
😎 Deploy Preview	https://deploy-preview-802--astounding-nougat-da0f6a.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[vercel]

@GeethaBurigalla is attempting to deploy a commit to the adityapaul2603-gmailcom's projects Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yml

Review profile: CHILL

Plan: Pro Plus

Run ID: 8f519409-3d6f-4663-869d-c3f43d2914c6

📥 Commits

Reviewing files that changed from the base of the PR and between 9a77bea and 565b82f.

📒 Files selected for processing (2)

• src/components/Footer.jsx
• src/components/Navbar.jsx

---

📝 Walkthrough

Walkthrough

The footer’s bottom ribbon now uses theme-aware border and text classes. The desktop GitHub navbar link receives adjusted padding and sizing classes, with its URL and behavior unchanged.

Changes

UI styling updates

Layer / File(s)	Summary
Theme-aware footer ribbon src/components/Footer.jsx	The Box 3 ribbon uses theme-border and theme-text-muted instead of fixed slate color classes.
Desktop GitHub link spacing src/components/Navbar.jsx	The GitHub link’s padding and sizing classes are updated without changing its destination or attributes.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Possibly related PRs

• algoscope-hq/AlgoScope#253: Introduces related theme-based footer styling utilities.
• algoscope-hq/AlgoScope#265: Also modifies the footer bottom ribbon styling classes.
• algoscope-hq/AlgoScope#428: Also updates the desktop GitHub link styling classes.

Suggested labels: level:beginner, type:design

Suggested reviewers: bimbok

🚥 Pre-merge checks | ✅ 5 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Linked Issues check	⚠️ Warning	Issue #776 is only partially resolved because the bottom bar and window-control dots remain unchanged.	Also update HeroProductPreview.jsx for the remaining bottom bar and window-control dot theme bugs, or split them into a follow-up issue/PR.
Conventional Commits	⚠️ Warning	PR title is conventional, but the only PR commit is 'Fix theme-switching UI issues in navbar and footer (fixes #776)', which lacks the required type: subject format.	Rename the commit to something like 'fix: theme-switching UI issues in navbar and footer (fixes #776)' so both title and commit subject are Conventional Commits.

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the navbar/footer theme UI fix and matches the changeset.
Description check	✅ Passed	All required template sections are present and mostly filled, including summary, why, type, testing, UI evidence, and deployment notes.
Out of Scope Changes check	✅ Passed	The diff stays focused on the navbar and footer fixes and adds no unrelated changes.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Algorithm Complexity	✅ Passed	Only Tailwind className/theme changes appear in Navbar/Footer; no algorithm implementation or complexity docs were altered, so this check is not applicable.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.}

[GeethaBurigalla]

Hello maintainer, PR is ready please review and approve the deployment.