IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

updates component with the new theme model (#33387)

Browse Source
This commit is contained in:
Uchechukwu Obasi 2021-04-27 15:51:57 +01:00 committed by GitHub
parent adcba36d39
commit fce40fff63
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/grafana-ui/src/components/ColorPicker/ColorInput.tsx
View File

@ -4,8 +4,8 @@ import { debounce } from 'lodash';
import { ColorPickerProps } from './ColorPickerPopover'; import { ColorPickerProps } from './ColorPickerPopover';
import { Input } from '../Input/Input'; import { Input } from '../Input/Input';
import { useStyles } from '../../themes'; import { useStyles2 } from '../../themes';
import { GrafanaTheme } from '@grafana/data'; import { GrafanaThemeV2 } from '@grafana/data';
import { cx, css } from '@emotion/css'; import { cx, css } from '@emotion/css';
interface ColorInputState { interface ColorInputState {
@ -88,7 +88,7 @@ interface ColorPreviewProps {
} }
const ColorPreview = ({ color }: ColorPreviewProps) => { const ColorPreview = ({ color }: ColorPreviewProps) => {
const styles = useStyles(getColorPreviewStyles); const styles = useStyles2(getColorPreviewStyles);
return ( return (
<div <div
@ -102,9 +102,9 @@ const ColorPreview = ({ color }: ColorPreviewProps) => {
); );
}; };
const getColorPreviewStyles = (theme: GrafanaTheme) => css` const getColorPreviewStyles = (theme: GrafanaThemeV2) => css`
height: 100%; height: 100%;
width: ${theme.spacing.formInputHeight}px; width: ${theme.spacing.gridSize * 4}px;
border-radius: ${theme.border.radius.sm} 0 0 ${theme.border.radius.sm}; border-radius: ${theme.shape.borderRadius()} 0 0 ${theme.shape.borderRadius()};
border: 1px solid ${theme.colors.formInputBorder}; border: 1px solid ${theme.colors.border.medium};
`; `;