Did some layout changes to home view. Implemented help-pop up and list of...

Did some layout changes to home view. Implemented help-pop up and list of active milestones. Did also make the page more similar to other pages.

src/components/popups/help/HomeHelpPopUp.vue

+<script setup lang="ts">
+
+const emit = defineEmits(['closePopUp']);
+
+const closePopUp = () => {
+  emit('closePopUp');
+}
+
+</script>
+
+<template>
+  <div class="popup-content">
+    <div class="header">
+      <img src="/src/components/icons/navigation/lightbulb-on.svg" alt="pop-up-icon" class="img">
+      <h2>Hjem</h2>
+    </div>
+    <h3>
+      Hei! Du befinner deg for øyeblikket på hjem-siden til sparesti.
+      På denne siden finner du en oversikt over alle dine sparemål og aktive utfordringer.
+      Dersom du er ny anbefaler vi at du klikker på den store grønne knappen "Ny til Sparesti? Klikk hær!"
+    </h3>
+
+    <div class="option-buttons">
+      <button class="option-button" id="delete-button" @click="closePopUp()">
+        <h2 class="option-button-title">Ok</h2>
+      </button>
+    </div>
+  </div>
+
+</template>
+
+<style scoped>
+.popup-content {
+  display: flex;
+  flex-direction: column;
+
+  width: 50%;
+  height: 50%;
+  background-color: var(--color-background);
+
+  padding: 20px;
+  border-radius: 10px;
+  border: 2px solid var(--color-border);
+
+  place-content: space-between;
+  align-items: start;
+
+  overflow-y: scroll;
+  gap: 2.5%;
+}
+
+.header{
+  display: flex;
+  flex-direction: row;
+  place-content: start;
+  width: 100%;
+  height: 10%;
+  gap: 1.5%;
+}
+
+.img{
+  height: 100%;
+}
+
+.option-buttons{
+  display: flex;
+  flex-direction: row;
+
+  width: 100%;
+  place-content: center;
+}
+
+.option-button{
+  border: none;
+  border-radius: 20px;
+  width: 35%;
+
+}
+
+.option-button-title{
+  color: var(--color-headerText);
+  font-weight: bold;
+}
+
+#delete-button{
+  background-color: var(--color-confirm-button);
+}
+#delete-button:active{
+  background-color: var(--color-confirm-button-click);
+}
+
+#delete-button:hover{
+  transform: scale(1.02);
+}
+
+@media only screen and (max-width: 1000px){
+  .popup-content {
+    width: 90%;
+    height: 60%;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .img{
+    filter: invert(1);
+  }
+}
+
+</style>
\ No newline at end of file

src/views/HomePage/HomeView.vue

 <script setup lang="ts">
-
-import ActiveChallengeDisplay from '@/components/challenge/ActiveChallengeDisplay.vue'
-import { getAllMilestones } from '@/utils/MilestoneUtils'
-import { useTokenStore } from '@/stores/token'
-import { getActiveChallenges } from '@/utils/challengeutils'
+import {ref} from 'vue'
+import ActiveChallengesList from '@/components/challenge/ActiveChallengesList.vue'
+import router from '@/router'
 import ActiveMilestonesList from '@/components/milestone/ActiveMilestonesList.vue'
 
-console.log(getAllMilestones(useTokenStore().getJwtToken));
-console.log(getActiveChallenges(useTokenStore().getJwtToken, 0, 5))
+import HomeHelpPopUp from '@/components/popups/help/HomeHelpPopUp.vue'
+
+const displayType = ref<boolean>(true);
+const displayHelpPopUp = ref<boolean>(false);
+
+const displayNewChallenges = () => {
+  displayType.value = false;
+}
+
+const displayActiveChallenges = () => {
+  displayType.value = true;
+}
+const navigateTo = (path: string) => {
+  router.push(path)
+}
+
+const openHelpPopUp = () => {
+  displayHelpPopUp.value = true;
+}
+const closeHelpPopUp = async () => {
+  displayHelpPopUp.value = false;
+}
 
 </script>
 
 <template>
-  <div id = TopInfo>
-    <h2>Velkommen!</h2>
-    <div id = TotalSavings>
-      <h3>TotalSavingsDiv</h3>
+  <div class="home-view">
+    <div class="header">
+      <h2 class="title">Velkommen til Sparesti!</h2>
+      <img
+        src="/src/components/icons/navigation/help.svg"
+        alt="hjelp"
+        @click="openHelpPopUp"
+        class="help-icon">
+      <div v-if="displayHelpPopUp" class="popup-container">
+        <HomeHelpPopUp
+          @closePopUp="closeHelpPopUp"
+        ></HomeHelpPopUp>
+      </div>
     </div>
-  </div>
-  <div id = HomeViewComponents>
-    <div class = ActiveMilestones>
-      <ActiveMilestonesList/>
+
+    <div class="toggle-buttons">
+      <button class="toggle-button" @click="displayActiveChallenges" :class="{ 'active-button': displayType}">
+        <h3 class="toggle-button-title">Nye utfordringer</h3>
+      </button>
+      <button class="toggle-button" @click="displayNewChallenges" :class="{ 'active-button': !displayType}">
+        <h3 class="toggle-button-title">Aktive utfordringer</h3>
+      </button>
     </div>
-    <div class = ActiveChallenges>
+    <div class="main">
+      <div class="left" :class="{ 'mobile-hide': !displayType }">
+        <button class="create-challenge-button" @click="navigateTo('/homepage/create-challenge')">
+          <h2 class="display-help-button">
+            Ny til Sparesti? Klikk her!
+          </h2>
+        </button>
+        <ActiveMilestonesList></ActiveMilestonesList>
+      </div>
+      <div class="right" :class="{ 'mobile-hide': displayType }">
+        <h2 class="active-challenges-title">Aktive utfordringer</h2>
+        <ActiveChallengesList></ActiveChallengesList>
+      </div>
     </div>
   </div>
 </template>
 
 <style scoped>
+.home-view{
+  display: flex;
+  flex-direction: column;
+
+  height: 100%;
+  width: 100%;
+
+  gap: 2.5%;
+}
+
+.header{
+  display: flex;
+  flex-direction: row;
+  place-content: space-between;
+  max-height: 6.5%;
+}
+
+.help-icon:hover{
+  transform: scale(1.05);
+}
+
+.popup-container {
+  position: fixed; /* Change to fixed to cover the entire viewport */
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  background-color: rgba(64, 64, 64, 0.5);
+
+  align-items: center;
+  z-index: 1000; /* Adjust z-index as needed */
+}
+
+.title{
+  color: var(--color-heading);
+}
+
+.toggle-buttons {
+  display: none;
+}
+
+.main{
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  min-height: 120%;
+  padding-bottom: 1.5%;
+  gap: 2.5%;
+}
+
+.left{
+  display: flex;
+  flex-direction: column;
+  width: 60%;
+  min-height: 100%;
+  gap: 2.5%;
+}
+
+.create-challenge-button{
+  border-radius: 20px;
+  background-color: var(--color-confirm-button);
+  border: 2px solid var(--color-border);
+  color: var(--color-button-text);
+  min-height: 12%;
+}
 
-  #TopInfo{
+.create-challenge-button:active{
+  background-color: var(--color-confirm-button-click);
+}
+
+.create-challenge-button:hover{
+  transform: scale(1.02);
+}
+
+.display-help-button{
+  font-weight: bold;
+}
+
+.right{
+  display: flex;
+  flex-direction: column;
+  place-content: space-between;
+
+  border-radius: 20px;
+  border: 2px solid var(--color-border);
+  box-shadow: 0 4px 4px var(--color-shadow);
+  background-color: var(--color-heading);
+
+  height: 100%;
+  width: 40%;
+}
+
+.active-challenges-title{
+  color: var(--color-headerText);
+  text-align: center;
+  font-weight: bold;
+}
+
+@media only screen and (max-width: 1000px){
+  .main{
     display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
+    flex-direction: column;
 
-  #TotalSavings{
-    margin-right: 5%;
+    min-height: 150%;
+    width: 100%;
   }
 
-  #HomeViewComponents{
+  .toggle-buttons{
     display: flex;
+    flex-direction: row;
+    width: 100%;
+    min-height: 7.5%;
+    place-content: space-between;
   }
 
-  .ActiveMilestones, .ActiveChallenges{
-    margin: 2%;
+  .toggle-button{
+    width: 49.5%;
     border-radius: 20px;
+    border: none;
+    background-color: var(--color-confirm-button);
   }
 
-  .ActiveMilestones{
-    width: 60%;
+  .toggle-button:hover{
+    transform: scale(1.02);
   }
 
-  .ActiveChallenges{
-    width: 40%;
-    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
+  .toggle-button-title{
+    font-weight: bold;
+    color: var(--color-headerText);
+  }
+
+  .active-button{
+    background-color: var(--color-confirm-button-click);
+  }
+
+  .mobile-hide{
+    display: none;
+  }
+
+  .left{
+    width: 100%;
+    height: 100%;
+  }
+
+  .right{
+    min-height: 110%;
+    width: 100%;
+  }
+}
 
+@media (prefers-color-scheme: dark) {
+  .help-icon{
+    filter: invert(1);
   }
+}
 
 </style>
\ No newline at end of file