feat: ui option to paste token on sending token to cli fails

frontend/src/views/ShareSecretPublicPage/ShareSecretPublicPage.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from "react";
+import { useMemo } from "react";
 import Head from "next/head";
 import Image from "next/image";
 import Link from "next/link";
@@ -20,7 +20,7 @@ export const ShareSecretPublicPage = ({ isNewSession }: { isNewSession: boolean
   const [hashedHex, key] = urlEncodedPublicKey
     ? urlEncodedPublicKey.toString().split("-")
     : ["", ""];
-  
+
   const publicKey = decodeURIComponent(urlEncodedPublicKey as string);
   const { isLoading, data } = useGetActiveSharedSecretByIdAndHashedHex(
     id as string,
@@ -46,12 +46,6 @@ export const ShareSecretPublicPage = ({ isNewSession }: { isNewSession: boolean
     initialState: false
   });
 
-  useEffect(() => {
-    if (isUrlCopied) {
-      setTimeout(() => setIsUrlCopied(false), 2000);
-    }
-  }, [isUrlCopied]);
-
   const copyUrlToClipboard = () => {
     navigator.clipboard.writeText(decryptedSecret);
     setIsUrlCopied(true);
@@ -59,12 +53,12 @@ export const ShareSecretPublicPage = ({ isNewSession }: { isNewSession: boolean
   const { popUp, handlePopUpToggle } = usePopUp(["createSharedSecret"] as const);
 
   return (
-    <div className="h-screen dark:[color-scheme:dark] flex flex-col overflow-y-auto bg-gradient-to-tr from-mineshaft-700 to-bunker-800 text-gray-200">
+    <div className="flex h-screen flex-col overflow-y-auto bg-gradient-to-tr from-mineshaft-700 to-bunker-800 text-gray-200 dark:[color-scheme:dark]">
       <Head>
         <title>Secret Shared | Infisical</title>
         <link rel="icon" href="/infisical.ico" />
       </Head>
-      <div className="w-full flex flex-grow items-center justify-center dark:[color-scheme:dark]">
+      <div className="flex w-full flex-grow items-center justify-center dark:[color-scheme:dark]">
         <div className="relative">
           <div className="mb-4 flex justify-center pt-8">
             <Link href="https://infisical.com">
@@ -77,9 +71,15 @@ export const ShareSecretPublicPage = ({ isNewSession }: { isNewSession: boolean
               />
             </Link>
           </div>
-          <div className="w-full flex justify-center">
-            <h1 className={`${id ? "max-w-sm mb-4": "max-w-md mt-4 mb-6"} bg-gradient-to-b from-white to-bunker-200 bg-clip-text px-4 text-center text-3xl font-medium text-transparent`}>
-              {id ? "Someone shared a secret via Infisical with you" : "Share a secret via Infisical"}
+          <div className="flex w-full justify-center">
+            <h1
+              className={`${
+                id ? "mb-4 max-w-sm" : "mt-4 mb-6 max-w-md"
+              } bg-gradient-to-b from-white to-bunker-200 bg-clip-text px-4 text-center text-3xl font-medium text-transparent`}
+            >
+              {id
+                ? "Someone shared a secret via Infisical with you"
+                : "Share a secret via Infisical"}
             </h1>
           </div>
           <div className="m-auto mt-4 flex w-full max-w-2xl justify-center px-6">
@@ -114,7 +114,7 @@ export const ShareSecretPublicPage = ({ isNewSession }: { isNewSession: boolean
                 className="mt-3 w-full text-sm font-normal leading-[1.2rem] text-mineshaft-300 hover:text-mineshaft-100"
               >
                 <Button
-                  className="bg-mineshaft-700 text-bunker-200 w-full py-3"
+                  className="w-full bg-mineshaft-700 py-3 text-bunker-200"
                   colorSchema="primary"
                   variant="outline_bg"
                   size="sm"
@@ -126,34 +126,45 @@ export const ShareSecretPublicPage = ({ isNewSession }: { isNewSession: boolean
               </a>
             </div>
           )}
-          <div className="m-auto my-6 flex w-full max-w-xl justify-center px-8 px-4 sm:my-8">
+          <div className="m-auto my-6 flex w-full max-w-xl justify-center px-4 sm:my-8">
             <div className="w-full border-t border-mineshaft-600" />
           </div>
-          <div className="flex flex-col justify-center items-center m-auto max-w-2xl px-4 sm:px-6">
-            <div className="m-auto mb-12 flex flex max-w-2xl w-full flex-col justify-center rounded-md border border-primary-500/30 bg-primary/5 p-6 pt-5">
-              <p className="pb-2 font-semibold text-mineshaft-100 md:pb-3 text-lg md:text-xl w-full">
-                Open source <span className="bg-clip-text text-transparent bg-gradient-to-tr from-yellow-500 to-primary-500">secret management</span> for developers
+          <div className="m-auto flex max-w-2xl flex-col items-center justify-center px-4 sm:px-6">
+            <div className="m-auto mb-12 flex w-full max-w-2xl flex-col justify-center rounded-md border border-primary-500/30 bg-primary/5 p-6 pt-5">
+              <p className="w-full pb-2 text-lg font-semibold text-mineshaft-100 md:pb-3 md:text-xl">
+                Open source{" "}
+                <span className="bg-gradient-to-tr from-yellow-500 to-primary-500 bg-clip-text text-transparent">
+                  secret management
+                </span>{" "}
+                for developers
               </p>
-              <div className="flex flex-col sm:flex-row gap-x-4">
+              <div className="flex flex-col gap-x-4 sm:flex-row">
                 <p className="md:text-md text-md">
                   <a
                     href="https://github.com/infisical/infisical"
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="bg-clip-text text-transparent bg-gradient-to-tr from-yellow-500 to-primary-500 text-bold"
+                    className="text-bold bg-gradient-to-tr from-yellow-500 to-primary-500 bg-clip-text text-transparent"
                   >
                     Infisical
-                  </a>{" "} is the all-in-one secret management platform to securely manage secrets, configs, and certificates across your team and infrastructure.
+                  </a>{" "}
+                  is the all-in-one secret management platform to securely manage secrets, configs,
+                  and certificates across your team and infrastructure.
                 </p>
                 <Link href="https://infisical.com">
-                  <span className="mt-4 border border-mineshaft-400/40 w-[17.5rem] h-min py-2 px-3 rounded-md bg-mineshaft-600 cursor-pointer duration-200 hover:text-white hover:border-primary/60 hover:bg-primary/20">
-                    Try Infisical <FontAwesomeIcon icon={faArrowRight} className="pl-1"/>
+                  <span className="mt-4 h-min w-[17.5rem] cursor-pointer rounded-md border border-mineshaft-400/40 bg-mineshaft-600 py-2 px-3 duration-200 hover:border-primary/60 hover:bg-primary/20 hover:text-white">
+                    Try Infisical <FontAwesomeIcon icon={faArrowRight} className="pl-1" />
                   </span>
                 </Link>
               </div>
             </div>
           </div>
-          <AddShareSecretModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} isPublic inModal />
+          <AddShareSecretModal
+            popUp={popUp}
+            handlePopUpToggle={handlePopUpToggle}
+            isPublic
+            inModal
+          />
         </div>
       </div>
       <div className="mt-auto flex w-full items-center justify-center bg-mineshaft-600 p-2">