Hide modal footer when empty, changed slot names for good code practice

src/components/utilities/Modal.vue

@@ -2,14 +2,14 @@
   <Teleport to="body">
     <div class="modal-container" :style="{ top: y + 'px', left: x + 'px' }" v-if="isModalOpenRef">
       <div class="modal-header" @mousedown="startDrag">
-        <slot name="modal-header" />
+        <slot name="modalHeader" />
         <button @click="close" v-if="closable"><img draggable="false" src="/assets/icons/close-button-white.svg" /></button>
       </div>
       <div class="modal-body">
-        <slot name="modal-body" />
+        <slot name="modalBody" />
       </div>
-      <div class="modal-footer">
-        <slot name="modal-footer" />
+      <div v-if="$slots.modalFooter" class="modal-footer">
+        <slot name="modalFooter" />
       </div>
     </div>
   </Teleport>
@@ -88,6 +88,7 @@ onUnmounted(() => {
   removeEventListener('mousemove', drag)
   removeEventListener('mouseup', stopDrag)
 })
+
 </script>
 
 <style lang="scss">