feat: Sidebar Redesign

[usame-algan]

REPLACED BY #3778

What it solves

Resolves #3504

How this PR fixes it

• Adjusts the design according to Figma.
• Adds a Home link to the navigation
• Adds Queue, History links to the navigation

How to test it

1. Open the Safe app
2. Observe that there is a Home link
3. Observe that there are links to the Transaction Queue and History
4. Observe that the Sidebar looks according to the design

Open questions

Should some of these changes be done in the safe-react-components package

Screenshots

[github-actions]

CLA Assistant Lite All Contributors have signed the CLA.

[katspaugh]

1. Menu font seems a bit too thick compared to Figma
2. Accordion arrows on Figma are black
3. No arrow icon on the New Transaction button
4. Copy/share icons should be green inside the gray buttons
5. I think dividers are thinner in the new design

Please also check the spacing between elements. E.g. the gap between copy/share buttons and Total Balance.

[iamacook]

Why no semicircle around arrow that opens the sidebar ser?

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

[usame-algan]

Menu font seems a bit too thick compared to Figma

I think this has to do with cross-browser font-rendering. We might be able to improve it with font-smoothing (Although I haven't noticed a difference on my end) We already have it in place.

[github-actions]

Deployment links

🟠 Rinkeby	⚪ Mainnet	🟣 Polygon	🟡 BSC	⚫ Arbitrum	🟢 Gnosis Chain

[iamacook]

Looks good dude. I think you can just abstract some of the values into theme variables.

[iamacook]

We export this colour as secondary.

[iamacook]

It is probably worthwhile adding this to the variables file.

[usame-algan]

Just realized we already have it as primaryLite but I also added primaryGreen200 because of different naming in our style guide. Removed primaryGreen200 again and use primaryLite now everywhere. We can tackle possible renaming of this in a later task.

[iamacook]

secondary

[iamacook]

Can import this if you add it to the variables file.

[iamacook]

secondary

[iamacook]

You're using this colour often as well. I'd export it from the variables file too.

[iamacook]

• The arrow icon when the 'non-Safe' sidebar is shown is misplaced:

• The tooltips only display if you hover on the icon. I think you should bring them up a level to display when hovering over the button itself. Here I'm hovering on the button but see no tooltip:

• I feel like the semicircle needs to be shift left a little bit more:

• I think the 'New transaction' button shouldn't have bold text

[usame-algan]

I think the 'New transaction' button shouldn't have bold text

Agreed, I changed the style to be like other buttons in the app (16px font-size, not bold)