Fix RoomModal image styling (#1272)

* Update RoomModal.scss

* Update RoomModal.tsx

* Update src/components/templates/PartyMap/components/RoomModal/RoomModal.tsx

Co-authored-by: Glenn 'devalias' Grant <[email protected]>

* Update RoomModal.scss

* Update RoomModal.tsx

* Update RoomModal.scss

* Update RoomModal.tsx

* Apply suggestions from code review

Co-authored-by: Glenn 'devalias' Grant <[email protected]>

Co-authored-by: Glenn 'devalias' Grant <[email protected]>

Author: malaikaaiyar

src/components/templates/PartyMap/components/RoomModal/RoomModal.scss

@@ -6,7 +6,7 @@ $spacing: 20px;
 .room-modal {
   padding: $spacing;
 
-  background-color: #19181a;
+  background-color: $saturated-black;
   background-repeat: no-repeat;
   background-size: cover;
 
@@ -27,13 +27,6 @@ $spacing: 20px;
     justify-content: space-around;
     align-items: center;
 
-    > img {
-      width: 60%;
-      height: auto;
-
-      border-radius: $border-radius;
-    }
-
     > * {
       flex: 1;
       height: fit-content;
@@ -45,6 +38,17 @@ $spacing: 20px;
     }
   }
 
+  &__icon {
+    flex-shrink: 0;
+    height: 180px;
+    width: 180px;
+    border-radius: $border-radius;
+    background-color: $black;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+
   .userlist-container {
     margin-top: $spacing;
   }

src/components/templates/PartyMap/components/RoomModal/RoomModal.tsx

@@ -93,6 +93,10 @@ export const RoomModalContent: React.FC<RoomModalContentProps> = ({
 
   const hasRoomEvents = renderedRoomEvents?.length > 0;
 
+  const iconStyles = {
+    backgroundImage: room.image_url ? `url(${room.image_url})` : undefined,
+  };
+
   return (
     <>
       <h2>{room.title}</h2>
@@ -102,11 +106,7 @@ export const RoomModalContent: React.FC<RoomModalContentProps> = ({
       )}
 
       <div className="room-modal__main">
-        {room.image_url ? (
-          <img src={room.image_url} alt={room.title} />
-        ) : (
-          <span>{room.title}</span>
-        )}
+        <div className="room-modal__icon" style={iconStyles} />
 
         <RoomModalOngoingEvent
           roomEvents={roomEvents}