From f1ab953b897864cf1a2eef6f3d0d62d16a7634ab Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 13 Jun 2025 13:03:24 -0400
Subject: [PATCH] Style changes

---
 .../components/admin/MediaUploadModal.svelte  | 64 +++++++++++--------
 1 file changed, 37 insertions(+), 27 deletions(-)

diff --git a/src/lib/components/admin/MediaUploadModal.svelte b/src/lib/components/admin/MediaUploadModal.svelte
index 71da2ec..29ee43b 100644
--- a/src/lib/components/admin/MediaUploadModal.svelte
+++ b/src/lib/components/admin/MediaUploadModal.svelte
@@ -174,26 +174,6 @@
 							<div class="file-info">
 								<div class="file-name">{file.name}</div>
 								<div class="file-size">{formatFileSize(file.size)}</div>
-
-								{#if isUploading}
-									<div class="progress-bar">
-										<div
-											class="progress-fill"
-											style="width: {uploadProgress[file.name] || 0}%"
-										></div>
-									</div>
-									<div class="upload-status">
-										{#if uploadProgress[file.name] === 100}
-											<span class="status-complete">✓ Complete</span>
-										{:else if uploadProgress[file.name] > 0}
-											<span class="status-uploading"
-												>{Math.round(uploadProgress[file.name] || 0)}%</span
-											>
-										{:else}
-											<span class="status-waiting">Waiting...</span>
-										{/if}
-									</div>
-								{/if}
 							</div>
 
 							{#if !isUploading}
@@ -202,6 +182,7 @@
 									class="remove-button"
 									onclick={() => removeFile(index)}
 									title="Remove file"
+									aria-label="Remove file"
 								>
 									<svg
 										width="16"
@@ -216,6 +197,26 @@
 									</svg>
 								</button>
 							{/if}
+
+							{#if isUploading}
+								<div class="progress-bar-container">
+									<div class="progress-bar">
+										<div
+											class="progress-fill"
+											style="width: {uploadProgress[file.name] || 0}%"
+										></div>
+									</div>
+									<div class="upload-status">
+										{#if uploadProgress[file.name] > 0}
+											<span class="status-uploading"
+												>{Math.round(uploadProgress[file.name] || 0)}%</span
+											>
+										{:else}
+											<span class="status-waiting">Waiting...</span>
+										{/if}
+									</div>
+								</div>
+							{/if}
 						</div>
 					{/each}
 				</div>
@@ -584,17 +585,26 @@
 		}
 	}
 
+	.progress-bar-container {
+		display: flex;
+		min-width: 120px;
+		align-items: center;
+		gap: $unit;
+	}
+
 	.progress-bar {
-		width: 100%;
-		height: 6px;
-		background: $grey-90;
-		border-radius: 3px;
+		flex-grow: 1;
+		height: $unit-2x;
+		background: $grey-100;
+		padding: $unit-half;
+		border-radius: $corner-radius-full;
+		border: 1px solid $grey-85;
 		overflow: hidden;
-		margin-bottom: $unit-half;
 
 		.progress-fill {
+			border-radius: $corner-radius-full;
 			height: 100%;
-			background: #3b82f6;
+			background: $red-60;
 			transition: width 0.3s ease;
 			position: relative;
 
@@ -634,7 +644,7 @@
 		}
 
 		.status-uploading {
-			color: #3b82f6;
+			color: $red-60;
 		}
 
 		.status-waiting {