Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(devtools): update menu list css #22660

Closed
wants to merge 3 commits into from
Closed

fix(devtools): update menu list css #22660

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0de8cc2
fix(devtools): update menu list css
jyash97 Oct 30, 2021
b101aed
revert tabIndex change
jyash97 Oct 30, 2021
995ef1a
separate theme based styles
jyash97 Nov 1, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
16 changes: 12 additions & 4 deletions packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.css
View file
Open in desktop
Expand Up @@ -76,24 +76,32 @@
.Modal[data-reach-menu-list] {
display: inline-flex;
flex-direction: column;
background-color: var(--color-background);
color: var(--color-button);
padding: 0.25rem 0;
padding-right: 0;
border: 1px solid var(--color-border);
border-radius: 0.25rem;
max-height: 10rem;
overflow: auto;

/* Make sure this is above the DevTools, which are above the Overlay */
z-index: 10000002;
position: relative;

/* Reach UI tries to set its own :( */
font-family: var(--font-family-monospace);
font-size: var(--font-size-monospace-normal);
}

.ModalDark {
background-color: var(--dark-color-background);
border: 1px solid var(--dark-color-border);
color: var(--dark-color-button);
}

.ModalLight {
background-color: var(--light-color-background);
border: 1px solid var(--light-color-border);
color: var(--light-color-button);
}

.NotInStore,
.NotInStore:hover {
color: var(--color-dimmest);
Expand Down
10 changes: 9 additions & 1 deletion packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js
View file
Open in desktop
Expand Up @@ -30,6 +30,7 @@ import {StoreContext} from '../context';
import type {SerializedElement} from './types';

import styles from './OwnersStack.css';
import {SettingsContext} from '../Settings/SettingsContext';

type SelectOwner = (owner: SerializedElement | null) => void;

Expand Down Expand Up @@ -208,6 +209,8 @@ function ElementsDropdown({
selectOwner,
}: ElementsDropdownProps) {
const store = useContext(StoreContext);
const {theme, browserTheme} = useContext(SettingsContext);
const isLightTheme = (theme === 'auto' ? browserTheme : theme) === 'light';

const menuItems = [];
for (let index = owners.length - 1; index >= 0; index--) {
Expand Down Expand Up @@ -238,7 +241,12 @@ function ElementsDropdown({
</span>
</Tooltip>
</MenuButton>
<MenuList className={styles.Modal}>{menuItems}</MenuList>
<MenuList
className={`${styles.Modal} ${
isLightTheme ? styles.ModalLight : styles.ModalDark
}`}>
{menuItems}
</MenuList>
</Menu>
);
}
Expand Down
8 changes: 7 additions & 1 deletion packages/react-devtools-shared/src/devtools/views/root.css
View file
Open in desktop
Expand Up @@ -10,12 +10,18 @@
--light-color-scroll-track: #fafafa;
--light-color-tooltip-background: rgba(0, 0, 0, 0.9);
--light-color-tooltip-text: #ffffff;
--light-color-background: #ffffff;
--light-color-border: #eeeeee;
--light-color-button: #5f6673;

/* Dark theme */
--dark-color-scroll-thumb: #afb3b9;
--dark-color-scroll-track: #313640;
--dark-color-tooltip-background: rgba(255, 255, 255, 0.95);
--dark-color-tooltip-text: #000000;
--dark-color-background: #282c34;
--dark-color-border: #3d424a;
--dark-color-button: #afb3b9;

/* Font smoothing */
--font-smoothing: auto;
Expand All @@ -33,4 +39,4 @@
Courier, monospace;
--font-family-sans: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,
Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}
}