refactor: migrate dropdowns from reach-ui (#2315)

packages/web/src/javascripts/Components/Preferences/Panes/Appearance.tsx

@@ -127,15 +127,11 @@ const Appearance: FunctionComponent<Props> = ({ application }) => {
               <Text>Theme to be used for system light mode:</Text>
               <div className="mt-2">
                 <Dropdown
-                  id="auto-light-theme-dropdown"
                   label="Select the automatic light theme"
                   items={themeItems}
                   value={autoLightTheme}
                   onChange={changeAutoLightTheme}
                   disabled={!useDeviceSettings}
-                  classNameOverride={{
-                    popover: '!z-modal',
-                  }}
                 />
               </div>
             </div>
@@ -145,15 +141,11 @@ const Appearance: FunctionComponent<Props> = ({ application }) => {
               <Text>Theme to be used for system dark mode:</Text>
               <div className="mt-2">
                 <Dropdown
-                  id="auto-dark-theme-dropdown"
                   label="Select the automatic dark theme"
                   items={themeItems}
                   value={autoDarkTheme}
                   onChange={changeAutoDarkTheme}
                   disabled={!useDeviceSettings}
-                  classNameOverride={{
-                    popover: '!z-modal',
-                  }}
                 />
               </div>
             </div>

packages/web/src/javascripts/Components/Preferences/Panes/Appearance/EditorAppearance.tsx

@@ -94,14 +94,10 @@ const EditorDefaults = ({ application }: Props) => {
             <Text>Sets the font size in plaintext and Super notes</Text>
             <div className="mt-2">
               <Dropdown
-                id="def-font-size"
                 label="Select the font size for plaintext notes"
                 items={fontSizeDropdownOptions}
                 value={fontSize}
                 onChange={handleFontSizeChange}
-                classNameOverride={{
-                  popover: '!z-modal',
-                }}
               />
             </div>
           </div>
@@ -111,14 +107,10 @@ const EditorDefaults = ({ application }: Props) => {
             <Text>Sets the line height (leading) in plaintext and Super notes</Text>
             <div className="mt-2">
               <Dropdown
-                id="def-line-height"
                 label="Select the line height for plaintext notes"
                 items={lineHeightDropdownOptions}
                 value={lineHeight}
                 onChange={handleLineHeightChange}
-                classNameOverride={{
-                  popover: '!z-modal',
-                }}
               />
             </div>
           </div>

packages/web/src/javascripts/Components/Preferences/Panes/Backups/EmailBackups.tsx

@@ -125,14 +125,10 @@ const EmailBackups = ({ application }: Props) => {
               <Spinner className="h-4 w-4" />
             ) : (
               <Dropdown
-                id="def-editor-dropdown"
                 label="Select email frequency"
                 items={emailFrequencyOptions}
                 value={emailFrequency}
                 onChange={handleEmailFrequencyChange}
-                classNameOverride={{
-                  popover: '!z-modal',
-                }}
               />
             )}
           </div>

packages/web/src/javascripts/Components/Preferences/Panes/General/SmartViews/EditSmartViewModal.tsx

@@ -131,7 +131,6 @@ const EditSmartViewModal = ({ controller, platform }: Props) => {
                   }}
                   platform={platform}
                   useIconGrid={true}
-                  portalDropdown={false}
                 />
               </div>
             </Popover>

packages/web/src/javascripts/Components/Preferences/PreferencesMenuView.tsx

@@ -1,6 +1,5 @@
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent, useCallback, useMemo } from 'react'
-import styled from 'styled-components'
 import Dropdown from '../Dropdown/Dropdown'
 import { DropdownItem } from '../Dropdown/DropdownItem'
 import PreferencesMenuItem from './PreferencesComponents/MenuItem'
@@ -14,19 +13,6 @@ type Props = {
   menu: PreferencesMenu
 }
 
-const StyledDropdown = styled(Dropdown)`
-  [data-reach-listbox-button] {
-    background: var(--sn-stylekit-contrast-background-color);
-    color: var(--sn-stylekit-info-color);
-    font-weight: bold;
-    padding: 0.55rem 0.875rem;
-
-    [data-reach-listbox-arrow] svg {
-      fill: var(--sn-stylekit-info-color);
-    }
-  }
-`
-
 const PreferencesMenuView: FunctionComponent<Props> = ({ menu }) => {
   const application = useApplication()
   const { selectedPaneId, selectPane, menuItems } = menu
@@ -83,8 +69,7 @@ const PreferencesMenuView: FunctionComponent<Props> = ({ menu }) => {
         ))}
       </div>
       <div className="md:hidden">
-        <StyledDropdown
-          id="preferences-menu"
+        <Dropdown
           items={dropdownMenuItems}
           label="Preferences Menu"
           value={selectedPaneId}
@@ -94,8 +79,8 @@ const PreferencesMenuView: FunctionComponent<Props> = ({ menu }) => {
           classNameOverride={{
             wrapper: 'relative',
             popover: 'bottom-full w-full max-h-max',
+            button: 'focus:outline-none focus:shadow-none focus:ring-none',
           }}
-          portal={false}
         />
       </div>
     </div>