From f0faf4270bf30dbd3a0dddf01f3108512e107df9 Mon Sep 17 00:00:00 2001
From: andersonid <nobre.it@gmail.com>
Date: Wed, 2 Apr 2025 17:22:48 -0300
Subject: [PATCH] refactor: melhorias na UI - navbar, logo e layout da data

---
 static/css/style.css | 58 ++++++++++++++++++++++++++++++++------------
 templates/base.html  |  2 +-
 templates/home.html  |  6 ++---
 3 files changed, 46 insertions(+), 20 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index 6d05c08..ddd8790 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -19,19 +19,20 @@ body {
 }
 
 .navbar {
-    background: var(--secondary-color) !important;
+    background: linear-gradient(to right, var(--secondary-dark), var(--secondary-color)) !important;
     box-shadow: 0 2px 4px rgba(0,0,0,0.2);
     border-bottom: 3px solid var(--primary-color);
-    padding: 0.5rem 1rem;
+    padding: 0.8rem 1rem;
 }
 
 .navbar-brand {
     display: flex;
     align-items: center;
-    gap: 10px;
-    font-size: 1.4rem;
-    font-weight: 600;
+    gap: 12px;
+    font-size: 1.3rem;
+    font-weight: 500;
     color: var(--text-light) !important;
+    letter-spacing: 0.5px;
 }
 
 .navbar-brand img {
@@ -40,8 +41,9 @@ body {
 }
 
 .navbar-logo {
-    height: 35px;
-    width: 35px;
+    height: 32px;
+    width: auto;
+    display: block;
 }
 
 .login-logo {
@@ -50,14 +52,22 @@ body {
 }
 
 .nav-link {
-    font-weight: 500;
+    font-weight: 400;
+    font-size: 0.95rem;
+    letter-spacing: 0.3px;
     transition: all 0.3s ease;
-    color: var(--text-light) !important;
+    color: rgba(255, 255, 255, 0.85) !important;
+    padding: 0.5rem 1rem;
 }
 
 .nav-link:hover {
-    color: var(--primary-color) !important;
-    transform: translateY(-2px);
+    color: var(--text-light) !important;
+    transform: translateY(-1px);
+}
+
+.nav-link i {
+    font-size: 0.9rem;
+    opacity: 0.9;
 }
 
 .card {
@@ -199,19 +209,27 @@ body {
 }
 
 .dropdown-menu {
-    background-color: var(--secondary-color);
-    border: 1px solid var(--secondary-light);
-    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+    background: linear-gradient(to bottom right, var(--secondary-dark), var(--secondary-color));
+    border: 1px solid rgba(255,255,255,0.1);
+    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+    padding: 0.5rem;
+    margin-top: 0.5rem;
+    border-radius: 8px;
 }
 
 .dropdown-item {
-    color: var(--text-light) !important;
+    color: rgba(255, 255, 255, 0.85) !important;
+    font-size: 0.9rem;
+    font-weight: 400;
+    padding: 0.6rem 1rem;
+    border-radius: 6px;
     transition: all 0.2s ease;
 }
 
 .dropdown-item:hover {
     background-color: var(--primary-color);
     color: var(--text-light) !important;
+    transform: translateX(3px);
 }
 
 .dropdown-divider {
@@ -229,4 +247,14 @@ body {
     .navbar-brand img {
         height: 30px;
     }
+}
+
+/* Data styles */
+.date-header {
+    padding: 1.5rem 0;
+    margin-bottom: 1.5rem;
+    border-bottom: 1px solid rgba(0,0,0,0.1);
+    color: var(--secondary-color);
+    font-weight: 400;
+    font-size: 1.4rem;
 } 
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
index 627880b..a637bb0 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -24,7 +24,7 @@
                 <span class="navbar-toggler-icon"></span>
             </button>
             <div class="collapse navbar-collapse" id="navbarNav">
-                <ul class="navbar-nav me-auto">
+                <ul class="navbar-nav mx-auto">
                     {% if current_user.has_permission('view_cell_data') %}
                     <li class="nav-item dropdown">
                         <a class="nav-link dropdown-toggle" href="#" id="militantesDropdown" role="button" data-bs-toggle="dropdown">
diff --git a/templates/home.html b/templates/home.html
index c63ebfc..3db7d27 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -3,15 +3,13 @@
 {% block title %}Home{% endblock %}
 
 {% block content %}
-<div class="row mb-4">
+<div class="row g-4">
     <div class="col-12">
-        <h3 class="text-muted mb-4">
+        <h3 class="date-header">
             {{ data_atual }}
         </h3>
     </div>
-</div>
 
-<div class="row g-4">
     {% if current_user.has_permission('view_cell_data') %}
     <!-- Card de Militantes -->
     <div class="col-md-6 col-lg-3">