prevent hyperlink for sharing added "_blank" fron new tab also added right arrow icons after unwrap

package.json

@@ -41,6 +41,7 @@
     "polished": "^4.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.4.0",
     "react-spring": "^9.7.3",
     "remotion": "4.0.240",
     "serve-static": "^1.15.0",

remotion/PromoVideo/PromoVideoCTA.tsx

@@ -1,6 +1,7 @@
 import { TransitionSeries, springTiming } from "@remotion/transitions";
 import { flip } from "@remotion/transitions/flip";
 import React from "react";
+import { FaArrowRight } from "react-icons/fa";
 import {
   AbsoluteFill,
   interpolate,
@@ -95,12 +96,14 @@ export const PromoVideoCallToAction: React.FC<{
                 justifyContent: "center",
                 alignItems: "center",
                 color: "white",
+                gap: 10,
                 fontSize: 40,
                 fontWeight: "bold",
                 scale: String(1 - pressIn * 0.1),
               }}
             >
-              Unwrap
+              <FaArrowRight size={15} color="white" />
+              <p>Unwrap</p>
             </div>
           </AbsoluteFill>
         </TransitionSeries.Sequence>

vite/SignInWithGitHub.tsx

@@ -1,10 +1,17 @@
+import { useState } from "react";
 import buttonStyles from "./Button/styles.module.css";
 import { signInWithGitHubLink } from "./sign-in-with-github";
 
 export const SignInWithGitHub: React.FC = () => {
+  const [isHovered, setIsHovered] = useState(false);
   return (
     <a
-      style={{ textDecoration: "none" }}
+      style={{
+        textDecoration: isHovered ? "underline" : "none",
+        transition: "text-decoration 0.3s ease",
+      }}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
       className={buttonStyles.loginwithgithub}
       href={signInWithGitHubLink(true)}
     >

vite/VideoPage/Actions/FurtherActions.tsx

@@ -1,6 +1,6 @@
 import { Link } from "@tanstack/react-router";
+import { FaUserCircle } from "react-icons/fa";
 import { PrivateContributionsIcon } from "../../../icons/PrivateContributionsIcon";
-import { UserIcon } from "../../../icons/UserIcon";
 import { signInWithGitHubLink } from "../../sign-in-with-github";
 import { FurtherAction } from "./FurtherAction";
 import styles from "./styles.module.css";
@@ -15,7 +15,7 @@ export const FurtherActions: React.FC = () => {
       <div className={styles.furtherActionsButtonContainer}>
         <Link to="/">
           <FurtherAction
-            icon={(params) => <UserIcon {...params} width={15} />}
+            icon={(params) => <FaUserCircle {...params} width={15} />}
             label="Unwrap another user"
           />
         </Link>

vite/VideoPage/Actions/SharingActions.tsx

@@ -17,6 +17,7 @@ export const SharingActions: React.FC<{}> = () => {
   return (
     <div className={styles.sharingActionsWrapper}>
       <Link
+        target="_blank"
         from={userRoute.id}
         to={"share"}
         params={() => {
@@ -31,6 +32,7 @@ export const SharingActions: React.FC<{}> = () => {
         />
       </Link>
       <Link
+        target="_blank"
         from={videoRoute.id}
         to={"share"}
         params={{ username }}