Add conditional rendering to ModalCard and use correct classes in

ImportProfileModal
ebkr · Sep 11, 2024 · 297ce50 · 297ce50
1 parent bd9bc43
commit 297ce50
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/src/components/ModalCard.vue b/src/components/ModalCard.vue
@@ -2,13 +2,13 @@
     <div :class="['modal', {'is-active': isActive}]">
         <div class="modal-background" @click="closeModal()"/>
         <div class="modal-card py-4">
-            <header class="modal-card-head">
+            <header v-if="$slots.header" class="modal-card-head">
                 <slot name="header"/>
             </header>
-            <section class="modal-card-body">
+            <section v-if="$slots.body" class="modal-card-body">
                 <slot name="body"/>
             </section>
-            <footer class="modal-card-foot">
+            <footer v-if="$slots.footer" class="modal-card-foot">
                 <slot name="footer"/>
             </footer>
         </div>

diff --git a/src/components/profiles-modals/ImportProfileModal.vue b/src/components/profiles-modals/ImportProfileModal.vue
@@ -354,7 +354,7 @@ export default class ImportProfileModal extends mixins(ProfilesMixin) {
 <template>
     <ModalCard v-if="activeStep === 'IMPORT_UPDATE_SELECTION'" key="IMPORT_UPDATE_SELECTION" :is-active="isOpen" @close-modal="closeModal">
         <template v-slot:header>
-            <p>Are you going to be updating an existing profile or creating a new one?</p>
+            <p class="card-header-title">Are you going to be updating an existing profile or creating a new one?</p>
         </template>
         <template v-slot:footer>
             <button id="modal-import-new-profile"
@@ -421,7 +421,7 @@ export default class ImportProfileModal extends mixins(ProfilesMixin) {
 
     <ModalCard v-else-if="isProfileBeingImported" key="PROFILE_IS_BEING_IMPORTED" :is-active="isOpen" @close-modal="closeModal">
         <template v-slot:header>
-            <p>{{percentageImported}}% imported</p>
+            <p class="card-header-title">{{percentageImported}}% imported</p>
         </template>
         <template v-slot:body>
             <p>This may take a while, as mods are being downloaded.</p>