Fix bottom caption margin for MDX Video component

When adding a caption the margin was too large because the poster images also applies bottom margin. GH-140
nordtheme · May 4, 2019 · 3b4f727 · 3b4f727
1 parent 1f1ae98
commit 3b4f727
Showing 1 changed file with 2 additions and 0 deletions.
diff --git a/src/components/atoms/core/mdx-elements/Video.jsx b/src/components/atoms/core/mdx-elements/Video.jsx
@@ -45,6 +45,7 @@ const PosterImage = styled(Image)`
   left: 0;
   right: 0;
   bottom: 0;
+  margin-bottom: ${({ hasCaption }) => hasCaption && "2em"};
   opacity: ${({ videoLoaded }) => (videoLoaded ? 0 : 1)};
   transition: ${transitionThemedModeSwitch("opacity", 0, "ease")};
 `;
@@ -97,6 +98,7 @@ const Video = ({ autoPlay, children, dropShadow, fillSize, poster, rounded, sour
         dropShadow={dropShadow}
         fillSize={fillSize}
         fluid={poster}
+        hasCaption={!!children}
         rounded={rounded}
         videoLoaded={videoLoaded}
       />