AlertRules: Update design to align it with recent changes to lists and tables (#66461)

* AlertRules: Update design to be less boxy

* tag alignment fix

* Minor tweak

packages/grafana-data/src/themes/createComponents.ts

@@ -49,6 +49,9 @@ export interface ThemeComponents {
   horizontalDrawer: {
     defaultHeight: number;
   };
+  table: {
+    rowHoverBackground: string;
+  };
 }
 
 export function createComponents(colors: ThemeColors, shadows: ThemeShadows): ThemeComponents {
@@ -102,5 +105,8 @@ export function createComponents(colors: ThemeColors, shadows: ThemeShadows): Th
     horizontalDrawer: {
       defaultHeight: 400,
     },
+    table: {
+      rowHoverBackground: colors.emphasize(colors.background.primary, 0.03),
+    },
   };
 }

packages/grafana-ui/src/components/Table/styles.ts

@@ -10,7 +10,6 @@ export function useTableStyles(theme: GrafanaTheme2, cellHeightOption: TableCell
   const cellHeight = getCellHeight(theme, cellHeightOption, cellPadding);
   const rowHeight = cellHeight + 2;
   const headerHeight = 28;
-  const rowHoverBg = theme.colors.emphasize(theme.colors.background.primary, 0.03);
 
   const buildCellContainerStyle = (color?: string, background?: string, overflowOnHover?: boolean) => {
     const cellActionsOverflow: CSSObject = {
@@ -28,7 +27,7 @@ export function useTableStyles(theme: GrafanaTheme2, cellHeightOption: TableCell
       overflow: 'visible',
       width: 'auto !important',
       boxShadow: `0 0 2px ${theme.colors.primary.main}`,
-      background: background ?? rowHoverBg,
+      background: background ?? theme.components.table.rowHoverBackground,
       zIndex: 1,
     };
 
@@ -231,7 +230,7 @@ export function useTableStyles(theme: GrafanaTheme2, cellHeightOption: TableCell
       border-bottom: 1px solid ${borderColor};
 
       &:hover {
-        background-color: ${rowHoverBg};
+        background-color: ${theme.components.table.rowHoverBackground};
       }
 
       &:last-child {