From 08f4891492e222fd11181b4e9dced1c543f92369 Mon Sep 17 00:00:00 2001
From: Son NK <>
Date: Sun, 7 Jun 2020 12:11:00 +0200
Subject: [PATCH] use breadcrumb for contact header

---
 .../templates/dashboard/contact_detail.html      | 16 ++++++++++++----
 static/darkmode.css                              |  7 +++++++
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/app/dashboard/templates/dashboard/contact_detail.html b/app/dashboard/templates/dashboard/contact_detail.html
index af0b1fd8..25a79776 100644
--- a/app/dashboard/templates/dashboard/contact_detail.html
+++ b/app/dashboard/templates/dashboard/contact_detail.html
@@ -10,10 +10,18 @@
 
   <div class="row">
     <div class="col">
-      <h1 class="h3">{{ alias.email }} / {{ contact.email }}
-        {% if contact.pgp_finger_print %}
-          <span class="cursor" data-toggle="tooltip" data-original-title="PGP Enabled">🗝</span>
-        {% endif %}
+      <h1 class="h3">
+        <nav aria-label="breadcrumb">
+          <ol class="breadcrumb">
+            <li class="breadcrumb-item"><a
+                href="{{ url_for('dashboard.alias_contact_manager', alias_id=alias.id) }}">{{ alias.email }}</a></li>
+            <li class="breadcrumb-item active" aria-current="page">{{ contact.email }}
+              {% if contact.pgp_finger_print %}
+                <span class="cursor" data-toggle="tooltip" data-original-title="PGP Enabled">🗝</span>
+              {% endif %}
+            </li>
+          </ol>
+        </nav>
       </h1>
 
       <div class="card">
diff --git a/static/darkmode.css b/static/darkmode.css
index 66c696e1..795f6f88 100644
--- a/static/darkmode.css
+++ b/static/darkmode.css
@@ -10,6 +10,7 @@
     --heading-background: #FFF;
     --border: 1px solid rgba(0, 40, 100, 0.12);
     --input-bg-color: var(--white);
+    --light-bg-color: #e9ecef;
 }
 
 [data-theme="dark"] {
@@ -21,6 +22,7 @@
     --heading-background: #1a1a1a;
     --input-bg-color: #4c4c4c;
     --border: 1px solid rgba(228, 236, 238, 0.35);
+    --light-bg-color: #5c5c5c;
 }
 
 /** Override the bootstrap color configurations */
@@ -46,6 +48,11 @@ hr {
     background-color: var(--input-bg-color);
 }
 
+.breadcrumb {
+    color: var(--font-color);
+    background-color: var(--light-bg-color);
+}
+
 .form-control:focus, .dataTables_wrapper .dataTables_length select:focus, .dataTables_wrapper .dataTables_filter input:focus, .modal-content {
     border-color: #1991eb;
     outline: 0;