From 1bb7c05741e44aeacd921ef15d88feb788f3d1b2 Mon Sep 17 00:00:00 2001
From: Timmy Huang <thuang@chanzuckerberg.com>
Date: Tue, 13 Dec 2022 18:36:27 -0800
Subject: [PATCH] fix QuickSelect style

---
 frontend/src/common/theme.ts                      |  2 ++
 frontend/src/pages/docs/[...slug].tsx             |  5 +++--
 .../components/QuickSelect/index.tsx              | 14 ++++++++++----
 .../GeneSearchBar/components/QuickSelect/style.ts | 15 +++++++++++++++
 4 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/frontend/src/common/theme.ts b/frontend/src/common/theme.ts
index 8f8a5c4b97265..dc6186a99e729 100644
--- a/frontend/src/common/theme.ts
+++ b/frontend/src/common/theme.ts
@@ -186,3 +186,5 @@ themeOptions.colors.info = infoColors;
 const appTheme = makeThemeOptions(themeOptions);
 
 export const theme = createTheme(appTheme);
+
+export const OFF_WHITE = "#f8f8f8";
diff --git a/frontend/src/pages/docs/[...slug].tsx b/frontend/src/pages/docs/[...slug].tsx
index 5cd9e2f6f4b33..6788eb38adc7a 100644
--- a/frontend/src/pages/docs/[...slug].tsx
+++ b/frontend/src/pages/docs/[...slug].tsx
@@ -16,6 +16,7 @@ import pathTool from "path";
 import { Fragment, memo, useState } from "react";
 import rehypeSlug from "rehype-slug";
 import { noop } from "src/common/constants/utils";
+import { OFF_WHITE } from "src/common/theme";
 import EmbeddedGoogleSlides from "src/components/EmbeddedGoogleSlides";
 import Layout from "src/components/Layout";
 import { StyledDocsLayout } from "src/components/Layout/style";
@@ -263,7 +264,7 @@ interface Props {
 }
 
 const StyledLeftNav = styled.div`
-  background-color: #f8f8f8;
+  background-color: ${OFF_WHITE};
   border-right: 1px solid #eaeaea;
   grid-area: leftsidebar;
   width: 100%;
@@ -278,7 +279,7 @@ const StyledLeftNav = styled.div`
 
   ::-webkit-scrollbar-thumb {
     background-clip: padding-box;
-    border-right: 4px #f8f8f8 solid;
+    border-right: 4px ${OFF_WHITE} solid;
     background-color: grey;
   }
 `;
diff --git a/frontend/src/views/WheresMyGene/components/GeneSearchBar/components/QuickSelect/index.tsx b/frontend/src/views/WheresMyGene/components/GeneSearchBar/components/QuickSelect/index.tsx
index 44eba35df42b7..f5e025c88ea34 100644
--- a/frontend/src/views/WheresMyGene/components/GeneSearchBar/components/QuickSelect/index.tsx
+++ b/frontend/src/views/WheresMyGene/components/GeneSearchBar/components/QuickSelect/index.tsx
@@ -1,4 +1,3 @@
-import { Popper } from "@mui/material";
 import { AutocompleteRenderOptionState } from "@mui/material/Autocomplete";
 import {
   AutocompleteCloseReason,
@@ -34,6 +33,7 @@ import {
   ButtonWrapper,
   StyledButtonText,
   StyledMenuItem,
+  StyledPopper,
   StyledSelectButton,
 } from "./style";
 
@@ -198,6 +198,7 @@ export default function QuickSelect<
       return;
     }
     const { nativeEvent } = e;
+
     if (
       (nativeEvent instanceof FocusEvent &&
         nativeEvent.relatedTarget instanceof Element &&
@@ -205,8 +206,9 @@ export default function QuickSelect<
       (nativeEvent instanceof FocusEvent &&
         !(nativeEvent.relatedTarget instanceof Element)) ||
       !(nativeEvent instanceof FocusEvent)
-    )
+    ) {
       setOpen(false);
+    }
 
     setInput("");
   };
@@ -267,7 +269,11 @@ export default function QuickSelect<
           {text}
         </StyledSelectButton>
       </ButtonWrapper>
-      <Popper open={open} className={classes.popper} anchorEl={ref.current}>
+      <StyledPopper
+        open={open}
+        className={classes.popper}
+        anchorEl={ref.current}
+      >
         <MenuSelect
           open
           PopperComponent={DropdownPopper}
@@ -302,7 +308,7 @@ export default function QuickSelect<
               : "No options"
           }
         />
-      </Popper>
+      </StyledPopper>
     </>
   );
 
diff --git a/frontend/src/views/WheresMyGene/components/GeneSearchBar/components/QuickSelect/style.ts b/frontend/src/views/WheresMyGene/components/GeneSearchBar/components/QuickSelect/style.ts
index a2f21176cbb32..5e0d4413da01d 100644
--- a/frontend/src/views/WheresMyGene/components/GeneSearchBar/components/QuickSelect/style.ts
+++ b/frontend/src/views/WheresMyGene/components/GeneSearchBar/components/QuickSelect/style.ts
@@ -1,5 +1,7 @@
 import styled from "@emotion/styled";
+import { autocompleteClasses, Popper } from "@mui/material";
 import { Button, ButtonIcon, MenuItem } from "czifui";
+import { OFF_WHITE } from "src/common/theme";
 
 export const ButtonWrapper = styled.div`
   display: flex;
@@ -29,3 +31,16 @@ export const StyledButtonText = styled.span`
 export const StyledFixedSizeList = styled.span`
   background-color: pink;
 `;
+
+export const StyledPopper = styled(Popper)`
+  /* Overwrite default MUI styles */
+  && {
+    .${autocompleteClasses.focused}[aria-selected="true"] {
+      background-color: transparent;
+    }
+
+    .${autocompleteClasses.focused}:hover {
+      background-color: ${OFF_WHITE};
+    }
+  }
+`;