Dashlist: Design tweak to dashlist items (#60140)

public/app/plugins/panel/dashlist/styles.ts

@@ -1,40 +1,41 @@
 import { css } from '@emotion/css';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { styleMixins } from '@grafana/ui';
 
 export const getStyles = (theme: GrafanaTheme2) => ({
   dashlistSectionHeader: css`
-    margin-bottom: ${theme.spacing(2)};
-    color: ${theme.colors.secondary.text};
+    padding: ${theme.spacing(0.25, 1)};
+    margin-right: ${theme.spacing(1)};
   `,
-
   dashlistSection: css`
     margin-bottom: ${theme.spacing(2)};
     padding-top: 3px;
   `,
-
   dashlistLink: css`
-    ${styleMixins.listItem(theme)}
     display: flex;
     cursor: pointer;
-    margin: 3px;
-    padding: 7px;
-  `,
+    border-bottom: 1px solid ${theme.colors.border.weak};
+    margin-right: ${theme.spacing(1)};
+    padding: ${theme.spacing(1)};
 
+    &:hover {
+      background: ${theme.colors.emphasize(theme.colors.background.primary, 0.03)};
+      a {
+        text-decoration: underline;
+      }
+    }
+  `,
   dashlistStar: css`
     align-self: center;
     margin-right: 0px;
     color: ${theme.colors.secondary.text};
     z-index: 1;
   `,
-
   dashlistFolder: css`
-    color: ${theme.colors.secondary.text};
+    color: ${theme.colors.text.secondary};
     font-size: ${theme.typography.bodySmall.fontSize};
     line-height: ${theme.typography.body.lineHeight};
   `,
-
   dashlistTitle: css`
     &::after {
       position: absolute;
@@ -45,18 +46,15 @@ export const getStyles = (theme: GrafanaTheme2) => ({
       right: 0;
     }
   `,
-
   dashlistLinkBody: css`
     flex-grow: 1;
     overflow: hidden;
     text-overflow: ellipsis;
   `,
-
   dashlistItem: css`
     position: relative;
     list-style: none;
   `,
-
   gridContainer: css`
     display: grid;
     gap: ${theme.spacing(1)};

public/sass/_grafana.scss

@@ -42,7 +42,6 @@
 @import 'components/tags';
 @import 'components/panel_graph';
 @import 'components/submenu';
-@import 'components/panel_dashlist';
 @import 'components/panel_gettingstarted';
 @import 'components/panel_piechart';
 @import 'components/panel_pluginlist';

public/sass/components/_panel_dashlist.scss

@@ -1,37 +0,0 @@
-.dashlist-section-header {
-  margin-bottom: $spacer;
-  color: $text-color-weak;
-}
-
-.dashlist-section {
-  margin-bottom: $spacer;
-  padding-top: 3px;
-}
-
-.dashlist-link {
-  @include list-item();
-  display: flex;
-
-  .fa {
-    padding-top: 3px;
-  }
-
-  .fa-star {
-    color: $orange;
-  }
-}
-
-.dashlist-star {
-  display: flex;
-  align-items: center;
-  color: $text-color-weak;
-}
-
-.dashlist-folder {
-  color: $text-color-weak;
-  font-size: $font-size-xs;
-}
-
-.dashlist-link-body {
-  flex-grow: 1;
-}