Added method to delete an active challenge. Did also change the layout in case...

Added method to delete an active challenge. Did also change the layout in case of long descriptions. Therefor enabling scroll when hovering and overflow.

src/components/challenge/ActiveChallengeDisplay.vue

 <script setup lang="ts">
 
-const emits = defineEmits(['challengeCompleted']);
+const emits = defineEmits(['challengeCompleted', 'challengeDeleted']);
 
 interface Challenge{
   'challengeId':number,
@@ -16,6 +16,10 @@ const props = defineProps({
     required: true
   }
 });
+const expirationDate = () => {
+  return new Date(props.challenge?.expirationDate).
+  toLocaleDateString('en-GB', { day: '2-digit', month: '2-digit', year: 'numeric' });
+}
 
 const completeTheChallenge = () => {
   if(props.challenge.challengeId){
@@ -23,15 +27,27 @@ const completeTheChallenge = () => {
   }
 }
 
+const deleteTheChallenge = () => {
+  if(props.challenge.challengeId){
+    emits('challengeDeleted', props.challenge.challengeId)
+  }
+}
 </script>
 
 <template>
   <div class="potential-challenge-display">
-    <h3 class="title">{{ props.challenge.challengeTitle }}</h3>
-    <h4 class="description">{{ props.challenge.challengeDescription }}</h4>
-    <div class="on-object-hover">
-      <h4>Utløpsdato: {{props.challenge.expirationDate}} |</h4>
-      <h4 class="sum"> Sparesum: {{props.challenge.goalSum}} kr,-</h4>
+    <img
+      class="close-img"
+      src="/src/components/icons/navigation/close.svg"
+      alt="delete-button"
+      @click="deleteTheChallenge()">
+    <div class="content">
+      <h3 class="title">{{ props.challenge.challengeTitle }}</h3>
+      <h4 class="description">{{ props.challenge.challengeDescription }}</h4>
+      <div class="extra-info">
+        <h4 class="expiration-date">Utløpsdato: {{expirationDate()}} |</h4>
+        <h4 class="sum"> Sparesum: {{props.challenge.goalSum}} kr,-</h4>
+      </div>
     </div>
     <div class="button-container">
       <button class="complete-button" @click="completeTheChallenge()">
@@ -46,35 +62,74 @@ const completeTheChallenge = () => {
 .potential-challenge-display{
   display: flex;
   flex-direction: column;
-  padding: 1.5%;
+  place-items: end;
   place-content: space-between;
+  padding: 1.5%;
+  gap: 1.0%;
+}
+
+.content{
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 65%;
+}
+.close-img{
+  width: 5.0%;
+}
+
+.close-img:hover{
+  transform: scale(1.2);
 }
 
 .title{
   text-align: center;
+
   color: var(--color-text-black);
 }
 
 .description{
   text-align: center;
   color: var(--color-text-black);
+  overflow: hidden;
 }
 
-.on-object-hover{
+.extra-info{
   display: none;
 }
 
+.expiration-date{
+  color: var(--color-text-black);
+}
+
+.sum{
+  color: var(--color-text-black);
+}
 
 .potential-challenge-display:hover{
-  .on-object-hover{
+  .extra-info{
     display: flex;
     flex-direction: row;
     place-content: center;
     gap: 1.0%;
   }
+
+  .expiration-date{
+    font-weight: bold;
+  }
+
+  .sum{
+    font-weight: bold;
+  }
+
+  .content{
+    overflow: scroll;
+  }
+
   .description{
-    display: none;
+    overflow: visible;
   }
+
 }
 
 .button-container{
@@ -105,4 +160,30 @@ const completeTheChallenge = () => {
   font-weight: bold;
 }
 
+@media only screen and (max-width: 1000px){
+  .extra-info{
+    display: flex;
+    flex-direction: row;
+    place-content: center;
+    gap: 1.0%;
+  }
+  .potential-challenge-display:hover{
+    .description{
+      text-align: center;
+      color: var(--color-text-black);
+    }
+  }
+
+  .potential-challenge-display:hover{
+    .extra-info{
+      display: flex;
+      flex-direction: row;
+      place-content: center;
+      gap: 1.0%;
+    }
+  }
+}
+
+
+
 </style>
\ No newline at end of file