IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-24 18:00:31 -06:00
Code Issues Packages Projects Releases Wiki Activity

Datasource Picker: Invert the builtin svg logos on light mode (#71684)

Browse Source 
* Invert the builtin svg logos on light mode

* Empty-Commit
This commit is contained in:
Kristina 2023-08-30 11:11:42 -05:00 committed by GitHub
parent 2794b8628e
commit cd2dcba484
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
public/app/features/datasources/components/picker/DataSourceCard.tsx
View File

@ -2,7 +2,7 @@ import { css, cx } from '@emotion/css';
import React from 'react';
import { DataSourceInstanceSettings, GrafanaTheme2 } from '@grafana/data';
import { Card, TagList, useStyles2 } from '@grafana/ui';
import { Card, TagList, useTheme2 } from '@grafana/ui';
interface DataSourceCardProps {
ds: DataSourceInstanceSettings;
@ -12,7 +12,8 @@ interface DataSourceCardProps {
}
export function DataSourceCard({ ds, onClick, selected, description, ...htmlProps }: DataSourceCardProps) {
const styles = useStyles2(getStyles);
const theme = useTheme2();
const styles = getStyles(theme, ds.meta.builtIn);
return (
<Card
@ -37,7 +38,7 @@ export function DataSourceCard({ ds, onClick, selected, description, ...htmlProp
}
// Get styles for the component
function getStyles(theme: GrafanaTheme2) {
function getStyles(theme: GrafanaTheme2, builtIn = false) {
return {
card: css`
cursor: pointer;
@ -75,6 +76,7 @@ function getStyles(theme: GrafanaTheme2) {
> img {
max-height: 100%;
min-width: 24px;
filter: invert(${builtIn && theme.isLight ? 1 : 0});
}
`,
name: css`

8
public/app/features/datasources/components/picker/DataSourceLogo.tsx
View File

@ -2,7 +2,7 @@ import { css } from '@emotion/css';
import React from 'react';
import { DataSourceInstanceSettings, DataSourceJsonData, GrafanaTheme2 } from '@grafana/data';
import { useStyles2 } from '@grafana/ui';
import { useStyles2, useTheme2 } from '@grafana/ui';
export interface DataSourceLogoProps {
dataSource: DataSourceInstanceSettings<DataSourceJsonData> | undefined;
@ -10,7 +10,8 @@ export interface DataSourceLogoProps {
export function DataSourceLogo(props: DataSourceLogoProps) {
const { dataSource } = props;
const styles = useStyles2(getStyles);
const theme = useTheme2();
const styles = getStyles(theme, dataSource?.meta.builtIn);
if (!dataSource) {
return DataSourceLogoPlaceHolder();
@ -30,11 +31,12 @@ export function DataSourceLogoPlaceHolder() {
return <div className={styles.pickerDSLogo}></div>;
}
function getStyles(theme: GrafanaTheme2) {
function getStyles(theme: GrafanaTheme2, builtIn = false) {
return {
pickerDSLogo: css`
height: 20px;
width: 20px;
filter: invert(${builtIn && theme.isLight ? 1 : 0});
`,
};
}