feat: change ui for new secret and add button for existing shared secret

This commit is contained in:
ShubhamPalriwala
2024-06-10 08:01:32 +05:30
parent 263d321d75
commit 24b8b64d3b
7 changed files with 101 additions and 74 deletions
@@ -125,11 +125,7 @@ export const AddShareSecretForm = ({
};
return (
<form className="flex w-full flex-col items-center" onSubmit={handleSubmit(onFormSubmit)}>
<div
className={`w-[${inModal ? "33rem" : "36rem"}] ${
!inModal && "border border-mineshaft-600 bg-mineshaft-800 p-4"
}`}
>
<div className={`${!inModal && "border border-mineshaft-600 bg-mineshaft-800 p-4"}`}>
<div className="mb-4">
<Controller
control={control}
@@ -215,7 +211,7 @@ export const AddShareSecretForm = ({
</div>
</div>
</div>
<div className={`flex items-center ${!inModal && "justify-center"}`}>
<div className={`flex items-center ${!inModal && "justify-center pt-1"}`}>
<Button className="mr-4" type="submit" isDisabled={isSubmitting} isLoading={isSubmitting}>
{inModal ? "Create" : "Share your own Secret"}
</Button>
@@ -15,24 +15,22 @@ export const ViewAndCopySharedSecret = ({
copyUrlToClipboard: () => void;
}) => {
return (
<div
className={`w-[${inModal ? "33rem" : "36rem"}] ${
!inModal && "border border-mineshaft-600 bg-mineshaft-800 p-4"
}`}
>
<div className="mt-2 mb-3 mr-2 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
<p className="mr-4 break-all">{newSharedSecret}</p>
<IconButton
ariaLabel="copy icon"
colorSchema="secondary"
className="group relative"
onClick={copyUrlToClipboard}
>
<FontAwesomeIcon icon={isUrlCopied ? faCheck : faCopy} />
<span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
Click to Copy
</span>
</IconButton>
<div className={`flex w-full justify-center ${!inModal ? "mx-auto max-w-[40rem]" : ""}`}>
<div className={`${!inModal ? "border border-mineshaft-600 bg-mineshaft-800 p-4" : ""}`}>
<div className="my-2 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
<p className="mr-4 break-all">{newSharedSecret}</p>
<IconButton
ariaLabel="copy icon"
colorSchema="secondary"
className="group relative"
onClick={copyUrlToClipboard}
>
<FontAwesomeIcon icon={isUrlCopied ? faCheck : faCopy} />
<span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
Click to Copy
</span>
</IconButton>
</div>
</div>
</div>
);