Files
flipper/desktop/plugins/public/ui-debugger/components/sidebar/inspector/Styles.tsx
Luke De Feo 25149cc8c9 Added bgs on android ID + cleanup
Summary:
Paddings and alignments were improved also

changelog:
UIDebugger - Added ability to big grep search based on android ID if available

Reviewed By: lblasa

Differential Revision: D43159228

fbshipit-source-id: e2d7190ea2411e936ba065328bcc375c64619e8f
2023-02-15 08:27:19 -08:00

120 lines
2.5 KiB
TypeScript

/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
*/
import {theme} from 'flipper-plugin';
export const InspectorStyle = {
strokeColor: '#4A5967',
outerFillColor: '#F2F3F7',
innerFillColor: '#CCD1D9',
spaceBox: {
size: 180,
margin: 10,
separator: 4,
},
bounds: {
size: 180,
multiplier: 0.4,
margin: 4,
separator: 10,
},
} as const;
export const BottomBorder = {
borderStyle: 'solid',
borderColor: theme.dividerColor,
borderWidth: '0 0 1px 0',
};
export const RowStyle = {
...BottomBorder,
marginTop: 4,
marginBottom: 4,
} as const;
export const ObjectContainerStyle = {
borderLeftWidth: 5,
borderLeftColor: 'transparent',
borderLeftStyle: 'solid',
} as const;
export const DefaultInputContainerStyle = {
margin: 'auto',
padding: '2px',
minWidth: '50px',
backgroundColor: theme.backgroundDefault,
borderRadius: '5px',
boxShadow: '0 0 0 1px rgba(0,0,0,.2)',
display: 'inline-block',
} as const;
export const NumberAttributeValueStyle = {
color: theme.semanticColors.numberValue,
display: 'flex',
} as const;
export const BooleanAttributeValueStyle = {
color: theme.semanticColors.booleanValue,
fontSize: theme.fontSize.small,
alignItems: 'center',
} as const;
export const TextAttributeValueStyle = {
color: theme.semanticColors.stringValue,
display: 'flex',
} as const;
export const EnumAttributeValueStyle = {
color: theme.semanticColors.stringValue,
fontSize: theme.fontSize.small,
margin: 'auto',
} as const;
export const CenteredNumberStyle = {
textAlign: 'center',
color: theme.semanticColors.numberValue,
} as const;
export const CenteredTextStyle = {
textAlign: 'center',
} as const;
export const CenteredContentStyle = {
paddingLeft: '20%',
paddingRight: '20%',
} as const;
export const CenteredHeadingContentStyle = {
...CenteredContentStyle,
fontSize: theme.fontSize.small,
} as const;
export const ColorOuterButtonStyle = {
padding: '5px',
backgroundColor: '#fff',
borderRadius: '5px',
boxShadow: '0 0 0 1px rgba(0,0,0,.1)',
display: 'inline-block',
cursor: 'pointer',
} as const;
export const ColorInnerButtonStyle = {
width: '36px',
height: '14px',
borderRadius: '2px',
} as const;
export const AutoMarginStyle = {
margin: 'auto',
} as const;
export const TopSpacedContainerStyle = {
marginTop: 10,
} as const;