diff --git a/app/components/Actions.ts b/app/components/Actions.ts index 2c2166a214..f1826bab59 100644 --- a/app/components/Actions.ts +++ b/app/components/Actions.ts @@ -6,7 +6,6 @@ import Flex from "~/components/Flex"; export const Action = styled(Flex)` justify-content: center; align-items: center; - padding: 0 0 0 12px; height: 32px; font-size: 15px; flex-shrink: 0; @@ -18,7 +17,6 @@ export const Action = styled(Flex)` export const Separator = styled.div` flex-shrink: 0; - margin-left: 12px; width: 1px; height: 28px; background: ${s("divider")}; @@ -33,6 +31,7 @@ const Actions = styled(Flex)` background: ${s("background")}; padding: 12px; backdrop-filter: blur(20px); + gap: 12px; @media print { display: none; diff --git a/app/components/Header.tsx b/app/components/Header.tsx index 7f8bb4cc78..86f0740f04 100644 --- a/app/components/Header.tsx +++ b/app/components/Header.tsx @@ -125,6 +125,7 @@ const Actions = styled(Flex)` flex-basis: 0; min-width: auto; padding-left: 8px; + gap: 12px; ${breakpoint("tablet")` position: unset; diff --git a/app/components/Lightbox.tsx b/app/components/Lightbox.tsx index ff5c8655fe..d367e19db7 100644 --- a/app/components/Lightbox.tsx +++ b/app/components/Lightbox.tsx @@ -12,6 +12,7 @@ import { CloseIcon, CrossIcon, DownloadIcon, + LinkIcon, NextIcon, } from "outline-icons"; import { depths, extraArea, s } from "@shared/styles"; @@ -25,6 +26,8 @@ import Tooltip from "~/components/Tooltip"; import LoadingIndicator from "./LoadingIndicator"; import Fade from "./Fade"; import Button from "./Button"; +import CopyToClipboard from "./CopyToClipboard"; +import { Separator } from "./Actions"; export enum LightboxStatus { READY_TO_OPEN, @@ -457,6 +460,8 @@ function Lightbox({ onUpdate, activePos }: Props) { return null; } + const src = sanitizeUrl(currentImageNode.attrs.src) ?? ""; + return ( @@ -474,6 +479,18 @@ function Lightbox({ onUpdate, activePos }: Props) { + + +