[Docs] add sign up button to nav bar (#1485)

* [Docs] add sign up button to nav bar * update nav and add sign up button for small screens * address comments
mixpanel · Oct 9, 2024 · fe0e100 · fe0e100
1 parent cb5c078
commit fe0e100
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 44 deletions.
diff --git a/components/Search/Search.module.scss b/components/Search/Search.module.scss
@@ -1,24 +1,23 @@
 .icon {
-    width: 14px;
-    margin-right: 6px;
+  width: 14px;
+  margin-right: 6px;
 }
 
 .searchBar:focus {
-    box-shadow: none;
-
+  box-shadow: none;
 }
 
 .inputContainer {
-    display: flex;
-    flex-direction: row;
+  display: flex;
+  flex-direction: row;
 }
 
-@media (max-width: 768px) {
-    .searchBar {
-        display: none;
-    }
-    
-    .icon {
-        width: 20px;
-    }
-}
+@media (max-width: 800px) {
+  .searchBar {
+    display: none;
+  }
+
+  .icon {
+    width: 20px;
+  }
+}
diff --git a/components/SignUpButton/SignUpButton.module.scss b/components/SignUpButton/SignUpButton.module.scss
@@ -0,0 +1,18 @@
+@use "../../pages/theme/colors.scss" as colors;
+
+.signUpButton {
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  background-color: colors.$purple50;
+  font-weight: 600;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  color: colors.$white;
+  padding: 10px 22px;
+  text-wrap: nowrap;
+  border-radius: 100px;
+
+  &:hover {
+    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    background-color: colors.$purple100;
+  }
+}
diff --git a/components/SignUpButton/SignUpButton.tsx b/components/SignUpButton/SignUpButton.tsx
@@ -0,0 +1,9 @@
+import style from "./SignUpButton.module.scss";
+
+export default function SignUpButton() {
+  return (
+    <a className={style.signUpButton} href="https://mixpanel.com/register">
+      Sign Up
+    </a>
+  );
+}
diff --git a/pages/_meta.json b/pages/_meta.json
@@ -18,7 +18,7 @@
         }
     },
     "api-reference": {
-        "title": "API Reference ↗",
+        "title": "API Docs ↗",
         "type": "page",
         "href": "https://developer.mixpanel.com/reference",
         "newWindow": true

diff --git a/pages/overrides.scss b/pages/overrides.scss
@@ -100,6 +100,12 @@ $border-radius-lg: 100px;
     }
   }
 
+  .top-nav-search-bar {
+    @media (max-width: 400px) {
+      display: none;
+    }
+  }
+
   //actively selected tab
   .nx-text-sm[aria-current="true"] span {
     font-weight: 700;
@@ -287,7 +293,6 @@ article img {
   background-color: colors.$lightbg;
 }
 
-
 //##############################Light Theme Starts Here##################################
 .light {
   line-height: 1.8;
@@ -395,16 +400,15 @@ article img {
   .nx-w-full > main {
     color: colors.$grey100;
     background-color: colors.$lightbg;
-
-
-  //ID management banner style
-  .idManagementBanner {
-    position: sticky !important;
-    top: 55px;
-    opacity: 1 !important;
-    background-color: #fefce8 !important;
-    color: #713f11;
-  }
+
+    //ID management banner style
+    .idManagementBanner {
+      position: sticky !important;
+      top: 55px;
+      opacity: 1 !important;
+      background-color: #fefce8 !important;
+      color: #713f11;
+    }
 
     .nx-mt-6 {
       border-bottom: colors.$black;
@@ -436,7 +440,6 @@ article img {
       }
     }
 
-
     // Modify breadcrumbs
     .nextra-breadcrumb {
       text-transform: uppercase;
@@ -464,7 +467,7 @@ article img {
         color: colors.$white;
         pointer-events: none;
       }
-  
+
       //   //for the little arrows between breadcrumbs
       //   svg {
       //     opacity: 0.4;
@@ -589,7 +592,7 @@ article img {
       }
 
       .submitButton {
-        background: colors.$purple100 ;
+        background: colors.$purple100;
         color: white;
       }
 
@@ -1032,7 +1035,7 @@ article img {
   //##############################Dark Theme Top Nav###################################
 
   .nextra-nav-container {
-    background-color: colors.$purple50;
+    background-color: #2b273f !important;
     // box-shadow: unset;
     border-color: #1f1f24;
     border-width: 1px;
@@ -1043,7 +1046,7 @@ article img {
     }
 
     .nextra-nav-container-blur {
-      background-color: colors.$purple50;
+      background-color: #2b273f !important; //colors.$darkbg;
       box-shadow: none;
     }
 
@@ -1123,16 +1126,16 @@ article img {
       }
     }
 
-  //ID management banner style
-  .idManagementBanner {
-    .nextra-callout {
-      background-color: #49342d !important;
-      color: #fef089;
+    //ID management banner style
+    .idManagementBanner {
+      .nextra-callout {
+        background-color: #49342d !important;
+        color: #fef089;
+      }
+      position: sticky !important;
+      top: 55px;
+      opacity: 1 !important;
     }
-    position: sticky !important;
-    top: 55px;
-    opacity: 1 !important;
-  }
 
     //modify anchor links hastags
     a.subheading-anchor {
@@ -1262,7 +1265,6 @@ article img {
 
     //Modify Bottom Feedback Area
     .feedbackCollectorContainer {
-
       .feedbackTextArea {
         color: black;
       }
@@ -1272,13 +1274,13 @@ article img {
       }
 
       .submitButton {
-        background: colors.$purple100 ;
+        background: colors.$purple100;
         color: white;
       }
 
       .feedbackButtonContainer {
         .feedbackButton {
-          background-color: #2B273F;
+          background-color: #2b273f;
           color: colors.$purple20;
 
           &:hover {

diff --git a/theme.config.tsx b/theme.config.tsx
@@ -11,6 +11,7 @@ import {
   SupportIcon,
 } from "./components/svg/NavIcon";
 import MainContent from "./components/MainContent/MainContent";
+import SignUpButton from "./components/SignUpButton/SignUpButton";
 
 function renderComponent<T>(ComponentOrNode: FC<T> | ReactNode, props?: T) {
   if (!ComponentOrNode) return null;
@@ -71,6 +72,9 @@ const config: DocsThemeConfig = {
   project: {
     link: "https://github.com/mixpanel/docs",
   },
+  navbar: {
+    extraContent: SignUpButton,
+  },
   primaryHue: { dark: 256, light: 256 },
   // primarySaturation: { dark: 50, light: 100 },
   sidebar: {