Merge remote-tracking branch 'upstream/develop' into account-menu-splitted

# Conflicts:
#	app/assets/stylesheets/_sn.scss

app/assets/javascripts/components/AutocompleteTagInput.tsx

@@ -102,7 +102,7 @@ export const AutocompleteTagInput = observer(({ appState }: Props) => {
       <Disclosure open={dropdownVisible} onChange={showDropdown}>
         <input
           ref={inputRef}
-          className={`${tags.length > 0 ? 'w-80' : 'w-70 mr-10'} bg-default text-xs
+          className={`${tags.length > 0 ? 'w-80' : 'w-70 mr-10'} bg-transparent text-xs
             color-text no-border h-7 focus:outline-none focus:shadow-none focus:border-bottom`}
           value={autocompleteSearchQuery}
           onChange={onSearchQueryChange}

app/assets/javascripts/components/NoteTagsContainer.tsx

@@ -21,7 +21,7 @@ const NoteTagsContainer = observer(({ appState }: Props) => {
 
   return (
       <div
-        className="bg-default flex flex-wrap min-w-80 -mt-1 -mr-2"
+        className="bg-transparent flex flex-wrap min-w-80 -mt-1 -mr-2"
         style={{
           maxWidth: tagsContainerMaxWidth,
         }}

app/assets/javascripts/components/NotesOptionsPanel.tsx

@@ -72,6 +72,7 @@ export const NotesOptionsPanel = observer(({ appState }: Props) => {
           maxHeight,
         }}
         className="sn-dropdown sn-dropdown--animated min-w-80 max-h-120 max-w-xs flex flex-col py-2 overflow-y-auto fixed"
+        onBlur={closeOnBlur}
       >
         {open && (
           <NotesOptions

app/assets/javascripts/components/SearchOptions.tsx

@@ -64,6 +64,7 @@ const SearchOptions = observer(({ appState }: Props) => {
           top: optionsPanelTop,
         }}
         className="sn-dropdown sn-dropdown--anchor-right sn-dropdown--animated min-w-80 absolute grid gap-2 py-2"
+        onBlur={closeOnBlur}
       >
         <Switch
           className="h-10"