fix QuickSelect style

chanzuckerberg · Dec 14, 2022 · 1bb7c05 · 1bb7c05
1 parent 97f5258
commit 1bb7c05
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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,15 +198,17 @@ export default function QuickSelect<
       return;
     }
     const { nativeEvent } = e;
+
     if (
       (nativeEvent instanceof FocusEvent &&
         nativeEvent.relatedTarget instanceof Element &&
         nativeEvent.relatedTarget?.id !== `${dataTestId}-id`) ||
       (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
@@ -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};
+    }
+  }
+`;