IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-25 02:10:45 -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 React from 'react';
import { DataSourceInstanceSettings, GrafanaTheme2 } from '@grafana/data'; import { DataSourceInstanceSettings, GrafanaTheme2 } from '@grafana/data';
import { Card, TagList, useStyles2 } from '@grafana/ui'; import { Card, TagList, useTheme2 } from '@grafana/ui';
interface DataSourceCardProps { interface DataSourceCardProps {
ds: DataSourceInstanceSettings; ds: DataSourceInstanceSettings;
@ -12,7 +12,8 @@ interface DataSourceCardProps {
} }
export function DataSourceCard({ ds, onClick, selected, description, ...htmlProps }: 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 ( return (
<Card <Card
@ -37,7 +38,7 @@ export function DataSourceCard({ ds, onClick, selected, description, ...htmlProp
} }
// Get styles for the component // Get styles for the component
function getStyles(theme: GrafanaTheme2) { function getStyles(theme: GrafanaTheme2, builtIn = false) {
return { return {
card: css` card: css`
cursor: pointer; cursor: pointer;
@ -75,6 +76,7 @@ function getStyles(theme: GrafanaTheme2) {
> img { > img {
max-height: 100%; max-height: 100%;
min-width: 24px; min-width: 24px;
filter: invert(${builtIn && theme.isLight ? 1 : 0});
} }
`, `,
name: css` 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 React from 'react';
import { DataSourceInstanceSettings, DataSourceJsonData, GrafanaTheme2 } from '@grafana/data'; import { DataSourceInstanceSettings, DataSourceJsonData, GrafanaTheme2 } from '@grafana/data';
import { useStyles2 } from '@grafana/ui'; import { useStyles2, useTheme2 } from '@grafana/ui';
export interface DataSourceLogoProps { export interface DataSourceLogoProps {
dataSource: DataSourceInstanceSettings<DataSourceJsonData> | undefined; dataSource: DataSourceInstanceSettings<DataSourceJsonData> | undefined;
@ -10,7 +10,8 @@ export interface DataSourceLogoProps {
export function DataSourceLogo(props: DataSourceLogoProps) { export function DataSourceLogo(props: DataSourceLogoProps) {
const { dataSource } = props; const { dataSource } = props;
const styles = useStyles2(getStyles); const theme = useTheme2();
const styles = getStyles(theme, dataSource?.meta.builtIn);
if (!dataSource) { if (!dataSource) {
return DataSourceLogoPlaceHolder(); return DataSourceLogoPlaceHolder();
@ -30,11 +31,12 @@ export function DataSourceLogoPlaceHolder() {
return <div className={styles.pickerDSLogo}></div>; return <div className={styles.pickerDSLogo}></div>;
} }
function getStyles(theme: GrafanaTheme2) { function getStyles(theme: GrafanaTheme2, builtIn = false) {
return { return {
pickerDSLogo: css` pickerDSLogo: css`
height: 20px; height: 20px;
width: 20px; width: 20px;
filter: invert(${builtIn && theme.isLight ? 1 : 0});
`, `,
}; };
} }