From 15b8267ac20950f7a9ebb48d28a4f2bba6f0ed0a Mon Sep 17 00:00:00 2001
From: usmannasir <usman@cyberpersons.com>
Date: Wed, 2 Jul 2025 15:04:50 +0500
Subject: [PATCH] design/font improvements to backup pages

---
 .../backup/OneClickBackupSchedule.html        | 44 +++++++++++--------
 backup/templates/backup/oneClickBackups.html  | 30 ++++++++-----
 backup/templates/backup/restoreOCBackups.html | 19 +++++---
 3 files changed, 55 insertions(+), 38 deletions(-)

diff --git a/backup/templates/backup/OneClickBackupSchedule.html b/backup/templates/backup/OneClickBackupSchedule.html
index 4997146ca..2683402a7 100644
--- a/backup/templates/backup/OneClickBackupSchedule.html
+++ b/backup/templates/backup/OneClickBackupSchedule.html
@@ -8,6 +8,11 @@
     <!-- Current language: {{ LANGUAGE_CODE }} -->
 
     <style>
+        body {
+            font-size: 16px;
+            line-height: 1.6;
+        }
+        
         .modern-container {
             max-width: 1400px;
             margin: 0 auto;
@@ -54,7 +59,7 @@
             background: #5b5fcf;
             color: white;
             border: none;
-            padding: 0.75rem 2rem;
+            padding: 0.875rem 2.25rem;
             border-radius: 10px;
             font-weight: 500;
             cursor: pointer;
@@ -63,7 +68,7 @@
             align-items: center;
             gap: 0.5rem;
             text-decoration: none;
-            font-size: 0.875rem;
+            font-size: 1.125rem;
         }
         
         .btn-primary:hover {
@@ -77,7 +82,7 @@
             background: #fff;
             color: #5b5fcf;
             border: 1px solid #e8e9ff;
-            padding: 0.75rem 2rem;
+            padding: 0.875rem 2.25rem;
             border-radius: 10px;
             font-weight: 500;
             cursor: pointer;
@@ -86,7 +91,7 @@
             align-items: center;
             gap: 0.5rem;
             text-decoration: none;
-            font-size: 0.875rem;
+            font-size: 1.125rem;
         }
         
         .btn-secondary:hover {
@@ -100,12 +105,12 @@
             background: #ef4444;
             color: white;
             border: none;
-            padding: 0.5rem 1rem;
+            padding: 0.625rem 1.25rem;
             border-radius: 8px;
             font-weight: 500;
             cursor: pointer;
             transition: all 0.3s ease;
-            font-size: 0.825rem;
+            font-size: 1rem;
         }
         
         .btn-danger:hover {
@@ -118,12 +123,12 @@
             background: #6b7280;
             color: white;
             border: none;
-            padding: 0.5rem 1rem;
+            padding: 0.625rem 1.25rem;
             border-radius: 8px;
             font-weight: 500;
             cursor: pointer;
             transition: all 0.3s ease;
-            font-size: 0.825rem;
+            font-size: 1rem;
         }
         
         .btn-gray:hover {
@@ -177,15 +182,15 @@
             flex: 0 0 200px;
             font-weight: 500;
             color: #1e293b;
-            font-size: 0.875rem;
+            font-size: 1.0625rem;
         }
         
         .form-control {
             flex: 1;
-            padding: 0.875rem 1rem;
+            padding: 1rem 1.125rem;
             border: 1px solid #e8e9ff;
             border-radius: 10px;
-            font-size: 0.875rem;
+            font-size: 1.0625rem;
             transition: all 0.3s ease;
             background: #fff;
         }
@@ -209,21 +214,22 @@
         }
         
         .data-table th {
-            padding: 1rem;
+            padding: 1.125rem;
             text-align: left;
             font-weight: 600;
             color: #1e293b;
-            font-size: 0.875rem;
+            font-size: 1.0625rem;
             text-transform: uppercase;
             letter-spacing: 0.05em;
             border-bottom: 1px solid #e8e9ff;
         }
         
         .data-table td {
-            padding: 1rem;
-            color: #64748b;
-            font-size: 0.875rem;
+            padding: 1.125rem;
+            color: #475569;
+            font-size: 1.125rem;
             border-bottom: 1px solid #f3f4f6;
+            font-weight: 400;
         }
         
         .data-table tbody tr:hover {
@@ -242,7 +248,7 @@
         }
         
         .section-title {
-            font-size: 1rem;
+            font-size: 1.125rem;
             font-weight: 600;
             color: #1e293b;
             margin-bottom: 1rem;
@@ -272,14 +278,14 @@
         }
         
         .info-label {
-            font-size: 0.75rem;
+            font-size: 0.875rem;
             color: #64748b;
             text-transform: uppercase;
             letter-spacing: 0.05em;
         }
         
         .info-value {
-            font-size: 1rem;
+            font-size: 1.125rem;
             font-weight: 600;
             color: #1e293b;
         }
diff --git a/backup/templates/backup/oneClickBackups.html b/backup/templates/backup/oneClickBackups.html
index fe5ad6f81..2d10a4d51 100644
--- a/backup/templates/backup/oneClickBackups.html
+++ b/backup/templates/backup/oneClickBackups.html
@@ -8,6 +8,11 @@
     <!-- Current language: {{ LANGUAGE_CODE }} -->
 
     <style>
+        body {
+            font-size: 16px;
+            line-height: 1.6;
+        }
+        
         .modern-container {
             max-width: 1400px;
             margin: 0 auto;
@@ -54,7 +59,7 @@
             background: #5b5fcf;
             color: white;
             border: none;
-            padding: 0.75rem 2rem;
+            padding: 0.875rem 2.25rem;
             border-radius: 10px;
             font-weight: 500;
             cursor: pointer;
@@ -63,7 +68,7 @@
             align-items: center;
             gap: 0.5rem;
             text-decoration: none;
-            font-size: 1rem;
+            font-size: 1.125rem;
         }
         
         .btn-primary:hover {
@@ -77,7 +82,7 @@
             background: #fff;
             color: #5b5fcf;
             border: 1px solid #e8e9ff;
-            padding: 0.75rem 2rem;
+            padding: 0.875rem 2.25rem;
             border-radius: 10px;
             font-weight: 500;
             cursor: pointer;
@@ -86,7 +91,7 @@
             align-items: center;
             gap: 0.5rem;
             text-decoration: none;
-            font-size: 1rem;
+            font-size: 1.125rem;
         }
         
         .btn-secondary:hover {
@@ -302,10 +307,11 @@
         }
         
         .data-table td {
-            padding: 1rem;
-            color: #64748b;
-            font-size: 1rem;
+            padding: 1.125rem;
+            color: #475569;
+            font-size: 1.125rem;
             border-bottom: 1px solid #f3f4f6;
+            font-weight: 400;
         }
         
         .data-table tbody tr:hover {
@@ -320,9 +326,9 @@
             display: inline-flex;
             align-items: center;
             gap: 0.25rem;
-            padding: 0.375rem 0.875rem;
+            padding: 0.5rem 1rem;
             border-radius: 50px;
-            font-size: 0.875rem;
+            font-size: 1rem;
             font-weight: 600;
             text-transform: uppercase;
             letter-spacing: 0.05em;
@@ -613,7 +619,7 @@
                                 <td>
                                     <span class="status-badge" 
                                           ng-class="{'active': sub.status === 'active', 'inactive': sub.status !== 'active'}">
-                                        <i class="fas fa-circle" style="font-size: 0.5rem;"></i>
+                                        <i class="fas fa-circle" style="font-size: 0.625rem;"></i>
                                         {$ sub.status $}
                                     </span>
                                 </td>
@@ -621,7 +627,7 @@
                                 <td>{$ sub.interval $}</td>
                                 <td>{$ sub.current_period_end | date:'medium' $}</td>
                                 <td>
-                                    <button class="btn-primary" style="padding: 0.5rem 1rem; font-size: 0.825rem;"
+                                    <button class="btn-primary" style="padding: 0.625rem 1.25rem; font-size: 1rem;"
                                             ng-click="ReconfigureSubscription(sub)">
                                         <i class="fas fa-cog"></i>
                                         {% trans "Configure Server" %}
@@ -682,7 +688,7 @@
                                     <td><strong>{{ plan.planName }}</strong></td>
                                     <td>{{ plan.subscription }}</td>
                                     <td>
-                                        <span style="background: #e0e7ff; color: #5b5fcf; padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.825rem; font-weight: 500;">
+                                        <span style="background: #e0e7ff; color: #5b5fcf; padding: 0.375rem 1rem; border-radius: 20px; font-size: 1rem; font-weight: 500;">
                                             {% if plan.months == '1' %}
                                                 ${{ plan.price }}/month
                                             {% else %}
diff --git a/backup/templates/backup/restoreOCBackups.html b/backup/templates/backup/restoreOCBackups.html
index 7fefda429..eab7fa8a1 100644
--- a/backup/templates/backup/restoreOCBackups.html
+++ b/backup/templates/backup/restoreOCBackups.html
@@ -8,6 +8,11 @@
     <!-- Current language: {{ LANGUAGE_CODE }} -->
 
     <style>
+        body {
+            font-size: 16px;
+            line-height: 1.6;
+        }
+        
         .modern-container {
             max-width: 1400px;
             margin: 0 auto;
@@ -60,7 +65,7 @@
             background: #5b5fcf;
             color: white;
             border: none;
-            padding: 0.75rem 2rem;
+            padding: 0.875rem 2.25rem;
             border-radius: 10px;
             font-weight: 500;
             cursor: pointer;
@@ -69,7 +74,7 @@
             align-items: center;
             gap: 0.5rem;
             text-decoration: none;
-            font-size: 0.875rem;
+            font-size: 1.125rem;
         }
         
         .btn-primary:hover {
@@ -90,7 +95,7 @@
             background: #fff;
             color: #5b5fcf;
             border: 1px solid #e8e9ff;
-            padding: 0.75rem 2rem;
+            padding: 0.875rem 2.25rem;
             border-radius: 10px;
             font-weight: 500;
             cursor: pointer;
@@ -99,7 +104,7 @@
             align-items: center;
             gap: 0.5rem;
             text-decoration: none;
-            font-size: 0.875rem;
+            font-size: 1.125rem;
         }
         
         .btn-secondary:hover {
@@ -153,7 +158,7 @@
             flex: 0 0 150px;
             font-weight: 500;
             color: #1e293b;
-            font-size: 0.875rem;
+            font-size: 1.125rem;
         }
         
         .form-control {
@@ -161,7 +166,7 @@
             padding: 0.875rem 1rem;
             border: 1px solid #e8e9ff;
             border-radius: 10px;
-            font-size: 0.875rem;
+            font-size: 1.125rem;
             transition: all 0.3s ease;
             background: #fff;
         }
@@ -209,7 +214,7 @@
             justify-content: center;
             color: white;
             font-weight: 500;
-            font-size: 0.875rem;
+            font-size: 1.125rem;
         }
         
         .alert {