add arrow for learn more link

Signed-off-by: lakshya <[email protected]>
layer5io · Mar 8, 2024 · ac5b413 · ac5b413
1 parent b694260
commit ac5b413
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 6 deletions.
diff --git a/src/sections/Projects/Sistent/components/index.js b/src/sections/Projects/Sistent/components/index.js
@@ -5,6 +5,7 @@ import TOC from "../../../../components/SistentNavigation";
 import SistentPagination from "../../../../components/SistentNavigation/pagination";
 import SearchBox from "../../../../reusecore/Search";
 import useDataList from "../../../../utils/usedataList";
+import { FaArrowRight } from "@react-icons/all-files/fa/FaArrowRight";
 
 const componentsData = [
   {
@@ -68,7 +69,12 @@ const SistentComponents = () => {
                     <div>
                       <div className="card_bottom">
                         <a className="learn" href={comp.url}>
-                          Learn more
+                          <div className="learn-more">
+                            <div>Learn more</div>
+                            <div className="icon">
+                              <FaArrowRight />
+                            </div>
+                          </div>
                         </a>
                       </div>
                     </div>

diff --git a/src/sections/Projects/Sistent/sistent.style.js b/src/sections/Projects/Sistent/sistent.style.js
@@ -442,8 +442,18 @@ const SistentWrapper = styled.div`
     }
   }
 
-  .learn {
-    width: 10rem;
+  .learn-more {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+
+    .icon {
+      font-size: 0.8rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: ${(props) => props.theme.whiteToBlack};
+    }
   }
 
   .writing_program {
@@ -683,9 +693,7 @@ const SistentWrapper = styled.div`
     cursor: pointer;
     color: ${(props) => props.theme.whiteToBlack};
     &:hover {
-      text-decoration: underline;
-      text-decoration-color: ${(props) => props.theme.secondaryColor};
-      text-underline-offset: 8px;
+      border-bottom: 1px solid ${(props) => props.theme.secondaryColor};
     }
   }
   .btns Button {