jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Dark mode support

Browse Source 
Summary:
This change addresses some obvious issues which made the ui-debugger unusable with dark mode on.

There may more things that need changing, but at the very least this should be a good place to start.

Reviewed By: fabiomassimo

Differential Revision: D43083218

fbshipit-source-id: 8e4338b79178d3a0f05f9bcaffa2fc6f35eb0e21
This commit is contained in:
Lorenzo Blasa
2023-02-07 07:58:12 -08:00
committed by Facebook GitHub Bot
parent 9c9cd91832
commit 39a4cc22b1
2 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
desktop/plugins/public/ui-debugger/components/Tree.tsx
View File

@@ -348,7 +348,7 @@ const TreeItemRow = styled.li<{
? 'rgba(255,0,0,.3)' ? 'rgba(255,0,0,.3)'
: isSelected : isSelected
? theme.selectionBackgroundColor ? theme.selectionBackgroundColor
: theme.white, : theme.backgroundDefault,
})); }));
function ExpandedIconOrSpace(props: { function ExpandedIconOrSpace(props: {

12
desktop/plugins/public/ui-debugger/components/sidebar/Inspector.tsx
View File

@@ -10,7 +10,7 @@
import React from 'react'; import React from 'react';
// eslint-disable-next-line rulesdir/no-restricted-imports-clone // eslint-disable-next-line rulesdir/no-restricted-imports-clone
import {Glyph} from 'flipper'; import {Glyph} from 'flipper';
import {Layout, Tab, Tabs} from 'flipper-plugin'; import {Layout, Tab, Tabs, theme} from 'flipper-plugin';
import {Metadata, MetadataId, UINode} from '../../types'; import {Metadata, MetadataId, UINode} from '../../types';
import {IdentityInspector} from './inspector/IdentityInspector'; import {IdentityInspector} from './inspector/IdentityInspector';
import {AttributesInspector} from './inspector/AttributesInspector'; import {AttributesInspector} from './inspector/AttributesInspector';
@@ -33,7 +33,7 @@ export const Inspector: React.FC<Props> = ({node, metadata}) => {
tab={ tab={
<Tooltip title="Identity"> <Tooltip title="Identity">
<Layout.Horizontal center> <Layout.Horizontal center>
<Glyph name="badge" size={16} /> <Glyph name="badge" size={16} color={theme.primaryColor} />
</Layout.Horizontal> </Layout.Horizontal>
</Tooltip> </Tooltip>
}> }>
@@ -44,7 +44,7 @@ export const Inspector: React.FC<Props> = ({node, metadata}) => {
tab={ tab={
<Tooltip title="Attributes"> <Tooltip title="Attributes">
<Layout.Horizontal center> <Layout.Horizontal center>
<Glyph name="data-table" size={16} /> <Glyph name="data-table" size={16} color={theme.primaryColor} />
</Layout.Horizontal> </Layout.Horizontal>
</Tooltip> </Tooltip>
}> }>
@@ -58,7 +58,11 @@ export const Inspector: React.FC<Props> = ({node, metadata}) => {
tab={ tab={
<Tooltip title="Layout"> <Tooltip title="Layout">
<Layout.Horizontal center> <Layout.Horizontal center>
<Glyph name="square-ruler" size={16} /> <Glyph
name="square-ruler"
size={16}
color={theme.primaryColor}
/>
</Layout.Horizontal> </Layout.Horizontal>
</Tooltip> </Tooltip>
}> }>