fix: preferences dropdown contrast and color (#1591)

packages/web/src/javascripts/Components/Dropdown/Dropdown.tsx

@@ -14,6 +14,7 @@ type DropdownProps = {
   value: string
   onChange: (value: string, item: DropdownItem) => void
   disabled?: boolean
+  className?: string
 }
 
 type ListboxButtonProps = DropdownItem & {
@@ -41,7 +42,7 @@ const CustomDropdownButton: FunctionComponent<ListboxButtonProps> = ({
   </>
 )
 
-const Dropdown: FunctionComponent<DropdownProps> = ({ id, label, items, value, onChange, disabled }) => {
+const Dropdown: FunctionComponent<DropdownProps> = ({ id, label, items, value, onChange, disabled, className }) => {
   const labelId = `${id}-label`
 
   const handleChange = (value: string) => {
@@ -51,7 +52,7 @@ const Dropdown: FunctionComponent<DropdownProps> = ({ id, label, items, value, o
   }
 
   return (
-    <>
+    <div className={className}>
       <VisuallyHidden id={labelId}>{label}</VisuallyHidden>
       <ListboxInput value={value} onChange={handleChange} aria-labelledby={labelId} disabled={disabled}>
         <StyledListboxButton
@@ -85,7 +86,7 @@ const Dropdown: FunctionComponent<DropdownProps> = ({ id, label, items, value, o
           </div>
         </ListboxPopover>
       </ListboxInput>
-    </>
+    </div>
   )
 }
 

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

@@ -1,5 +1,6 @@
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent, useMemo } from 'react'
+import styled from 'styled-components'
 import Dropdown from '../Dropdown/Dropdown'
 import { DropdownItem } from '../Dropdown/DropdownItem'
 import PreferencesMenuItem from './PreferencesComponents/MenuItem'
@@ -9,6 +10,19 @@ 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 { selectedPaneId, selectPane, menuItems } = menu
 
@@ -23,7 +37,7 @@ const PreferencesMenuView: FunctionComponent<Props> = ({ menu }) => {
   )
 
   return (
-    <div className="px-5 pt-2 pb-4 md:px-0 md:py-0">
+    <div className="border-t border-border bg-default px-5 pt-2 pb-6 md:border-0 md:bg-transparent md:px-0 md:py-0">
       <div className="hidden min-w-55 flex-col overflow-y-auto px-3 py-6 md:flex">
         {menuItems.map((pref) => (
           <PreferencesMenuItem
@@ -37,7 +51,7 @@ const PreferencesMenuView: FunctionComponent<Props> = ({ menu }) => {
         ))}
       </div>
       <div className="md:hidden">
-        <Dropdown
+        <StyledDropdown
           id="preferences-menu"
           items={dropdownMenuItems}
           label="Preferences Menu"