Merge pull request #3048 from isaiahmartin847/refactor/copy-secret

Improve Visibility and Alignment of Tooltips and Copy Secret Key Icon
This commit is contained in:
Akhil Mohan
2025-01-31 14:20:02 +05:30
committed by GitHub
@@ -189,17 +189,19 @@ function SecretRenameRow({ environments, getSecretByKey, secretKey, secretPath }
animate={{ x: 0, opacity: 1 }} animate={{ x: 0, opacity: 1 }}
exit={{ x: 10, opacity: 0 }} exit={{ x: 10, opacity: 0 }}
> >
<div className="relative">
<Tooltip content="Copy secret name"> <Tooltip content="Copy secret name">
<IconButton <IconButton
ariaLabel="copy-value" ariaLabel="copy-value"
variant="plain" variant="plain"
size="sm" size="sm"
className="p-0 opacity-0 group-hover:opacity-100" className="p-0 opacity-100"
onClick={copyTokenToClipboard} onClick={copyTokenToClipboard}
> >
<FontAwesomeIcon icon={isSecNameCopied ? faCheck : faCopy} /> <FontAwesomeIcon icon={isSecNameCopied ? faCheck : faCopy} />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
</div>
</motion.div> </motion.div>
) : ( ) : (
<motion.div <motion.div
@@ -209,6 +211,7 @@ function SecretRenameRow({ environments, getSecretByKey, secretKey, secretPath }
animate={{ x: 0, opacity: 1 }} animate={{ x: 0, opacity: 1 }}
exit={{ x: -10, opacity: 0 }} exit={{ x: -10, opacity: 0 }}
> >
<div className="relative">
<Tooltip content={errors.key ? errors.key.message : "Save"}> <Tooltip content={errors.key ? errors.key.message : "Save"}>
<IconButton <IconButton
ariaLabel="more" ariaLabel="more"
@@ -232,6 +235,8 @@ function SecretRenameRow({ environments, getSecretByKey, secretKey, secretPath }
)} )}
</IconButton> </IconButton>
</Tooltip> </Tooltip>
</div>
<div className="relative">
<Tooltip content="Cancel"> <Tooltip content="Cancel">
<IconButton <IconButton
ariaLabel="more" ariaLabel="more"
@@ -247,6 +252,7 @@ function SecretRenameRow({ environments, getSecretByKey, secretKey, secretPath }
<FontAwesomeIcon icon={faClose} size="lg" /> <FontAwesomeIcon icon={faClose} size="lg" />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
</div>
</motion.div> </motion.div>
)} )}
</AnimatePresence> </AnimatePresence>