Apply header component to all pages

templates/contacts/contacts.html

@@ -1,8 +1,15 @@
 {% extends "common/base.html" %}
+{% from "components/header.html" import header %}
 
 {% block title %}Contacts - DocuPulse{% endblock %}
 
 {% block content %}
-<h2>Contacts</h2>
+{{ header(
+    title="Contacts",
+    description="Manage your contacts and their information",
+    button_text="Add Contact",
+    button_url="/contacts/new",
+    icon="fa-address-book"
+) }}
 <p class="text-muted">Your contacts will appear here.</p>
 {% endblock %} 

templates/contacts/form.html

@@ -3,15 +3,22 @@
 {% block content %}
 <div class="container mx-auto px-4 py-8">
     <div class="max-w-2xl mx-auto">
-        <div class="flex justify-between items-center mb-6">
-            {% if title %}
-                <h1 class="text-2xl font-bold text-gray-800 mb-6">{{ title }}</h1>
-            {% else %}
-                <h1 class="text-2xl font-bold text-gray-800 mb-6">User Form</h1>
-            {% endif %}
+        <div class="d-flex justify-content-between align-items-center mb-6">
+            <div>
+                <h3 class="mb-0">
+                    <i class="fas fa-user me-2" style="color:#16767b;"></i>
+                    {% if title %}
+                        {{ title }}
+                    {% else %}
+                        User Form
+                    {% endif %}
+                </h3>
+                <p class="text-muted mb-0 mt-2 small">Add or edit contact information</p>
+            </div>
             <a href="{{ url_for('contacts.contacts_list') }}" 
-               class="text-gray-600 hover:text-gray-900">
-                ← Back to Contacts
+               class="btn btn-sm btn-outline-secondary">
+                <i class="fas fa-arrow-left me-1"></i>
+                Back to Contacts
             </a>
         </div>
 

templates/contacts/list.html

@@ -1,4 +1,5 @@
 {% extends "common/base.html" %}
+{% from "components/header.html" import header %}
 
 {% block head %}
     {{ super() }}
@@ -10,19 +11,16 @@
 {% endblock %}
 
 {% block content %}
-<div class="container mx-auto px-4 py-8">
-    <div class="flex justify-between items-center mb-6">
-        <h1 class="text-2xl font-bold text-gray-800">Contacts</h1>
-        <a href="{{ url_for('contacts.new_contact') }}" 
-           class="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-white text-sm font-semibold transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg no-underline"
-           style="background-color: #16767b; border: 1px solid #16767b;"
-           onmouseover="this.style.backgroundColor='#1a8a90'"
-           onmouseout="this.style.backgroundColor='#16767b'">
-            <i class="fas fa-plus"></i>
-            Add New Contact
-        </a>
-    </div>
+{{ header(
+    title="Contacts",
+    description="Manage your contacts and their information",
+    button_text="Add New Contact",
+    button_url=url_for('contacts.new_contact'),
+    icon="fa-address-book",
+    button_icon="fa-plus"
+) }}
 
+<div class="container mx-auto px-4 py-8">
     <!-- Search and Filter Section -->
     <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
         <form method="GET" class="flex flex-col md:flex-row gap-4" id="filterForm">