feat: Updated look of saving goal view

src/components/SavingGoalComponents/SavingGoal.vue

@@ -20,7 +20,7 @@ export default {
       if (timelineElement instanceof HTMLElement) {
         // Calculate the max-height based on the height of the timeline
         const timelineHeight = timelineElement.offsetHeight;
-        this.bluePanelMaxHeight = `${timelineHeight*1.25}px`;
+        this.bluePanelMaxHeight = `${timelineHeight*1.55}px`;
       } else {
         this.bluePanelMaxHeight = '700px';
       }
@@ -41,7 +41,7 @@ export default {
       <div class="col-lg-4 blue-background overflow-auto" :style="{ 'max-height': bluePanelMaxHeight }">
         <h3 style="color: white; margin-bottom: 16px">Your saving goals</h3>
         <div>
-          <button class="btn btn-light" style="font-weight: 600; margin-bottom: 20px" @click="createGoal">Create new saving goal</button>
+          <button class="btn btn-success btn-lg" style="font-weight: 600; margin-bottom: 20px" @click="createGoal">Create new saving goal</button>
         </div>
         <saving-goal-list @goToSavingGoal="goToSavingGoal"></saving-goal-list>
       </div>

src/components/SavingGoalComponents/SavingGoalCreate.vue

@@ -19,10 +19,9 @@
     </div>
 
     <!--Change this to date picker?-->
-    <p>How long should this saving goal last: </p>
+    <p>When should this saving goal end?:</p>
     <div class="input-group mb-3">
-      <input type="text" class="form-control" aria-label="Amount of days" placeholder="Amount of days (as number)">
-      <span class="input-group-text">Days</span>
+      <input type="date" class="form-control" aria-label="Amount of days" placeholder="Amount of days (as number)">
     </div>
 
     <p>How much do you want to save during this saving goal: </p>

src/components/SavingGoalComponents/SavingGoalList.vue

@@ -2,7 +2,7 @@
 import {ref} from "vue";
 
 const savingGoalList = ref([
-  { title: 'Spain trip', MoneyTarget: '200kr', description: 'You wanted to save 200kr on a spain trip' },
+  { title: 'Spain trip', MoneyTarget: '200kr', description: 'You wanted to save 200kr for a spain trip' },
   { title: 'Italy Escapade', MoneyTarget: '200kr', description: 'Experience the magic of Italy with us! Our goal is to save 200kr for an amazing trip to Italy.' },
   { title: 'French Getaway', MoneyTarget: '200kr', description: 'Join us as we plan to save 200kr for a delightful trip to France!' },
   { title: 'Exploring Greece', MoneyTarget: '200kr', description: 'Dreaming of Greece? Lets work together to save 200kr for that unforgettable trip!' },
@@ -17,6 +17,10 @@ const emits = defineEmits(['goToSavingGoal']);
 const goToSavingGoal = () => {
   emits('goToSavingGoal');
 };
+
+const deleteSavingGoal = () => {
+
+};
 </script>
 
 <template>
@@ -28,6 +32,7 @@ const goToSavingGoal = () => {
       <h5 class="card-title">{{ savingGoal.title }}</h5>
       <p class="card-text">{{ savingGoal.description }}</p>
       <a href="#" class="btn btn-light" @click="goToSavingGoal">Go to saving goal</a>
+      <a href="#" class="btn btn-danger" @click="deleteSavingGoal" style="margin-left: 8px">Delete</a>
     </div>
   </div>
 </template>

src/components/SavingGoalComponents/SavingGoalRoadmap.vue

@@ -45,10 +45,12 @@ export default {
     <div class="SavingGoalTitle text-center">{{title}}</div>
     <ul class="timeline">
       <li v-for="(step, index) in steps" :key="index" :class="{ 'timeline-inverted': index % 2 !== 0 }">
+        <a :href="'#panel-' + index">
           <div class="timeline-image z-1" @click="togglePanel(step)">
             <img class="circular-image" :src="step.showPanel ? altImage : image" alt="">
           </div>
-        <div class="timeline-panel z-3" v-show="step.showPanel">
+        </a>
+        <div class="timeline-panel z-3" :id="'panel-' + index" v-show="step.showPanel">
           <div class="timeline-heading">
             <h4>{{ step.title }}</h4>
             <h4 class="subheading">{{step.description}}</h4>
@@ -88,10 +90,11 @@ export default {
 .SavingGoalTitle {
   font-weight: 600;
   font-size: 45px;
+  margin-top: 20px;
   margin-bottom:40px;
   padding-bottom: 10px;
   color: white;
-  border-radius: 0 0 1em 1em;
+  border-radius: 1em;
   background-color: #0A58CA;
 }