feat: init of modals and checkboxtiles

frontend/src/App.vue

@@ -44,13 +44,4 @@ import GlobalHeader from "@/components/headers/GlobalHeader.vue";
   margin-bottom: 24px;
 }
 
-.body-large-regular b {
-  color: #333332;
-  font-family: Flanders Art Sans Regular, sans-serif;
-  font-size: 20px;
-  font-style: normal;
-  font-weight: 700;
-  line-height: 30px
-
-}
 </style>

frontend/src/assets/main.css

@@ -24,6 +24,26 @@ body {
     flex-grow: 1;
 }
 
+.primary-btn {
+    width: fit-content;
+    padding: 5px 20px 5px 20px;
+    align-items: center;
+    border: none;
+    border-radius: 3px;
+    background: #0055CC;
+
+    color: #ffffff;
+    font-family: Flanders Art Sans, sans-serif;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 24px; /* 150% */
+}
+
+.primary-btn:hover {
+    background-color: #003bb0;
+}
+
 .secondary-btn {
     width: 116px;
     height: 38px;
@@ -32,7 +52,6 @@ body {
     border: none;
     border-radius: 3px;
     background: #fff;
-    box-shadow: 0 2px 12px 0 rgba(106, 118, 134, 0.35);
 
     color: #0055CC;
     font-family: Flanders Art Sans, sans-serif;
@@ -51,6 +70,14 @@ body {
     line-height: 24px; /* 150% */
 }
 
+.secondary-btn.active, .secondary-btn:hover {
+    border: 1px solid #0055CC;
+}
+
+.shadow-medium {
+    box-shadow: 0 2px 12px 0 rgba(106, 118, 134, 0.35);
+}
+
 .header1 {
     color: #333332;
     font-family: Flanders Art Sans, sans-serif;
@@ -60,6 +87,16 @@ body {
     line-height: 52px;
 }
 
+.header2 {
+    color: #333332;
+    font-family: Flanders Art Sans, sans-serif;
+    font-size: 32px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 41px; /* 128.125% */
+
+}
+
 .header5 {
     color: #333332;
     font-family: Flanders Art Sans, sans-serif;
@@ -76,7 +113,19 @@ body {
     font-style: normal;
     font-weight: 400;
     line-height: 30px; /* 150% */
+}
+
+.body-medium-regular {
+    color: #333332;
+    font-family: Flanders Art Sans Regular, sans-serif;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 27px; /* 150% */
+}
 
+b {
+    font-weight: 700;
 }
 
 .small-regular {

frontend/src/components/checkbox/CheckboxTile.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="checkbox-tile" :class="{ 'checked': checked }" @click="checked = !checked">
+    <div class="checkmark-container">
+      <img v-if="checked" src="../../assets/svgs/checkboxtile/check-checked.svg" alt="checkbox checked"/>
+      <span v-else class="checkmark"/>
+    </div>
+    <h5 class="header5">{{ label }} {{ checked ? "(Active)" : "" }}</h5>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    id: String,
+    label: String,
+    checked: Boolean
+  },
+  emits: ["onChecked"],
+  mounted() {
+    console.log(typeof this.checked)
+  }
+}
+</script>
+
+<style scoped>
+.checkbox-tile {
+  display: flex;
+  align-items: center;
+  border-radius: 3px;
+  border: 2px #8695a8 solid;
+  width: 100%;
+  height: 58px;
+  margin-bottom: 24px;
+  cursor: pointer;
+}
+
+.checkbox-tile:hover, .checkbox-tile.checked {
+  border: #0055CC solid 2px;
+}
+
+.checkbox-tile input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+
+.checkmark-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #8695a8;
+  height: 100%;
+  width: 28px;
+  margin-right: 12px;
+}
+
+.checkbox-tile:hover .checkmark-container, .checkbox-tile.checked .checkmark-container {
+  background-color: #0055CC;
+}
+
+.checkmark {
+  border: #8695a8 solid 1px;
+  width: 18px;
+  height: 18px;
+  border-radius: 3px;
+  margin-left: -1px;
+  background-color: #fff;
+}
+
+.checkmark.checked {
+  border: #fff solid 1px;
+  width: 18px;
+  height: 18px;
+  border-radius: 3px;
+  margin-left: -1px;
+}
+
+</style>

frontend/src/components/graph/KnowledgeGraph.vue

@@ -58,7 +58,7 @@ marker {
   border-bottom: 0.5px solid #CFD5DD;
   border-left: 0;
 
-  height: 500px;
+  height: 350px;
   min-width: 600px;
   width: 100%;
 }

frontend/src/components/headers/GlobalHeader.vue

@@ -1,7 +1,3 @@
-<script setup>
-
-</script>
-
 <template>
 <div>
   <div class="global-header">

frontend/src/components/map/LeafletMap.vue

@@ -1,8 +1,11 @@
 <template>
-  <div style="display: flex; width: 100%">
-    <div style="width: 50%" id="map"></div>
-    <div style="width: 50%">
-      <KnowledgeGraph :member-id="memberId"></KnowledgeGraph>
+  <div>
+    <MapButtons></MapButtons>
+    <div class="linked-data-container">
+      <div style="width: 50%" id="map"></div>
+      <div style="width: 50%">
+        <KnowledgeGraph :member-id="memberId"></KnowledgeGraph>
+      </div>
     </div>
   </div>
   <div>
@@ -24,9 +27,10 @@ import {ref} from "vue";
 import Slider from "@/components/slider/Slider.vue";
 import Stomp from "webstomp-client";
 import KnowledgeGraph from "@/components/graph/KnowledgeGraph.vue";
+import MapButtons from "@/components/modal/MapButtons.vue";
 
 export default {
-  components: {KnowledgeGraph, Slider},
+  components: {MapButtons, KnowledgeGraph, Slider},
   watch: {
     time: function () {
       this.fetchMembers();
@@ -131,6 +135,56 @@ export default {
 </script>
 
 <style>
+.map-buttons {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: end;
+  z-index: 2;
+  width: 50%;
+  top: 350px;
+  right: 12px;
+  margin-top: -160px;
+  margin-bottom: 30px;
+  gap: 10px;
+}
+
+.linked-data-container {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  width: 100%;
+  height: 350px;
+}
+
+.map-button {
+  width: 74px;
+  height: 60px;
+  border: none;
+  background-color: #fff;
+  border-radius: 3px;
+
+  display: inline-flex;
+  flex-direction: column;
+  gap: 4px;
+  align-items: center;
+  justify-content: center;
+}
+
+.map-button > img {
+  width: 24px;
+  height: 24px;
+}
+
+.map-button > span {
+  color: #0055CC;
+  font-family: Flanders Art Sans, sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+  letter-spacing: 0;
+}
+
 .leaflet-control-zoom-in,
 .leaflet-control-zoom-out {
   color: #05C !important;

frontend/src/components/modal/Layers.vue

@@ -0,0 +1,39 @@
+<script>
+import {ref} from "vue";
+
+export default {
+  setup() {
+    const isOpen = ref(false)
+    return {
+      isOpen
+    }
+  }
+}
+</script>
+
+<template>
+  <button @click="isOpen = true">Lagen</button>
+  <Teleport to="body">
+    <div v-if="isOpen" class="modal">
+      <h1>Lagen</h1>
+      <button @click="isOpen = false">Close</button>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+body {
+  position: relative;
+}
+.modal {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  z-index: 999;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 600px;
+  background-color: #fff;
+}
+</style>