Cloudwatch: Improve log group selector styling (#60370)

* add space between search field and result table

* add margin between checkbox and log group

* add space between result table and bottom buttons

* revert modal always open

* use secondary variant for cancel button

* fix spacing between selected log groups

public/app/plugins/datasource/cloudwatch/components/CrossAccountLogsQueryField.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo, useState } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorField } from '@grafana/experimental';
+import { EditorField, Space } from '@grafana/experimental';
 import { Button, Checkbox, IconButton, LoadingPlaceholder, Modal, useStyles2 } from '@grafana/ui';
 
 import Search from '../Search';
@@ -90,6 +90,7 @@ export const CrossAccountLogsQueryField = (props: CrossAccountLogsQueryProps) =>
               searchPhrase={searchPhrase}
             />
           </EditorField>
+
           <Account
             onChange={(accountId?: string) => {
               searchFn(searchPhrase, accountId);
@@ -99,6 +100,7 @@ export const CrossAccountLogsQueryField = (props: CrossAccountLogsQueryProps) =>
             accountId={searchAccountId}
           />
         </div>
+        <Space layout="block" v={2} />
         <div>
           <div className={styles.tableScroller}>
             <table className={styles.table}>
@@ -126,14 +128,17 @@ export const CrossAccountLogsQueryField = (props: CrossAccountLogsQueryProps) =>
                   selectableLogGroups.map((row) => (
                     <tr className={styles.row} key={`${row.value}`}>
                       <td className={styles.cell}>
-                        <Checkbox
-                          id={row.value}
-                          onChange={(ev) => handleSelectCheckbox(row, ev.currentTarget.checked)}
-                          value={!!(row.value && selectedLogGroups.some((lg) => lg.value === row.value))}
-                        />
-                        <label className={styles.logGroupSearchResults} htmlFor={row.value}>
-                          {row.label}
-                        </label>
+                        <div className={styles.nestedEntry}>
+                          <Checkbox
+                            id={row.value}
+                            onChange={(ev) => handleSelectCheckbox(row, ev.currentTarget.checked)}
+                            value={!!(row.value && selectedLogGroups.some((lg) => lg.value === row.value))}
+                          />
+                          <Space layout="inline" h={2} />
+                          <label className={styles.logGroupSearchResults} htmlFor={row.value}>
+                            {row.label}
+                          </label>
+                        </div>
                       </td>
                       <td className={styles.cell}>{accountNameById[row.text]}</td>
                       <td className={styles.cell}>{row.text}</td>
@@ -143,11 +148,12 @@ export const CrossAccountLogsQueryField = (props: CrossAccountLogsQueryProps) =>
             </table>
           </div>
         </div>
+        <Space layout="block" v={2} />
         <div>
           <Button onClick={handleApply} type="button" className={styles.addBtn}>
             Add log groups
           </Button>
-          <Button onClick={handleCancel} type="button">
+          <Button onClick={handleCancel} variant="secondary" type="button">
             Cancel
           </Button>
         </div>
@@ -159,7 +165,7 @@ export const CrossAccountLogsQueryField = (props: CrossAccountLogsQueryProps) =>
         </Button>
       </div>
 
-      <div>
+      <div className={styles.selectedLogGroupsContainer}>
         {props.selectedLogGroups.map((lg) => (
           <div key={lg.value} className={styles.selectedLogGroup}>
             {lg.label}

public/app/plugins/datasource/cloudwatch/components/styles.ts

@@ -8,6 +8,12 @@ const getStyles = (theme: GrafanaTheme2) => ({
     tableLayout: 'fixed',
   }),
 
+  selectedLogGroupsContainer: css({
+    marginLeft: theme.spacing(0.5),
+    display: 'flex',
+    flexFlow: 'wrap',
+  }),
+
   tableScroller: css({
     maxHeight: '50vh',
     overflow: 'auto',
@@ -30,6 +36,11 @@ const getStyles = (theme: GrafanaTheme2) => ({
     },
   }),
 
+  nestedEntry: css({
+    display: 'flex',
+    alignItems: 'center',
+  }),
+
   logGroupSearchResults: css({
     overflow: 'hidden',
     textOverflow: 'ellipsis',
@@ -58,8 +69,8 @@ const getStyles = (theme: GrafanaTheme2) => ({
   selectedLogGroup: css({
     background: theme.colors.background.secondary,
     borderRadius: theme.shape.borderRadius(),
-    margin: theme.spacing(0.25, 1, 0.25, 0),
-    padding: theme.spacing(0.25, 0, 0.25, 1),
+    margin: theme.spacing(0, 1, 1, 0),
+    padding: theme.spacing(0.5, 0, 0.5, 1),
     color: theme.colors.text.primary,
     fontSize: theme.typography.size.sm,
   }),
@@ -70,6 +81,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
 
   removeButton: css({
     verticalAlign: 'middle',
+    marginLeft: theme.spacing(0.5),
   }),
 
   addBtn: css({