updated design of secret sharing

frontend/src/pages/share-secret/index.tsx

@@ -12,7 +12,7 @@ const SecretApproval = () => {
         <meta property="og:title" content="" />
         <meta name="og:description" content="" />
       </Head>
-      <div className="h-full">
+      <div className="h-full dark">
         <ShareSecretPublicPage />
       </div>
     </>

frontend/src/pages/shared/secret/[id]/index.tsx

@@ -12,7 +12,7 @@ const SecretApproval = () => {
         <meta property="og:title" content="" />
         <meta name="og:description" content="" />
       </Head>
-      <div className="h-full">
+      <div className="h-full dark">
         <ShareSecretPublicPage />
       </div>
     </>

frontend/src/views/ShareSecretPublicPage/ShareSecretPublicPage.tsx

@@ -3,12 +3,13 @@ import Head from "next/head";
 import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
+import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { decryptSymmetric } from "@app/components/utilities/cryptography/crypto";
-import { usePopUp, useTimedReset } from "@app/hooks";
+import { useTimedReset } from "@app/hooks";
 import { useGetActiveSharedSecretByIdAndHashedHex } from "@app/hooks/api/secretSharing";
 
-import { AddShareSecretModal } from "../ShareSecretPage/components/AddShareSecretModal";
 import { SecretTable } from "./components";
 
 export const ShareSecretPublicPage = () => {
@@ -51,91 +52,81 @@ export const ShareSecretPublicPage = () => {
     navigator.clipboard.writeText(decryptedSecret);
     setIsUrlCopied(true);
   };
-  const { popUp, handlePopUpToggle } = usePopUp(["createSharedSecret"] as const);
+  // const { popUp, handlePopUpToggle } = usePopUp(["createSharedSecret"] as const);
 
   return (
-    <div className="flex h-screen flex-col bg-bunker-800 text-gray-200">
+    <div className="h-screen bg-gradient-to-tr from-mineshaft-700 to-bunker-800 text-gray-200">
       <Head>
         <title>Secret Shared | Infisical</title>
         <link rel="icon" href="/infisical.ico" />
       </Head>
-
+      <div className="flex-col items-center justify-center h-screen w-full overflow-y-auto dark:[color-scheme:dark]">
-      <div className="flex items-center justify-center p-4">
         <Link href="https://infisical.com">
-          <Image
+          <div className="mb-4 flex justify-center pt-8 md:pt-0 sm:mt-28">
-            src="/images/biglogo.png"
+            <Image src="/images/gradientLogo.svg" height={90} width={120} alt="Infisical logo" />
-            height={60}
+          </div>
-            width={80}
-            alt="Infisical logo"
-            className="cursor-pointer"
-          />
         </Link>
-      </div>
+        <h1 className="mt-6 mb-4 bg-gradient-to-b from-white to-bunker-200 bg-clip-text text-center text-2xl font-medium text-transparent px-4">
+          {id ? "Someone shared a secret on Infisical with you." : "Share Secrets with Infisical"}
+        </h1>
+        <div className="flex max-w-xl w-full mt-8 flex justify-center m-auto px-4">
+          {id && (
+            <SecretTable
+              isLoading={isLoading}
+              decryptedSecret={decryptedSecret}
+              isUrlCopied={isUrlCopied}
+              copyUrlToClipboard={copyUrlToClipboard}
+            />
+          )}
+        </div>
 
-      <div className="flex flex-1 flex-col items-center justify-center px-4">
+        <div className="my-6 sm:my-10 max-w-xl w-full px-8 flex justify-center m-auto px-4"> 
-        <div className="flex w-full max-w-4xl flex-col items-center gap-4 md:gap-20">
+          <div className="border-t border-mineshaft-600 w-full"/> 
-          <p className="text-center text-xl font-semibold text-gray-200 md:text-3xl">
+        </div>
-            {id ? "Secret Shared via Infisical" : "Share Secrets with Infisical"}
+
-          </p>
+        <div className="max-w-xl m-auto px-4">
-          <div className="flex w-full flex-grow flex-col gap-6 md:flex-row md:gap-12">
+          <div className="flex flex-col rounded-md gap-2 max-w-xl border bg-primary/5 p-6 border-primary-500/30 mb-8 sm:mb-20 flex justify-center m-auto">
-            <div className="flex-1 self-center pt-4 text-center md:pt-0 md:text-left">
+            <p className="pb-2 font-semibold text-mineshaft-100 md:pb-4 md:text-xl">
-              <p className="pb-2 font-semibold text-mineshaft-100 md:pb-4 md:text-xl">
+              Safe, Secure, & Open Source
-                Safe & Secure
+            </p>
-              </p>
+            <p className="md:text-md text-sm">
-              <p className="md:text-md text-sm">
+              Infisical is the <a
-                Infisical uses <span className="text-primary">Zero Knowledge</span> to ensure that
+                href="https://github.com/infisical/infisical"
-                your secrets are truly private (even from us).
+                target="_blank"
-              </p>
+                rel="noopener noreferrer"
-            </div>
+                className="text-primary underline"
-            <div className="flex-1 rounded-lg p-2">
+              >
-              {id && (
+                open source
-                <SecretTable
+              </a> secrets management platform for developers. <br className="hidden md:inline" />
-                  isLoading={isLoading}
+              <div className="pb-2"/>
-                  decryptedSecret={decryptedSecret}
+              Infisical Secret Sharing uses end-to-end encrypted architecture to ensure that
-                  isUrlCopied={isUrlCopied}
+              your secrets are truly private (even from us).
-                  copyUrlToClipboard={copyUrlToClipboard}
+            </p>
-                />
+            <Link href="https://infisical.com"><span className="hover:text-primary duration-200 cursor-pointer mt-4">Learn More <FontAwesomeIcon icon={faArrowRight} /></span></Link>
-              )}
-            </div>
-            <div className="flex-1 self-center text-center md:text-right">
-              <p className="pb-2 font-semibold text-mineshaft-100 md:pb-4 md:text-xl">
-                Open Source
-              </p>
-              <p className="md:text-md text-sm">
-                Infisical is open source. <br className="hidden md:inline" />
-                Check us out on{" "}
-                <a
-                  href="https://github.com/infisical/infisical"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-primary"
-                >
-                  GitHub
-                </a>
-                .
-              </p>
-            </div>
           </div>
         </div>
-        <div className="pt-20">
+
-          <AddShareSecretModal
+        {/* <div className="flex flex-1 flex-col items-center justify-center px-4">
-            popUp={popUp}
+          <div className="pt-20">
-            handlePopUpToggle={handlePopUpToggle}
+            <AddShareSecretModal
-            isPublic
+              popUp={popUp}
-            inModal={false}
+              handlePopUpToggle={handlePopUpToggle}
-          />
+              isPublic
+              inModal={false}
+            />
+          </div>
+        </div> */}
+        <div className="sm:absolute bottom-0 w-full bg-mineshaft-600 flex items-center justify-center p-2">
+          <p className="text-center text-sm text-mineshaft-300">
+            © 2024{" "}
+            <a className="text-primary" href="https://infisical.com">
+              Infisical
+            </a>. All rights reserved.
+            <br />
+            156 2nd st, 3rd Floor, San Francisco, California, 94105, United States. 🇺🇸
+          </p>
         </div>
       </div>
-      <div className="flex items-center justify-center p-4">
-        <p className="text-center text-sm text-gray-200">
-          Developed by{" "}
-          <a className="text-primary" href="https://infisical.com">
-            Infisical
-          </a>
-          <br />
-          Open Source Secret Management{" "}
-        </p>
-      </div>
     </div>
   );
 };

frontend/src/views/ShareSecretPublicPage/components/SecretTable.tsx

@@ -1,7 +1,7 @@
 import { faCheck, faCopy, faKey } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { EmptyState, IconButton, SecretInput, Td, Tr } from "@app/components/v2";
+import { EmptyState, IconButton, Td, Tr } from "@app/components/v2";
 
 type Props = {
   isLoading: boolean;
@@ -16,7 +16,7 @@ export const SecretTable = ({
   isUrlCopied,
   copyUrlToClipboard
 }: Props) => (
-  <div className="flex items-center rounded border border-solid border-mineshaft-700 bg-mineshaft-800 p-4">
+  <div className="flex items-center w-full h-full rounded border border-solid border-mineshaft-700 bg-mineshaft-800 p-2">
     {isLoading && <div className="bg-mineshaft-800 text-center text-bunker-400">Loading...</div>}
     {!isLoading && !decryptedSecret && (
       <Tr>
@@ -26,19 +26,21 @@ export const SecretTable = ({
       </Tr>
     )}
     {!isLoading && decryptedSecret && (
-      <>
+      <div className="relative h-full w-full p-2 border border-mineshaft-700 bg-mineshaft-900 overflow-y-auto dark">
-        <div className="min-w-[12rem] max-w-[20rem] flex-1 break-words pr-4">
+        <div className="w-full h-full flex-1 break-words pr-4 overflow-y-scroll max-h-60 dark:[color-scheme:dark] thin-scrollbar">
-          <SecretInput isVisible value={decryptedSecret} readOnly />
+          <div className="whitespace-pre-line w-full min-w-full">{decryptedSecret}</div>
         </div>
         <IconButton
+          variant="outline_bg"
+          colorSchema="primary"
           ariaLabel="copy to clipboard"
           onClick={copyUrlToClipboard}
-          className="rounded p-2 hover:bg-gray-700"
+          className="absolute right-6 top-2 rounded"
           size="xs"
         >
-          <FontAwesomeIcon icon={isUrlCopied ? faCheck : faCopy} />
+          <FontAwesomeIcon className="pr-2" icon={isUrlCopied ? faCheck : faCopy} /> Copy
         </IconButton>
-      </>
+      </div>
     )}
   </div>
 );