Added rentalMessage and pfp

src/components/ChatComponents/ChatComponent.vue

@@ -21,6 +21,7 @@
         v-bind:key="i"
         :message="message"
       ></ChatMessage>
+      <rental-message></rental-message>
     </div>
     <div
       class="
@@ -70,6 +71,7 @@
 import ChatMessage from "./ChatMessage.vue";
 import axios from "axios";
 import ws from "@/services/ws";
+import RentalMessage from "./RentalMessage.vue";
 export default {
   props: {
     openHamburger: { type: Function },
@@ -79,7 +81,6 @@ export default {
   },
   data() {
     return {
-      src: "https://pbs.twimg.com/media/FEaFK4OWUAAlgiV?format=jpg&name=900x900",
       messages: [],
       canScroll: true,
       scrollBehavior: "",
@@ -88,6 +89,7 @@ export default {
   },
   components: {
     ChatMessage,
+    RentalMessage
   },
   computed: {
     name() {
@@ -96,6 +98,9 @@ export default {
         ? this.recipient.firstName + " " + this.recipient.lastName
         : "N/A";
     },
+    src() {
+        return this.recipient?.picture
+    }
   },
   methods: {
     openHamburgerMethod() {

src/components/ChatComponents/ChatProfile.vue

@@ -5,7 +5,7 @@
   >
     <img
       class="h-10 w-10 rounded-full object-cover"
-      src="https://www.mintface.xyz/content/images/2021/08/QmTndiF423kjdXsNzsip1QQkBQqDuzDhJnGuJAXtv4XXiZ-1.png"
+      :src="src"
       :alt="{ name }"
     />
     <div class="w-full pb-2">
@@ -49,6 +49,9 @@ export default {
     lastMessageTime() {
       return "5 min";
     },
+    src() {
+      return this.conversation.recipient.picture || "N/A";
+    }
   },
   methods: {
     selectUser() {

src/components/ChatComponents/RentalMessage.vue

+<template>
+  <div class="message" style="max-width: 70%">
+        <div class="info">
+            <div class="text">
+                <h2 class="header">Ny utleie forespørsel</h2>
+                <p>Dato: {{from}} - {{to}}</p>
+                <p>Pris: {{price}}kr</p>
+            </div>
+            <div class="img-container">
+                <img class="img" :src="img" alt="Produkt Bilde">
+            </div>
+        </div>
+        <div>
+            <p class="more-header">Melding fra leier:</p>
+            <div class="more">
+                <p>
+                    {{extra}}
+                </p>
+            </div>
+        </div>
+        <div class="buttons">
+            <button class="button green">Godta</button>
+            <button class="button red">Avslå</button>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            img: 'https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8dmlld3xlbnwwfHwwfHw%3D&w=1000&q=80',
+            extra: 'hello',
+            to: '',
+            from: '',
+            price: '200'
+        }
+    }
+}
+</script>
+
+<style scoped>
+    .message {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        background: #D1D5DB;
+        border-radius: 10px;
+        padding: 10px;
+    }
+
+    .info {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-around;
+    }
+    .img {
+        width: 100%;
+        height: auto;
+        border-radius: 10px;
+        max-height: 200px;
+    }
+
+    .text h1 {
+        text-decoration: underline;
+    }
+
+    @media (max-width: 1200px) {
+        .img-container  {
+            max-width: 30%;
+        }
+        .text {
+            min-width: 70%;
+        }
+    }
+
+    .img-container {
+        display: flex;
+        align-content: center;
+        justify-items: center;
+        max-height: 20%;
+    }
+    .header {
+        font-weight: bold;
+        text-align: center;
+        text-decoration: underline;
+    }
+    .more-header {
+        font-weight: bold;
+    }
+
+    .more {
+        border: 1px solid black;
+        border-radius: 10px;
+    }
+
+    .more p {
+        margin-left: 5px;
+    }
+
+
+    .buttons {
+        margin-top: 10px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-items: center;
+        justify-content: space-around;
+    }
+
+    .button {
+        border-radius: 0.25rem;
+        padding-top: 0.5rem;
+        padding-bottom: 0.5rem;
+        padding-left: 1rem;
+        padding-right: 1rem;
+        font-weight: 700;
+        color: white;
+    }
+
+    .red {
+        background-color: #ff1f1f;
+    }
+
+    .red:hover {
+        box-shadow: 0 0 0 0.2rem rgba(255, 31, 31, 0.5);
+    }
+
+    .green {
+        background-color: #0bb610;
+    }
+    .green:hover {
+        box-shadow: 0 0 0 0.2rem rgba(11, 182, 16, 0.5);
+    }
+</style>
\ No newline at end of file