A lot of code, some chunky refactors, but FX Presets

src/components/button_list/Button.vue

@@ -1,7 +1,12 @@
 <template>
-  <div ref="button" style="display: flex" class="button" v-bind:class="{ active: isActive, disabled: isDisabled }" @click="setActive">
-    <div class="left_side"><slot name="left">{{ label }}</slot></div>
-    <div ref="right" class="right_side"><slot name="right"></slot></div>
+  <div ref="button" style="display: flex" class="button" v-bind:class="{ active: isActive, disabled: isDisabled }"
+       @click="setActive">
+    <div class="left_side">
+      <slot name="left">{{ label }}</slot>
+    </div>
+    <div ref="right" class="right_side">
+      <slot name="right"></slot>
+    </div>
   </div>
 </template>
 
@@ -14,6 +19,7 @@ export default {
     label: String,
     isActive: Boolean,
     isDisabled: Boolean,
+    padding: {type: String, required: false, default: "8px"}
   },
 
   methods: {
@@ -26,7 +32,7 @@ export default {
   },
 
   computed: {
-    right_width: function() {
+    right_width: function () {
       return this.$refs.right.clientWidth + "px";
     }
   }
@@ -40,7 +46,7 @@ export default {
   width: calc(100% - 16px);
   margin: 8px;
   background-color: #3b413f;
-  padding: 8px;
+  padding: v-bind(padding);
   text-align: left;
   color: #fff;
 

src/components/design/DropMenu.vue

@@ -0,0 +1,138 @@
+<template>
+  <div v-show="is_active">
+    <ul ref="menuList" class="context-menu" v-click-outside="onClickOutside">
+      <li v-for="(option, index) in options" :key="index" @click.stop="optionClicked(option)" class="item">
+        <span v-html="option.name"/>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DropMenu",
+  emits: ['menu-closed', 'option-clicked'],
+
+  props: {
+    options: {
+      type: Array,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      identifier: null,
+      is_active: false,
+    };
+  },
+
+  methods: {
+    showMenu(event, identifier, scrollTop) {
+      if (scrollTop === undefined) {
+        scrollTop = 0;
+      }
+
+      let positionElement = event.target;
+
+      // If it's an SVG or Path, we need to locate the containing div..
+      let found = false;
+      while (!found) {
+        if (positionElement.nodeName === "svg" || positionElement.nodeName === "path") {
+          positionElement = positionElement.parentNode;
+          continue;
+        }
+        found = true;
+      }
+
+      // We want to pop out from the right of whatever element was pressed, note that scrollTop has
+      // to be considered, otherwise it'll pop low on scrollers.
+      let left = positionElement.offsetLeft;
+      let top = positionElement.offsetTop - scrollTop;
+
+      // Now we need to position it to the bottom right of the element clicked..
+      left += (positionElement.clientWidth);
+      top += (positionElement.clientHeight / 2);
+
+
+      this.identifier = identifier;
+      const menu = this.$refs.menuList;
+
+      let menuWidth = menu.offsetWidth;
+      let menuHeight = menu.offsetHeight;
+
+      let leftPosition = left + "px";
+      let topPosition = top + "px";
+
+      // Check if the Menu will break the window boundaries, and flip side if so.
+      if (menuWidth + left >= window.innerWidth) {
+        leftPosition = (left - menuWidth) + 'px';
+      }
+
+      if (menuHeight + top >= window.innerHeight) {
+        topPosition = (top - menuHeight) + 'px';
+      }
+
+      // Set the Position..
+      menu.style.left = leftPosition;
+      menu.style.top = topPosition;
+
+      // Activate the Menu..
+      this.is_active = true;
+    },
+
+    hideContextMenu() {
+      this.is_active = false;
+      this.$emit('menu-closed');
+    },
+
+    onClickOutside() {
+      this.hideContextMenu();
+    },
+
+    optionClicked(option) {
+      this.hideContextMenu();
+      this.$emit('option-clicked', {
+        item: this.identifier,
+        option: option,
+      });
+    },
+  },
+}
+</script>
+
+<style scoped>
+.context-menu {
+  background-color: #252927;
+  color: #fff;
+  border: 1px solid #6e7676;
+  list-style: none;
+  position: absolute;
+  left: 0;
+  margin: 0;
+  padding: 0;
+  top: 0;
+  z-index: 1000000;
+}
+
+.context-menu .item {
+  align-items: center;
+  color: #fff;
+  cursor: pointer;
+  display: flex;
+  padding: 5px 15px;
+}
+
+.context-menu .item:hover {
+  background-color: #59b1b6;
+  color: white;
+}
+
+ul:first-child {
+  margin-top: 4px;
+}
+
+ul:last-child {
+  margin-bottom: 4px;
+}
+</style>

src/components/design/Modal.vue → src/components/design/modal/ModalBox.vue

@@ -29,6 +29,10 @@ export default {
   emits: ['close'],
   name: "ModalBox",
 
+  props: {
+    bodyPadding: {type: String, default: "20px"},
+  },
+
   methods: {
     onClickOutside() {
       this.$emit('close');
@@ -91,6 +95,8 @@ export default {
 
 .modal-body {
   background-color: #2d3230;
+  color: #fff;
+  padding: v-bind(bodyPadding);
 }
 
 .modal-footer {

src/components/design/modal/ModalButton.vue

@@ -0,0 +1,24 @@
+<template>
+  <button class="modal-button"><slot /></button>
+</template>
+
+<script>
+export default {
+  name: "ModalButton"
+}
+</script>
+
+<style scoped>
+.modal-button {
+  background-color: #353937;
+  color: #fff;
+  padding: 8px 30px;
+  border: none;
+  margin: 8px;
+  width: 120px;
+}
+
+.modal-button:hover {
+  background-color: #737775;
+}
+</style>

src/components/design/modal/ModalInput.vue

@@ -0,0 +1,33 @@
+<template>
+  <input ref="inputBox" class="text" :value="modelValue" type="text"
+         @input="$emit('update:modelValue', $event.target.value)"
+         v-on:keyup.enter="$emit('on-enter')"
+         :placeholder="placeholder" />
+</template>
+
+<script>
+export default {
+  name: "ModalInput",
+
+  props: {
+    modelValue: String,
+    placeholder: String,
+  },
+
+  methods: {
+    focusInput() {
+      this.$refs.inputBox.focus();
+    },
+  }
+}
+</script>
+
+<style scoped>
+input[type=text] {
+  width: calc(100% - 10px);
+  background-color: #2B2F2D;
+  border: 1px solid #3b413f;
+  padding: 5px;
+  color: #fff;
+}
+</style>

src/components/profiles/ProfileButton.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="button" :class="{ selected: isSelected }" @click="handleClick">
-    <span style="width: 20px; display: inline-block; color: #59b1b6">
+    <span v-show="showCheck" style="width: 20px; display: inline-block; color: #59b1b6">
       <font-awesome-icon v-show="isActive" icon="fa-solid fa-check" />
     </span>
     <span>{{ label }}</span>
@@ -16,6 +16,8 @@ export default {
     label: String,
     isActive: Boolean,
     isSelected: Boolean,
+
+    showCheck: {type: Boolean, default: true}
   },
 
   data() {