diff --git a/packages/components/src/LightBox/LightBox.module.css b/packages/components/src/LightBox/LightBox.module.css index 6be096f381..7fa7e8bd90 100644 --- a/packages/components/src/LightBox/LightBox.module.css +++ b/packages/components/src/LightBox/LightBox.module.css @@ -45,12 +45,13 @@ } .toolbar { - display: flex; + position: absolute; + top: 0; + right: 0; z-index: var(--elevation-base); padding: var(--space-small) var(--space-base); color: var(--color-text--secondary); font-size: var(--typography--fontSize-large); - background-color: var(--color-surface--background); justify-content: space-between; } @@ -67,19 +68,59 @@ min-height: 0; } -.overlay { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - background-color: var(--color-overlay); -} - .image { position: absolute; top: 50%; - max-width: 100%; - max-height: 100%; + max-width: 700px; + max-height: 700px; margin: auto; } + +.backgroundBlur { + display: flex; + width: 100%; + height: 100%; + backdrop-filter: blur(10px); + background-color: var(--color-overlay); +} + +.backgroundImage { + width: 100%; + background-position: center center; + background-repeat: no-repeat; + background-size: cover; +} + +.thumbnailList { + display: flex; + position: absolute; + bottom: 0; + width: 100%; + list-style: none; + gap: var(--space-base); + justify-content: center; + + li { + display: block; + width: 70px; + height: 70px; + padding: var(--space-small); + border: 1px solid var(--color-white); + border-radius: var(--radius-base); + + &[data-no-item] { + border-color: transparent; + } + } + + .thumbnail { + display: block; + width: 100%; + height: 100%; + border-radius: var(--radius-base); + background-position: center center; + background-repeat: no-repeat; + background-size: cover; + background-origin: content-box; + } +} diff --git a/packages/components/src/LightBox/LightBox.module.css.d.ts b/packages/components/src/LightBox/LightBox.module.css.d.ts index f3b21b0454..0ab26330ea 100644 --- a/packages/components/src/LightBox/LightBox.module.css.d.ts +++ b/packages/components/src/LightBox/LightBox.module.css.d.ts @@ -5,8 +5,11 @@ declare const styles: { readonly "toolbar": string; readonly "title": string; readonly "imagesWrapper": string; - readonly "overlay": string; readonly "image": string; + readonly "backgroundBlur": string; + readonly "backgroundImage": string; + readonly "thumbnailList": string; + readonly "thumbnail": string; }; export = styles; diff --git a/packages/components/src/LightBox/LightBox.tsx b/packages/components/src/LightBox/LightBox.tsx index 9d295e7079..7f7e2d88a5 100644 --- a/packages/components/src/LightBox/LightBox.tsx +++ b/packages/components/src/LightBox/LightBox.tsx @@ -10,6 +10,7 @@ import { useIsMounted } from "@jobber/hooks/useIsMounted"; import styles from "./LightBox.module.css"; import { ButtonDismiss } from "../ButtonDismiss"; import { Button } from "../Button"; +import { AtlantisThemeContextProvider } from "../AtlantisThemeContext"; interface PresentedImage { title?: string; @@ -126,52 +127,66 @@ export function LightBox({ const template = ( <> {open && ( -
-
- - {images[currentImageIndex].title} - - -
-
- - - -
+ +
+
+ {/* {images[currentImageIndex].title} */} + +
+
+
+
+
+ + + +
- {images.length > 1 && ( - <> - - - - )} + {images.length > 1 && ( + <> + + + + )} -
- {images[currentImageIndex].caption} +
    + + + +
-
-
+ )} ); @@ -255,3 +270,18 @@ function togglePrintStyles(open: boolean) { console.error(error); } } + +function ThumbnailListItem({ imageUrl }: { readonly imageUrl?: string }) { + if (imageUrl) { + return ( +
  • +
    +
  • + ); + } + + return
  • ; +}