Dark theme for calling device selection
This commit is contained in:
parent
31c2fe56f4
commit
a9367f48f1
10 changed files with 70 additions and 36 deletions
|
@ -3,6 +3,7 @@
|
|||
|
||||
import React from 'react';
|
||||
import { Manager, Reference, Popper } from 'react-popper';
|
||||
import { Theme, themeClassName } from '../util/theme';
|
||||
|
||||
export enum TooltipPlacement {
|
||||
Top = 'top',
|
||||
|
@ -11,17 +12,11 @@ export enum TooltipPlacement {
|
|||
Left = 'left',
|
||||
}
|
||||
|
||||
export enum TooltipTheme {
|
||||
System = 'system',
|
||||
Light = 'light',
|
||||
Dark = 'dark',
|
||||
}
|
||||
|
||||
export type PropsType = {
|
||||
content: string | JSX.Element;
|
||||
direction?: TooltipPlacement;
|
||||
sticky?: boolean;
|
||||
theme?: TooltipTheme;
|
||||
theme?: Theme;
|
||||
};
|
||||
|
||||
export const Tooltip: React.FC<PropsType> = ({
|
||||
|
@ -29,19 +24,12 @@ export const Tooltip: React.FC<PropsType> = ({
|
|||
content,
|
||||
direction,
|
||||
sticky,
|
||||
theme = TooltipTheme.System,
|
||||
theme,
|
||||
}) => {
|
||||
const isSticky = Boolean(sticky);
|
||||
const [showTooltip, setShowTooltip] = React.useState(isSticky);
|
||||
|
||||
let tooltipTheme: string;
|
||||
if (theme === TooltipTheme.Light) {
|
||||
tooltipTheme = 'light-theme';
|
||||
} else if (theme === TooltipTheme.Dark) {
|
||||
tooltipTheme = 'dark-theme';
|
||||
} else {
|
||||
tooltipTheme = '';
|
||||
}
|
||||
const tooltipTheme = theme ? themeClassName(theme) : undefined;
|
||||
|
||||
return (
|
||||
<Manager>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue