From 5e6c679465f02bb45fda937cd497c9025de6edbe Mon Sep 17 00:00:00 2001
From: David Anyatonwu <davidanyatonwu@gmail.com>
Date: Fri, 27 Dec 2024 21:12:00 +0100
Subject: [PATCH] Refactor UI components for video metadata display; adjust
 font sizes and layout for consistency

---
 apps/desktop/src/routes/editor/Header.tsx      | 12 ++++++------
 apps/desktop/src/routes/recordings-overlay.tsx | 12 ++++++------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/apps/desktop/src/routes/editor/Header.tsx b/apps/desktop/src/routes/editor/Header.tsx
index af0ada06..cdd3becd 100644
--- a/apps/desktop/src/routes/editor/Header.tsx
+++ b/apps/desktop/src/routes/editor/Header.tsx
@@ -333,21 +333,21 @@ function ExportButton() {
       </Button>
       <Show when={metadata()}>
         {(meta) => (
-          <div class="text-xs text-gray-400 dark:text-gray-500 flex items-center gap-3 px-2 py-1 rounded-md">
+          <div class="text-xs bg-gray-100 dark:bg-gray-600/30 text-gray-500 dark:text-gray-400 flex items-center gap-4 px-3 py-1.5 rounded-full">
             <span class="flex items-center">
-              <IconCapCamera class="w-3.5 h-3.5 mr-1 opacity-70" />
+              <IconCapCamera class="w-3 h-3 mr-1.5 opacity-80" />
               {Math.floor(meta().duration / 60)}:{Math.floor(meta().duration % 60)
                 .toString()
                 .padStart(2, "0")}
             </span>
-            <div class="w-[1px] h-3 bg-gray-300 dark:bg-gray-500/50"></div>
+            <div class="w-[1px] h-2.5 bg-gray-300 dark:bg-gray-500/50"></div>
             <span class="flex items-center">
-              <IconLucideHardDrive class="w-3.5 h-3.5 mr-1 opacity-70" />
+              <IconLucideHardDrive class="w-3 h-3 mr-1.5 opacity-80" />
               {meta().size.toFixed(2)} MB
             </span>
-            <div class="w-[1px] h-3 bg-gray-300 dark:bg-gray-500/50"></div>
+            <div class="w-[1px] h-2.5 bg-gray-300 dark:bg-gray-500/50"></div>
             <span class="flex items-center">
-              <IconLucideClock class="w-3.5 h-3.5 mr-1 opacity-70" />
+              <IconLucideClock class="w-3 h-3 mr-1.5 opacity-80" />
               ~{Math.floor(meta().estimatedExportTime / 60)}:{Math.floor(meta().estimatedExportTime % 60)
                 .toString()
                 .padStart(2, "0")}
diff --git a/apps/desktop/src/routes/recordings-overlay.tsx b/apps/desktop/src/routes/recordings-overlay.tsx
index 456f305e..2a7efce4 100644
--- a/apps/desktop/src/routes/recordings-overlay.tsx
+++ b/apps/desktop/src/routes/recordings-overlay.tsx
@@ -577,31 +577,31 @@ export default function () {
                             <div
                               style={{
                                 color: "white",
-                                "font-size": "14px",
+                                "font-size": "12px",
                                 "border-end-end-radius": "7.4px",
                                 "border-end-start-radius": "7.4px",
                               }}
                               class={cx(
-                                "absolute bottom-0 left-0 right-0 font-medium bg-gray-500 dark:bg-gray-50 bg-opacity-40 backdrop-blur p-2 flex justify-between items-center pointer-events-none transition-all max-w-full overflow-hidden",
+                                "absolute bottom-0 left-0 right-0 font-medium bg-gray-500/60 dark:bg-gray-50/60 backdrop-blur-md p-2.5 flex justify-between items-center pointer-events-none transition-all max-w-full overflow-hidden",
                                 isLoading() || showUpgradeTooltip()
                                   ? "opacity-0"
                                   : "group-hover:opacity-0"
                               )}
                             >
-                              <p class="flex items-center gap-3">
+                              <p class="flex items-center gap-4">
                                 <span class="flex items-center">
-                                  <IconCapCamera class="w-[20px] h-[20px] mr-1" />
+                                  <IconCapCamera class="w-[16px] h-[16px] mr-1.5" />
                                   {Math.floor(metadata().duration / 60)}:
                                   {Math.floor(metadata().duration % 60)
                                     .toString()
                                     .padStart(2, "0")}
                                 </span>
                                 <span class="flex items-center">
-                                  <IconLucideHardDrive class="w-[20px] h-[20px] mr-1" />
+                                  <IconLucideHardDrive class="w-[16px] h-[16px] mr-1.5" />
                                   {metadata().size.toFixed(2)} MB
                                 </span>
                                 <span class="flex items-center">
-                                  <IconLucideClock class="w-[20px] h-[20px] mr-1" />
+                                  <IconLucideClock class="w-[16px] h-[16px] mr-1.5" />
                                   ~{Math.floor(metadata().estimatedExportTime / 60)}:
                                   {Math.floor(metadata().estimatedExportTime % 60)
                                     .toString()