From 873afa9fc3da76765646083551da1fe09ddc38ee Mon Sep 17 00:00:00 2001
From: Jen Breese-Kauth <jbreese@stanford.edu>
Date: Thu, 16 Oct 2025 16:59:02 -0700
Subject: [PATCH 1/2] ACHOO-136: updated individual app page

---
 app/applications/[uuid]/page.tsx | 30 ++++++++++++++++++------------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/app/applications/[uuid]/page.tsx b/app/applications/[uuid]/page.tsx
index 339d86d..bd17048 100644
--- a/app/applications/[uuid]/page.tsx
+++ b/app/applications/[uuid]/page.tsx
@@ -136,15 +136,20 @@ export default function ApplicationDetailPage({ params }: any) {
   };
 
   return (
-    <div className="min-h-screen p-8">
-      <h1 className="text-2xl font-bold mb-6">
+    <div className="min-h-screen p-20">
+      <header className="mb-8 text-center">
+        <div className="mt-2 text-black text-lg">
+          <h1 className="font-bold mb-6">
         Views and Visits Data for {appName ? appName : <span className="font-mono">{typedParams.uuid}</span>}
       </h1>
-      <section className="mb-8 max-w-xl mx-auto bg-white rounded-lg p-6 border-2">
+        </div>
+      </header>
+
+      <div className="mb-8 max-w-xl mx-auto bg-black-10 rounded-lg p-15 border-2 border-black-10 mb-25">
         <form>
           <label
             htmlFor="subscriptionUuid"
-            className="block font-semibold mb-2"
+            className="font-semibold mb-2 text-lg"
           >
             Subscription UUID
           </label>
@@ -185,26 +190,26 @@ export default function ApplicationDetailPage({ params }: any) {
             </div>
           </div>
 
-          <div className="flex items-center space-x-4">
+          <div className="flex flex-col items-center my-8 gap-8">
             <button
               type="button"
               onClick={fetchAppDetail}
               disabled={loading || !subscriptionUuid}
-              className="px-6 py-2 rounded-md font-semibold transition-colors duration-150"
+              className="p-6 rounded-md font-semibold text-lg transition-colors duration-150 text-white bg-cardinal-red hocus:bg-black disabled:opacity-50"
             >
               {loading ? 'Fetching Data...' : 'Fetch Analytics Data'}
             </button>
             {loading && (
-              <div className="flex items-center space-x-3">
+              <div className="flex flex-col gap-8 items-center">
                 <CountUpTimer isRunning={loading} />
-                <div className="font-medium">{loadingStep}</div>
+                <div className="text-xl font-semibold text-digital-blue">{loadingStep}</div>
               </div>
             )}
 
             {!loading && elapsedTime !== null && (
-              <div className="flex items-center space-x-3">
+              <div className="flex flex-col items-center gap-8">
                 <CountUpTimer isRunning={false} finalTime={elapsedTime} />
-                <div className="font-medium">
+                <div className="text-xl font-semibold text-digital-green">
                   Data loaded in {elapsedTime.toFixed(1)} seconds
                 </div>
               </div>
@@ -215,14 +220,15 @@ export default function ApplicationDetailPage({ params }: any) {
             (Note that it can take several minutes to fetch data from the Acquia API.)
           </p>
         </form>
-      </section>
+      </div>
       {error && (
         <div className="mb-4 text-red-600">{error}</div>
       )}
       {!appName && !loading ? (
         <div>No application found with UUID: <span className="font-mono">{typedParams.uuid}</span></div>
       ) : (
-        <div>
+        // Individual application details.
+        <div className="text-md my-40 max-w-4xl mx-auto bg-white rounded-lg shadow-md p-20 border border-gray-400">
           <div className="mb-4">
             <strong>Name:</strong> {appName}
           </div>

From 8df59c2ab700ed8ed09f157138dc32c60a5096a3 Mon Sep 17 00:00:00 2001
From: Jen Breese-Kauth <jbreese@stanford.edu>
Date: Fri, 17 Oct 2025 09:26:40 -0700
Subject: [PATCH 2/2] fixup to dates

---
 app/applications/[uuid]/page.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/applications/[uuid]/page.tsx b/app/applications/[uuid]/page.tsx
index bd17048..f010300 100644
--- a/app/applications/[uuid]/page.tsx
+++ b/app/applications/[uuid]/page.tsx
@@ -161,9 +161,9 @@ export default function ApplicationDetailPage({ params }: any) {
             className="w-full p-2 border rounded mb-4"
             required
           />
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 my-10">
             <div>
-              <label htmlFor="dateFrom" className="block text-sm font-medium mb-2">
+              <label htmlFor="dateFrom" className="font-semibold mb-2 text-lg">
                 From Date
               </label>
               <input
@@ -176,7 +176,7 @@ export default function ApplicationDetailPage({ params }: any) {
               />
             </div>
             <div>
-              <label htmlFor="dateTo" className="block text-sm font-medium mb-2">
+              <label htmlFor="dateTo" className="font-semibold mb-2 text-lg">
                 To Date
               </label>
               <input
@@ -228,7 +228,7 @@ export default function ApplicationDetailPage({ params }: any) {
         <div>No application found with UUID: <span className="font-mono">{typedParams.uuid}</span></div>
       ) : (
         // Individual application details.
-        <div className="text-md my-40 max-w-4xl mx-auto bg-white rounded-lg shadow-md p-20 border border-gray-400">
+        <div className="text-lg my-40 max-w-4xl mx-auto bg-white rounded-lg shadow-md p-20 border border-gray-400">
           <div className="mb-4">
             <strong>Name:</strong> {appName}
           </div>