more progress

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}{' '}
+        You are about to start uploading{' '}
-        {uploadedFiles.length === 1 ? 'file' : 'files'}.
+        {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}{' '}
+        You are uploading {pluralize(uploadedFiles.length, 'file', 'files')}.
-        {uploadedFiles.length === 1 ? 'file' : 'files'}.
       </TitleText>
       <UploadFileList files={fileListData} />
       <WebRTCProvider>

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}
       />

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>
   )

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>

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>