UI bug fixes related to alignment

Author: Gourav Dwivedi

Samples/AspDotCore/WebApp/WebApp/Controllers/LoginController.cs

@@ -21,9 +21,10 @@ public LoginController(IConfiguration config)
 		}
 
 		[AllowAnonymous]
-		[HttpPost]
-		public IActionResult Login([FromBody]UserModel login)
+		[HttpGet("GetToken")]
+		public IActionResult GetToken(string username, string password)
 		{
+			var login = new UserModel{ Username = username, Password = password };
 			IActionResult response = Unauthorized();
 			var user = AuthenticateUser(login);
 
@@ -61,7 +62,7 @@ private UserModel AuthenticateUser(UserModel login)
 		{
 			UserModel user = null;
 
-			if (login.Username == "Test" && login.Password == "Abc@123")
+			if (login.Username == "admin" && login.Password == "admin")
 			{
 				user = new UserModel { Username = "Test", EmailAddress = "test@test.com" };
 			}

src/css/main.css

@@ -8,6 +8,7 @@ body {
     padding : 0px ;
     margin: 0px;
     font-family: 'Roboto', 'Helvetica', sans-serif;
+    min-height: 600px ;
   }
 
 .tab {
@@ -74,7 +75,7 @@ li:hover {
   }
 
   .method-arguments {
-    padding-top: 10px;
+    padding-top: 0px;
   }
 
   .args-container {
@@ -114,7 +115,7 @@ ul.nav .nav-link.active:hover {
   padding: 10px;
 }
 
-#loggerView {
+.loggerView {
   word-wrap: break-word;/*Used because long log messages going out of div.*/
   border-radius: 5px 5px 5px 5px;
   box-sizing: border-box;
@@ -138,15 +139,15 @@ ul.nav .nav-link.active:hover {
   margin-bottom: 20px;
 }
 
-#logger-container {
+.logger-container {
   padding: 10px;
   margin-top: 50px;
 }
 
 #app-logs {
   overflow-x: hidden;
   overflow-y: auto;
-  min-height: 50px;
+  min-height: 5px;
   max-height: 400px;
 }
 
@@ -188,6 +189,28 @@ ul.nav .nav-link.active:hover {
   border-color: rgba(63, 81, 181, 1);
 }
 
+.label-title {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  text-transform: uppercase;
+  font-size: 14px;
+  color: rgba(0,0,0,.54);
+  font-weight: 500; 
+}
+
+.chk-text {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-size: 12px;
+  color: rgba(0,0,0,.54);
+  font-weight: 500;
+}
+
+.logger-text {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-size: 12px;
+  color: rgba(0,0,0,.54);
+  font-weight: 500;
+}
+
 /* .mdl-layout__header-row {
   padding: 0px 0px 0px 80px;
   margin: 0 0 0 0;

src/js/components/app.component.js

@@ -21,10 +21,10 @@ class AppComponent extends HTMLElement {
             <div class="panel panel-primary">
                 <ul class="nav nav-tabs justify-content-end nav-justified" id="tabheader">
                     <li class="nav-item">
-                        <a class="nav-link active" data-tab-type="basic" data-toggle="tab"  href="#appview">Basic</a>
+                        <a class="nav-link active tab-text" data-tab-type="basic" data-toggle="tab"  href="#appview">Basic</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link" data-tab-type="advance" data-toggle="tab" href="#appview">Advance</a>
+                        <a class="nav-link tab-text" data-tab-type="advance" data-toggle="tab" href="#appview">Advance</a>
                     </li>
                 </ul>