Add gradient banner

Fixes: https://github.com/moderneinc/moderne-docs/issues/146

docusaurus.config.ts

@@ -58,9 +58,7 @@ const config: Config = {
     },
     announcementBar: {
       id: "code_remix",
-      content:
-        "Now announcing the inaugural <a href=\"https://coderemix.ai/\"><strong>Code Remix Summit</strong></a> – in Miami May 12th-14th. Use the code <strong>MODERNE3VIP</strong> for an additional $300 off.",
-      backgroundColor: "#555555",
+      content: 'Now announcing the inaugural <a href="https://coderemix.ai/"><strong>Code Remix Summit</strong></a> – in Miami May 12th-14th. Use the code <strong>MODERNE3VIP</strong> for an additional $300 off.',
       textColor: "#E3F2FD",
     },
     colorMode: {

src/css/custom.css

@@ -6,13 +6,13 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #283af7;
-  --ifm-color-primary-dark: #0c21f6;
-  --ifm-color-primary-darker: #091ceb;
-  --ifm-color-primary-darkest: #0717c2;
-  --ifm-color-primary-light: #4453f8;
-  --ifm-color-primary-lighter: #5260f9;
-  --ifm-color-primary-lightest: #7b86fa;
+  --ifm-color-primary: #4169e1;
+  --ifm-color-primary-dark: #2855dd;
+  --ifm-color-primary-darker: #224ed5;
+  --ifm-color-primary-darkest: #1c41af;
+  --ifm-color-primary-light: #5a7de5;
+  --ifm-color-primary-lighter: #6787e7;
+  --ifm-color-primary-lightest: #8ca4ed;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }

src/theme/AnnouncementBar/CloseButton/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import clsx from 'clsx';
+import {translate} from '@docusaurus/Translate';
+import IconClose from '@theme/Icon/Close';
+import type {Props} from '@theme/AnnouncementBar/CloseButton';
+import styles from './styles.module.css';
+
+export default function AnnouncementBarCloseButton(
+  props: Props,
+): JSX.Element | null {
+  return (
+    <button
+      type="button"
+      aria-label={translate({
+        id: 'theme.AnnouncementBar.closeButtonAriaLabel',
+        message: 'Close',
+        description: 'The ARIA label for close button of announcement bar',
+      })}
+      {...props}
+      className={clsx('clean-btn close', styles.closeButton, props.className)}>
+      <IconClose width={14} height={14} strokeWidth={3.1} />
+    </button>
+  );
+}

src/theme/AnnouncementBar/CloseButton/styles.module.css

@@ -0,0 +1,4 @@
+.closeButton {
+  padding: 0;
+  line-height: 0;
+}

src/theme/AnnouncementBar/Content/index.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import clsx from 'clsx';
+import {useThemeConfig} from '@docusaurus/theme-common';
+import type {Props} from '@theme/AnnouncementBar/Content';
+import styles from './styles.module.css';
+
+export default function AnnouncementBarContent(
+  props: Props,
+): JSX.Element | null {
+  const {announcementBar} = useThemeConfig();
+  const {content} = announcementBar!;
+  return (
+    <div
+      {...props}
+      className={clsx(styles.content, props.className)}
+      // Developer provided the HTML, so assume it's safe.
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{__html: content}}
+    />
+  );
+}

src/theme/AnnouncementBar/Content/styles.module.css

@@ -0,0 +1,10 @@
+.content {
+  font-size: 85%;
+  text-align: center;
+  padding: 5px 0;
+}
+
+.content a {
+  color: inherit;
+  text-decoration: underline;
+}

src/theme/AnnouncementBar/index.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import {useThemeConfig} from '@docusaurus/theme-common';
+import {useAnnouncementBar} from '@docusaurus/theme-common/internal';
+import AnnouncementBarCloseButton from '@theme/AnnouncementBar/CloseButton';
+import AnnouncementBarContent from '@theme/AnnouncementBar/Content';
+
+import styles from './styles.module.css';
+
+export default function AnnouncementBar(): JSX.Element | null {
+  const {announcementBar} = useThemeConfig();
+  const {isActive, close} = useAnnouncementBar();
+  if (!isActive) {
+    return null;
+  }
+  const {textColor, isCloseable} = announcementBar!;
+  return (
+    <div
+      className={styles.announcementBar}
+      style={{backgroundImage: 'linear-gradient(45deg, #b12ade, #2546f0)', color: textColor}}
+      role="banner">
+      {isCloseable && <div className={styles.announcementBarPlaceholder} />}
+      <AnnouncementBarContent className={styles.announcementBarContent} />
+      {isCloseable && (
+        <AnnouncementBarCloseButton
+          onClick={close}
+          className={styles.announcementBarClose}
+        />
+      )}
+    </div>
+  );
+}

src/theme/AnnouncementBar/styles.module.css

@@ -0,0 +1,55 @@
+:root {
+  --docusaurus-announcement-bar-height: auto;
+}
+
+.announcementBar {
+  display: flex;
+  align-items: center;
+  height: var(--docusaurus-announcement-bar-height);
+  background-color: var(--ifm-color-white);
+  color: var(--ifm-color-black);
+
+  /*
+  Unfortunately we can't make announcement bar render above the navbar
+  IE need to use border-bottom instead of shadow
+  See https://github.com/facebookincubator/infima/issues/275
+
+  box-shadow: var(--ifm-global-shadow-lw);
+  z-index: calc(var(--ifm-z-index-fixed) + 1);
+  */
+  border-bottom: 1px solid var(--ifm-color-emphasis-100);
+}
+
+html[data-announcement-bar-initially-dismissed='true'] .announcementBar {
+  display: none;
+}
+
+.announcementBarPlaceholder {
+  flex: 0 0 10px;
+}
+
+.announcementBarClose {
+  flex: 0 0 30px;
+  align-self: stretch;
+}
+
+.announcementBarContent {
+  flex: 1 1 auto;
+}
+
+@media print {
+  .announcementBar {
+    display: none;
+  }
+}
+
+@media (min-width: 997px) {
+  :root {
+    --docusaurus-announcement-bar-height: 30px;
+  }
+
+  .announcementBarPlaceholder,
+  .announcementBarClose {
+    flex-basis: 50px;
+  }
+}