updated info-modal

src/components/InfoModal.vue

@@ -8,21 +8,11 @@
               : info.type === 'success'
               ? 'bg-success text-white'
               : 'bg-secondary text-white'"
-           class="card text-end">
+           class="card">
-        <div class="card-header d-flex justify-content-between">
+        <div class="card-body d-flex justify-content-between">
-          <div>
+          <span class="info-text">{{ info.message }}</span>
-            <span v-if="info.type !== 'success'">
-              Error <span class="mx-2">-</span> {{ info.statuscode }}
-            </span>
-            <span v-else>
-              Success
-            </span>
-          </div>
           <button aria-label="Close" class="btn-close" type="button" @click="closeModal(id)"/>
         </div>
-        <div class="card-body">
-          {{ info.message }}
-        </div>
       </div>
     </div>
   </div>
@@ -63,7 +53,7 @@ export default {
 
 <style lang="scss" scoped>
 #modal {
-  --height: 100px;
+  --height: 56px;
 
   .card {
     z-index: 10;
@@ -71,11 +61,16 @@ export default {
     right: 1rem;
     opacity: .8;
     width: min(100vw - 2rem, 50ch);
+    height: var(--height);
 
     .btn-close {
       background-color: white;
       opacity: .5;
     }
+
+    .info-text {
+      font-size: .8rem;
+    }
   }
 
   @for $i from 1 through 10 {
@@ -90,10 +85,4 @@ export default {
     }
   }
 }
-
-@media screen and (max-width: 768px) {
-  #modal {
-    --height: 120px;
-  }
-}
 </style>