separate theme based styles

facebook · Nov 2, 2021 · 995ef1a · 995ef1a
1 parent b101aed
commit 995ef1a
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 9 deletions.
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.css b/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.css
@@ -73,14 +73,11 @@
   background: var(--color-button-background-focus);
 }
 
-.ModalDark[data-reach-menu-list], .ModalLight[data-reach-menu-list] {
+.Modal[data-reach-menu-list] {
   display: inline-flex;
   flex-direction: column;
-  background-color: var(--light-color-background);
-  color: var(--light-color-button);
   padding: 0.25rem 0;
   padding-right: 0;
-  border: 1px solid var(--light-color-border);
   border-radius: 0.25rem;
   max-height: 10rem;
   overflow: auto;
@@ -93,10 +90,16 @@
   font-size: var(--font-size-monospace-normal);
 }
 
-.ModalDark[data-reach-menu-list] {
+.ModalDark {
+  background-color: var(--dark-color-background);
   border: 1px solid var(--dark-color-border);
   color: var(--dark-color-button);
-  background-color: var(--dark-color-background);
+}
+
+.ModalLight {
+  background-color: var(--light-color-background);
+  border: 1px solid var(--light-color-border);
+  color: var(--light-color-button);
 }
 
 .NotInStore,

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js b/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js
@@ -30,7 +30,7 @@ import {StoreContext} from '../context';
 import type {SerializedElement} from './types';
 
 import styles from './OwnersStack.css';
-import { SettingsContext } from '../Settings/SettingsContext';
+import {SettingsContext} from '../Settings/SettingsContext';
 
 type SelectOwner = (owner: SerializedElement | null) => void;
 
@@ -209,7 +209,7 @@ function ElementsDropdown({
   selectOwner,
 }: ElementsDropdownProps) {
   const store = useContext(StoreContext);
-  const { theme, browserTheme } = useContext(SettingsContext);
+  const {theme, browserTheme} = useContext(SettingsContext);
   const isLightTheme = (theme === 'auto' ? browserTheme : theme) === 'light';
 
   const menuItems = [];
@@ -241,7 +241,10 @@ function ElementsDropdown({
           </span>
         </Tooltip>
       </MenuButton>
-      <MenuList className={isLightTheme ? styles.ModalLight : styles.ModalDark}>
+      <MenuList
+        className={`${styles.Modal} ${
+          isLightTheme ? styles.ModalLight : styles.ModalDark
+        }`}>
         {menuItems}
       </MenuList>
     </Menu>