feat: review navbar cta design (more polished) (#463)

Signed-off-by: David Dal Busco <david.dalbusco@outlook.com>

Author: peterpeterparker

docusaurus.config.ts

@@ -205,24 +205,11 @@ const config: Config = {
             value: `
               <a
                 href="https://console.juno.build"
-                class="navbar-menu-item"
+                class="button button--hero"
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                Start Building
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="24"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                >
-                  <path d="M7 7h10v10"/><path d="M7 17 17 7"/>
-                </svg>
+                Sign in
               </a>`
               .replace(/\n\s+/g, " ")
               .trim()
@@ -231,7 +218,7 @@ const config: Config = {
             type: "html",
             position: "right",
             value:
-              '<a href="https://github.com/junobuild/juno" target="_blank" rel="noopener noreferrer" aria-label="Go to Juno GitHub repo" class="navbar-menu-item"><span>GitHub</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 512 512" fill="currentColor"><path d="M256 32C132.3 32 32 134.9 32 261.7c0 101.5 64.2 187.5 153.2 217.9a17.56 17.56 0 003.8.4c8.3 0 11.5-6.1 11.5-11.4 0-5.5-.2-19.9-.3-39.1a102.4 102.4 0 01-22.6 2.7c-43.1 0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1 1.4-14.1h.1c22.5 2 34.3 23.8 34.3 23.8 11.2 19.6 26.2 25.1 39.6 25.1a63 63 0 0025.6-6c2-14.8 7.8-24.9 14.2-30.7-49.7-5.8-102-25.5-102-113.5 0-25.1 8.7-45.6 23-61.6-2.3-5.8-10-29.2 2.2-60.8a18.64 18.64 0 015-.5c8.1 0 26.4 3.1 56.6 24.1a208.21 208.21 0 01112.2 0c30.2-21 48.5-24.1 56.6-24.1a18.64 18.64 0 015 .5c12.2 31.6 4.5 55 2.2 60.8 14.3 16.1 23 36.6 23 61.6 0 88.2-52.4 107.6-102.3 113.3 8 7.1 15.2 21.1 15.2 42.5 0 30.7-.3 55.5-.3 63 0 5.4 3.1 11.5 11.4 11.5a19.35 19.35 0 004-.4C415.9 449.2 480 363.1 480 261.7 480 134.9 379.7 32 256 32z"/></svg></a>'
+              '<a href="https://github.com/junobuild/juno" target="_blank" rel="noopener noreferrer" aria-label="Go to Juno GitHub repo" class="navbar-github-link"><span>GitHub</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 512 512" fill="currentColor"><path d="M256 32C132.3 32 32 134.9 32 261.7c0 101.5 64.2 187.5 153.2 217.9a17.56 17.56 0 003.8.4c8.3 0 11.5-6.1 11.5-11.4 0-5.5-.2-19.9-.3-39.1a102.4 102.4 0 01-22.6 2.7c-43.1 0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1 1.4-14.1h.1c22.5 2 34.3 23.8 34.3 23.8 11.2 19.6 26.2 25.1 39.6 25.1a63 63 0 0025.6-6c2-14.8 7.8-24.9 14.2-30.7-49.7-5.8-102-25.5-102-113.5 0-25.1 8.7-45.6 23-61.6-2.3-5.8-10-29.2 2.2-60.8a18.64 18.64 0 015-.5c8.1 0 26.4 3.1 56.6 24.1a208.21 208.21 0 01112.2 0c30.2-21 48.5-24.1 56.6-24.1a18.64 18.64 0 015 .5c12.2 31.6 4.5 55 2.2 60.8 14.3 16.1 23 36.6 23 61.6 0 88.2-52.4 107.6-102.3 113.3 8 7.1 15.2 21.1 15.2 42.5 0 30.7-.3 55.5-.3 63 0 5.4 3.1 11.5 11.4 11.5a19.35 19.35 0 004-.4C415.9 449.2 480 363.1 480 261.7 480 134.9 379.7 32 256 32z"/></svg></a>'
           }
         ]
       },

src/components/Hero/index.tsx

@@ -51,7 +51,7 @@ export default function Hero(): JSX.Element {
         </p>
         <p className={`${styles.item}`}></p>
         <div className={`${styles.item} ${styles.actions}`}>
-          <Start position="hero">Get Started</Start>
+          <Start position="hero">Start Building</Start>
           <Link
             className="button button--juno"
             to="/docs/intro"

src/css/navbar.scss

@@ -36,36 +36,44 @@
   }
 }
 
-// "Start building" and GitHub links
-.navbar-menu-item {
-  display: flex;
-  gap: 4px;
-  color: var(--ifm-menu-color);
-  padding: var(--ifm-menu-link-padding-vertical)
-    var(--ifm-menu-link-padding-horizontal);
-
-  text-decoration: none !important;
-  border-radius: 0.25rem;
-
-  &:hover {
-    background: var(--ifm-menu-color-background-hover);
-    color: var(--ifm-menu-color);
-  }
+// Github link in the navbar
+.navbar__item:has(.navbar-github-link) {
+  padding: 0 8px;
+}
+
+.navbar-github-link {
+  display: none;
 
   @media screen and (min-width: 996px) {
+    display: flex;
     justify-content: center;
     align-items: center;
+
+    height: 34px;
+    width: 34px;
+
+    border-radius: 50%;
+
     color: inherit;
 
-    padding: 0;
+    &:hover {
+      background: var(--ifm-color-emphasis-200);
+      color: inherit;
+    }
 
     span {
       display: none;
     }
+  }
+}
 
-    &:hover {
-      background: inherit;
-      color: var(--ifm-navbar-link-hover-color);
-    }
+// Sign in button in the navbar
+.navbar .button--hero {
+  display: none;
+
+  @media screen and (min-width: 996px) {
+    display: block;
+
+    padding: 2px 10px;
   }
 }

src/css/search.scss

@@ -1,36 +1,22 @@
 nav {
+  div[class*="navbarSearchContainer"] {
+    padding-left: 4px;
+  }
+
   .DocSearch {
     --docsearch-searchbox-background: var(--ifm-navbar-background-color);
 
-    outline: solid 1px var(--navbar-search-border-color) !important;
-    outline-offset: -0.5px; // Allow the border and focus shadow to blend seamlessly
+    height: 34px;
+
     &:hover,
     &:focus {
-      outline: solid 1px var(--ifm-color-primary) !important;
-    }
-
-    .DocSearch-Button-Placeholder {
-      font-family: var(--ifm-font-family-base);
-      padding-left: 1rem;
-      color: var(--docsearch-text-color);
+      background: var(--ifm-color-emphasis-200);
+      box-shadow: none;
     }
 
+    .DocSearch-Button-Placeholder,
     .DocSearch-Button-Keys {
       display: none;
     }
-
-    @media screen and (min-width: 769px) {
-      position: relative;
-      width: 150px;
-
-      // Move the looking glass icon on the right,
-      // but only on the button, not in the modal (where classes are reused)
-      &:not(:has(.DocSearch-Modal)) .DocSearch-Search-Icon {
-        position: absolute;
-        right: 1rem;
-        top: 50%;
-        transform: translateY(-50%);
-      }
-    }
   }
 }