From 70d724e77942362f9387c0ca6fc06f2ee22071d9 Mon Sep 17 00:00:00 2001
From: Andrew Lee <andrew@alee14.me>
Date: Mon, 2 Jun 2025 16:32:29 -0400
Subject: Make the page more pretty

---
 src/app/track/page.tsx | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

(limited to 'src')

diff --git a/src/app/track/page.tsx b/src/app/track/page.tsx
index b4978f3..77fa81a 100644
--- a/src/app/track/page.tsx
+++ b/src/app/track/page.tsx
@@ -41,31 +41,31 @@ export default function Track() {
                 </form>
                 {params ? (
                     data ? (
-                        <div className="pt-5">
+                        <div className="pt-2">
                             {!data.abandon && !data.delivered && (
-                              <div className="p-3 bg-gray-700 rounded-sm">Package is in transit</div>
+                              <div className="p-3 bg-indigo-800 rounded-sm my-2">Package is in transit</div>
                             )}
                             {data.signature && (
-                              <div className="p-3 bg-yellow-800 rounded-sm">Signature is required when the package arrive</div>
+                              <div className="p-3 bg-yellow-800 rounded-sm my-2">Signature is required when the package arrive</div>
                             )}
                             {data.abandon && (
-                              <div className="p-3 bg-red-800 rounded-sm">Package has been abandoned</div>
+                              <div className="p-3 bg-red-800 rounded-sm my-2">Package has been abandoned</div>
                             )}
                             {data.delivered && (
-                                <div className="p-3 bg-green-700 rounded-sm">Package has delivered</div>
+                                <div className="p-3 bg-green-800 rounded-sm my-2">Package has delivered</div>
                             )}
-                            <div className="p-3 bg-sky-800 rounded-sm">
+                            <div className="p-3 bg-gray-700 rounded-sm">
                                 <h1 className="text-xl">Origin: {data.sender}</h1>
                                 <h1 className="text-xl">Delivering to: {data.receiver}</h1>
                             </div>
-                            <h1 className="text-lg">Delivery progress</h1>
-                            <div className="flex flex-col gap-1">
+                            <h1 className="text-lg my-2">Delivery progress</h1>
+                            <div className="flex flex-col gap-2">
                             {[...data.history]
                                     .sort((a, b) => new Date(b.time).getTime() - new Date(a.time).getTime())
                                     .map((history, idx) => (
-                                        <div key={idx}>
+                                        <div key={idx} className="p-3 bg-gray-700 rounded-sm">
                                             <div>{history.info}</div>
-                                            <div>{history.location}</div>
+                                            <div className="text-sm">{history.location}</div>
                                             <div>{new Date(history.time).toLocaleString()}</div>
                                         </div>
                                     ))}
-- 
cgit v1.2.3