Remove background-color from image to allow opacity

sharetribe · Feb 28, 2023 · 1489ff8 · 1489ff8
1 parent ce892fd
commit 1489ff8
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 3 deletions.
diff --git a/src/containers/PageBuilder/BlockBuilder/BlockDefault/BlockDefault.module.css b/src/containers/PageBuilder/BlockBuilder/BlockDefault/BlockDefault.module.css
@@ -3,7 +3,6 @@
 
 .media {
   width: 100%;
-  background-color: var(--matterColorNegative); /* Loading state color for the images */
   border-radius: 8px;
   margin-bottom: 0;
 }

diff --git a/src/containers/PageBuilder/Primitives/Image/Image.js b/src/containers/PageBuilder/Primitives/Image/Image.js
@@ -40,7 +40,7 @@ export const FieldImage = React.forwardRef((props, ref) => {
   const firstImageVariant = variants[variantNames[0]];
   const { width: aspectWidth, height: aspectHeight } = firstImageVariant || {};
 
-  const classes = classNames(rootClassName || css.markdownImage, className);
+  const classes = classNames(rootClassName || css.fieldImage, className);
   return (
     <AspectRatioWrapper className={classes} width={aspectWidth || 1} height={aspectHeight || 1}>
       <ResponsiveImage

diff --git a/src/containers/PageBuilder/Primitives/Image/Image.module.css b/src/containers/PageBuilder/Primitives/Image/Image.module.css
@@ -1,5 +1,9 @@
 .markdownImage {
-  width: 100%;
+  /**
+   * Note: markdown images might be too small for filling the space.
+   */
+  width: auto;
+  max-width: 100%;
   border-radius: 8px;
   object-fit: cover;
 }