fix: Adjust overview widget on dashboard for new design

[usame-algan]

What it solves

Updates the dashboard overview widget to support easy on-ramping

Figma: https://www.figma.com/file/ptTs6lDBeUuLNySroJ5PiF/Web-Master-File?node-id=8786%3A68251&mode=dev

How this PR fixes it

How to test it

1. Open a Safe
2. Go to the dashboard
3. Observe the updated design
4. Switch to a network where the Ramp Network app is activated
5. Observe a "Buy crypto" button

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://dashboard_overview--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}

[github-actions]

Coverage report

St.❔	Category	Percentage	Covered / Total
🟡	Statements	75.06%	10105/13463
🔴	Branches	49.59%	2055/4144
🔴	Functions	57.48%	1498/2606
🟡	Lines	76.63%	9141/11929

Test suite run success

1105 tests passing in 155 suites.

Report generated by 🧪jest coverage report action from a66b7d2

[schmanu]

LGTM!

[schmanu]

I just realized that in Dark mode the icons do not adjust their color.

[schmanu]

The app is also listed now on staging and the button works :)

[katspaugh]

The skeletons need some adjustments, it jumps twice when loading.

Screen.Recording.2023-11-09.at.16.24.32.mov

[francovenica]

For mobile if the "Buy" button is present is all too cramped:

Question just out of curiosity: why the "Buy" is an "a" tag, the "Send" is a button and the "Receive" is a button wrapped in a div?

[usame-algan]

I updated the loading state and mobile view accordingly

Screen.Recording.2023-11-10.at.10.59.56.mov

Question just out of curiosity: why the "Buy" is an "a" tag, the "Send" is a button and the "Receive" is a button wrapped in a div?

The Buy Crypto button is an a because it links to a different page. The Receive button is wrapped in a div because we are reusing a wrapper component that adds an onClick handler around its children so there has to be some element to hold that.

[katspaugh]

Can you make Send and Receive be on the same line, and Buy crypto on a different line?

[usame-algan]

Changed it like so on mobile: