From b5b13975d60e6db65b3ba0e04f539fc8da76f705 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Tue, 10 Jan 2023 10:41:29 +0100
Subject: [PATCH] Dashlist: Design tweak to dashlist items (#60140)

---
 public/app/plugins/panel/dashlist/styles.ts | 28 ++++++++--------
 public/sass/_grafana.scss                   |  1 -
 public/sass/components/_panel_dashlist.scss | 37 ---------------------
 3 files changed, 13 insertions(+), 53 deletions(-)
 delete mode 100644 public/sass/components/_panel_dashlist.scss

diff --git a/public/app/plugins/panel/dashlist/styles.ts b/public/app/plugins/panel/dashlist/styles.ts
index 6a056094c7b..f197e9ff018 100644
--- a/public/app/plugins/panel/dashlist/styles.ts
+++ b/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)};
diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss
index 4e6781ffce9..b21905e838d 100644
--- a/public/sass/_grafana.scss
+++ b/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';
diff --git a/public/sass/components/_panel_dashlist.scss b/public/sass/components/_panel_dashlist.scss
deleted file mode 100644
index a89a3f6b34f..00000000000
--- a/public/sass/components/_panel_dashlist.scss
+++ /dev/null
@@ -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;
-}