From 990ef05d99ecf44a95c4a0f60c7ee1e2a9180e22 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Thu, 22 Jan 2026 21:21:21 -0800
Subject: [PATCH] Some prettiness

---
 .../paperless-ngx/snippets/svg_leaf.html      |  3 +
 .../paperless-ngx/snippets/svg_logo.html      | 18 ++++
 .../paperless_migration/migration_home.html   | 97 ++++++++++++++++---
 3 files changed, 107 insertions(+), 11 deletions(-)
 create mode 100644 src/paperless_migration/templates/paperless-ngx/snippets/svg_leaf.html
 create mode 100644 src/paperless_migration/templates/paperless-ngx/snippets/svg_logo.html

diff --git a/src/paperless_migration/templates/paperless-ngx/snippets/svg_leaf.html b/src/paperless_migration/templates/paperless-ngx/snippets/svg_leaf.html
new file mode 100644
index 000000000..7d456f6d1
--- /dev/null
+++ b/src/paperless_migration/templates/paperless-ngx/snippets/svg_leaf.html
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" {{ extra_attrs }}>
+  <path d="M145.6,38.1c-16.1,5.9-27.1,9.6-33.1,10.9c3.6-8.8,9.7-17.6,18.3-26.4c-22.1,5.3-39.8,17.3-53,36 c-6.7,9.6-11.7,19.7-14.9,30.2c-5.4-5-9.9-9.8-13.6-14.5c-1.4,10-0.7,19.8,2.1,29.4c2.3,7.7,6,15.1,11,22.1 c6.7,9.5,15.8,17.8,27.3,24.7c13.1,7.8,26.7,11.7,40.8,11.7c19.2,0,34.8-6.1,46.8-18.3c12.3-12.5,18.5-27.8,18.5-45.8 c0-7.6-1.3-15.6-3.9-23.9C187,70.4,171.9,53.7,145.6,38.1z M142.6,122.2c-3.8,5.7-9.6,9.9-17.5,12.5 c-4.3,1.5-8.9,2.2-13.8,2.2c-10.3,0-19.3-3.1-26.9-9.3c-7.9-6.4-12.7-14.4-14.4-23.9l-0.6-3.4l-3.4-0.8c-2-0.5-3.8-1.2-5.2-2 c-0.5-0.2-0.8-0.6-1-1c-0.2-0.5-0.2-1,0-1.5l2.3-6.6l-6.7-2.2c-1.6-0.5-2.8-1.3-3.5-2.3c-0.4-0.5-0.5-1.1-0.5-1.7 c0-0.6,0.2-1.2,0.6-1.7l3.7-5.1l-5.2-3.6c-1.2-0.9-2-1.7-2.5-2.4c-0.3-0.6-0.4-1.2-0.3-1.8c0.1-0.7,0.4-1.3,1-1.8l6.3-5.5 l-5.7-5.2c-0.9-0.8-1.4-1.5-1.6-2.2c-0.2-0.7-0.1-1.5,0.3-2.2c0.3-0.6,0.8-1.2,1.5-1.6l7.2-4.6l-5.3-6.7c-0.6-0.8-1-1.6-1.1-2.3 c-0.1-0.8,0-1.5,0.4-2.2c0.4-0.7,0.9-1.2,1.6-1.6c7.2-3.8,13.5-5.7,19-5.7c3.8,0,7.5,0.6,11.1,1.8c3.5,1.2,6.6,2.9,9.4,5.1 c6.3-14.9,16.5-24.5,30.7-28.6c-10.6,12.9-17.6,24.9-20.9,35.8c-3.9,13-3.2,23.7,2.1,32c2.7,4.2,7.7,8.4,14.8,12.5 c8.9,5.3,15,10.8,18.3,16.7C146.6,101.6,148.2,111,142.6,122.2z" fill="#17541f"/>
+</svg>
diff --git a/src/paperless_migration/templates/paperless-ngx/snippets/svg_logo.html b/src/paperless_migration/templates/paperless-ngx/snippets/svg_logo.html
new file mode 100644
index 000000000..0f3309091
--- /dev/null
+++ b/src/paperless_migration/templates/paperless-ngx/snippets/svg_logo.html
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2897.4 896.6" {{ extra_attrs }}>
+    <path class="leaf" d="M140,713.7c-3.4-16.4-10.3-49.1-11.2-49.1c-145.7-87.1-128.4-238-80.2-324.2C59,449,251.2,524,139.1,656.8 c-0.9,1.7,5.2,22.4,10.3,41.4c22.4-37.9,56-83.6,54.3-87.9C65.9,273.9,496.9,248.1,586.6,39.4c40.5,201.8-20.7,513.9-367.2,593.2 c-1.7,0.9-62.9,108.6-65.5,109.5c0-1.7-25.9-0.9-22.4-9.5C133.1,727.4,136.6,720.6,140,713.7L140,713.7z M135.7,632.6 c44-50.9-7.8-137.9-38.8-166.4C149.5,556.7,146,609.3,135.7,632.6L135.7,632.6z" transform="translate(0)" style="fill:#17541f"/>
+    <g class="text" style="fill:#000">
+        <path d="M1022.3,428.7c-17.8-19.9-42.7-29.8-74.7-29.8c-22.3,0-42.4,5.7-60.5,17.3c-18.1,11.6-32.3,27.5-42.5,47.8 s-15.3,42.9-15.3,67.8c0,24.9,5.1,47.5,15.3,67.8c10.3,20.3,24.4,36.2,42.5,47.8c18.1,11.5,38.3,17.3,60.5,17.3 c32,0,56.9-9.9,74.7-29.8v20.4v0.2h84.5V408.3h-84.5V428.7z M1010.5,575c-10.2,11.7-23.6,17.6-40.2,17.6s-29.9-5.9-40-17.6 s-15.1-26.1-15.1-43.3c0-17.1,5-31.6,15.1-43.3s23.4-17.6,40-17.6c16.6,0,30,5.9,40.2,17.6s15.3,26.1,15.3,43.3 S1020.7,563.3,1010.5,575z" transform="translate(0)"/>
+        <path d="M1381,416.1c-18.1-11.5-38.3-17.3-60.5-17.4c-32,0-56.9,9.9-74.7,29.8v-20.4h-84.5v390.7h84.5v-164 c17.8,19.9,42.7,29.8,74.7,29.8c22.3,0,42.4-5.7,60.5-17.3s32.3-27.5,42.5-47.8c10.2-20.3,15.3-42.9,15.3-67.8s-5.1-47.5-15.3-67.8 C1413.2,443.6,1399.1,427.7,1381,416.1z M1337.9,575c-10.1,11.7-23.4,17.6-40,17.6s-29.9-5.9-40-17.6s-15.1-26.1-15.1-43.3 c0-17.1,5-31.6,15.1-43.3s23.4-17.6,40-17.6s29.9,5.9,40,17.6s15.1,26.1,15.1,43.3S1347.9,563.3,1337.9,575z" transform="translate(0)"/>
+        <path d="M1672.2,416.8c-20.5-12-43-18-67.6-18c-24.9,0-47.6,5.9-68,17.6c-20.4,11.7-36.5,27.7-48.2,48s-17.6,42.7-17.6,67.3 c0.3,25.2,6.2,47.8,17.8,68c11.5,20.2,28,36,49.3,47.6c21.3,11.5,45.9,17.3,73.8,17.3c48.6,0,86.8-14.7,114.7-44l-52.5-48.9 c-8.6,8.3-17.6,14.6-26.7,19c-9.3,4.3-21.1,6.4-35.3,6.4c-11.6,0-22.5-3.6-32.7-10.9c-10.3-7.3-17.1-16.5-20.7-27.8h180l0.4-11.6 c0-29.6-6-55.7-18-78.2S1692.6,428.8,1672.2,416.8z M1558.3,503.2c2.1-12.1,7.5-21.8,16.2-29.1s18.7-10.9,30-10.9 s21.2,3.6,29.8,10.9c8.6,7.2,13.9,16.9,16,29.1H1558.3z" transform="translate(0)"/>
+        <path d="M1895.3,411.7c-11,5.6-20.3,13.7-28,24.4h-0.1v-28h-84.5v247.3h84.5V536.3c0-22.6,4.7-38.1,14.2-46.5 c9.5-8.5,22.7-12.7,39.6-12.7c6.2,0,13.5,1,21.8,3.1l10.7-72c-5.9-3.3-14.5-4.9-25.8-4.9C1917.1,403.3,1906.3,406.1,1895.3,411.7z"  transform="translate(0)"/>
+        <rect x="1985" y="277.4" width="84.5" height="377.8" transform="translate(0)"/>
+        <path d="M2313.2,416.8c-20.5-12-43-18-67.6-18c-24.9,0-47.6,5.9-68,17.6s-36.5,27.7-48.2,48c-11.7,20.3-17.6,42.7-17.6,67.3 c0.3,25.2,6.2,47.8,17.8,68c11.5,20.2,28,36,49.3,47.6c21.3,11.5,45.9,17.3,73.8,17.3c48.6,0,86.8-14.7,114.7-44l-52.5-48.9 c-8.6,8.3-17.6,14.6-26.7,19c-9.3,4.3-21.1,6.4-35.3,6.4c-11.6,0-22.5-3.6-32.7-10.9c-10.3-7.3-17.1-16.5-20.7-27.8h180l0.4-11.6 c0-29.6-6-55.7-18-78.2S2333.6,428.8,2313.2,416.8z M2199.3,503.2c2.1-12.1,7.5-21.8,16.2-29.1s18.7-10.9,30-10.9 s21.2,3.6,29.8,10.9c8.6,7.2,13.9,16.9,16,29.1H2199.3z" transform="translate(0)"/>
+        <path d="M2583.6,507.7c-13.8-4.4-30.6-8.1-50.5-11.1c-15.1-2.7-26.1-5.2-32.9-7.6c-6.8-2.4-10.2-6.1-10.2-11.1s2.3-8.7,6.7-10.9 c4.4-2.2,11.5-3.3,21.3-3.3c11.6,0,24.3,2.4,38.1,7.2c13.9,4.8,26.2,11,36.9,18.4l32.4-58.2c-11.3-7.4-26.2-14.7-44.9-21.8 c-18.7-7.1-39.6-10.7-62.7-10.7c-33.7,0-60.2,7.6-79.3,22.7c-19.1,15.1-28.7,36.1-28.7,63.1c0,19,4.8,33.9,14.4,44.7 c9.6,10.8,21,18.5,34,22.9c13.1,4.5,28.9,8.3,47.6,11.6c14.6,2.7,25.1,5.3,31.6,7.8s9.8,6.5,9.8,11.8c0,10.4-9.7,15.6-29.3,15.6 c-13.7,0-28.5-2.3-44.7-6.9c-16.1-4.6-29.2-11.3-39.3-20.2l-33.3,60c9.2,7.4,24.6,14.7,46.2,22c21.7,7.3,45.2,10.9,70.7,10.9 c34.7,0,62.9-7.4,84.5-22.4c21.7-15,32.5-37.3,32.5-66.9c0-19.3-5-34.2-15.1-44.9S2597.4,512.1,2583.6,507.7z" transform="translate(0)"/>
+        <path d="M2883.4,575.3c0-19.3-5-34.2-15.1-44.9s-22-18.3-35.8-22.7c-13.8-4.4-30.6-8.1-50.5-11.1c-15.1-2.7-26.1-5.2-32.9-7.6 c-6.8-2.4-10.2-6.1-10.2-11.1s2.3-8.7,6.7-10.9c4.4-2.2,11.5-3.3,21.3-3.3c11.6,0,24.3,2.4,38.1,7.2c13.9,4.8,26.2,11,36.9,18.4 l32.4-58.2c-11.3-7.4-26.2-14.7-44.9-21.8c-18.7-7.1-39.6-10.7-62.7-10.7c-33.7,0-60.2,7.6-79.3,22.7 c-19.1,15.1-28.7,36.1-28.7,63.1c0,19,4.8,33.9,14.4,44.7c9.6,10.8,21,18.5,34,22.9c13.1,4.5,28.9,8.3,47.6,11.6 c14.6,2.7,25.1,5.3,31.6,7.8s9.8,6.5,9.8,11.8c0,10.4-9.7,15.6-29.3,15.6c-13.7,0-28.5-2.3-44.7-6.9c-16.1-4.6-29.2-11.3-39.3-20.2 l-33.3,60c9.2,7.4,24.6,14.7,46.2,22c21.7,7.3,45.2,10.9,70.7,10.9c34.7,0,62.9-7.4,84.5-22.4 C2872.6,627.2,2883.4,604.9,2883.4,575.3z" transform="translate(0)"/>
+        <rect x="2460.7" y="738.7" width="59.6" height="17.2" transform="translate(0)"/>
+        <path d="M2596.5,706.4c-5.7,0-11,1-15.8,3s-9,5-12.5,8.9v-9.4h-19.4v93.6h19.4v-52c0-8.6,2.1-15.3,6.3-20c4.2-4.7,9.5-7.1,15.9-7.1 c7.8,0,13.4,2.3,16.8,6.7c3.4,4.5,5.1,11.3,5.1,20.5v52h19.4v-56.8c0-12.8-3.2-22.6-9.5-29.3 C2615.8,709.8,2607.3,706.4,2596.5,706.4z" transform="translate(0)"/>
+        <path d="M2733.8,717.7c-3.6-3.4-7.9-6.1-13.1-8.2s-10.6-3.1-16.2-3.1c-8.7,0-16.5,2.1-23.5,6.3s-12.5,10-16.5,17.3 c-4,7.3-6,15.4-6,24.4c0,8.9,2,17.1,6,24.3c4,7.3,9.5,13,16.5,17.2s14.9,6.3,23.5,6.3c5.6,0,11-1,16.2-3.1 c5.1-2.1,9.5-4.8,13.1-8.2v24.4c0,8.5-2.5,14.8-7.6,18.7c-5,3.9-11,5.9-18,5.9c-6.7,0-12.4-1.6-17.3-4.7c-4.8-3.1-7.6-7.7-8.3-13.8 h-19.4c0.6,7.7,2.9,14.2,7.1,19.5s9.6,9.3,16.2,12c6.6,2.7,13.8,4,21.7,4c12.8,0,23.5-3.4,32-10.1c8.6-6.7,12.8-17.1,12.8-31.1 V708.9h-19.2V717.7z M2732.2,770.1c-2.5,4.7-6,8.3-10.4,11.2c-4.4,2.7-9.4,4-14.9,4c-5.7,0-10.8-1.4-15.2-4.3s-7.8-6.7-10.2-11.4 c-2.3-4.8-3.5-9.8-3.5-15.2c0-5.5,1.1-10.6,3.5-15.3s5.8-8.5,10.2-11.3s9.5-4.2,15.2-4.2c5.5,0,10.5,1.4,14.9,4s7.9,6.3,10.4,11 s3.8,10,3.8,15.8S2734.7,765.4,2732.2,770.1z" transform="translate(0)"/>
+        <polygon points="2867.9,708.9 2846.5,708.9 2820.9,741.9 2795.5,708.9 2773.1,708.9 2809.1,755 2771.5,802.5 2792.9,802.5  2820.1,767.9 2847.2,802.6 2869.6,802.6 2832,754.4 	" transform="translate(0)"/>
+        <path d="M757.6,293.7c-20-10.8-42.6-16.2-67.8-16.2H600c-8.5,39.2-21.1,76.4-37.6,111.3c-9.9,20.8-21.1,40.6-33.6,59.4v207.2h88.9 V521.5h72c25.2,0,47.8-5.4,67.8-16.2s35.7-25.6,47.1-44.2c11.4-18.7,17.1-39.1,17.1-61.3c0.1-22.7-5.6-43.3-17-61.9 C793.3,319.2,777.6,304.5,757.6,293.7z M716.6,434.3c-9.3,8.9-21.6,13.3-36.7,13.3l-62.2,0.4v-92.5l62.2-0.4 c15.1,0,27.3,4.4,36.7,13.3c9.4,8.9,14,19.9,14,32.9C730.6,414.5,726,425.4,716.6,434.3z" transform="translate(0)"/>
+    </g>
+</svg>
diff --git a/src/paperless_migration/templates/paperless_migration/migration_home.html b/src/paperless_migration/templates/paperless_migration/migration_home.html
index 97d197a5d..2b4758b65 100644
--- a/src/paperless_migration/templates/paperless_migration/migration_home.html
+++ b/src/paperless_migration/templates/paperless_migration/migration_home.html
@@ -9,14 +9,19 @@
     <link rel="stylesheet" href="{% static 'base.css' %}" />
     <style>
       body {
-        background: radial-gradient(circle at 20% 20%, #eef5ef, #f7fbf7);
+        background:
+          radial-gradient(circle at 20% 20%, #eef5ef, #f7fbf7),
+          linear-gradient(120deg, rgba(23, 84, 31, 0.05) 0%, rgba(23, 84, 31, 0) 30%),
+          linear-gradient(300deg, rgba(15, 54, 20, 0.06) 0%, rgba(15, 54, 20, 0) 40%);
         min-height: 100vh;
       }
 
-      .hero-card {
-        background: #fff;
+      .hero-card,
+      .card-step {
+        background: rgba(255, 255, 255, 0.9);
+        backdrop-filter: blur(6px);
         border: 1px solid rgba(23, 84, 31, 0.08);
-        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
+        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06);
         border-radius: 18px;
       }
 
@@ -28,9 +33,13 @@
       }
 
       .card-step {
-        border: 1px solid rgba(23, 84, 31, 0.08);
-        border-radius: 14px;
-        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
+        border-radius: 16px;
+        transition: transform 0.15s ease, box-shadow 0.15s ease;
+      }
+
+      .card-step:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 20px 36px rgba(0, 0, 0, 0.08);
       }
 
       .path-pill {
@@ -40,26 +49,92 @@
         padding: 0.4rem 0.75rem;
         font-size: 0.9rem;
       }
+
+      .step-rail {
+        position: relative;
+        height: 4px;
+        background: rgba(23, 84, 31, 0.12);
+        border-radius: 999px;
+      }
+
+      .step-rail .fill {
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        width: calc({{ export_exists|yesno:'33,0' }}% + {{ transformed_exists|yesno:'33,0' }}%);
+        max-width: 100%;
+        background: linear-gradient(90deg, #17541f, #2c7a3c);
+        border-radius: 999px;
+        transition: width 0.3s ease;
+      }
+
+      .step-chip {
+        width: 38px;
+        height: 38px;
+        border-radius: 50%;
+        display: grid;
+        place-items: center;
+        font-weight: 700;
+        background: #fff;
+        border: 2px solid rgba(23, 84, 31, 0.25);
+        color: #17541f;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+      }
+
+      .step-chip.done {
+        background: #17541f;
+        color: #fff;
+        border-color: #17541f;
+      }
     </style>
   </head>
   <body class="pb-5">
     <div class="container py-5">
       <div class="row justify-content-center mb-4">
-        <div class="col-lg-10">
+        <div class="col-lg-9">
           <div class="hero-card p-4 p-md-5">
             <div class="d-flex flex-wrap align-items-center justify-content-between gap-3">
               <div class="d-flex align-items-center gap-3">
-                <img src="{% static 'paperless/img/logo-light.png' %}" alt="Paperless-ngx" width="160" class="logo" />
-                <div>
+                {% include "paperless-ngx/snippets/svg_logo.html" with extra_attrs="width='280' class='logo'" %}
+                <div class="ps-2">
                   <p class="text-uppercase fw-semibold mb-1 text-secondary" style="letter-spacing: 0.12rem;">Migration Mode</p>
                   <h1 class="h3 mb-2 text-primary">Paperless-ngx v2 → v3</h1>
-                  <p class="text-muted mb-0">Run the export, transform, and import flow once your files are ready.</p>
+                  <p class="text-muted mb-0">Migrate your data from Paperless-ngx version 2 to version 3.</p>
                 </div>
               </div>
               <div class="text-end">
                 <span class="badge bg-success-subtle text-success border border-success-subtle px-3 py-2">Online</span>
               </div>
             </div>
+            <div class="mt-4">
+              <div class="d-flex justify-content-between align-items-center mb-2">
+                <div class="d-flex align-items-center gap-2">
+                  <span class="step-chip {% if export_exists %}done{% endif %}">1</span>
+                  <div>
+                    <div class="fw-semibold mb-0">Export</div>
+                    <small class="text-muted">v2 data</small>
+                  </div>
+                </div>
+                <div class="d-flex align-items-center gap-2">
+                  <span class="step-chip {% if transformed_exists %}done{% endif %}">2</span>
+                  <div>
+                    <div class="fw-semibold mb-0">Transform</div>
+                    <small class="text-muted">to v3 schema</small>
+                  </div>
+                </div>
+                <div class="d-flex align-items-center gap-2">
+                  <span class="step-chip {% if transformed_exists %}done{% endif %}">3</span>
+                  <div>
+                    <div class="fw-semibold mb-0">Import</div>
+                    <small class="text-muted">into v3</small>
+                  </div>
+                </div>
+              </div>
+              <div class="step-rail">
+                <div class="fill"></div>
+              </div>
+            </div>
             {% if messages %}
               <div class="mt-4">
                 {% for message in messages %}