Add "contribute" banner and update footer (MetaMask#966)

* Add "contribute" banner and update footer * class -> className * add space * decrease banner size * orange -> yellow * yellow -> neutral outline
Flores-21 · Nov 21, 2023 · 58f55e0 · 58f55e0
1 parent eb1f140
commit 58f55e0
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 37 deletions.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -404,52 +404,44 @@ const config = {
         },
         links: [
           {
-            title: "Wallet",
+            title: "Documentation",
             items: [
               {
-                label: "Introduction",
-                to: "/wallet",
-              },
-              {
-                label: "How to guides",
-                to: "/wallet/how-to",
+                label: "Home",
+                to: "/",
               },
               {
-                label: "Concepts",
-                to: "/wallet/concepts",
+                label: "MetaMask wallet",
+                to: "/wallet",
               },
               {
-                label: "Tutorials",
-                to: "/wallet/tutorials",
+                label: "MetaMask SDK",
+                to: "/sdk",
               },
               {
-                label: "Reference",
-                to: "/wallet/reference",
+                label: "Snaps",
+                to: "/snaps",
               },
             ],
           },
           {
-            title: "Snaps",
+            title: "GitHub",
             items: [
               {
-                label: "Introduction",
-                to: "/snaps",
-              },
-              {
-                label: "Get started",
-                to: "/snaps/get-started",
+                label: "Documentation GitHub",
+                href: "https://github.com/MetaMask/metamask-docs",
               },
               {
-                label: "How to guides",
-                to: "/snaps/how-to",
+                label: "MetaMask wallet GitHub",
+                href: "https://github.com/MetaMask/metamask-extension/",
               },
               {
-                label: "Tutorials",
-                to: "/snaps/tutorials",
+                label: "MetaMask SDK GitHub",
+                href: "https://github.com/MetaMask/metamask-sdk/",
               },
               {
-                label: "Reference",
-                to: "/snaps/reference",
+                label: "Snaps GitHub",
+                href: "https://github.com/MetaMask/snaps-monorepo",
               },
             ],
           },
@@ -461,16 +453,12 @@ const config = {
                 href: "https://discord.gg/consensys",
               },
               {
-                label: "Documentation GitHub",
-                href: "https://github.com/MetaMask/metamask-docs",
+                label: "Contribute to MetaMask",
+                href: "https://github.com/MetaMask/metamask-extension/blob/develop/docs/README.md",
               },
               {
-                label: "MetaMask wallet GitHub",
-                href: "https://github.com/MetaMask/metamask-extension/",
-              },
-              {
-                label: "Snaps GitHub",
-                href: "https://github.com/MetaMask/snaps-monorepo",
+                label: "Contribute to the docs",
+                href: "https://github.com/MetaMask/metamask-docs/blob/main/CONTRIBUTING.md",
               },
             ],
           },
@@ -490,7 +478,7 @@ const config = {
                 href: "https://metamask.io/cla/",
               },
               {
-                html: "<button id='manage-cookie-btn'>Manage cookie</button>",
+                html: "<button id='manage-cookie-btn'>Manage cookies</button>",
               },
             ],
           },

diff --git a/src/pages/index.module.css b/src/pages/index.module.css
@@ -21,7 +21,7 @@ html[data-theme="dark"] .forceColor {
 }
 
 .title {
-  font-size: clamp(2rem, 2.5vw, 4rem);
+  font-size: clamp(2rem, 2.75vw, 4rem);
 }
 
 .subtitle {
@@ -35,4 +35,53 @@ html[data-theme="dark"] .forceColor {
 
 .homepageButton:hover {
   background-color: #43AEFC;
-}
+}
+
+.devBannerButton {
+  border-radius: 0.3rem;
+  border-color: #1c1e21;
+  border-width: 1.5px;
+  color: #1c1e21;
+}
+
+.devBannerButton:hover {
+  background-color: #1c1e21;
+  color: #FFF;
+}
+
+html[data-theme="dark"] .devBannerButton {
+  border-color: #FFF;
+  border-width: 1px;
+}
+
+html[data-theme="dark"] .devBannerButton:hover {
+  background-color: #FFF;
+  color: #1c1e21;
+}
+
+.devBannerTitle {
+  font-size: clamp(1.75rem, 1.75vw, 2rem);
+}
+
+.devBannerSubtitle {
+  font-size: clamp(1rem, 1vw, 1.25rem);
+}
+
+.devBannerBlock {
+  background-color: var(--ifm-color-emphasis-200);
+  padding: 5rem;
+  text-align: center;
+  width: 100%;
+}
+
+html[data-theme="dark"] .devBannerBlock {
+  background-color: var(--ifm-color-emphasis-100);
+}
+
+.devBannerForceColor {
+  color: var(--ifm-color-emphasis-900);
+}
+
+html[data-theme="dark"] .devBannerForceColor {
+  color: var(--ifm-color-secondary-dark);
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -26,6 +26,25 @@ function HomepageHeader() {
   );
 }
 
+function DevBanner() {
+  return (
+    <header className={clsx(styles.devBannerBlock)}>
+      <div className="container">
+        <h1 className={clsx("hero__title", styles.devBannerTitle, styles.devBannerForceColor)}>
+          {"Contribute to MetaMask"}
+        </h1>
+        <p className={clsx("hero__subtitle", styles.devBannerSubtitle, styles.devBannerForceColor)}>
+          Join the MetaMask developer community and learn how to contribute to the MetaMask project itself.
+        </p>
+        <Link className={clsx(styles.devBannerButton, "button button--outline button--secondary button--md")} href="https://github.com/MetaMask/metamask-extension/blob/develop/docs/README.md">
+          Contribute&nbsp;
+          <svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" className="iconExternalLink_node_modules-@docusaurus-theme-classic-lib-theme-Icon-ExternalLink-styles-module"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg>
+        </Link>
+      </div>
+    </header>
+  );
+}
+
 export default function Home(): JSX.Element {
   return (
     <Layout
@@ -34,6 +53,7 @@ export default function Home(): JSX.Element {
       <main>
         <WalletSection />
         <SnapsSection />
+        <DevBanner />
       </main>
     </Layout>
   );