Soften header divider and redraw back/close icons

[sahilc0]

Summary

• Header divider: replaced hardcoded #444 border with var(--dark10) for a subtler, theme-aware separator across all sub-pages
• Back icon: redrawn as a Heroicons-style left arrow (shaft + arrowhead) at a slightly larger size within the 32x32 viewbox, strokeWidth: 2 with rounded caps
• Close icon: redrawn as a clean stroke-based X mark, replacing the filled path with fillOpacity: 0.5 to match the back icon's currentColor stroke treatment

Test plan

• Open any sub-page (settings, receive, send, etc.) and verify the header divider is visible but subtle
• Verify the back arrow looks clean and proportional on all sub-pages
• Open the init screen sheet modal to verify the close icon
• Test in both light and dark themes — divider uses var(--dark10) which adapts to the theme

Affected files

• src/ionic.css — header divider color
• src/icons/Back.tsx — redrawn back arrow SVG
• src/icons/Close.tsx — redrawn close X SVG

Summary by CodeRabbit

• Style
  • Redesigned back icon to a simpler, clearer chevron-style shape for improved clarity
  • Redesigned close icon to a cleaner stroked “X” for visual consistency
  • Header border styling switched to a theme-driven variable for better theming integration

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: aa476436-32e9-47fa-8588-5abf7b7fd40a

📥 Commits

Reviewing files that changed from the base of the PR and between 4921db3 and 604426d.

📒 Files selected for processing (3)

• src/icons/Back.tsx
• src/icons/Close.tsx
• src/ionic.css

✅ Files skipped from review due to trivial changes (1)

• src/ionic.css

🚧 Files skipped from review as they are similar to previous changes (2)

• src/icons/Close.tsx
• src/icons/Back.tsx

---

Walkthrough

SVG path data for the Back and Close icons were simplified; the Back icon now renders a left-pointing chevron plus a shaft, and the Close icon was changed from a filled complex path to a stroked "X". The ionic stylesheet replaced a hard-coded header border color with a CSS variable.

Changes

Cohort / File(s)	Summary
Icon SVG Updates src/icons/Back.tsx, src/icons/Close.tsx	Replaced Back icon path with a left-pointing chevron (M15 10L9 16L15 22) plus horizontal shaft (M9 16H23); replaced Close icon's filled path with a stroked two-segment "X" (stroke="currentColor", strokeWidth="2", strokeLinecap="round"). No API/export changes.
Styling Updates src/ionic.css	Changed ion-app ion-header bottom border from 1px solid #444`` to 1px solid var(--dark10) (uses CSS variable instead of hard-coded hex).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested reviewers

• pietro909
• bordalix
• Kukks

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ 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 clearly and specifically summarizes the two main changes: softening the header divider and redrawing the back/close icons, which directly match the changeset modifications.

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

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch wt-soften-headers-icons-20260318

---

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

[cloudflare-workers-and-pages]

Deploying wallet-bitcoin with    Cloudflare Pages

Latest commit:	604426d
Status:	✅  Deploy successful!
Preview URL:	https://6e880760.wallet-bitcoin.pages.dev
Branch Preview URL:	https://wt-soften-headers-icons-2026.wallet-bitcoin.pages.dev

View logs

[cloudflare-workers-and-pages]

Deploying wallet-mutinynet with    Cloudflare Pages

Latest commit:	604426d
Status:	✅  Deploy successful!
Preview URL:	https://0cbe4570.arkade-wallet.pages.dev
Branch Preview URL:	https://wt-soften-headers-icons-2026.arkade-wallet.pages.dev

View logs

[arkanaai]

🔍 Arkana PR Review — wallet#447

Soften header divider and redraw back/close icons (+3/-7, 3 files)

Summary

UI polish: replaces hardcoded #444 header border with theme-aware var(--dark10), redraws the Back arrow (cleaner Heroicons-style) and Close X (stroke-based instead of filled path).

✅ What looks good

• Theme-aware border: Using var(--dark10) instead of #444 — will properly adapt to light/dark themes.
• Cleaner SVG paths: Both icons are now simpler, more readable SVG. The Back icon uses a proper arrow+shaft pattern, and the Close icon uses clean diagonal strokes with strokeLinecap="round".
• Consistent treatment: Both icons now use stroke="currentColor" with strokeWidth="2" and rounded caps, giving a unified visual language.

Minor notes

• The Close icon viewBox is 24×24 while the Back icon is 32×32. This might be intentional (different contexts), but worth verifying they render at consistent optical sizes in the UI.
• No functional/security concerns — this is purely visual.

Verdict

LGTM — straightforward UI improvement.