From 92500a6f083a853429f4f92468e2a5a76bc2a6d0 Mon Sep 17 00:00:00 2001
From: Mia Arh <mia.arh@crust.tech>
Date: Fri, 5 Mar 2021 19:09:05 +0100
Subject: [PATCH] Add active nav item styling

---
 auth/assets/public/style.css                  |  5 +++++
 auth/assets/templates/inc_nav.html.tpl        | 22 ++++++++++---------
 .../pending-email-confirmation.html.tpl       |  2 +-
 auth/assets/templates/template-dev.html.tpl   |  2 +-
 4 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/auth/assets/public/style.css b/auth/assets/public/style.css
index 158282bbe..a5187c394 100644
--- a/auth/assets/public/style.css
+++ b/auth/assets/public/style.css
@@ -94,6 +94,11 @@ a:hover {
   font-size: 1rem;
 }
 
+/* Navigation */
+.nav-item.active {
+  border-bottom: 4px solid var(--primary);
+}
+
 /* form styling*/
 .form-control {
   border: 2px solid var(--light);
diff --git a/auth/assets/templates/inc_nav.html.tpl b/auth/assets/templates/inc_nav.html.tpl
index 6720400b9..f0422103e 100644
--- a/auth/assets/templates/inc_nav.html.tpl
+++ b/auth/assets/templates/inc_nav.html.tpl
@@ -1,20 +1,22 @@
-<div class="card-header border-0">
-	<div class="row">
-		<div class="text-center w-100">
-			<a href="{{ links.Profile }}">
-				<img class="logo m-2" src="{{ links.Assets }}/logo.png">
-			</a>
-		</div>
-	</div>
+<div class="card-header border-0 p-0">
+    <div class="text-center w-100">
+        <a href="{{ links.Profile }}">
+            <img class="logo m-3" src="{{ links.Assets }}/logo.png">
+        </a>
+    </div>
 
 {{ if not .hideNav }}
 	{{ if and .user .client }}
 	<div class="py-1 px-3">
-		<a href="{{ links.OAuth2AuthorizeClient }}">&raquo; Continue with authorization of {{ .client.Name }}</a>
+		<a href="{{ links.OAuth2AuthorizeClient }}" class="text-danger">
+		 Finalize the authorization of {{ .client.Name }}
+		 <i class="bi bi-chevron-double-right"></i>
+		 </a>
 	</div>
 	{{ else if .user }}
 	<ul class="nav ml-1">
-		<li class="nav-item">
+	   {{/* @TO-DO Denis -- apply active class to selected nav item */}}
+		<li class="nav-item active">
 			<a class="nav-link" href="{{ links.Profile }}">Your profile</a>
 		</li>
 		<li class="nav-item">
diff --git a/auth/assets/templates/pending-email-confirmation.html.tpl b/auth/assets/templates/pending-email-confirmation.html.tpl
index d54491cc5..f2cc1b75d 100644
--- a/auth/assets/templates/pending-email-confirmation.html.tpl
+++ b/auth/assets/templates/pending-email-confirmation.html.tpl
@@ -2,7 +2,7 @@
 <div class="card-body p-0">
 	{{ template "inc_alerts.html.tpl" .alerts }}
 	<h4 class="card-title p-3 border-bottom">Confirm your email</h4>
-	<div class="text-primary p-3" role="alert">
+	<div class="p-3" role="alert">
 		You should receive email confirmation link to your inbox in a few moments.
 	</div>
     <div class="text-center my-3">
diff --git a/auth/assets/templates/template-dev.html.tpl b/auth/assets/templates/template-dev.html.tpl
index 86e0d80a1..86e702e8e 100644
--- a/auth/assets/templates/template-dev.html.tpl
+++ b/auth/assets/templates/template-dev.html.tpl
@@ -7,7 +7,7 @@
 		<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet">
 		<script type="application/javascript">
 			window.addEventListener('load', function() {
-				document.getElementsByID('preview').src=location.hash.substring(1)
+				document.getElementByID('preview').src=location.hash.substring(1)
 			})
 		</script>
 	</head>