diff --git a/components/Search/Search.module.scss b/components/Search/Search.module.scss
index 34a300ca7b..40ebef79d9 100644
--- 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;
- }
-}
\ No newline at end of file
+@media (max-width: 800px) {
+ .searchBar {
+ display: none;
+ }
+
+ .icon {
+ width: 20px;
+ }
+}
diff --git a/components/SignUpButton/SignUpButton.module.scss b/components/SignUpButton/SignUpButton.module.scss
new file mode 100644
index 0000000000..6006751ae1
--- /dev/null
+++ 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
new file mode 100644
index 0000000000..e31e3fe52a
--- /dev/null
+++ b/components/SignUpButton/SignUpButton.tsx
@@ -0,0 +1,9 @@
+import style from "./SignUpButton.module.scss";
+
+export default function SignUpButton() {
+ return (
+
+ Sign Up
+
+ );
+}
diff --git a/pages/_meta.json b/pages/_meta.json
index f55c3f7c6e..f2abdd62bc 100644
--- 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
index 573b7889e2..44602f65f5 100644
--- 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
index 17a860105c..81401500c0 100644
--- 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(ComponentOrNode: FC | 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: {