From 07490220354e569178d4f8eb4d84d095d6621418 Mon Sep 17 00:00:00 2001
From: Daniele Pancottini <daniele.pancottini@studio.unibo.it>
Date: Sat, 8 Jul 2023 11:01:14 +0200
Subject: [PATCH] Change to next image into resource card modal

---
 .../ResourceCardContent/ImageCardContent.tsx     | 11 +++++++----
 .../Room/ResourceCardModal/ResourceCardModal.tsx | 16 +++++++++++++---
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/site/components/common/Room/ResourceCardContent/ImageCardContent.tsx b/site/components/common/Room/ResourceCardContent/ImageCardContent.tsx
index ddfe26757..63101b6b8 100644
--- a/site/components/common/Room/ResourceCardContent/ImageCardContent.tsx
+++ b/site/components/common/Room/ResourceCardContent/ImageCardContent.tsx
@@ -1,6 +1,7 @@
-import { Box, Stack, Image, Text } from "@chakra-ui/react";
+import { Box, Stack, Text } from "@chakra-ui/react";
 import "./ImageCardContent.module.css"
 import screenfull from "screenfull";
+import Image from "next/image";
 
 export default function ImageCardContent(props: {
     style: any
@@ -11,13 +12,15 @@ export default function ImageCardContent(props: {
     return (
         <>
           <Box
-            className={props.style.imageContainer}
+            position={"relative"}
+            margin={"auto"}
+            cursor={'pointer'}
             w={'full'}
+            height={"220px"}
             >
               <Image 
                 objectFit={"cover"} 
-                margin={"auto"}
-                cursor={'pointer'}
+                layout={"fill"}
                 onClick={() => openFullScreen('resource-image')} 
                 id='resource-image' 
                 alt='' 
diff --git a/site/components/common/Room/ResourceCardModal/ResourceCardModal.tsx b/site/components/common/Room/ResourceCardModal/ResourceCardModal.tsx
index f7c3e3347..c80337f52 100644
--- a/site/components/common/Room/ResourceCardModal/ResourceCardModal.tsx
+++ b/site/components/common/Room/ResourceCardModal/ResourceCardModal.tsx
@@ -1,6 +1,6 @@
 import { Box, Flex, propNames, Stack, Text } from "@chakra-ui/react"
 import { MarkerResourcePayload } from "../RoomTypes/RoomTypes"
-import { Image } from "@chakra-ui/react"
+import Image from "next/image";
 
 import 'react-h5-audio-player/lib/styles.css';
 
@@ -48,11 +48,21 @@ export default function ResourceCardModal(props: {
           overflow={'hidden'}
           className={style.cardBody}>
 
-            <Image
+          <Box 
+            position={"absolute"} 
+            margin={"5px"} 
+            top={"0"} 
+            left={"0"} 
+            height={"50px"} 
+            width={"50px"}
+            zIndex={'overlay'}>
+              <Image
                 className={style.decadeIcon}
                 src={'/assets/polygons/' + props.decade + '.svg'}
                 alt={`Picture of Decade`}
-            />
+                layout={"fill"}
+              />
+          </Box>
 
             {
               getResourceContent()