From a119e0a7e62846e39fba383f040af73971ce5d78 Mon Sep 17 00:00:00 2001
From: Alex Kern <alex@kern.io>
Date: Thu, 19 Sep 2024 23:16:05 -0700
Subject: [PATCH] more progress

---
 src/app/page.tsx                  |  8 ++++----
 src/components/PasswordField.tsx  |  2 +-
 src/components/ProgressBar.tsx    | 10 +++++++---
 src/components/TypeBadge.tsx      |  4 ++--
 src/components/UploadFileList.tsx |  6 +++---
 5 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index e59e918..9afea66 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -16,6 +16,7 @@ import { useMemo } from 'react'
 import { getFileName } from '../fs'
 import TitleText from '../components/TitleText'
 import SubtitleText from '../components/SubtitleText'
+import { pluralize } from '../utils/pluralize'
 
 const queryClient = new QueryClient()
 
@@ -83,8 +84,8 @@ function ConfirmUploadState({
   return (
     <PageWrapper>
       <TitleText>
-        You are about to start uploading {uploadedFiles.length}{' '}
-        {uploadedFiles.length === 1 ? 'file' : 'files'}.
+        You are about to start uploading{' '}
+        {pluralize(uploadedFiles.length, 'file', 'files')}.
       </TitleText>
       <UploadFileList files={fileListData} onRemove={onRemoveFile} />
       <PasswordField value={password} onChange={onChangePassword} />
@@ -109,8 +110,7 @@ function UploadingState({
   return (
     <PageWrapper isRotating={true}>
       <TitleText>
-        You are uploading {uploadedFiles.length}{' '}
-        {uploadedFiles.length === 1 ? 'file' : 'files'}.
+        You are uploading {pluralize(uploadedFiles.length, 'file', 'files')}.
       </TitleText>
       <UploadFileList files={fileListData} />
       <WebRTCProvider>
diff --git a/src/components/PasswordField.tsx b/src/components/PasswordField.tsx
index 3223696..02bdbc9 100644
--- a/src/components/PasswordField.tsx
+++ b/src/components/PasswordField.tsx
@@ -30,7 +30,7 @@ export default function PasswordField({
         className={`w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
           isInvalid ? 'border-red-500' : 'border-stone-300'
         }`}
-        placeholder="Enter a secret password for this FilePizza..."
+        placeholder="Enter a secret password for this slice of FilePizza..."
         value={value}
         onChange={handleChange}
       />
diff --git a/src/components/ProgressBar.tsx b/src/components/ProgressBar.tsx
index c57087a..ae48391 100644
--- a/src/components/ProgressBar.tsx
+++ b/src/components/ProgressBar.tsx
@@ -11,18 +11,22 @@ export default function ProgressBar({
   const isComplete = value === max
 
   return (
-    <div className="w-full h-12 bg-stone-200 rounded-md overflow-hidden relative">
+    <div className="w-full h-12 bg-stone-200 rounded-md overflow-hidden relative shadow-sm">
       <div className="absolute inset-0 flex items-center justify-center">
         <span className="text-black font-bold">{Math.round(percentage)}%</span>
       </div>
       <div
         className={`h-full ${
-          isComplete ? 'bg-green-500' : 'bg-blue-500'
+          isComplete
+            ? 'bg-gradient-to-b from-green-500 to-green-600'
+            : 'bg-gradient-to-b from-blue-500 to-blue-600'
         } transition-all duration-300 ease-in-out`}
         style={{ width: `${percentage}%` }}
       />
       <div className="absolute inset-0 flex items-center justify-center">
-        <span className="text-white font-bold">{Math.round(percentage)}%</span>
+        <span className="text-white font-bold text-shadow">
+          {Math.round(percentage)}%
+        </span>
       </div>
     </div>
   )
diff --git a/src/components/TypeBadge.tsx b/src/components/TypeBadge.tsx
index 662ffca..558e788 100644
--- a/src/components/TypeBadge.tsx
+++ b/src/components/TypeBadge.tsx
@@ -11,9 +11,9 @@ function getTypeColor(fileType: string): string {
 export default function TypeBadge({ type }: { type: string }): JSX.Element {
   return (
     <span
-      className={`px-2 py-1 text-xs font-semibold rounded-full ${getTypeColor(
+      className={`px-2 py-1 text-[10px] font-semibold rounded ${getTypeColor(
         type,
-      )} transition-all duration-300 mr-2`}
+      )} transition-all duration-300`}
     >
       {type}
     </span>
diff --git a/src/components/UploadFileList.tsx b/src/components/UploadFileList.tsx
index 4adb888..91412fb 100644
--- a/src/components/UploadFileList.tsx
+++ b/src/components/UploadFileList.tsx
@@ -18,14 +18,14 @@ export default function UploadFileList({
       key={f.fileName}
       className={`w-full border-b border-stone-300 last:border-0`}
     >
-      <div className="flex justify-between items-center py-2 px-2.5">
+      <div className="flex justify-between items-center py-2 pl-3 pr-2">
         <p className="truncate text-sm font-medium">{f.fileName}</p>
-        <div className="flex items-center">
+        <div className="flex items-end">
           <TypeBadge type={f.type} />
           {onRemove && (
             <button
               onClick={() => onRemove?.(i)}
-              className="text-stone-500 hover:text-stone-700 focus:outline-none"
+              className="text-stone-500 hover:text-stone-700 focus:outline-none pl-3 pr-1"
             >
               ✕
             </button>