Feature/modal

src/resources/vue/components/icon.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="icon" v-html="iconSVG"></div>
+  <div class="icon" v-html="iconSVG"></div>
 </template>
 
 <script>
@@ -25,11 +25,11 @@ export default {
         case 'scan-icon':
           return `<svg width="${this.size || 24}" height="${this.size || 24}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15 3H21V8H19V5H15V3ZM9 3V5H5V8H3V3H9ZM15 21V19H19V16H21V21H15ZM9 21H3V16H5V19H9V21ZM3 11H21V13H3V11Z" fill="${this.color || 'black'}"></path></svg>`;
         default:
-          return '';
+          return "";
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style lang="scss">

src/resources/vue/components/modal.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="bg-modal" @click="toggleModal" v-if="showModal">
+    <div v-if="showModal" class="modal" @click.stop>
+      <Icon class="close-icon" icon="close" color="#ff0000" />
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import Icon from "./icon.vue";
+export default {
+  title: "Modal",
+  components: {
+    Icon,
+  },
+  data() {
+    return {
+      showModal: true,
+    };
+  },
+  methods: {
+    toggleModal() {
+      this.showModal = !this.showModal;
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.bg-modal {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(128, 128, 128, 0.7);
+
+  .modal {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 80%;
+    height: 80%;
+    background-color: #1d243a;
+
+    .close-icon {
+      position: absolute;
+      height: 40px;
+      width: 40px;
+      top: 5px;
+      right: 5px;
+      fill: #fff;
+    }
+  }
+}
+</style>

src/resources/vue/scss/global.scss

@@ -1,17 +1,23 @@
 @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');
 @import './variables.scss';
 
-html, body {
+html,
+body {
     font-family: $font-main;
     background-color: $color-dark-blue-100;
     color: $color-white;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
     font-weight: bold;
     margin: 0;
 }
 
 p {
     margin: 0;
-}
+}