style: Beamer drawer

[usame-algan]

What it solves

Resolves #3472

How this PR fixes it

Changes to the Beamer product id that has the custom css styles.

Gist with the custom css: https://gist.github.com/usame-algan/ed48b872686ae2bba12b7ba1848d6868

How to test it

1. Open the safe
2. Accept the cookie banner
3. Click on "Whats new"
4. Observe the drawer with theme font, color and removed box-shadow

Screenshots

[github-actions]

CLA Assistant Lite All Contributors have signed the CLA.

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

Deployment links

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

[github-actions]

E2E Tests Failed
Check the results here: https://github.com/gnosis/safe-react-e2e-tests/actions/runs/1852022794

Failed tests:

• ❌ Safe Apps List Safe Apps List
• ❌ Read-only transaction creation and review Read-only transaction creation and review
• ❌ Safe Balances Safe Balances

[katspaugh]

Could you save the custom CSS (is it just plain text?) in a gist and paste the link here? In case we need to migrate it some day.

[iamacook]

Looks like a good start. Has @liliiaorlenko seen this?

[usame-algan]

Could you save the custom CSS (is it just plain text?) in a gist and paste the link here? In case we need to migrate it some day.

Included the gist in the PR description

[katspaugh]

font-family: 'Averta','Roboto','Helvetica Neue','Arial','Segoe UI','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','-apple-

Why so many fonts? Wouldn't Averta, sans-serif be enough?

Also, since Beamer is in an iframe, you need to import that font in the iframe CSS like so:

@font-face {
  font-family: "Averta";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Averta-Regular"),
    url(../../assets/fonts/Averta-normal.woff2) format("woff2");
}

@font-face {
  font-family: "Averta";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: local("Averta-Extrabold"),
    url(../../assets/fonts/Averta-ExtraBold.woff2) format("woff2");
}

Obviously, with a full URL. It might have CORS issues tho.

[liliiaorlenko]

Looks great, thanks guys! The only thing left is, if there is a new post would be nice to have a little green circle next to the icons which would show that there is a new not viewed post

[DiogoSoaress]

One remark: getting rid of the box-shadow seems to have left the post with a poor contrast with the drawer backgroun-color.... Can we opt for a

• border around the Post card

@liliiaorlenko ? WDYT @usame-algan ?

[liliiaorlenko]

One remark: getting rid of the box-shadow seems to have left the post with a poor contrast with the drawer backgroun-color.... Can we opt for a

• border around the Post card

@liliiaorlenko ? WDYT @usame-algan ?

I would only change the background color of feedback section to white color or maybe we can use our new background color #F6F7F8 for the drawer.

[usame-algan]

Why so many fonts? Wouldn't Averta, sans-serif be enough?

Should be fine with fewer fallbacks, just copy&pasted it from our default config

Also, since Beamer is in an iframe, you need to import that font in the iframe CSS like so:

It seems to work as long as the fonts are included in the destination page. Beamer doesn't provide an option to include/upload custom fonts. Tried using an absolute url and it results in being blocked by CORS policy as you suspected.

[DiogoSoaress]

✅