diff --git a/src/components/mobileMenu/index.tsx b/src/components/mobileMenu/index.tsx
index 1af66a793674c..7593d558ecd2f 100644
--- a/src/components/mobileMenu/index.tsx
+++ b/src/components/mobileMenu/index.tsx
@@ -1,6 +1,6 @@
'use client';
-import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
import {TriangleRightIcon} from '@radix-ui/react-icons';
+import * as Popover from '@radix-ui/react-popover';
import {Box, Button, Theme} from '@radix-ui/themes';
import Link from 'next/link';
@@ -19,8 +19,8 @@ export function MobileMenu({pathname, searchPlatforms}: Props) {
return (
-
-
+
+
-
+
-
+
-
+
-
+
-
-
+
+
-
+
Changelog
-
-
+
+
Sandbox
-
-
+
+
Go to Sentry
-
-
+
+
Get Started
-
-
+
+
-
-
+
+
);
}
diff --git a/src/components/mobileMenu/styles.module.scss b/src/components/mobileMenu/styles.module.scss
index ed0bbe2ccce0d..5f054ed01652d 100644
--- a/src/components/mobileMenu/styles.module.scss
+++ b/src/components/mobileMenu/styles.module.scss
@@ -1,19 +1,17 @@
:global(.dark) {
- .DropdownMenuContent,
- .DropdownMenuSubContent {
+ .PopoverContent {
background-color: var(--gray-2);
}
- .DropdownMenuItem[data-highlighted],
- .DropdownMenuSeparator {
+ .MenuItem[data-highlighted],
+ .PopoverSeparator {
background-color: var(--gray-4);
}
- .DropdownMenuItem {
+ .MenuItem {
color: var(--foreground-primary);
}
}
-.DropdownMenuContent,
-.DropdownMenuSubContent {
+.PopoverContent {
// the portal is rendered outside the area where the font is defined
font-family: var(--font-rubik);
box-sizing: border-box;
@@ -28,7 +26,7 @@
@media screen and (max-width: 768px) {
padding: 1rem;
- width: var(--radix-dropdown-menu-content-available-width);
+ width: var(--radix-popover-content-available-width);
input {
padding: 0.5rem 1rem;
@@ -40,25 +38,23 @@
}
}
-.DropdownMenuContent[data-side='top'],
-.DropdownMenuSubContent[data-side='top'] {
+.PopoverContent[data-side='top'] {
animation-name: slideDownAndFade;
}
-.DropdownMenuContent[data-side='right'],
-.DropdownMenuSubContent[data-side='right'] {
+.PopoverContent[data-side='right'] {
animation-name: slideLeftAndFade;
}
-.DropdownMenuContent[data-side='bottom'] {
+.PopoverContent[data-side='bottom'] {
animation-name: slideUpAndFade;
}
-.DropdownMenuContent[data-side='left'] {
+.PopoverContent[data-side='left'] {
animation-name: slideRightAndFade;
}
-.DropdownMenuItem {
+.MenuItem {
text-decoration: none;
font-weight: 500;
font-size: 1rem;
@@ -72,16 +68,23 @@
position: relative;
user-select: none;
outline: none;
+ a {
+ text-decoration: none !important;
+ color: var(--darkPurple);
+ }
+ > div {
+ width: 100%;
+ }
}
-.DropdownMenuItem[data-highlighted] {
+.MenuItem[data-highlighted] {
background-color: var(--accent-purple-light);
}
-.DropdownMenuSeparator {
+.MenuSeparator {
height: 1px;
- background-color: var(--accent-purple-light);
- margin-top: 0.75rem;
+ background-color: var(--gray-4);
+ margin-top: 1.5rem;
margin-bottom: 0.75rem;
margin-left: 1rem;
margin-right: 1rem;
diff --git a/src/components/search/index.tsx b/src/components/search/index.tsx
index f14a3b15db2f5..c8a9997e6cd5d 100644
--- a/src/components/search/index.tsx
+++ b/src/components/search/index.tsx
@@ -299,9 +299,6 @@ export function Search({
onChange={({target: {value}}) => searchFor(value)}
onFocus={() => setInputFocus(true)}
ref={inputRef}
- onKeyDown={ev => {
- ev.stopPropagation();
- }}
/>
{inputFocus ? 'esc' : '⌘K'}