From f219ac721f51d9d68ee4b74ddef9a2b45713258f Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Sun, 26 Dec 2021 19:13:42 +0100
Subject: [PATCH] Updated navigation header

---
 .../components/Header/Header.tsx              | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/dashboardWebView/components/Header/Header.tsx b/src/dashboardWebView/components/Header/Header.tsx
index 12259040..a3818485 100644
--- a/src/dashboardWebView/components/Header/Header.tsx
+++ b/src/dashboardWebView/components/Header/Header.tsx
@@ -54,16 +54,20 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({totalPages, folde
 
   return (
     <div className={`w-full sticky top-0 z-40 bg-gray-100 dark:bg-vulcan-500`}>
-      
-      <div className={`px-4 bg-gray-50 dark:bg-vulcan-50 border-b-2 border-gray-200 dark:border-vulcan-200`}>
-        <div className={`flex items-center justify-start`}>
-          <button className={`p-2 flex items-center ${view === "contents" ? "bg-gray-200 dark:bg-vulcan-200" : ""} hover:bg-gray-100 dark:hover:bg-vulcan-100`} onClick={() => updateView(NavigationType.Contents)}>
-            <MarkdownIcon className={`h-6 w-auto mr-2`} /><span>Contents</span>
-          </button>
-          <button className={`p-2 flex items-center ${view === "media" ? "bg-gray-200 dark:bg-vulcan-200" : ""} hover:bg-gray-100 dark:hover:bg-vulcan-100`} onClick={() => updateView(NavigationType.Media)}>
-            <PhotographIcon className={`h-6 w-auto mr-2`} /><span>Media</span>
-          </button>
-        </div>
+
+      <div className="mb-0 border-b bg-gray-100 dark:bg-vulcan-500 border-gray-200 dark:border-vulcan-300">
+        <ul className="flex items-center justify-start -mb-px" id="myTab" data-tabs-toggle="#myTabContent" role="tablist">
+          <li className="mr-2" role="presentation">
+            <button className={`flex items-center py-2 px-4 text-sm font-medium text-center border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300  dark:hover:text-gray-300 ${view === NavigationType.Contents ? "border-vulcan-500 text-vulcan-500  dark:border-whisper-500 dark:text-whisper-500" : "text-gray-500 dark:text-gray-400"}`} type="button" role="tab" aria-controls="profile" aria-selected="false" onClick={() => updateView(NavigationType.Contents)}>
+              <MarkdownIcon className={`h-6 w-auto mr-2`} /><span>Contents</span>
+            </button>
+          </li>
+          <li className="mr-2" role="presentation">
+            <button className={`flex items-center py-2 px-4 text-sm font-medium text-center text-gray-500 border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 ${view === NavigationType.Media ? "border-vulcan-500 text-vulcan-500 dark:border-whisper-500 dark:text-whisper-500" : "text-gray-500 dark:text-gray-400"}`} type="button" role="tab" aria-controls="dashboard" aria-selected="true" onClick={() => updateView(NavigationType.Media)}>
+              <PhotographIcon className={`h-6 w-auto mr-2`} /><span>Media</span>
+            </button>
+          </li>
+        </ul>
       </div>
 
       {