remove DocImageClient to simplify and scope styles

Author: jaffrepaul

app/globals.css

@@ -177,65 +177,6 @@ body {
 
 .onboarding-step .step-heading::before,
 .onboarding-step h2::before {
-  content: "Step " counter(onboarding-step) ": ";
+  content: 'Step ' counter(onboarding-step) ': ';
   font-weight: inherit;
 }
-
-/* Lightbox animations */
-@keyframes dialog-content-show {
-  from {
-    opacity: 0;
-    transform: translate(-50%, -48%) scale(0.96);
-  }
-  to {
-    opacity: 1;
-    transform: translate(-50%, -50%) scale(1);
-  }
-}
-
-@keyframes dialog-content-hide {
-  from {
-    opacity: 1;
-    transform: translate(-50%, -50%) scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: translate(-50%, -48%) scale(0.96);
-  }
-}
-
-@keyframes dialog-overlay-show {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes dialog-overlay-hide {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
-/* Target only image lightbox dialog content */
-.image-lightbox-content[data-state="open"] {
-  animation: dialog-content-show 200ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-.image-lightbox-content[data-state="closed"] {
-  animation: dialog-content-hide 200ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-/* Target only image lightbox dialog overlay */
-.image-lightbox-overlay[data-state="open"] {
-  animation: dialog-overlay-show 200ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-.image-lightbox-overlay[data-state="closed"] {
-  animation: dialog-overlay-hide 200ms cubic-bezier(0.16, 1, 0.3, 1);
-}

src/components/docImage.tsx

@@ -2,7 +2,7 @@ import path from 'path';
 
 import {serverContext} from 'sentry-docs/serverContext';
 
-import {DocImageClient} from './docImageClient';
+import {ImageLightbox} from './imageLightbox';
 
 export default function DocImage({
   src,
@@ -33,11 +33,12 @@ export default function DocImage({
           : 800;
 
     return (
-      <DocImageClient
+      <ImageLightbox
         src={src}
         imgPath={src} // For external images, imgPath should be the same as src
         width={width}
         height={height}
+        alt=""
         {...props}
       />
     );
@@ -92,11 +93,12 @@ export default function DocImage({
   const height = dimensions[1] > 0 ? dimensions[1] : parseDimension(propsHeight);
 
   return (
-    <DocImageClient
+    <ImageLightbox
       src={src}
       imgPath={imgPath}
       width={width}
       height={height}
+      alt=""
       {...props}
     />
   );

src/components/docImageClient.tsx

@@ -0,0 +1,76 @@
+/* Lightbox animations */
+@keyframes dialogContentShow {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+@keyframes dialogContentHide {
+  from {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+}
+
+@keyframes dialogOverlayShow {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes dialogOverlayHide {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+/* Lightbox content styles */
+.lightboxContent {
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  z-index: 50;
+  max-height: 90vh;
+  max-width: 90vw;
+  transform: translate(-50%, -50%);
+}
+
+.lightboxContent[data-state='open'] {
+  animation: dialogContentShow 200ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.lightboxContent[data-state='closed'] {
+  animation: dialogContentHide 200ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* Lightbox overlay styles */
+.lightboxOverlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.8);
+  backdrop-filter: blur(4px);
+  z-index: 50;
+}
+
+.lightboxOverlay[data-state='open'] {
+  animation: dialogOverlayShow 200ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.lightboxOverlay[data-state='closed'] {
+  animation: dialogOverlayHide 200ms cubic-bezier(0.16, 1, 0.3, 1);
+}

src/components/imageLightbox/imageLightbox.module.scss

@@ -5,6 +5,8 @@ import {X} from 'react-feather';
 import * as Dialog from '@radix-ui/react-dialog';
 import Image from 'next/image';
 
+import styles from './imageLightbox.module.scss';
+
 interface ImageLightboxProps
   extends Omit<
     React.HTMLProps<HTMLImageElement>,
@@ -118,9 +120,9 @@ export function ImageLightbox({
       </div>
 
       <Dialog.Portal>
-        <Dialog.Overlay className="image-lightbox-overlay fixed inset-0 bg-black/80 backdrop-blur-sm z-50" />
+        <Dialog.Overlay className={styles.lightboxOverlay} />
 
-        <Dialog.Content className="image-lightbox-content fixed left-[50%] top-[50%] z-50 max-h-[90vh] max-w-[90vw] translate-x-[-50%] translate-y-[-50%]">
+        <Dialog.Content className={styles.lightboxContent}>
           {/* Close button */}
           <Dialog.Close className="absolute right-4 top-4 z-10 rounded-sm bg-[var(--flame0)] border border-white/20 p-2 text-white opacity-90 transition-all duration-200 hover:opacity-100 hover:bg-[var(--flame1)] hover:border-white/30 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-white active:scale-95 flex items-center justify-center">
             <X className="h-4 w-4 stroke-[2.5]" />