refactor: split ModalDialog into ModalDialog and DialogBox

client/src/assets/css/colors.scss

@@ -108,11 +108,13 @@ $admin-tile-bottom-icon-hover-background-color: #485058;
 $admin-tile-bottom-icon-hover-border: $admin-tile-bottom-icon-border;
 
 // Modal Dialog
-$modal-dialog-background-color: #384048;
-$modal-dialog-border: none;
-$modal-dialog-text-color: #ffffff;
 $modal-dialog-backdrop-background-color: rgba(0, 0, 0, 75%);
 
+// Dialog
+$dialog-box-background-color: #384048;
+$dialog-box-border: none;
+$dialog-box-text-color: #ffffff;
+
 // Engine Debug
 $debug-background-color: lighten($background-primary-color, 10%);
 $debug-border: none;

client/src/components/CollectQuotes.vue

@@ -1,8 +1,13 @@
 <template>
   <div class="collect-quotes__container">
-    <QuoteCard v-for="quote in quotes" :key="quote.id" :quote="quote" :editable="true" />
+    <div class="collect-quotes__explaination-box">
-    <QuoteCardNew v-if="showNewQuoteCard" @click="createNewQuote" />
+      <QuoteExplainationBox />
-    <QuoteCard v-if="!showNewQuoteCard" :quote="newQuote" :editable="true" :instant-edit="true" @edit-end="editEnd" />
+    </div>
+    <div class="collect-quotes__quotes">
+      <QuoteCard v-for="quote in quotes" :key="quote.id" :quote="quote" :editable="true" />
+      <QuoteCardNew v-if="showNewQuoteCard" @click="createNewQuote" />
+      <QuoteCard v-if="!showNewQuoteCard" :quote="newQuote" :editable="true" :instant-edit="true" @edit-end="editEnd" />
+    </div>
   </div>
 </template>
 
@@ -32,7 +37,11 @@ const editEnd = () => {
 
 <style lang="scss">
 .collect-quotes {
-  &__container {
+  &__explaination-box {
+    margin: 32px;
+  }
+
+  &__quotes {
     display: flex;
     flex-wrap: wrap;
   }

client/src/components/CreateTeamDialog.vue

@@ -107,8 +107,8 @@ onMounted(() => {
 
   &__input {
     border: 1px solid white;
-    background-color: $modal-dialog-background-color;
+    background-color: $dialog-box-background-color;
-    color: $modal-dialog-text-color;
+    color: $dialog-box-text-color;
     border-radius: 4px;
   }
 

client/src/components/DialogBox.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="dialog-box__container">
+    <div class="dialog-box__header">
+      <div class="dialog-box__title">{{ title }}</div>
+      <Button v-if="!noCloseButton" :border="false" @click="emit('close')">x</Button>
+    </div>
+    <div class="dialog-box__body">
+      <slot />
+    </div>
+    <div class="dialog-box__footer">
+      <slot name="footer" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  title?: string
+  noCloseButton?: boolean
+}>()
+
+const emit = defineEmits(['close'])
+</script>
+
+<style lang="scss">
+@import '~/assets/css/components';
+
+.dialog-box {
+  &__container {
+    display: flex;
+    flex-direction: column;
+    min-width: 400px;
+    min-height: 280px;
+    margin: auto;
+    background-color: $dialog-box-background-color;
+    border: $dialog-box-border;
+    border-radius: 8px;
+    color: $dialog-box-text-color;
+    z-index: 12;
+  }
+
+  &__header {
+    display: flex;
+  }
+
+  &__title {
+    flex-grow: 1;
+    margin: 36px 36px 8px 36px;
+    font-family: $font-primary;
+    font-size: 24px;
+  }
+
+  &__body {
+    flex-grow: 1;
+    margin: 36px;
+    font-family: $font-secondary;
+  }
+
+  &__footer {
+    display: flex;
+    // justify-content: end;
+    margin: 24px 36px;
+  }
+}
+</style>

client/src/components/ModalDialog.vue

@@ -1,17 +1,11 @@
 <template>
   <div class="modal-dialog__container">
-    <div class="modal-dialog__box">
+    <DialogBox :title="title" :no-close-button="noCloseButton" @close="emit('close')">
-      <div class="modal-dialog__header">
+      <slot />
-        <div class="modal-dialog__title">{{ title }}</div>
+      <template v-slot:footer>
-        <Button v-if="!noCloseButton" :border="false" @click="emit('close')">x</Button>
-      </div>
-      <div class="modal-dialog__body">
-        <slot />
-      </div>
-      <div class="modal-dialog__footer">
         <slot name="footer" />
-      </div>
+      </template>
-    </div>
+    </DialogBox>
     <div class="modal-dialog__backdrop" />
   </div>
 </template>
@@ -21,6 +15,7 @@ defineProps<{
   title?: string
   noCloseButton?: boolean
 }>()
+
 const emit = defineEmits(['close'])
 </script>
 
@@ -37,42 +32,6 @@ const emit = defineEmits(['close'])
     height: 100%;
   }
 
-  &__box {
-    display: flex;
-    flex-direction: column;
-    min-width: 400px;
-    min-height: 280px;
-    margin: auto;
-    background-color: $modal-dialog-background-color;
-    border: $modal-dialog-border;
-    border-radius: 8px;
-    color: $modal-dialog-text-color;
-    z-index: 12;
-  }
-
-  &__header {
-    display: flex;
-  }
-
-  &__title {
-    flex-grow: 1;
-    margin: 36px 36px 8px 36px;
-    font-family: $font-primary;
-    font-size: 24px;
-  }
-
-  &__body {
-    flex-grow: 1;
-    margin: 36px;
-    font-family: $font-secondary;
-  }
-
-  &__footer {
-    display: flex;
-    // justify-content: end;
-    margin: 24px 36px;
-  }
-
   &__backdrop {
     position: absolute;
     width: 100%;

client/src/components/QuoteExplainationBox.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="quote-explaination-box__container">
+    Explain
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style lang="scss">
+@import '~/assets/css/components';
+
+.quote-explaination-box {
+  &__container {
+    padding: 16px;
+  }
+}
+</style>

client/src/components/admin/PlayerDialog.vue

@@ -59,8 +59,8 @@ const generate = () => {
 
   &__input {
     border: 1px solid white;
-    background-color: $modal-dialog-background-color;
+    background-color: $dialog-box-background-color;
-    color: $modal-dialog-text-color;
+    color: $dialog-box-text-color;
     border-radius: 4px;
   }
 
@@ -88,4 +88,4 @@ const generate = () => {
     margin-left: 16px;
   }
 }
-</style>
+</style>