From daba14856278f1a4b8e6dc44d1e81d639039c586 Mon Sep 17 00:00:00 2001
From: NguyenND <ngodanguyen@gmail.com>
Date: Thu, 4 Jun 2026 12:16:51 -0400
Subject: [PATCH] 06/04 Improve Dashboard exchange rate card  UI/UX

---
 app/templates/dashboard/index.html | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/app/templates/dashboard/index.html b/app/templates/dashboard/index.html
index 9500640..b7ee510 100644
--- a/app/templates/dashboard/index.html
+++ b/app/templates/dashboard/index.html
@@ -3,7 +3,7 @@
 {% block page_title %}Dashboard{% endblock %}
 
 {% block extra_css %}
-.fx-card { background: #0f172a; border-color: #1e293b; color: #f1f5f9; cursor: pointer; transition: all .2s; }
+.fx-card { background: #eff6ff; border-color: #bfdbfe; color: #0f172a; cursor: pointer; transition: all .2s; }
 .fx-card:hover { border-color: #3b82f6 !important; }
 .period-btn.active { background: #3b82f6; color: #fff; border-color: #3b82f6; }
 @keyframes spin { to { transform: rotate(360deg); } }
@@ -122,16 +122,16 @@
         <div class="pcard fx-card" id="fxWidget">
             <div class="d-flex justify-content-between align-items-start">
                 <div onclick="toggleFxChart()" style="cursor:pointer;flex:1;">
-                    <div style="font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:#475569;">USD → VND</div>
-                    <div class="mono" id="fxRate" style="font-size:24px;font-weight:600;margin-top:4px;">₫{{ "{:,.0f}".format(fx.rate) }}</div>
-                    <div style="font-size:11px;color:#64748b;margin-top:2px;" id="fxMeta">
+                    <div style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#1d4ed8;">USD → VND</div>
+                    <div class="mono" id="fxRate" style="font-size:24px;font-weight:700;margin-top:4px;color:#0f172a;">₫{{ "{:,.0f}".format(fx.rate) }}</div>
+                    <div style="font-size:11px;color:#475569;margin-top:2px;" id="fxMeta">
                         1 USD · <span id="fxDate">{{ fx.date.strftime('%b %d, %Y') }}</span>
-                        · <span id="fxSource" style="opacity:.6;">{{ fx.source }}</span>
-                        {% if fx.is_stale %}<span id="fxStale" title="Rate may be outdated" style="color:#f59e0b;"> ⚠ stale</span>{% endif %}
+                        · <span id="fxSource" style="opacity:.7;">{{ fx.source }}</span>
+                        {% if fx.is_stale %}<span id="fxStale" title="Rate may be outdated" style="color:#d97706;"> ⚠ stale</span>{% endif %}
                     </div>
                 </div>
                 <button id="fxRefreshBtn" onclick="refreshFxRate()" title="Refresh rate"
-                    style="background:none;border:none;color:#475569;cursor:pointer;font-size:14px;padding:2px 4px;line-height:1;margin-top:2px;">
+                    style="background:none;border:none;color:#3b82f6;cursor:pointer;font-size:15px;padding:2px 4px;line-height:1;margin-top:2px;">
                     <i class="bi bi-arrow-clockwise"></i>
                 </button>
             </div>
@@ -140,13 +140,13 @@
             </div>
         </div>
         {% else %}
-        <div class="pcard" style="background:#1e293b;border-color:#334155;">
+        <div class="pcard" style="background:#eff6ff;border-color:#bfdbfe;">
             <div class="d-flex justify-content-between align-items-center">
                 <div>
-                    <div style="font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:#475569;">USD → VND</div>
-                    <div style="font-size:13px;color:#94a3b8;margin-top:6px;">Rate unavailable</div>
+                    <div style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#1d4ed8;">USD → VND</div>
+                    <div style="font-size:13px;color:#64748b;margin-top:6px;">Rate unavailable</div>
                 </div>
-                <button onclick="refreshFxRate()" style="background:none;border:none;color:#475569;cursor:pointer;font-size:14px;">
+                <button onclick="refreshFxRate()" style="background:none;border:none;color:#3b82f6;cursor:pointer;font-size:15px;">
                     <i class="bi bi-arrow-clockwise"></i>
                 </button>
             </div>
@@ -361,9 +361,9 @@ function toggleFxChart(){
         const h = {{ fx_history_data | tojson }};
         fxChart = new Chart(document.getElementById('fxChart').getContext('2d'), {
             type:'line',
-            data:{ labels:h.dates, datasets:[{ data:h.rates, borderColor:'#3b82f6', borderWidth:1.5, pointRadius:0, tension:.3, fill:false }] },
+            data:{ labels:h.dates, datasets:[{ data:h.rates, borderColor:'#3b82f6', backgroundColor:'#dbeafe55', borderWidth:1.5, pointRadius:0, tension:.3, fill:true }] },
             options:{ responsive:true, maintainAspectRatio:false, plugins:{ legend:{ display:false } },
-                scales:{ x:{ display:false }, y:{ grid:{ color:'#1e293b' }, ticks:{ color:'#64748b', font:{ size:9 }, callback: v=>'₫'+(v/1000).toFixed(0)+'K' } } } }
+                scales:{ x:{ display:false }, y:{ grid:{ color:'#dbeafe' }, ticks:{ color:'#64748b', font:{ size:9 }, callback: v=>'₫'+(v/1000).toFixed(0)+'K' } } } }
         });
     }
 }