Files
flipper/desktop/flipper-ui-core/src/ui/components/ToolbarIcon.tsx
Michel Weststrate 7e50c0466a Move app/src (mostly) to flipper-ui-core/src
Summary:
This diff moves all UI code from app/src to app/flipper-ui-core. That is now slightly too much (e.g. node deps are not removed yet), but from here it should be easier to move things out again, as I don't want this diff to be open for too long to avoid too much merge conflicts.

* But at least flipper-ui-core is Electron free :)
* Killed all cross module imports as well, as they where now even more in the way
* Some unit test needed some changes, most not too big (but emotion hashes got renumbered in the snapshots, feel free to ignore that)
* Found some files that were actually meaningless (tsconfig in plugins, WatchTools files, that start generating compile errors, removed those

Follow up work:
* make flipper-ui-core configurable, and wire up flipper-server-core in Electron instead of here
* remove node deps (aigoncharov)
* figure out correct place to load GKs, plugins, make intern requests etc., and move to the correct module
* clean up deps

Reviewed By: aigoncharov

Differential Revision: D32427722

fbshipit-source-id: 14fe92e1ceb15b9dcf7bece367c8ab92df927a70
2021-11-16 05:29:21 -08:00

50 lines
1.2 KiB
TypeScript

/**
* Copyright (c) Facebook, Inc. and its 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 Glyph from './Glyph';
import Tooltip from './Tooltip';
import {colors} from './colors';
import styled from '@emotion/styled';
import React from 'react';
import {Tracked} from 'flipper-plugin';
type Props = React.ComponentProps<typeof ToolbarIconContainer> & {
active?: boolean;
icon: string;
title: string;
onClick: () => void;
};
const ToolbarIconContainer = styled.div({
marginRight: 9,
marginTop: -3,
marginLeft: 4,
position: 'relative', // for settings popover positioning
});
export default function ToolbarIcon({active, icon, title, ...props}: Props) {
return (
<Tooltip title={title}>
<Tracked action={title}>
<ToolbarIconContainer {...props}>
<Glyph
name={icon}
size={16}
color={
active
? colors.macOSTitleBarIconSelected
: colors.macOSTitleBarIconActive
}
/>
</ToolbarIconContainer>
</Tracked>
</Tooltip>
);
}