Refactor Sidebar.tsx to use design-tokens.css CSS variables for spacing and color

[Jagadeeshftw]

📌 Description

src/components/Sidebar.tsx and src/components/Sidebar.module.css contain hardcoded color values and spacing that duplicate the design token system defined in src/design-tokens.css. Refactor the sidebar to reference var(--color-*) and var(--spacing-*) tokens, ensuring the dark/light theme toggle applies consistently without needing separate CSS overrides.

💡 Why it matters: Inconsistent token usage means theme changes require edits in multiple files; token adoption prevents this divergence.

🧩 Requirements and context

• Audit Sidebar.module.css for hardcoded hex colors and pixel values that have token equivalents.
• Replace each hardcoded value with the corresponding var(--token-name) from src/design-tokens.css.
• Verify the sidebar renders correctly in both light and dark themes using the existing ThemeProvider.
• Add a snapshot or visual regression note in src/components/__tests__/Sidebar.test.tsx.
• Do not change the sidebar's visual appearance; this is a pure token adoption refactor.

Non-functional requirements

• Must be secure, tested, and documented.
• Should be efficient and easy to review.

🛠️ Suggested execution

1. Fork the repo and create a branch

git checkout -b refactor/sidebar-design-tokens

2. Implement changes

• Write/modify the relevant source: src/components/Sidebar.module.css, src/components/Sidebar.tsx
• Write comprehensive tests: src/components/__tests__/Sidebar.test.tsx (extend existing)
• Add documentation: comment in Sidebar.module.css listing replaced tokens
• Validate security assumptions: CSS variable injection is not a concern here as values come from the app's own token file

3. Test and commit

• Run tests:

npm run test

• Cover edge cases: dark theme token values apply correctly, collapsed sidebar state retains correct colors
• Include test output and security notes in the PR description.

Example commit message

refactor(sidebar): replace hardcoded colors and spacing with design-token CSS variables

✅ Acceptance criteria

• No hardcoded hex colors remain in Sidebar.module.css
• All spacing values use var(--spacing-*) tokens
• Sidebar visually matches pre-refactor in both themes (screenshot comparison)
• Existing Sidebar unit tests pass without modification
• design-tokens.css is not modified (tokens are consumed, not changed)

🔒 Security notes

No security impact; pure CSS refactor. Confirm no url() token values that could trigger external requests.

📋 Guidelines

• Minimum 95% test coverage
• Clear documentation
• Timeframe: 96 hours

[1nonlypiece]

Hi Maintainers 👋,

I’d like to apply for this issue.

I have hands-on experience with Next.js frontend development as well as Stellar smart contracts using Rust (Soroban). I’m comfortable working with Figma designs, integrating APIs/wallets on the frontend, and implementing, testing, and optimizing smart contracts on Stellar.

I can follow the project guidelines, communicate progress clearly, and deliver clean, well-tested code within the expected timeline.

Looking forward to contributing to the project 🚀
Thanks!

[grantfox-oss]

🎉 This issue has been marked as completed on GrantFox as part of the Official Campaign campaign!

@1nonlypiece's PR #575 was approved and merged by @Jagadeeshftw.

🏆 @1nonlypiece: You earned 40 FoxPoints for this contribution! Your current tier: Builder (1,308 total points). Track your full progress on GrantFox.

👏 Great work, @1nonlypiece! Keep contributing to Fluxora-Org.