From 88e4ab4fbaac8725ab875d3bb3643e64700e41d5 Mon Sep 17 00:00:00 2001
From: vildemv <vildemv@ntnu.no>
Date: Mon, 29 Apr 2024 09:06:11 +0200
Subject: [PATCH] Created help-pop-up for economy view.

---
 .../popups/help/EconomyHelpPopUp.vue          | 108 ++++++++++++++++++
 1 file changed, 108 insertions(+)
 create mode 100644 src/components/popups/help/EconomyHelpPopUp.vue

diff --git a/src/components/popups/help/EconomyHelpPopUp.vue b/src/components/popups/help/EconomyHelpPopUp.vue
new file mode 100644
index 0000000..d679e5f
--- /dev/null
+++ b/src/components/popups/help/EconomyHelpPopUp.vue
@@ -0,0 +1,108 @@
+<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>Transaksjoner</h2>
+    </div>
+    <h3>
+      Hei! Du befinner deg for øyeblikket på transaksjon-siden til sparesti.
+      PÃ¥ denne siden finner du en oversikt over dine nyligste transaksjoner.
+    </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
-- 
GitLab