Merge pull request #379 from the-programmers-hangout/ui-fix-links-underline-2

ui: fix links underline

src/components/Markdown/styles.tsx

@@ -168,29 +168,18 @@ export const MarkdownWrapper = styled.div`
   }
 
   a:not(.anchor):not(.button) {
-    display: inline-block;
-    position: relative;
-    font-weight: 700;
-    color: ${(props) => (props.theme.name === "dark" ? "#f9f9f9" : "#172129")};
     text-decoration: none;
-    word-break: break-word;
-    cursor: pointer;
-
-    &::after {
-      content: "";
-      display: block;
-      width: 100%;
-      left: 0;
-      right: 0;
-      height: 2px;
-      background: linear-gradient(92.97deg, #feaf6d 0%, #ff70a5 100%);
-    }
+    color: inherit;
+    background-image: linear-gradient(120deg, #feaf6d 0%, #ff70a5 100%);
+    background-repeat: no-repeat;
+    background-size: 100% 3px;
+    background-position: 0 100%;
+    transition: all 0.125s ease-in;
+    font-weight: 700;
 
     &:hover {
-      background: linear-gradient(92.97deg, #feaf6d 0%, #ff70a5 100%);
-      background-clip: text;
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
+      color: black;
+      background-size: 100% 100%;
     }
   }
 `

src/components/ResourcesHomeContent/styles.tsx

@@ -51,11 +51,13 @@ export const Box = styled.div`
     position: relative;
     color: #fff !important;
     font-weight: 400 !important;
+    background: none !important;
     border-bottom: 1px solid #fff;
     margin-bottom: 1px;
     display: inline-flex;
     align-items: center;
     font-size: 18px;
+    transition: none !important;
 
     &:hover {
       background: none;
@@ -66,6 +68,7 @@ export const Box = styled.div`
     }
 
     &::after {
+      margin-left: 4px;
       position: absolute;
       left: 100%;
       display: block;