From f2d4763ec09f652901569577b67d6fadc535554e Mon Sep 17 00:00:00 2001
From: root <root@Talat.Talat>
Date: Fri, 13 Feb 2026 19:55:54 +0500
Subject: [PATCH] Refine EC2 deploy and email templates UI

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .github/workflows/deploy-ec2.yml              | 33 +----------
 .../juno-engine/email-templates/page.tsx      | 56 +++++++++----------
 2 files changed, 31 insertions(+), 58 deletions(-)

diff --git a/.github/workflows/deploy-ec2.yml b/.github/workflows/deploy-ec2.yml
index 2b05401..7034a23 100644
--- a/.github/workflows/deploy-ec2.yml
+++ b/.github/workflows/deploy-ec2.yml
@@ -18,7 +18,7 @@ on:
       - 'README.md'
 
 jobs:
-  build-app:
+  build-and-deploy:
     runs-on: ubuntu-22.04
     steps:
       - name: Checkout code
@@ -40,37 +40,10 @@ jobs:
 
       - name: Save application image
         run: |
-          docker save -o junohub-app_latest.tar ${{ env.IMAGE_NAME }}:latest
+          mkdir -p docker
+          docker save -o docker/junohub-app_latest.tar ${{ env.IMAGE_NAME }}:latest
           echo "✅ Saved application image"
 
-      - name: Upload application image
-        uses: actions/upload-artifact@v4
-        with:
-          name: app-image
-          path: junohub-app_latest.tar
-
-  deploy:
-    runs-on: ubuntu-22.04
-    needs: [build-app]
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - name: Download application image
-        uses: actions/download-artifact@v4
-        with:
-          name: app-image
-          path: docker
-
-      - name: Verify image tar
-        run: |
-          if [ ! -f docker/junohub-app_latest.tar ]; then
-            echo "ERROR: Application image tar missing after download"
-            ls -la docker/ || true
-            exit 1
-          fi
-          echo "✅ Application image tar ready for deploy"
-
       - name: Set up environment file
         run: |
           # Base env for production container
diff --git a/src/app/dashboard/juno-engine/email-templates/page.tsx b/src/app/dashboard/juno-engine/email-templates/page.tsx
index 9e460d9..a047173 100644
--- a/src/app/dashboard/juno-engine/email-templates/page.tsx
+++ b/src/app/dashboard/juno-engine/email-templates/page.tsx
@@ -189,7 +189,7 @@ export default function EmailTemplatesPage() {
         : ""
 
     return (
-        <div className="h-full flex flex-col space-y-4 md:space-y-6">
+        <div className="h-full flex flex-col space-y-4 md:space-y-6 mt-4 md:mt-6">
             <div className="bg-white/5 backdrop-blur-xl rounded-xl md:rounded-2xl border border-white/10 overflow-hidden flex flex-col flex-1 min-h-0">
                 <div className="p-4 md:p-6 border-b border-white/10 flex flex-col sm:flex-row gap-3 md:gap-4 justify-between bg-white/5 flex-shrink-0">
                     <div className="relative flex-1 min-w-0">
@@ -288,21 +288,21 @@ export default function EmailTemplatesPage() {
             </div>
 
             {editing && (
-                <div className="fixed inset-0 z-40 flex items-center justify-end bg-black/40 backdrop-blur-sm">
-                    <div className="w-full max-w-2xl h-full md:h-auto md:max-h-[90vh] bg-slate-950/95 border-l border-white/10 md:rounded-l-2xl md:mr-4 md:mb-4 shadow-2xl flex flex-col">
-                        <div className="px-5 py-4 border-b border-white/10 flex items-center justify-between">
+                <div className="fixed inset-0 z-40 flex items-start justify-center bg-slate-900/40 dark:bg-black/50 px-4 pt-20 md:pt-24">
+                    <div className="w-full max-w-3xl max-h-[90vh] bg-white text-slate-900 dark:bg-slate-950 dark:text-slate-50 border border-slate-200 dark:border-white/10 rounded-2xl shadow-2xl flex flex-col">
+                        <div className="px-5 py-4 border-b border-slate-200 dark:border-white/10 flex items-center justify-between">
                             <div>
-                                <h2 className="text-lg font-bold text-white">
+                                <h2 className="text-lg font-bold">
                                     {editing.id ? "Edit template" : "New template"}
                                 </h2>
-                                <p className="text-xs text-slate-400 mt-0.5">
+                                <p className="text-xs text-slate-500 dark:text-slate-400 mt-0.5">
                                     Use {"{{variable}}"} placeholders to personalize replies.
                                 </p>
                             </div>
                             <button
                                 type="button"
                                 onClick={() => setEditing(null)}
-                                className="text-slate-400 hover:text-white text-sm"
+                                className="text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white text-sm"
                             >
                                 Close
                             </button>
@@ -312,7 +312,7 @@ export default function EmailTemplatesPage() {
                             <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                 <div className="space-y-3">
                                     <div>
-                                        <label className="block text-xs font-semibold text-slate-300 mb-1">
+                                        <label className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">
                                             Name
                                         </label>
                                         <input
@@ -325,13 +325,13 @@ export default function EmailTemplatesPage() {
                                                         : prev,
                                                 )
                                             }
-                                            className="w-full h-9 px-3 rounded-lg bg-slate-900/60 border border-white/10 text-sm text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/40"
+                                            className="w-full h-9 px-3 rounded-lg bg-slate-50 dark:bg-slate-900/60 border border-slate-200 dark:border-white/10 text-sm text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/40"
                                         />
                                     </div>
 
                                     <div className="grid grid-cols-2 gap-3">
                                         <div>
-                                            <label className="block text-xs font-semibold text-slate-300 mb-1">
+                                            <label className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">
                                                 Intent
                                             </label>
                                             <select
@@ -346,7 +346,7 @@ export default function EmailTemplatesPage() {
                                                             : prev,
                                                     )
                                                 }
-                                                className="w-full h-9 px-3 rounded-lg bg-slate-900/60 border border-white/10 text-xs text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/40"
+                                                className="w-full h-9 px-3 rounded-lg bg-slate-50 dark:bg-slate-900/60 border border-slate-200 dark:border-white/10 text-xs text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/40"
                                             >
                                                 {INTENT_OPTIONS.map((opt) => (
                                                     <option key={opt.value} value={opt.value}>
@@ -356,7 +356,7 @@ export default function EmailTemplatesPage() {
                                             </select>
                                         </div>
                                         <div>
-                                            <label className="block text-xs font-semibold text-slate-300 mb-1">
+                                            <label className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">
                                                 Mood
                                             </label>
                                             <select
@@ -371,7 +371,7 @@ export default function EmailTemplatesPage() {
                                                             : prev,
                                                     )
                                                 }
-                                                className="w-full h-9 px-3 rounded-lg bg-slate-900/60 border border-white/10 text-xs text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/40"
+                                                className="w-full h-9 px-3 rounded-lg bg-slate-50 dark:bg-slate-900/60 border border-slate-200 dark:border-white/10 text-xs text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/40"
                                             >
                                                 {MOOD_OPTIONS.map((opt) => (
                                                     <option key={opt.value} value={opt.value}>
@@ -383,7 +383,7 @@ export default function EmailTemplatesPage() {
                                     </div>
 
                                     <div>
-                                        <label className="block text-xs font-semibold text-slate-300 mb-1">
+                                        <label className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">
                                             Description (optional)
                                         </label>
                                         <input
@@ -399,37 +399,37 @@ export default function EmailTemplatesPage() {
                                                         : prev,
                                                 )
                                             }
-                                            className="w-full h-9 px-3 rounded-lg bg-slate-900/60 border border-white/10 text-sm text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/40"
+                                            className="w-full h-9 px-3 rounded-lg bg-slate-50 dark:bg-slate-900/60 border border-slate-200 dark:border-white/10 text-sm text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/40"
                                             placeholder="Short summary for your team"
                                         />
                                     </div>
                                 </div>
 
-                                <div className="space-y-2 text-xs text-slate-400">
-                                    <p className="font-semibold text-slate-200">
+                                <div className="space-y-2 text-xs text-slate-600 dark:text-slate-400">
+                                    <p className="font-semibold text-slate-800 dark:text-slate-200">
                                         Available variables
                                     </p>
                                     <ul className="space-y-1">
                                         <li>
-                                            <code className="px-1.5 py-0.5 bg-slate-900/80 rounded border border-white/10 text-[11px]">
+                                            <code className="px-1.5 py-0.5 bg-slate-100 dark:bg-slate-900/80 rounded border border-slate-200 dark:border-white/10 text-[11px]">
                                                 {"{{customer_name}}"}
                                             </code>{" "}
                                             – Customer’s name
                                         </li>
                                         <li>
-                                            <code className="px-1.5 py-0.5 bg-slate-900/80 rounded border border-white/10 text-[11px]">
+                                            <code className="px-1.5 py-0.5 bg-slate-100 dark:bg-slate-900/80 rounded border border-slate-200 dark:border-white/10 text-[11px]">
                                                 {"{{customer_email}}"}
                                             </code>{" "}
                                             – Customer’s email
                                         </li>
                                         <li>
-                                            <code className="px-1.5 py-0.5 bg-slate-900/80 rounded border border-white/10 text-[11px]">
+                                            <code className="px-1.5 py-0.5 bg-slate-100 dark:bg-slate-900/80 rounded border border-slate-200 dark:border-white/10 text-[11px]">
                                                 {"{{store_name}}"}
                                             </code>{" "}
                                             – Store name
                                         </li>
                                         <li>
-                                            <code className="px-1.5 py-0.5 bg-slate-900/80 rounded border border-white/10 text-[11px]">
+                                            <code className="px-1.5 py-0.5 bg-slate-100 dark:bg-slate-900/80 rounded border border-slate-200 dark:border-white/10 text-[11px]">
                                                 {"{{ticket_summary}}"}
                                             </code>{" "}
                                             – Short summary of the customer’s email
@@ -439,7 +439,7 @@ export default function EmailTemplatesPage() {
                             </div>
 
                             <div>
-                                <label className="block text-xs font-semibold text-slate-300 mb-1">
+                                <label className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">
                                     Template body
                                 </label>
                                 <textarea
@@ -450,29 +450,29 @@ export default function EmailTemplatesPage() {
                                         )
                                     }
                                     rows={8}
-                                    className="w-full rounded-lg bg-slate-900/60 border border-white/10 text-xs text-slate-100 font-mono p-3 focus:outline-none focus:ring-2 focus:ring-indigo-500/40"
+                                    className="w-full rounded-lg bg-slate-50 dark:bg-slate-900/60 border border-slate-200 dark:border-white/10 text-xs text-slate-900 dark:text-slate-100 font-mono p-3 focus:outline-none focus:ring-2 focus:ring-indigo-500/40"
                                 />
                             </div>
 
                             <div>
-                                <p className="text-xs font-semibold text-slate-300 mb-1">
+                                <p className="text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">
                                     Preview with example data
                                 </p>
-                                <div className="rounded-lg border border-white/10 bg-slate-900/80 p-4 text-xs text-slate-100 whitespace-pre-wrap">
+                                <div className="rounded-lg border border-slate-200 dark:border-white/10 bg-slate-50 dark:bg-slate-900/80 p-4 text-xs text-slate-900 dark:text-slate-100 whitespace-pre-wrap">
                                     {currentPreview || "Preview will appear here."}
                                 </div>
                             </div>
                         </div>
 
-                        <div className="px-5 py-3 border-t border-white/10 flex items-center justify-between">
-                            <p className="text-[11px] text-slate-500">
+                        <div className="px-5 py-3 border-t border-slate-200 dark:border-white/10 flex items-center justify-between">
+                            <p className="text-[11px] text-slate-500 dark:text-slate-500">
                                 Templates use simple {"{{variable}}"} placeholders only.
                             </p>
                             <div className="flex items-center gap-2">
                                 <button
                                     type="button"
                                     onClick={() => setEditing(null)}
-                                    className="h-8 px-3 rounded-lg border border-white/10 text-xs text-slate-300 hover:bg-white/10"
+                                    className="h-8 px-3 rounded-lg border border-slate-200 dark:border-white/10 text-xs text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-white/10"
                                 >
                                     Cancel
                                 </button>