diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap b/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap index eb61c639d81..a662a9db228 100644 --- a/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap +++ b/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap @@ -74,6 +74,7 @@ exports[`Render should render with base threshold 1`] = ` Object { "background": Object { "dropdown": "#1f1f20", + "logsFresh": "#5794F240", "scrollbar": "#343436", "scrollbar2": "#343436", }, @@ -235,6 +236,7 @@ exports[`Render should render with base threshold 1`] = ` Object { "background": Object { "dropdown": "#1f1f20", + "logsFresh": "#5794F240", "scrollbar": "#343436", "scrollbar2": "#343436", }, diff --git a/packages/grafana-ui/src/themes/dark.ts b/packages/grafana-ui/src/themes/dark.ts index 9bbe3aef04e..5e83e2dd29a 100644 --- a/packages/grafana-ui/src/themes/dark.ts +++ b/packages/grafana-ui/src/themes/dark.ts @@ -75,6 +75,7 @@ const darkTheme: GrafanaTheme = { dropdown: basicColors.dark3, scrollbar: basicColors.dark9, scrollbar2: basicColors.dark9, + logsFresh: '#5794F240', }, }; diff --git a/packages/grafana-ui/src/themes/light.ts b/packages/grafana-ui/src/themes/light.ts index e87bf744f95..634462613d3 100644 --- a/packages/grafana-ui/src/themes/light.ts +++ b/packages/grafana-ui/src/themes/light.ts @@ -76,6 +76,7 @@ const lightTheme: GrafanaTheme = { dropdown: basicColors.white, scrollbar: basicColors.gray5, scrollbar2: basicColors.gray5, + logsFresh: '#d8e7ff', }, }; diff --git a/packages/grafana-ui/src/types/theme.ts b/packages/grafana-ui/src/types/theme.ts index 23857cc9c34..fd08aaa0a90 100644 --- a/packages/grafana-ui/src/types/theme.ts +++ b/packages/grafana-ui/src/types/theme.ts @@ -96,6 +96,7 @@ export interface GrafanaTheme extends GrafanaThemeCommons { dropdown: string; scrollbar: string; scrollbar2: string; + logsFresh: string; }; colors: { black: string; diff --git a/public/app/features/explore/LiveLogs.tsx b/public/app/features/explore/LiveLogs.tsx index 9361749426c..5565f9dc4d3 100644 --- a/public/app/features/explore/LiveLogs.tsx +++ b/public/app/features/explore/LiveLogs.tsx @@ -10,6 +10,8 @@ import ElapsedTime from './ElapsedTime'; const getStyles = (theme: GrafanaTheme) => ({ logsRowsLive: css` label: logs-rows-live; + font-family: ${theme.typography.fontFamily.monospace}; + font-size: ${theme.typography.size.sm}; display: flex; flex-flow: column nowrap; height: 65vh; @@ -21,15 +23,29 @@ const getStyles = (theme: GrafanaTheme) => ({ logsRowFresh: css` label: logs-row-fresh; color: ${theme.colors.text}; - background-color: ${selectThemeVariant({ light: theme.colors.gray6, dark: theme.colors.gray1 }, theme.type)}; + background-color: ${selectThemeVariant( + { light: theme.background.logsFresh, dark: theme.background.logsFresh }, + theme.type + )}; + animation: fade 1s ease-out 1s 1 normal forwards; + @keyframes fade { + from { + background-color: ${selectThemeVariant( + { light: theme.background.logsFresh, dark: theme.background.logsFresh }, + theme.type + )}; + } + to { + background-color: transparent; + } + } `, logsRowOld: css` label: logs-row-old; - opacity: 0.8; `, logsRowsIndicator: css` font-size: ${theme.typography.size.md}; - padding: ${theme.spacing.sm} 0; + padding-top: ${theme.spacing.sm}; display: flex; align-items: center; `, @@ -186,8 +202,8 @@ class LiveLogs extends PureComponent { {isPaused ? 'Resume' : 'Pause'} {isPaused || (