UI tweaks

- Footer sticks to bottom of page even with
shorter content
- Header now takes up full width of page, Header
content still at readable width
- Add light verion of logo, more colored variants
can be made
- Change table header background color

docker/ploughshares/static/css/custom.css

@@ -3,8 +3,6 @@
 /* System font stack */
 body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-    padding-top: 20px;
-    padding-bottom: 20px;
     color: #333333; /* Improved text contrast */
     line-height: 1.5; /* Improved readability */
     font-size: 16px; /* Base font size for better readability */
@@ -29,8 +27,16 @@ body {
 
 /* Header styles */
 .header {
+    margin-left: -50vw;
+    margin-right: -50vw;
     border-bottom: 1px solid #d0d0d0;
     margin-bottom: 30px;
+    background-color: var(--ploughshares-blue) !important;
+}
+
+.header > div {
+    max-width: 1320px;
+    margin: auto;
 }
 
 .header h3 {
@@ -84,15 +90,18 @@ label {
 /* Logo styles */
 .logo-container {
     display: flex;
+    flex-direction: column;
     align-items: center;
 }
 
+.logo-container div {
+    font-size: 14px;
+}
+
 .navbar-brand img {
-    max-height: 40px;
+    max-height: 60px;
     width: auto;
     margin-right: 10px;
-    /* Improved logo contrast with background */
-    background-color: white;
     padding: 3px;
     border-radius: 4px;
 }
@@ -203,7 +212,16 @@ a:focus, button:focus, input:focus, select:focus, textarea:focus, [tabindex]:foc
 /* Navbar styles */
 .navbar {
     background-color: var(--ploughshares-blue) !important;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    padding: 20px 10px 20px 10px;
+}
+
+.navbar-brand {
+    transition: opacity 0.5s ease-in-out ;
+}
+
+.navbar-brand:hover {
+    text-decoration: none;
+    opacity: 80%;
 }
 
 .navbar-light .navbar-brand {
@@ -254,9 +272,8 @@ a:focus, button:focus, input:focus, select:focus, textarea:focus, [tabindex]:foc
 }
 
 .table th {
-    background-color: var(--ploughshares-blue);
-    color: white;
     font-weight: 500;
+    font-size: 18px;
     border-bottom: 2px solid var(--ploughshares-dark-blue);
 }
 

docker/ploughshares/templates/base.html

@@ -11,13 +11,13 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/custom.css') }}">
     <style>
-        .navbar-brand img {
+        .container {
-            max-height: 40px;
-            margin-right: 10px;
-        }
-        .logo-container {
             display: flex;
-            align-items: center;
+            flex-direction: column;
+            min-height: 100vh;
+        }
+        .content {
+            flex: 1;
         }
     </style>
 </head>
@@ -27,40 +27,41 @@
     
     <div class="container">
         <header class="header clearfix">
-            <nav class="navbar navbar-expand-lg navbar-light bg-light">
+            <div>
-                <div class="container-fluid">
+                <nav class="navbar navbar-expand-lg navbar-light bg-light">
-                    <a class="navbar-brand" href="{{ url_for('index') }}" aria-label="Project Ploughshares Home">
+                    <div class="container-fluid">
-                        <div class="logo-container">
+                        <a class="navbar-brand" href="{{ url_for('index') }}" aria-label="Project Ploughshares Home">
-                            <img src="{{ url_for('static', filename='img/logo.png') }}" alt="Project Ploughshares Logo" width="180" height="40">
+                            <div class="logo-container">
-                            <span class="d-none d-md-inline">Transaction Management System</span>
+                                <img src="{{ url_for('static', filename='img/logo-light.png') }}" alt="Project Ploughshares Logo">
+                                <div class="d-none d-md-inline">Transaction Management System</div>
+                            </div>
+                        </a>
+                        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                            <span class="navbar-toggler-icon"></span>
+                        </button>
+                        <div class="collapse navbar-collapse" id="navbarNav">
+                            <ul class="navbar-nav ms-auto">
+                                <li class="nav-item">
+                                    <a class="nav-link" href="{{ url_for('index') }}" aria-current="{% if request.endpoint == 'index' %}page{% endif %}">
+                                        <i class="bi bi-house-door" aria-hidden="true"></i> Home
+                                    </a>
+                                </li>
+                                <li class="nav-item">
+                                    <a class="nav-link" href="{{ url_for('create_transaction') }}" aria-current="{% if request.endpoint == 'create_transaction' %}page{% endif %}">
+                                        <i class="bi bi-plus-circle" aria-hidden="true"></i> New Transaction
+                                    </a>
+                                </li>
+                                <li class="nav-item">
+                                    <a class="nav-link" href="{{ url_for('api_docs') }}" aria-current="{% if request.endpoint == 'api_docs' %}page{% endif %}">
+                                        <i class="bi bi-file-earmark-text" aria-hidden="true"></i> API Documentation
+                                    </a>
+                                </li>
+                            </ul>
                         </div>
-                    </a>
-                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-                        <span class="navbar-toggler-icon"></span>
-                    </button>
-                    <div class="collapse navbar-collapse" id="navbarNav">
-                        <ul class="navbar-nav ms-auto">
-                            <li class="nav-item">
-                                <a class="nav-link" href="{{ url_for('index') }}" aria-current="{% if request.endpoint == 'index' %}page{% endif %}">
-                                    <i class="bi bi-house-door" aria-hidden="true"></i> Home
-                                </a>
-                            </li>
-                            <li class="nav-item">
-                                <a class="nav-link" href="{{ url_for('create_transaction') }}" aria-current="{% if request.endpoint == 'create_transaction' %}page{% endif %}">
-                                    <i class="bi bi-plus-circle" aria-hidden="true"></i> New Transaction
-                                </a>
-                            </li>
-                            <li class="nav-item">
-                                <a class="nav-link" href="{{ url_for('api_docs') }}" aria-current="{% if request.endpoint == 'api_docs' %}page{% endif %}">
-                                    <i class="bi bi-file-earmark-text" aria-hidden="true"></i> API Documentation
-                                </a>
-                            </li>
-                        </ul>
                     </div>
-                </div>
+                </nav>
-            </nav>
+            </div>
         </header>
-
         {% with messages = get_flashed_messages(with_categories=true) %}
         {% if messages %}
         <div class="alert-container" role="alert">