Skip to content

Commit

Permalink
Refactor UI components for video metadata display; adjust font sizes …
Browse files Browse the repository at this point in the history 
…and layout for consistency
  • Loading branch information
@onyedikachi-david
onyedikachi-david committed Dec 27, 2024
1 parent 1905d69 commit 5e6c679
Show file tree
Hide file tree
Showing 2 changed files with 12 additions and 12 deletions.
12 changes: 6 additions & 6 deletions apps/desktop/src/routes/editor/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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")}
Expand Down
12 changes: 6 additions & 6 deletions apps/desktop/src/routes/recordings-overlay.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand Down

0 comments on commit 5e6c679

Please sign in to comment.