From 30ba81a9ef43b8d0b48f8388d24636506802925c Mon Sep 17 00:00:00 2001
From: Ashish Gupta <ashish@getcollate.io>
Date: Tue, 9 May 2023 19:45:52 +0530
Subject: [PATCH] fix the underline issue on entity cards (#11497)

---
 .../NotificationFeedCard.component.tsx        |  2 +-
 .../resources/ui/src/pages/teams/UserCard.tsx |  2 +-
 .../src/main/resources/ui/src/styles/app.less | 49 +++++++++++++++----
 .../main/resources/ui/src/styles/tailwind.css | 11 -----
 .../resources/ui/src/styles/variables.less    |  1 +
 5 files changed, 42 insertions(+), 23 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/NotificationBox/NotificationFeedCard.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/NotificationBox/NotificationFeedCard.component.tsx
index 1317a9bbba8..a8464001fdc 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/NotificationBox/NotificationFeedCard.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/NotificationBox/NotificationFeedCard.component.tsx
@@ -38,7 +38,7 @@ const NotificationFeedCard: FC<NotificationFeedProp> = ({
 
   return (
     <Link
-      className="tw-no-underline"
+      className="no-underline"
       to={
         feedType === ThreadType.Conversation
           ? prepareFeedLink(entityType, entityFQN)
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/teams/UserCard.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/teams/UserCard.tsx
index 31f8badb24d..7df53b7c1c0 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/teams/UserCard.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/teams/UserCard.tsx
@@ -151,7 +151,7 @@ const UserCard = ({
     }
 
     return (
-      <Link className="tw-no-underline" data-testid="dataset-link" to={link}>
+      <Link className="no-underline" data-testid="dataset-link" to={link}>
         <span className="tw-font-medium tw-text-grey-body tw-break-all tw-text-left">
           {getAssetDisplayName(type, fqn)}
         </span>
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/app.less b/openmetadata-ui/src/main/resources/ui/src/styles/app.less
index e3da7d2a202..f2e6525a0db 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/app.less
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/app.less
@@ -13,11 +13,8 @@
 
 // common css utils file
 @import url('./variables.less');
-@primary: #7147e8;
 @primary-light: rgb(244, 240, 253);
 @primary-hover-light: rgba(219, 209, 249);
-@white: #fff;
-@gray: #dde3ea;
 @trigger-btn-hover-bg: #efefef;
 
 // Global css
@@ -46,6 +43,38 @@
   background-color: @error-light-color;
 }
 
+.show-more,
+a[href]:not(.button-comp):not(.no-underline):not(.link-text-info),
+.link-text {
+  color: @primary-color-hover;
+
+  &:hover {
+    color: @primary-color-hover;
+    text-decoration: underline;
+  }
+
+  &:focus {
+    color: @primary-color-hover;
+    text-decoration: underline;
+    cursor: pointer;
+  }
+}
+
+a[href].link-text-grey,
+.link-text-grey {
+  color: @text-color;
+
+  &:hover {
+    color: @text-color;
+    text-decoration: underline;
+  }
+  &:focus {
+    color: @text-color;
+    text-decoration: underline;
+    cursor: pointer;
+  }
+}
+
 // used in glossary + query right panel, to keep both consistent
 .right-panel-label {
   font-size: 14px;
@@ -60,9 +89,9 @@
 
 // text color
 .text-primary {
-  color: @primary;
+  color: @primary-color;
   &:hover {
-    color: @primary;
+    color: @primary-color;
   }
 }
 .text-color-inherit {
@@ -139,10 +168,10 @@
   border-color: @border-color;
 }
 .border-primary {
-  border-color: @primary;
+  border-color: @primary-color;
 }
 .border-gray {
-  border-color: @gray;
+  border-color: @border-color;
 }
 .border-light-gray {
   border-color: @light-border-color;
@@ -183,20 +212,20 @@
   background: @primary-light;
 }
 .bg-primary {
-  background: @primary;
+  background: @primary-color;
 }
 .bg-primary-hover-lite {
   background-color: @primary-hover-light;
 }
 .bg-grey {
-  background-color: @gray;
+  background-color: @border-color;
 }
 .bg-white {
   background-color: @white;
 }
 
 .activeCategory {
-  border-left: 2px solid @primary;
+  border-left: 2px solid @primary-color;
   background: @primary-light;
   padding-left: 10px;
   font-weight: 600;
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/tailwind.css b/openmetadata-ui/src/main/resources/ui/src/styles/tailwind.css
index 3179bd18c3a..2686160d8bc 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/tailwind.css
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/tailwind.css
@@ -149,17 +149,6 @@
     @apply tw-text-info hover:tw-text-info focus:tw-text-info hover:tw-underline focus:tw-underline tw-cursor-pointer;
   }
 
-  .show-more,
-  a[href]:not(.button-comp):not(.tw-no-underline):not(.link-text-info),
-  .link-text {
-    @apply tw-text-primary-hover hover:tw-text-primary-hover focus:tw-text-primary-hover hover:tw-underline focus:tw-underline tw-cursor-pointer;
-  }
-
-  a[href].link-text-grey,
-  .link-text-grey {
-    @apply tw-text-grey-body hover:tw-text-grey-body focus:tw-text-grey-body hover:tw-underline focus:tw-underline tw-cursor-pointer;
-  }
-
   .page-container {
     @apply tw-bg-body-main;
   }
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/variables.less b/openmetadata-ui/src/main/resources/ui/src/styles/variables.less
index 49297be0adb..2171cf312ea 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/variables.less
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/variables.less
@@ -12,6 +12,7 @@
  */
 
 @primary-color: #7147e8;
+@primary-color-hover: #5523e0;
 @secondary-color: #b02aac;
 @link-color: #7147e8;
 @success-color: #008376;