add screenshots to the readme

[keraliss]

fixes #68 : adds screenshots in readme

Summary by CodeRabbit

• Documentation

  • Added Screenshots section to README with Wallet, Swap Page, Ongoing Swap, and Swap Report images

• Style

  • Expanded utility classes for layout, spacing, colors, borders, shadows, and visual effects
  • Added new CSS custom properties for enhanced theming support

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request adds visual documentation to the README with four app screenshots (Wallet, Swap Page, Ongoing Swap, and Swap Report) and expands the CSS utility library with new layout, spacing, color, and styling utilities including border colors, background colors, and custom property declarations.

Changes

Cohort / File(s)	Summary
Documentation README.md	Added "Screenshots" subsection with four image blocks showcasing main wallet page, swap page, ongoing swap flow, and swap report page.
Styling Utilities src/styles/output.css	Introduced new layout utilities (top-1, mt-0, flex-shrink, border-collapse, -translate-x-1, -translate-y-1, resize), expanded color utilities for borders (blue, gray, green, orange, purple, red, yellow) and backgrounds (blue-400, cyan-500, gray-500, yellow-500), added shadow-black and backdrop-filter utilities, and declared @property --tw-outline-style CSS custom property.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 With screenshots bright and colors new,
The wallet, swaps, and reports too!
Utilities expand like garden rows,
Where CSS magic gently flows. ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	The PR includes substantial changes to src/styles/output.css (79 lines added) that are not mentioned in issue #68 and unrelated to adding screenshots to the README.	Remove unrelated CSS utility changes from this PR. CSS modifications should be addressed in a separate pull request with appropriate justification and linked issues.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title accurately describes the main change: adding screenshots to the README, which is the primary objective of the pull request.
Linked Issues check	✅ Passed	The PR adds four screenshots (Wallet, Swap Page, Ongoing Swap, Swap Report) to README.md, directly fulfilling all requirements from issue #68.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch add_screenshots

---

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

[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/styles/output.css`:
- Around line 551-554: Stylelint is flagging declaration-empty-line-before
inside the generated translate utility blocks (e.g., the .-translate-x-1 rule);
fix by inserting a blank line between each declaration in those utility CSS
rules (for example between the --tw-translate-x declaration and the translate
declaration) so each property is separated by a single empty line, or
alternatively update the lint config to ignore generated files if these are
produced output files; locate the translate utility selectors (like
.-translate-x-1 and the other translate variants referenced around the same
area) and apply the blank-line separation consistently across them.

---

ℹ️ Review info

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d41b665 and c50f72f.

⛔ Files ignored due to path filters (4)

• screenshot/report1.png is excluded by !**/*.png
• screenshot/swap.png is excluded by !**/*.png
• screenshot/swap1.png is excluded by !**/*.png
• screenshot/wallet.png is excluded by !**/*.png

📒 Files selected for processing (2)

• README.md
• src/styles/output.css

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

Resolve Stylelint empty-line errors in translate utilities.

Stylelint reports declaration-empty-line-before at Line 553, Line 557, and Line 561. Add blank lines between declarations (or adjust the lint rule for generated CSS) to unblock linting.

🧹 Suggested formatting fix

 .-translate-x-1 {
   --tw-translate-x: calc(var(--spacing) * -1);
+
   translate: var(--tw-translate-x) var(--tw-translate-y);
 }
@@
 .-translate-y-1 {
   --tw-translate-y: calc(var(--spacing) * -1);
+
   translate: var(--tw-translate-x) var(--tw-translate-y);
 }

Also applies to: 559-562

🧰 Tools

🪛 Stylelint (17.3.0)

[error] 553-553: Expected empty line before declaration (declaration-empty-line-before)

(declaration-empty-line-before)

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/styles/output.css` around lines 551 - 554, Stylelint is flagging
declaration-empty-line-before inside the generated translate utility blocks
(e.g., the .-translate-x-1 rule); fix by inserting a blank line between each
declaration in those utility CSS rules (for example between the --tw-translate-x
declaration and the translate declaration) so each property is separated by a
single empty line, or alternatively update the lint config to ignore generated
files if these are produced output files; locate the translate utility selectors
(like .-translate-x-1 and the other translate variants referenced around the
same area) and apply the blank-line separation consistently across them.