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
+
+
+