From 5ea1b9766b9ce87fb23c864a7400ec2f8ebc284d Mon Sep 17 00:00:00 2001
From: ItzNotABug <itznotabug@gmail.com>
Date: Tue, 1 Oct 2024 12:12:51 +0530
Subject: [PATCH] improve: make progresses stacked.

---
 src/lib/components/backupRestoreBox.svelte    | 23 ++-------------
 src/lib/components/migrationBox.svelte        | 13 +++++++--
 src/lib/components/uploadBox.svelte           | 19 ++++++++++++-
 .../project-[project]/+layout.svelte          | 28 +++++++++++++++++--
 4 files changed, 57 insertions(+), 26 deletions(-)

diff --git a/src/lib/components/backupRestoreBox.svelte b/src/lib/components/backupRestoreBox.svelte
index 783bad702..36e4511d8 100644
--- a/src/lib/components/backupRestoreBox.svelte
+++ b/src/lib/components/backupRestoreBox.svelte
@@ -94,7 +94,7 @@
 
                     if ($collection === 'restorations') {
                         const { newId, newName } =
-                        collectionMap.get($id).options?.['databases']?.['database'][0] || {};
+                            collectionMap.get($id).options?.['databases']?.['database'][0] || {};
 
                         showRestoreNotification(newId, newName);
                     }
@@ -171,10 +171,10 @@
             {@const titleText = isBackup ? 'Creating Backup' : 'Creating Restoration'}
 
             {#if items.size > 0}
-                <section class="upload-box is-float">
+                <section class="upload-box">
                     <header class="upload-box-header">
                         <h4 class="upload-box-title">
-                            <span class="text">{titleText}</span>
+                            <span class="text">{titleText} ({items.size})</span>
                         </h4>
                         <button
                             class="upload-box-button"
@@ -239,17 +239,6 @@
         justify-content: center;
     }
 
-    .box-holder {
-        right: 0;
-        bottom: 0;
-        display: flex;
-        position: fixed;
-    }
-
-    .is-float {
-        position: relative;
-    }
-
     .backup-name {
         font-size: 12px;
         font-weight: 400;
@@ -259,10 +248,4 @@
         color: var(--mid-neutrals-50, #818186);
         font-family: var(--font-family-sansSerif, Inter);
     }
-
-    @media (max-width: 768px) {
-        .is-float {
-            position: fixed;
-        }
-    }
 </style>
diff --git a/src/lib/components/migrationBox.svelte b/src/lib/components/migrationBox.svelte
index b7e2c1692..9b019a54f 100644
--- a/src/lib/components/migrationBox.svelte
+++ b/src/lib/components/migrationBox.svelte
@@ -66,7 +66,7 @@
 </script>
 
 {#if $showMigrationBox && migration}
-    <section class="upload-box is-float">
+    <section class="upload-box">
         <header class="upload-box-header">
             <h4 class="upload-box-title">
                 <span class="text">Importing Data</span>
@@ -93,9 +93,18 @@
 {/if}
 
 <style>
+    .upload-box-title {
+        font-size: 11px;
+    }
+
     .upload-box-content {
-        padding: 1.5rem;
         min-width: 400px;
         max-width: 100vw;
     }
+
+    .upload-box-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
 </style>
diff --git a/src/lib/components/uploadBox.svelte b/src/lib/components/uploadBox.svelte
index 0d744fd65..06dfed841 100644
--- a/src/lib/components/uploadBox.svelte
+++ b/src/lib/components/uploadBox.svelte
@@ -13,7 +13,7 @@
 </script>
 
 {#if $uploader?.isOpen}
-    <section class="upload-box is-float">
+    <section class="upload-box">
         <header class="upload-box-header">
             <h4 class="upload-box-title">
                 <span class="text">Uploading files</span>
@@ -101,3 +101,20 @@
         </div>
     </section>
 {/if}
+
+<style>
+    .upload-box-title {
+        font-size: 11px;
+    }
+
+    .upload-box-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .upload-box-content {
+        min-width: 400px;
+        max-width: 100vw;
+    }
+</style>
diff --git a/src/routes/(console)/project-[project]/+layout.svelte b/src/routes/(console)/project-[project]/+layout.svelte
index c3a00c064..e50716318 100644
--- a/src/routes/(console)/project-[project]/+layout.svelte
+++ b/src/routes/(console)/project-[project]/+layout.svelte
@@ -103,7 +103,29 @@
 
 <slot />
 
-<UploadBox />
-<MigrationBox />
+<div class="layout-level-progress-bars">
+    <UploadBox />
+    <MigrationBox />
 
-<BackupRestoreBox />
+    <BackupRestoreBox />
+</div>
+
+<style>
+    .layout-level-progress-bars {
+        gap: 1rem;
+        display: flex;
+        flex-direction: column;
+
+        right: 0;
+        bottom: 0;
+        position: fixed;
+        padding: 1.5rem;
+    }
+
+    @media (max-width: 768px) {
+        .layout-level-progress-bars {
+            position: relative;
+            align-items: center;
+        }
+    }
+</style>