Links: Add underline on hover for links in NewsPanel (#30166)

public/app/plugins/panel/news/NewsPanel.tsx

@@ -77,7 +77,12 @@ export class NewsPanel extends PureComponent<Props, State> {
         {news.map((item, index) => {
           return (
             <div key={index} className={styles.item}>
-              <a href={textUtil.sanitizeUrl(item.link)} target="_blank" rel="noopener noreferrer">
+              <a
+                className={styles.link}
+                href={textUtil.sanitizeUrl(item.link)}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
                 <div className={styles.title}>{item.title}</div>
                 <div className={styles.date}>{dateTimeFormat(item.date, { format: 'MMM DD' })} </div>
               </a>
@@ -101,8 +106,15 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
     margin-right: ${theme.spacing.sm};
     border-bottom: 2px solid ${theme.colors.border1};
   `,
-  title: css`
+  link: css`
     color: ${theme.colors.linkExternal};
+
+    &:hover {
+      color: ${theme.colors.linkExternal};
+      text-decoration: underline;
+    }
+  `,
+  title: css`
     max-width: calc(100% - 70px);
     font-size: 16px;
     margin-bottom: ${theme.spacing.sm};

public/sass/base/_type.scss

@@ -313,7 +313,12 @@ address {
 
 a.external-link {
   color: $external-link-color;
-  text-decoration: underline;
+  text-decoration: normal;
+
+  &:hover {
+    color: $external-link-color;
+    text-decoration: underline;
+  }
 }
 
 .link {
@@ -359,10 +364,12 @@ a.external-link {
   }
 
   a {
-    text-decoration: underline;
     color: $external-link-color;
+    text-decoration: none;
+
     &:hover {
-      color: lighten($external-link-color, 10%);
+      color: $external-link-color;
+      text-decoration: underline;
     }
   }
 

public/sass/components/_drop.scss

@@ -39,6 +39,7 @@ $easing: cubic-bezier(0, 0, 0.265, 1);
 .drop-help {
   a {
     color: $gray-6;
+
     &:hover {
       color: $white;
     }