fix: specificity for anchor tag

Author: eshankvaish

src/Shared/Components/Button/Button.component.tsx

@@ -37,7 +37,8 @@ const ButtonElement = ({
             <Link
                 {...linkProps}
                 {...props}
-                className={`${props.className} ${props.disabled ? 'dc__disable-click' : ''}`}
+                // Added the specific class to ensure that the link override is applied
+                className={`${props.className} button__link ${props.disabled ? 'dc__disable-click' : ''}`}
                 onClick={onClick as LinkProps['onClick']}
             />
         )

src/Shared/Components/Button/button.scss

@@ -3,6 +3,10 @@
     color: $text-color;
     border: 1px solid $border-color;
 
+    &.button__link {
+        color: $text-color;
+    }
+
     // Only stroke icons are supposed to be used with button
     svg,
     svg * {
@@ -170,7 +174,7 @@
             border: none;
 
             &:hover {
-                text-decoration: underline;
+                text-decoration: underline !important;
             }
         }
     }
@@ -184,4 +188,10 @@
             visibility: hidden;
         }
     }
+
+    &__link {
+        &:hover {
+            text-decoration: none;
+        }
+    }
 }