diff --git a/components/Shared/CopyText.styled.ts b/components/Shared/CopyText.styled.ts index a28482a5..c0d12107 100644 --- a/components/Shared/CopyText.styled.ts +++ b/components/Shared/CopyText.styled.ts @@ -23,7 +23,13 @@ const StyledCopyText = styled("button", { cursor: "pointer", color: "$purple", fontWeight: "700", - fontSize: "$3", + fontSize: "$gr3", + whiteSpace: "nowrap", + + svg: { + height: "calc($gr3 - 3px)", + marginRight: "$gr1", + }, "&:hover": { textDecoration: "underline", diff --git a/components/Shared/CopyText.tsx b/components/Shared/CopyText.tsx index 5c0d935f..50c398cf 100644 --- a/components/Shared/CopyText.tsx +++ b/components/Shared/CopyText.tsx @@ -1,24 +1,29 @@ import { CopyStatus, useCopyToClipboard } from "@/hooks/useCopyToClipboard"; +import React, { ReactElement } from "react"; import { StyledCopyText, StyledStatus, } from "@/components/Shared/CopyText.styled"; -import React from "react"; -const CopyTextStatus: React.FC<{ status: CopyStatus }> = ({ status }) => { +export const CopyTextStatus: React.FC<{ status: CopyStatus }> = ({ + status, +}) => { if (!status) return null; return {status}; }; -export const CopyText: React.FC<{ textPrompt: string; textToCopy: string }> = ({ - textPrompt, - textToCopy, -}) => { +export const CopyText: React.FC<{ + renderIcon?: () => ReactElement; + textPrompt: string; + textToCopy: string; +}> = ({ renderIcon, textPrompt, textToCopy }) => { const [copyStatus, copyText] = useCopyToClipboard(textToCopy); + const icon = renderIcon ? renderIcon() : null; + return ( - {textPrompt} + {icon} {textPrompt} ); }; diff --git a/components/Shared/SVG/IIIF.tsx b/components/Shared/SVG/IIIF.tsx new file mode 100644 index 00000000..5954d8b9 --- /dev/null +++ b/components/Shared/SVG/IIIF.tsx @@ -0,0 +1,43 @@ +const IIIF = () => { + const red = "#ed1d33"; + const blue = "#2873ab"; + + return ( + + ); +}; +export default IIIF; diff --git a/components/Work/ActionsDialog/DownloadAndShare.styled.ts b/components/Work/ActionsDialog/DownloadAndShare.styled.ts index 168c12a5..b1524c2f 100644 --- a/components/Work/ActionsDialog/DownloadAndShare.styled.ts +++ b/components/Work/ActionsDialog/DownloadAndShare.styled.ts @@ -1,3 +1,4 @@ +import { StyledCopyText } from "@/components/Shared/CopyText.styled"; import { styled } from "@/stitches.config"; /* eslint sort-keys: 0 */ @@ -46,9 +47,20 @@ const ItemActions = styled("ul", { margin: "0 $3 0 0", fontSize: "$3", - "a, a:visited": { + [`${StyledCopyText}`]: { color: "$black50", textDecoration: "underline", + fontWeight: "400", + padding: "0", + + "&:hover, &:focus": { + textDecoration: "none", + }, + }, + + "a, a:visited": { + color: "$black50 !important", + textDecoration: "underline", }, "a:hover, a:focus": { diff --git a/components/Work/ActionsDialog/DownloadAndShare.tsx b/components/Work/ActionsDialog/DownloadAndShare.tsx index 8c243f48..c398fcca 100644 --- a/components/Work/ActionsDialog/DownloadAndShare.tsx +++ b/components/Work/ActionsDialog/DownloadAndShare.tsx @@ -20,6 +20,7 @@ import ActionsDialogAside from "@/components/Work/ActionsDialog/Aside"; import Announcement from "@/components/Shared/Announcement"; import CopyText from "@/components/Shared/CopyText"; import { DefinitionListWrapper } from "@/components/Shared/DefinitionList.styled"; +import IIIF from "@/components/Shared/SVG/IIIF"; import React from "react"; import SharedSocial from "@/components/Shared/Social"; import SimpleSelect from "@/components/Shared/SimpleSelect.styled"; @@ -124,6 +125,8 @@ const Item: React.FC = ({ item, showEmbedWarning }) => { const [color, setColor] = React.useState("default"); const [width, setWidth] = React.useState(3000); + const iiifImageInfo = `${getInfoResponse(item)}/info.json`; + const colors = [ { label: "Default", @@ -224,6 +227,13 @@ const Item: React.FC = ({ item, showEmbedWarning }) => { Embed HTML +
  • + +