How to use the flipper.styled function in flipper

type StateFromProps = {
  selectedDevice: BaseDevice | null | undefined;
  androidEmulators: Array;
  devices: Array;
};

type DispatchFromProps = {
  selectDevice: (device: BaseDevice) => void;
  preferDevice: (device: string) => void;
  setActiveSheet: (sheet: ActiveSheet) => void;
};

type OwnProps = {};

type Props = OwnProps & StateFromProps & DispatchFromProps;
const DropdownButton = styled(Button)({
  fontSize: 11,
});

class DevicesButton extends Component {
  launchEmulator = (name: string) => {
    // On Linux, you must run the emulator from the directory it's in because
    // reasons ...
    which('emulator')
      .then(emulatorPath => {
        if (emulatorPath) {
          const child = spawn(emulatorPath, [`@${name}`], {
            detached: true,
            cwd: dirname(emulatorPath),
          });
          child.stderr.on('data', data => {
            console.error(`Android emulator error: ${data}`);

type OwnProps = {};

type StateFromProps = {
  currentURI: string | undefined;
  selectedDevice: BaseDevice | null | undefined;
};

type DispatchFromProps = {};

type Bookmark = {
  uri: string;
  commonName: string | null;
};

const DropdownButton = styled(Button)({
  fontSize: 11,
});

const shortenText = (text: string, MAX_CHARACTERS = 30): string => {
  if (text.length <= MAX_CHARACTERS) {
    return text;
  } else {
    return (
      text
        .split('')
        .slice(0, MAX_CHARACTERS)
        .join('') + '...'
    );
  }
};

function centerInSidebar(component: any) {
  return styled(component)({
    marginTop: '10px',
    marginBottom: '10px',
    marginLeft: 'auto',
    marginRight: 'auto',
  });
}

value: string;
};

type SandboxState = {
  sandboxes: Array;
  customSandbox: string;
  showFeedback: boolean;
};

const BigButton = styled(Button)({
  flexGrow: 1,
  fontSize: 24,
  padding: 20,
});

const ButtonContainer = styled(FlexColumn)({
  alignItems: 'center',
  padding: 20,
});

export default class SandboxView extends FlipperPlugin<
  SandboxState,
  any,
  unknown
> {
  state: SandboxState = {
    sandboxes: [],
    customSandbox: '',
    showFeedback: false,
  };

  static TextInput = styled.input({

Button,
  styled,
  Text,
  FlexRow,
  Spacer,
  Input,
  Link,
  colors,
} from 'flipper';
import React, {Component} from 'react';
import {writeKeychain, getUser} from '../fb-stubs/user';
import {login} from '../reducers/user';
import {connect} from 'react-redux';
import {State as Store} from '../reducers';

const Container = styled(FlexColumn)({
  padding: 20,
  width: 500,
});

const Title = styled(Text)({
  marginBottom: 6,
  fontWeight: 600,
});

const InfoText = styled(Text)({
  lineHeight: 1.35,
  marginBottom: 15,
});

const TokenInput = styled(Input)({
  marginRight: 0,

backgroundColor: colors.orange,
  color: '#fff',
  maxHeight: '600px',
  overflowY: 'auto',
  overflowX: 'hidden',
  transition: 'max-height 0.3s ease',
  '&.collapsed': {
    maxHeight: '0px',
  },
  padding: '4px 12px',
  borderBottom: '1px solid ' + colors.orangeDark3,
  verticalAlign: 'middle',
  lineHeight: '28px',
});

const ButtonSection = styled(FlexColumn)({
  marginLeft: '8px',
  flexShrink: 0,
  flexGrow: 0,
});

import {setExportStatusComponent, unsetShare} from '../reducers/application';
import {reportPlatformFailures} from '../utils/metrics';
import CancellableExportStatus from './CancellableExportStatus';
import {performance} from 'perf_hooks';
import {Logger} from '../fb-interfaces/Logger';
import {Idler} from '../utils/Idler';
import {
  exportStoreToFile,
  EXPORT_FLIPPER_TRACE_EVENT,
} from '../utils/exportData';
import ShareSheetErrorList from './ShareSheetErrorList';
import ShareSheetPendingDialog from './ShareSheetPendingDialog';
import {ReactReduxContext} from 'react-redux';
import {store} from '../init';

const Container = styled(FlexColumn)({
  padding: 20,
  width: 500,
});

const Center = styled(FlexColumn)({
  alignItems: 'center',
  paddingTop: 50,
  paddingBottom: 50,
});

const ErrorMessage = styled(Text)({
  display: 'block',
  marginTop: 6,
  wordBreak: 'break-all',
  whiteSpace: 'pre-line',
  lineHeight: 1.35,

import React, {PureComponent} from 'react';
import {FlexColumn, Text, styled} from 'flipper';

type Props = {
  errors: Array;
};

const ErrorMessage = styled(Text)({
  display: 'block',
  marginTop: 6,
  wordBreak: 'break-all',
  whiteSpace: 'pre-line',
  lineHeight: 1.35,
});

const Padder = styled('div')(
  ({
    paddingLeft,
    paddingRight,
    paddingBottom,
    paddingTop,
  }: {
    paddingLeft?: number;
    paddingRight?: number;
    paddingBottom?: number;
    paddingTop?: number;
  }) => ({
    paddingLeft: paddingLeft || 0,
    paddingRight: paddingRight || 0,
    paddingBottom: paddingBottom || 0,
    paddingTop: paddingTop || 0,
  }),

fontSize: 11,
  color: colors.light30,
  lineHeight: '14px',
  textOverflow: 'ellipsis',
  overflow: 'hidden',
  whiteSpace: 'nowrap',
});

const ItemImage = styled(FlexBox)({
  alignItems: 'center',
  justifyContent: 'center',
  width: 40,
  flexShrink: 0,
});

const ItemContent = styled('div')({
  minWidth: 0,
  paddingRight: 5,
  flexGrow: 1,
});

const Section = styled('div')({
  maxWidth: 260,
  borderBottom: `1px solid ${colors.light05}`,
  '&:last-child': {
    borderBottom: 'none',
  },
});

const Action = styled(Button)({
  border: `1px solid ${colors.macOSTitleBarButtonBorder}`,
  background: 'transparent',

const FileInputBox = styled(Input)(({isValid}: {isValid: boolean}) => ({
  marginRight: 0,
  flexGrow: 1,
  fontFamily: 'monospace',
  color: isValid ? undefined : colors.red,
  marginLeft: 10,
  marginTop: 'auto',
  marginBottom: 'auto',
}));

const CenteredGlyph = styled(Glyph)({
  margin: 'auto',
  marginLeft: 10,
});

const GreyedOutOverlay = styled('div')({
  backgroundColor: '#EFEEEF',
  borderRadius: 4,
  opacity: 0.6,
  height: '100%',
  position: 'absolute',
  left: 0,
  right: 0,
});

export function FilePathConfigField(props: {
  label: string;
  defaultValue: string;
  onChange: (path: string) => void;
  frozen?: boolean;
}) {
  const [value, setValue] = useState(props.defaultValue);