From c745243f3aeb7063a3f22198fd94526643dc9b3f Mon Sep 17 00:00:00 2001
From: Andy Espagnolo <andyespagnolo@gmail.com>
Date: Mon, 5 Feb 2024 14:05:20 -0300
Subject: [PATCH] refactor: remove ImgFixed use (#1633)

---
 src/components/Proposal/ProposalHeaderPoi.css | 18 +++---
 src/components/Proposal/ProposalHeaderPoi.tsx | 59 ++++++++++---------
 .../Proposal/ProposalHeaderPoiImage.css       | 12 ++++
 .../Proposal/ProposalHeaderPoiImage.tsx       | 34 +++++++++++
 4 files changed, 83 insertions(+), 40 deletions(-)
 create mode 100644 src/components/Proposal/ProposalHeaderPoiImage.css
 create mode 100644 src/components/Proposal/ProposalHeaderPoiImage.tsx

diff --git a/src/components/Proposal/ProposalHeaderPoi.css b/src/components/Proposal/ProposalHeaderPoi.css
index ce3ad7fec..747f346fa 100644
--- a/src/components/Proposal/ProposalHeaderPoi.css
+++ b/src/components/Proposal/ProposalHeaderPoi.css
@@ -7,33 +7,29 @@
   justify-content: space-between;
 }
 
-.ProposalHeaderPoi .Link > div.PoiImageContainer {
+.ProposalHeaderPoi .Link > div.ProposalHeaderPoi__ImageContainer {
   position: relative;
   flex: 0 0 100%;
 }
 
-.ProposalHeaderPoi .Link.Link--with-scene > div.PoiImageContainer {
+.ProposalHeaderPoi .Link.Link--with-scene > div.ProposalHeaderPoi__ImageContainer {
   flex: 0 0 49%;
   flex: 0 0 calc(50% - 6px);
 }
 
-.ProposalHeaderPoi .ImgFixed {
-  border-radius: 8px;
-}
-
-.ProposalHeaderPoi .PoiImageContainer .ui.header {
+.ProposalHeaderPoi__ImageContainer .ui.header {
   position: absolute;
-  color: white;
+  color: var(--white-900);
   left: 16px;
   bottom: 52px;
   margin: 0;
   text-shadow: 0 0 1rem #000, 0 0 0.5rem #000;
 }
 
-.ProposalHeaderPoi .PoiImageContainer .PoiPosition {
+.ProposalHeaderPoi__PoiPosition {
   position: absolute;
   color: var(--black-400);
-  background-color: white;
+  background-color: var(--white-900);
   height: 24px;
   border-radius: 4px;
   font-size: 13px;
@@ -43,6 +39,6 @@
   bottom: 16px;
 }
 
-.ProposalHeaderPoi .PoiImageContainer .PoiPosition svg {
+.ProposalHeaderPoi__PoiPosition svg {
   vertical-align: text-bottom;
 }
diff --git a/src/components/Proposal/ProposalHeaderPoi.tsx b/src/components/Proposal/ProposalHeaderPoi.tsx
index d9bfec4ee..d915c643d 100644
--- a/src/components/Proposal/ProposalHeaderPoi.tsx
+++ b/src/components/Proposal/ProposalHeaderPoi.tsx
@@ -1,5 +1,4 @@
 import { useQuery } from '@tanstack/react-query'
-import ImgFixed from 'decentraland-gatsby/dist/components/Image/ImgFixed'
 import Catalyst from 'decentraland-gatsby/dist/utils/api/Catalyst'
 import { Header } from 'decentraland-ui/dist/components/Header/Header'
 
@@ -10,42 +9,44 @@ import Link from '../Common/Typography/Link'
 import Pin from '../Icon/Pin'
 
 import './ProposalHeaderPoi.css'
+import ProposalHeaderPoiImage from './ProposalHeaderPoiImage'
 
 interface Props {
   configuration: ProposalAttributes['configuration']
 }
 
-export default function ProposalHeaderPoi({ configuration }: Props) {
-  const { x, y } = configuration
+const fetchSceneImg = async (x: number, y: number) => {
+  const scenes = await Catalyst.getInstance().getEntityScenes([[x, y]])
+  const scene = scenes[0]
+  if (!scene) {
+    return null
+  }
 
-  const fetchSceneImg = async (x: number, y: number) => {
-    const scenes = await Catalyst.getInstance().getEntityScenes([[x, y]])
-    const scene = scenes[0]
-    if (!scene) {
-      return null
+  let image = scene?.metadata?.display?.navmapThumbnail || ''
+  if (image && !image.startsWith('https://')) {
+    const list = scene.content || []
+    const content = list.find((content) => content.file === image)
+    if (content) {
+      image = Catalyst.getInstance().getContentUrl(content.hash)
     }
+  }
 
-    let image = scene?.metadata?.display?.navmapThumbnail || ''
-    if (image && !image.startsWith('https://')) {
-      const list = scene.content || []
-      const content = list.find((content) => content.file === image)
-      if (content) {
-        image = Catalyst.getInstance().getContentUrl(content.hash)
-      }
-    }
+  if (!image || !image.startsWith('https://')) {
+    return null
+  }
 
-    if (!image || !image.startsWith('https://')) {
-      return null
-    }
+  return image
+}
 
-    return image
-  }
+export default function ProposalHeaderPoi({ configuration }: Props) {
+  const { x, y } = configuration
 
   const { data: tile } = useQuery({
     queryKey: [`tile#${x},${y}`],
     queryFn: () => getTile([x, y]),
     staleTime: DEFAULT_QUERY_STALE_TIME,
   })
+
   const { data: sceneImg } = useQuery({
     queryKey: [`sceneImg#${x},${y}`],
     queryFn: () => fetchSceneImg(x, y),
@@ -56,15 +57,15 @@ export default function ProposalHeaderPoi({ configuration }: Props) {
     return (
       <div className="ProposalHeaderPoi">
         <Link href={`https://play.decentraland.org/?position=${x},${y}`}>
-          <div className="PoiImageContainer">
+          <div className="ProposalHeaderPoi__ImageContainer">
             <Header>{tile?.name || `Parcel ${x},${y}`}&nbsp;</Header>
-            <div className="PoiPosition">
+            <div className="ProposalHeaderPoi__PoiPosition">
               <Pin />
               <span>
                 {x},{y}
               </span>
             </div>
-            <ImgFixed dimension="wide" size="initial" src={getParcelImageUrl([x, y])} />
+            <ProposalHeaderPoiImage dimension="wide" size="initial" src={getParcelImageUrl([x, y])} />
           </div>
         </Link>
       </div>
@@ -74,18 +75,18 @@ export default function ProposalHeaderPoi({ configuration }: Props) {
   return (
     <div className="ProposalHeaderPoi">
       <Link href={`https://play.decentraland.org/?position=${x},${y}`} className="Link--with-scene">
-        <div className="PoiImageContainer">
+        <div className="ProposalHeaderPoi__ImageContainer">
           <Header>{tile?.name || `Parcel ${x},${y}`}&nbsp;</Header>
-          <div className="PoiPosition">
+          <div className="ProposalHeaderPoi__PoiPosition">
             <Pin />
             <span>
               {x},{y}
             </span>
           </div>
-          <ImgFixed dimension="standard" size="cover" src={sceneImg} />
+          <ProposalHeaderPoiImage dimension="standard" size="cover" src={sceneImg} />
         </div>
-        <div className="PoiImageContainer">
-          <ImgFixed dimension="standard" size="initial" src={getParcelImageUrl([x, y])} />
+        <div className="ProposalHeaderPoi__ImageContainer">
+          <ProposalHeaderPoiImage dimension="standard" size="initial" src={getParcelImageUrl([x, y])} />
         </div>
       </Link>
     </div>
diff --git a/src/components/Proposal/ProposalHeaderPoiImage.css b/src/components/Proposal/ProposalHeaderPoiImage.css
new file mode 100644
index 000000000..c0f624455
--- /dev/null
+++ b/src/components/Proposal/ProposalHeaderPoiImage.css
@@ -0,0 +1,12 @@
+.ProposalHeaderPoiImage {
+  width: 100%;
+  background-color: transparent;
+  background-repeat: no-repeat;
+  background-position: center center;
+  border-radius: 8px;
+}
+
+.ProposalHeaderPoiImage img {
+  width: 100%;
+  height: auto;
+}
diff --git a/src/components/Proposal/ProposalHeaderPoiImage.tsx b/src/components/Proposal/ProposalHeaderPoiImage.tsx
new file mode 100644
index 000000000..99579e0de
--- /dev/null
+++ b/src/components/Proposal/ProposalHeaderPoiImage.tsx
@@ -0,0 +1,34 @@
+import './ProposalHeaderPoiImage.css'
+
+type Props = {
+  dimension: 'wide' | 'standard'
+  size?: 'cover' | 'initial'
+  src: string
+}
+
+export default function ProposalHeaderPoiImage({ src, dimension, size = 'cover' }: Props) {
+  return (
+    <div
+      className="ProposalHeaderPoiImage"
+      style={{
+        backgroundSize: size,
+        backgroundImage: src && `url("${src}")`,
+      }}
+    >
+      {dimension === 'wide' && (
+        <img
+          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAYAAAD0In+KAAAADUlEQVR4AWNwL/ABYwAKHQIHW//QwwAAAABJRU5ErkJggg=="
+          width="2"
+          height="1"
+        />
+      )}
+      {dimension === 'standard' && (
+        <img
+          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAD0lEQVR4AWNwL/BBwYQFADuuDCW4Y5knAAAAAElFTkSuQmCC"
+          width="4"
+          height="3"
+        />
+      )}
+    </div>
+  )
+}