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'}