fix: image editor custom store (#726)

bosonprotocol · Jun 28, 2023 · 9e280bd · 9e280bd
1 parent 3e38709
commit 9e280bd
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 18 deletions.
diff --git a/src/components/form/Upload/ImageEditor.tsx b/src/components/form/Upload/ImageEditor.tsx
@@ -1,10 +1,18 @@
 import { ChangeEvent, forwardRef, useState } from "react";
 import AvatarEditor, { AvatarEditorProps } from "react-avatar-editor";
 import Dropzone from "react-dropzone";
+import styled from "styled-components";
 
 import { useIpfsImage } from "../../../lib/utils/hooks/images/useIpfsImage";
 import Grid from "../../ui/Grid";
 
+const StyledCanvasWrapper = styled.div`
+  > :first-child {
+    max-width: 100%;
+    object-fit: contain;
+  }
+`;
+
 export type ImageEditorProps = Pick<
   AvatarEditorProps,
   "borderRadius" | "width" | "height"
@@ -21,13 +29,11 @@ export const ImageEditor = forwardRef<AvatarEditor, ImageEditorProps>(
     };
     const { data } = useIpfsImage({ url: url ?? "" }, { enabled: !!url });
     const image = data?.base64;
-    const w = borderRadius
-      ? undefined
-      : Math.min(width || Number.MAX_SAFE_INTEGER, window.innerWidth);
+    const w = borderRadius ? undefined : width;
     return (
       <>
         {image && (
-          <div style={{ margin: "2rem 0" }}>
+          <div style={{ margin: "2rem 0", maxWidth: "100%" }}>
             <Dropzone
               data-dropzone
               noClick
@@ -36,13 +42,13 @@ export const ImageEditor = forwardRef<AvatarEditor, ImageEditorProps>(
               // @ts-ignore
               style={{
                 // width: w ? w + "px" : "250px",
-                // width: "100%",
+                width: "100%",
                 // height: height ? height + "px" : "250px",
                 borderRadius: borderRadius ? `${borderRadius}%` : ""
               }}
             >
               {({ getRootProps, getInputProps }) => (
-                <div {...getRootProps()}>
+                <StyledCanvasWrapper {...getRootProps()}>
                   <AvatarEditor
                     image={image}
                     ref={editorRef}
@@ -52,7 +58,7 @@ export const ImageEditor = forwardRef<AvatarEditor, ImageEditorProps>(
                     borderRadius={borderRadius}
                   />
                   <input {...getInputProps()} />
-                </div>
+                </StyledCanvasWrapper>
               )}
             </Dropzone>
             <Grid alignItems="center" justifyContent="center">

diff --git a/src/pages/landing/Landing.tsx b/src/pages/landing/Landing.tsx
@@ -99,37 +99,35 @@ export default function Landing() {
       pathname: BosonRoutes.Explore,
       search: name ? `${ExploreQueryParameters.name}=${name}` : ""
     });
-  const withUnderBanner = bannerUrl && bannerImgPosition === "under";
+  const realBannerImgPosition = title ? bannerImgPosition : "over";
+  const withUnderBanner = bannerUrl && realBannerImgPosition === "under";
   const TitleAndDescriptionWrapper = withUnderBanner ? Layout : Div;
   return (
     <LandingPage ref={ref} isCustomStoreFront={isCustomStoreFront}>
       {isCustomStoreFront ? (
         <div>
-          {bannerUrl && bannerImgPosition === "over" && (
-            <div
+          {bannerUrl && realBannerImgPosition === "over" && (
+            <img
+              src={bannerUrl}
               style={{
-                backgroundImage: `url(${bannerUrl})`,
-                backgroundPosition: "center",
-                backgroundRepeat: "no-repeat",
-                backgroundSize: "cover",
+                objectFit: "contain",
                 translate: "-50%",
                 marginLeft: "50%",
-                height: "14rem",
                 width: "100vw"
               }}
+              alt="banner image"
             />
           )}
 
           <div
             style={{
               ...(withUnderBanner && {
                 backgroundImage: `url(${bannerUrl})`,
-                backgroundPosition: "center",
+                backgroundPosition: "top center",
                 backgroundRepeat: "no-repeat",
-                backgroundSize: "cover",
+                backgroundSize: "contain",
                 translate: "-50%",
                 marginLeft: "50%",
-                minHeight: "14rem",
                 width: "100vw"
               })
             }}