From 293aa2589fb0f24305393467cbd1bb0726304962 Mon Sep 17 00:00:00 2001
From: Giordano Ricci <me@giordanoricci.com>
Date: Fri, 5 Jan 2024 14:04:43 +0000
Subject: [PATCH] refactor LiveLogs styles to use object syntax

---
 .betterer.results                             |  7 --
 public/app/features/explore/Logs/LiveLogs.tsx | 85 ++++++++++---------
 2 files changed, 44 insertions(+), 48 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index 1d39eaeee206..77053edc2583 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -3184,13 +3184,6 @@ exports[`better eslint`] = {
     "public/app/features/explore/ContentOutline/ContentOutline.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
-    "public/app/features/explore/Logs/LiveLogs.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"],
-      [0, 0, 0, "Styles should be written using objects.", "3"],
-      [0, 0, 0, "Styles should be written using objects.", "4"]
-    ],
     "public/app/features/explore/Logs/Logs.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Do not use any type assertions.", "1"],
diff --git a/public/app/features/explore/Logs/LiveLogs.tsx b/public/app/features/explore/Logs/LiveLogs.tsx
index 3439db19eae9..1b826ec61013 100644
--- a/public/app/features/explore/Logs/LiveLogs.tsx
+++ b/public/app/features/explore/Logs/LiveLogs.tsx
@@ -1,4 +1,4 @@
-import { css, cx } from '@emotion/css';
+import { css, cx, keyframes } from '@emotion/css';
 import React, { PureComponent } from 'react';
 import tinycolor from 'tinycolor2';
 
@@ -11,46 +11,49 @@ import { sortLogRows } from '../../logs/utils';
 import { ElapsedTime } from '../ElapsedTime';
 import { filterLogRowsByIndex } from '../state/utils';
 
-const getStyles = (theme: GrafanaTheme2) => ({
-  logsRowsLive: css`
-    label: logs-rows-live;
-    font-family: ${theme.typography.fontFamilyMonospace};
-    font-size: ${theme.typography.bodySmall.fontSize};
-    display: flex;
-    flex-flow: column nowrap;
-    height: 60vh;
-    overflow-y: scroll;
-    :first-child {
-      margin-top: auto !important;
-    }
-  `,
-  logsRowFade: css`
-    label: logs-row-fresh;
-    color: ${theme.colors.text};
-    background-color: ${tinycolor(theme.colors.info.transparent).setAlpha(0.25).toString()};
-    animation: fade 1s ease-out 1s 1 normal forwards;
-    @keyframes fade {
-      from {
-        background-color: ${tinycolor(theme.colors.info.transparent).setAlpha(0.25).toString()};
-      }
-      to {
-        background-color: transparent;
-      }
-    }
-  `,
-  logsRowsIndicator: css`
-    font-size: ${theme.typography.h6.fontSize};
-    padding-top: ${theme.spacing(1)};
-    display: flex;
-    align-items: center;
-  `,
-  button: css`
-    margin-right: ${theme.spacing(1)};
-  `,
-  fullWidth: css`
-    width: 100%;
-  `,
-});
+const getStyles = (theme: GrafanaTheme2) => {
+  const fade = keyframes({
+    from: {
+      backgroundColor: tinycolor(theme.colors.info.transparent).setAlpha(0.25).toString(),
+    },
+    to: {
+      backgroundColor: 'transparent',
+    },
+  });
+
+  return {
+    logsRowsLive: css({
+      label: 'logs-rows-live',
+      fontFamily: theme.typography.fontFamilyMonospace,
+      fontSize: theme.typography.bodySmall.fontSize,
+      display: 'flex',
+      flexFlow: 'column nowrap',
+      height: '60vh',
+      overflowY: 'scroll',
+      [':first-child']: {
+        marginTop: `auto !important`,
+      },
+    }),
+    logsRowFade: css({
+      label: 'logs-row-fresh',
+      color: theme.colors.text.secondary,
+      backgroundColor: tinycolor(theme.colors.info.transparent).setAlpha(0.25).toString(),
+      animation: fade,
+    }),
+    logsRowsIndicator: css({
+      fontSize: theme.typography.h6.fontSize,
+      paddingTop: theme.spacing(1),
+      display: 'flex',
+      alignItems: 'center',
+    }),
+    button: css({
+      marginRight: theme.spacing(1),
+    }),
+    fullWidth: css({
+      width: '100%',
+    }),
+  };
+};
 
 export interface Props extends Themeable2 {
   logRows?: LogRowModel[];