refactor(theme-classic): split AnnouncementBar, increase z-index, use shadow

[slorber]

Motivation

• Split theme AnnouncementBar component: extract CloseButton + Content.
• Use z-index to make it render just above the navbar
• Use shadow instead of border-bottom (requiring the z-index change to work)

Note: I didn't extract a Layout/Container component as it wasn't very easy to design those properly without introducing some extra dom nodes.

Test Plan

preview vs prod (almost not visible in dark mode), subtle changes only: shadow instead of border + 1px additional space.

Before:

After:

Test links

Deploy preview: https://deploy-preview-7940--docusaurus-2.netlify.app/

Related issues/PRs

#7827

[netlify]

✅ [V2]

Name	Link
🔨 Latest commit	ec65a40
🔍 Latest deploy log	https://app.netlify.com/sites/docusaurus-2/deploys/62f4d8d1de891c00085c0eee
😎 Deploy Preview	https://deploy-preview-7940--docusaurus-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[github-actions]

⚡️ Lighthouse report for the deploy preview of this PR

URL	Performance	Accessibility	Best Practices	SEO	PWA	Report
/	🟠 78	🟢 98	🟢 100	🟢 100	🟠 80	Report
/docs/installation	🟠 82	🟢 100	🟢 100	🟢 100	🟢 90	Report

[github-actions]

Size Change: +740 B (0%)

Total Size: 813 kB

Filename	Size	Change
website/build/assets/css/styles.********.css	111 kB	+30 B (0%)
website/build/assets/js/main.********.js	608 kB	+680 B (0%)
website/build/index.html	40.7 kB	+30 B (0%)

ℹ️ View Unchanged

Filename	Size
website/.docusaurus/globalData.json	52.5 kB

_{compressed-size-action}

[slorber]

FYI the z-index change is reverted in #8163 because of facebookincubator/infima#275