From e07e3f880ef3d433831f649cec32e47a9d5ec71f Mon Sep 17 00:00:00 2001
From: Michal Vrba <michal.vrba@gmai.com>
Date: Fri, 19 Dec 2025 15:53:08 +0100
Subject: [PATCH] UI updated

---
 QRPay/Pages/Home.razor     |  4 +--
 QRPay/Pages/Home.razor.css | 72 ++++++++++++++++++++------------------
 2 files changed, 39 insertions(+), 37 deletions(-)

diff --git a/QRPay/Pages/Home.razor b/QRPay/Pages/Home.razor
index 46d20a1..55a60a2 100644
--- a/QRPay/Pages/Home.razor
+++ b/QRPay/Pages/Home.razor
@@ -47,7 +47,7 @@
                         <ValidationMessage For="@(() => paymentModel.Remark)" class="validation-message" />
                     </div>
 
-                    <button type="submit" class="btn-generate" disabled="@_isGenerating">
+                    <button type="submit" class="btn-base btn-generate" disabled="@_isGenerating">
                         @if (_isGenerating)
                         {
                             <span class="spinner"></span>
@@ -93,7 +93,7 @@
                 }
             </div>
             
-            <button class="btn-back" @onclick="@GoBack">
+            <button class="btn-base btn-back" @onclick="@GoBack">
                 <span>← Create New Payment</span>
             </button>
         </div>
diff --git a/QRPay/Pages/Home.razor.css b/QRPay/Pages/Home.razor.css
index e3b263f..9854742 100644
--- a/QRPay/Pages/Home.razor.css
+++ b/QRPay/Pages/Home.razor.css
@@ -107,10 +107,8 @@
     animation: fadeIn 0.3s ease;
 }
 
-/* Generate Button */
-.btn-generate {
-    background: linear-gradient(135deg, #2d5a27, #4a7c59);
-    color: white;
+/* Unified Button Base Styles */
+.btn-base {
     border: none;
     padding: 18px 32px;
     border-radius: 12px;
@@ -118,29 +116,62 @@
     font-weight: 600;
     cursor: pointer;
     transition: all 0.3s ease;
-    margin-top: 16px;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
-    box-shadow: 0 4px 12px rgba(45, 90, 39, 0.3);
     width: 100%;
     min-height: 56px;
+    text-decoration: none;
+    outline: none;
+}
+
+/* Primary Green Button (Generate) */
+.btn-generate {
+    background: linear-gradient(135deg, #2d5a27, #4a7c59);
+    color: white;
+    box-shadow: 0 4px 12px rgba(45, 90, 39, 0.3);
+    margin-top: 16px;
 }
 
 .btn-generate:hover:not(:disabled) {
+    background: linear-gradient(135deg, #1f3d1a, #3d6b4a);
     transform: translateY(-2px);
     box-shadow: 0 8px 24px rgba(45, 90, 39, 0.4);
 }
 
 .btn-generate:active:not(:disabled) {
     transform: translateY(0);
+    box-shadow: 0 4px 12px rgba(45, 90, 39, 0.3);
 }
 
 .btn-generate:disabled {
     opacity: 0.7;
     cursor: not-allowed;
     transform: none;
+    background: linear-gradient(135deg, #2d5a27, #4a7c59);
+}
+
+/* Secondary Green Button (Back) */
+.btn-back {
+    background: rgba(74, 124, 89, 0.1);
+    color: #2d5a27;
+    border: 2px solid #4a7c59;
+    box-shadow: 0 4px 12px rgba(45, 90, 39, 0.1);
+}
+
+.btn-back:hover {
+    background: rgba(74, 124, 89, 0.15);
+    border-color: #2d5a27;
+    color: #1f3d1a;
+    transform: translateY(-2px);
+    box-shadow: 0 8px 24px rgba(45, 90, 39, 0.2);
+}
+
+.btn-back:active {
+    transform: translateY(0);
+    box-shadow: 0 4px 12px rgba(45, 90, 39, 0.1);
+    background: rgba(74, 124, 89, 0.2);
 }
 
 .spinner {
@@ -235,35 +266,6 @@
     max-width: 60%;
 }
 
-/* Back Button */
-.btn-back {
-    background: #f3f4f6;
-    color: #374151;
-    border: 2px solid #e5e7eb;
-    padding: 16px 32px;
-    border-radius: 12px;
-    font-size: 1rem;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    width: 100%;
-    min-height: 56px;
-}
-
-.btn-back:hover {
-    background: #e5e7eb;
-    border-color: #d1d5db;
-    transform: translateY(-1px);
-}
-
-.btn-back:active {
-    transform: translateY(0);
-}
-
 /* Animations */
 @keyframes slideUp {
     from {