refactor LiveLogs styles to use object syntax

.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"],

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) => ({
+const getStyles = (theme: GrafanaTheme2) => {
-  logsRowsLive: css`
+  const fade = keyframes({
-    label: logs-rows-live;
+    from: {
-    font-family: ${theme.typography.fontFamilyMonospace};
+      backgroundColor: tinycolor(theme.colors.info.transparent).setAlpha(0.25).toString(),
-    font-size: ${theme.typography.bodySmall.fontSize};
+    },
-    display: flex;
+    to: {
-    flex-flow: column nowrap;
+      backgroundColor: 'transparent',
-    height: 60vh;
+    },
-    overflow-y: scroll;
+  });
-    :first-child {
+
-      margin-top: auto !important;
+  return {
-    }
+    logsRowsLive: css({
-  `,
+      label: 'logs-rows-live',
-  logsRowFade: css`
+      fontFamily: theme.typography.fontFamilyMonospace,
-    label: logs-row-fresh;
+      fontSize: theme.typography.bodySmall.fontSize,
-    color: ${theme.colors.text};
+      display: 'flex',
-    background-color: ${tinycolor(theme.colors.info.transparent).setAlpha(0.25).toString()};
+      flexFlow: 'column nowrap',
-    animation: fade 1s ease-out 1s 1 normal forwards;
+      height: '60vh',
-    @keyframes fade {
+      overflowY: 'scroll',
-      from {
+      [':first-child']: {
-        background-color: ${tinycolor(theme.colors.info.transparent).setAlpha(0.25).toString()};
+        marginTop: `auto !important`,
-      }
+      },
-      to {
+    }),
-        background-color: transparent;
+    logsRowFade: css({
-      }
+      label: 'logs-row-fresh',
-    }
+      color: theme.colors.text.secondary,
-  `,
+      backgroundColor: tinycolor(theme.colors.info.transparent).setAlpha(0.25).toString(),
-  logsRowsIndicator: css`
+      animation: fade,
-    font-size: ${theme.typography.h6.fontSize};
+    }),
-    padding-top: ${theme.spacing(1)};
+    logsRowsIndicator: css({
-    display: flex;
+      fontSize: theme.typography.h6.fontSize,
-    align-items: center;
+      paddingTop: theme.spacing(1),
-  `,
+      display: 'flex',
-  button: css`
+      alignItems: 'center',
-    margin-right: ${theme.spacing(1)};
+    }),
-  `,
+    button: css({
-  fullWidth: css`
+      marginRight: theme.spacing(1),
-    width: 100%;
+    }),
-  `,
+    fullWidth: css({
-});
+      width: '100%',
+    }),
+  };
+};
 
 export interface Props extends Themeable2 {
   logRows?: LogRowModel[];