fix: Adjust connection center design

[usame-algan]

What it solves

Part of #2452

How this PR fixes it

• Updates the ConnectionCenter design
• Uses the new Keyhole icon
• Increases the spacing between elements

How to test it

1. Open the safe
2. Check the Not connected button in the header against Figma
3. Check the Popover against Figma

Screenshots

Checklist

• I've tested the branch on mobile 📱
• I've documented how it affects the analytics (if at all) 📊
• I've written a unit/e2e test for it (if applicable) 🧑‍💻

[github-actions]

Branch preview

✅ Deploy successful!

https://account_center_design--walletweb.review-wallet-web.5afe.dev

[github-actions]

ESLint Summary View Full Report

Annotations are provided inline on the Files Changed tab. You can also see all annotations that were generated on the annotations page.

Type	Occurrences	Fixable
Errors	0	0
Warnings	0	0
Ignored	0	N/A

• Result: ✅ success
• Annotations: 0 total

---

^{Report generated by eslint-plus-action}

[katspaugh]

Nice!

[github-actions]

Coverage report

St.❔	Category	Percentage	Covered / Total
🟡	Statements	75.09% (+0% 🔼)	10061/13398
🔴	Branches	49.66% (-0.01% 🔻)	2053/4134
🔴	Functions	57.63% (+0.04% 🔼)	1496/2596
🟡	Lines	76.64% (-0% 🔻)	9100/11874

Show files with reduced coverage 🔻

St.❔	File	Statements	Branches	Functions	Lines
🔴	... / index.tsx	49.35%	13.33% (-3.33% 🔻)	9.09%	52.11%

Test suite run success

1102 tests passing in 154 suites.

Report generated by 🧪jest coverage report action from 707a103

[katspaugh]

We could also set fill=currentColor in the SVG and use the color CSS property.