Simplify nav: 'Start free' + 'Sign in' buttons (like Linear)

Author: NikolayS

docusaurus.config.js

@@ -203,16 +203,21 @@ module.exports = {
           label: 'Blog',
           position: 'right',
         },
+        {
+          to: '/consulting',
+          label: 'Consulting',
+          position: 'right',
+        },
         {
           type: 'html',
           className: 'menu__list-item--sign-in-button',
-          value: `<a href="/consulting" class="consulting-button">Consulting</a>`,
+          value: `<a href=${SIGN_IN_URL} class="start-free-button">Start free</a>`,
           position: 'right',
         },
         {
           type: 'html',
           className: 'menu__list-item--sign-in-button',
-          value: `<a href=${SIGN_IN_URL} class="console-button">Console</a>`,
+          value: `<a href=${SIGN_IN_URL} class="sign-in-button">Sign in</a>`,
           position: 'right',
         },
       ],

src/css/custom.css

@@ -778,14 +778,14 @@ html[data-theme="dark"] .avatar__name > a {
   font-size: 20px;
 }
 
-.sign-in-button, .console-button, .consulting-button {
+.start-free-button, .sign-in-button {
   font-weight: var(--ifm-font-weight-semibold);
   padding: 0.275rem 1.25rem;
   vertical-align: middle;
   border-radius: 0.25rem;
 }
 
-.navbar-sidebar__item div[class="menu__list-item"]:not(:first-of-type), .github-sm, .navbar-sidebar__item .menu__list-item--sign-in-button, .navbar-sidebar__item .menu__list-item--console-button, .navbar-sidebar__item .menu__list-item--consulting-button {
+.navbar-sidebar__item div[class="menu__list-item"]:not(:first-of-type), .github-sm, .navbar-sidebar__item .menu__list-item--sign-in-button {
   margin-top: 1rem;
   padding: var(--ifm-menu-link-padding-vertical)
       var(--ifm-menu-link-padding-horizontal);
@@ -799,26 +799,30 @@ html[data-theme="dark"] .avatar__name > a {
   color: inherit;
 }
 
-html[data-theme="light"] .sign-in-button,  html[data-theme="light"] .consulting-button {
-  color: var(--ifm-color-black);
-  border: 1px solid #ff6112;
+/* Primary CTA button - "Start free" */
+html[data-theme="light"] .start-free-button {
+  color: #fff;
+  background-color: #0F879D;
+  border: 1px solid #0F879D;
 }
 
-html[data-theme="dark"] .sign-in-button, html[data-theme="dark"] .consulting-button {
-  color: var(--ifm-color-base);
-  background-color: #ff6112;
+html[data-theme="dark"] .start-free-button {
+  color: #fff;
+  background-color: #0F879D;
   border: 1px solid transparent;
 }
 
-html[data-theme="light"] .console-button{
+/* Secondary button - "Sign in" */
+html[data-theme="light"] .sign-in-button {
   color: var(--ifm-color-black);
-  border: 1px solid #0F879D;
+  border: 1px solid #888;
+  background-color: transparent;
 }
 
-html[data-theme="dark"] .console-button{
+html[data-theme="dark"] .sign-in-button {
   color: var(--ifm-color-base);
-  background-color: #0F879D;
-  border: 1px solid transparent;
+  border: 1px solid #666;
+  background-color: transparent;
 }
 
 .github-container {
@@ -908,9 +912,9 @@ html[data-theme="dark"] .console-button{
     padding-top: 1.75rem;
   }
 
-  .sign-in-button, .console-button, .consulting-button {
+  .start-free-button, .sign-in-button {
     display: flex;
-    width: 162px;
+    width: 100px;
     justify-content: center;
   }
 }