diff --git a/components/Shared/CopyText.styled.ts b/components/Shared/CopyText.styled.ts index c0d12107..d4aee8aa 100644 --- a/components/Shared/CopyText.styled.ts +++ b/components/Shared/CopyText.styled.ts @@ -23,6 +23,7 @@ const StyledCopyText = styled("button", { cursor: "pointer", color: "$purple", fontWeight: "700", + fontFamily: "$northwesternSans", fontSize: "$gr3", whiteSpace: "nowrap", diff --git a/components/Work/ActionsDialog/DownloadAndShare.styled.ts b/components/Work/ActionsDialog/DownloadAndShare.styled.ts index b1524c2f..62ca3915 100644 --- a/components/Work/ActionsDialog/DownloadAndShare.styled.ts +++ b/components/Work/ActionsDialog/DownloadAndShare.styled.ts @@ -5,18 +5,18 @@ import { styled } from "@/stitches.config"; const EmbedViewer = styled("div", { border: "2px dashed $black10", - width: "calc(100% - $4)", - padding: "$3 $4", + width: "calc(100% - $gr4)", + padding: "$gr4", "@sm": { width: "100%", }, pre: { - margin: "$3 0", + margin: "0 0 $gr3", whiteSpace: "break-spaces", borderRadius: "3px", - fontSize: "$3", + fontSize: "$gr2", lineHeight: "1.55em", wordBreak: "break-word", }, @@ -39,13 +39,13 @@ const EmbedHTMLActionRow = styled("div", { const ItemActions = styled("ul", { display: "flex", padding: "0", - margin: "$3 0", + margin: "$gr3 0", fontWeight: "400", li: { listStyle: "none", - margin: "0 $3 0 0", - fontSize: "$3", + margin: "0 $gr3 0 0", + fontSize: "$gr3", [`${StyledCopyText}`]: { color: "$black50", @@ -111,6 +111,28 @@ const ItemStyled = styled("div", { margin: "$4 0 0", }); +const ShareURL = styled(EmbedHTML, { + "> a": { + fontSize: "$gr3", + }, +}); + +const ShareURLActions = styled(EmbedHTMLActionRow, { + marginTop: "$gr3", + + "> a, > button": { + marginLeft: "$gr3", + color: "$black50", + fontSize: "$gr3", + textDecoration: "underline", + fontWeight: "400", + + "&:first-child": { + marginLeft: "0", + }, + }, +}); + export { EmbedHTML, EmbedHTMLActionRow, @@ -120,4 +142,6 @@ export { ItemRow, ItemStyled, ItemThumbnail, + ShareURL, + ShareURLActions, }; diff --git a/components/Work/ActionsDialog/DownloadAndShare.tsx b/components/Work/ActionsDialog/DownloadAndShare.tsx index c398fcca..7db4b11b 100644 --- a/components/Work/ActionsDialog/DownloadAndShare.tsx +++ b/components/Work/ActionsDialog/DownloadAndShare.tsx @@ -12,6 +12,8 @@ import { ItemRow, ItemStyled, ItemThumbnail, + ShareURL, + ShareURLActions, } from "@/components/Work/ActionsDialog/DownloadAndShare.styled"; import { Label, Thumbnail } from "@samvera/nectar-iiif"; import { makeBlob, mimicDownload } from "@samvera/image-downloader"; @@ -19,7 +21,7 @@ import { makeBlob, mimicDownload } from "@samvera/image-downloader"; 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 Heading from "@/components/Heading/Heading"; import IIIF from "@/components/Shared/SVG/IIIF"; import React from "react"; import SharedSocial from "@/components/Shared/Social"; @@ -66,19 +68,35 @@ const DownloadAndShare: React.FC = () => { {!isSharedLinkPage && ( - -
-
IIIF Manifest
-
- - {manifest.id} + <> + + IIIF Manifest + + + + {manifest.id} + + + + + What is IIIF? -
-
-
+ + View in Mirador + + + + )} -

Embed Viewer

+ Embed Viewer {showEmbedWarning && {embedWarningMessage}} {!showEmbedWarning && ( @@ -89,7 +107,7 @@ const DownloadAndShare: React.FC = () => { {Array.isArray(manifest?.items) && ( <> -

Download and Embed

+ Download and Embed {isWorkRestricted && !isSharedLinkPage && (