{ - if (event.key === "Enter") { - triggerButton(event); - } - }} - onKeyUp={(event) => { - if (event.key === " ") { - triggerButton(event); - } - }} - > +


 				{secret ? (
 					<>
@@ -60,7 +34,7 @@ export const CodeExample: FC = ({
 						 *    readily available in the HTML itself
 						 */}
 						{obfuscateText(code)}
-						
+						
 							Encrypted text. Please access via the copy button.
 						
 					
@@ -69,7 +43,7 @@ export const CodeExample: FC = ({
 				)}

- +

); }; diff --git a/site/src/components/CopyButton/CopyButton.tsx b/site/src/components/CopyButton/CopyButton.tsx index 86a14c2a2ff48..9110bb4cd68d0 100644 --- a/site/src/components/CopyButton/CopyButton.tsx +++ b/site/src/components/CopyButton/CopyButton.tsx @@ -1,77 +1,44 @@ -import { type Interpolation, type Theme, css } from "@emotion/react"; -import IconButton from "@mui/material/Button"; -import Tooltip from "@mui/material/Tooltip"; +import { Button, type ButtonProps } from "components/Button/Button"; +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "components/Tooltip/Tooltip"; import { useClipboard } from "hooks/useClipboard"; -import { CheckIcon } from "lucide-react"; -import { type ReactNode, forwardRef } from "react"; -import { FileCopyIcon } from "../Icons/FileCopyIcon"; +import { CheckIcon, CopyIcon } from "lucide-react"; +import type { FC } from "react"; -interface CopyButtonProps { - children?: ReactNode; +type CopyButtonProps = ButtonProps & { text: string; - ctaCopy?: string; - wrapperStyles?: Interpolation; - buttonStyles?: Interpolation; - tooltipTitle?: string; -} - -const Language = { - tooltipTitle: "Copy to clipboard", - ariaLabel: "Copy to clipboard", + label: string; }; -/** - * Copy button used inside the CodeBlock component internally - */ -export const CopyButton = forwardRef( - (props, ref) => { - const { - text, - ctaCopy, - wrapperStyles, - buttonStyles, - tooltipTitle = Language.tooltipTitle, - } = props; - const { showCopiedSuccess, copyToClipboard } = useClipboard({ - textToCopy: text, - }); +export const CopyButton: FC = ({ + text, + label, + ...buttonProps +}) => { + const { showCopiedSuccess, copyToClipboard } = useClipboard({ + textToCopy: text, + }); - return ( - -

- + + +

+ {showCopiedSuccess ? : } + {label} + + + {label} - ); - }, -); - -const styles = { - button: (theme) => css` - border-radius: 8px; - padding: 8px; - min-width: 32px; - - &:hover { - background: ${theme.palette.background.paper}; - } - `, - copyIcon: css` - width: 20px; - height: 20px; - `, -} satisfies Record>; + + ); +}; diff --git a/site/src/components/GitDeviceAuth/GitDeviceAuth.tsx b/site/src/components/GitDeviceAuth/GitDeviceAuth.tsx index 5bbf036943773..bd35b305eea7f 100644 --- a/site/src/components/GitDeviceAuth/GitDeviceAuth.tsx +++ b/site/src/components/GitDeviceAuth/GitDeviceAuth.tsx @@ -134,7 +134,11 @@ export const GitDeviceAuth: FC = ({ Copy your one-time code:

{externalAuthDevice.user_code} - + {" "} +

Then open the link below and paste it: diff --git a/site/src/components/Icons/FileCopyIcon.tsx b/site/src/components/Icons/FileCopyIcon.tsx deleted file mode 100644 index bd6fc359fe71f..0000000000000 --- a/site/src/components/Icons/FileCopyIcon.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon"; - -export const FileCopyIcon = (props: SvgIconProps): JSX.Element => ( - - - -); diff --git a/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.tsx b/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.tsx index 13ee16076dc5b..b8e4b9885d21b 100644 --- a/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.tsx +++ b/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.tsx @@ -151,15 +151,7 @@ export const UserDropdownContent: FC = ({

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier! Saves Data!