Updated login to use the same styling as register

2 files changed, 22 insertions, 38 deletions

diff --git a/src/DevHive.Angular/src/app/components/login/login.component.css b/src/DevHive.Angular/src/app/components/login/login.component.css
index 82ec645..b584e90 100644
--- a/src/DevHive.Angular/src/app/components/login/login.component.css
+++ b/src/DevHive.Angular/src/app/components/login/login.component.css
@@ -1,21 +1,9 @@
-
-
-#content input[type=text], #content #submit-btn {
-	border: 2px solid black;
-	border-radius: 0.4em;
-	box-sizing: border-box;
-	width: 100%;
-	margin-top: 0.5em;
-  font-size: 0.8em;
-  padding: 0.3em;
-}
-
-#content input[type=text]:nth-last-of-type(1) {
-  margin-bottom: 0.5em;
+* {
+  transition: .2s;
 }
 
-input[type=text]:focus, button[type=submit]:focus {
-  outline: 0;
+form {
+  width: 100%;
 }
 
 #content hr {
@@ -24,18 +12,6 @@ input[type=text]:focus, button[type=submit]:focus {
 	box-sizing: border-box;
 }
 
-#submit-btn {
-  background-color: black;
-  color: white;
-  text-align: center;
-}
-
-#submit-btn:hover {
-  cursor: pointer;
-  border-color: darkgrey !important;
-  background-color: darkgrey;
-}
-
-#submit-btn:active {
-  transform: scale(0.9);
+.input-selection:nth-of-type(1) {
+  margin-top: 1.2em;
 }
diff --git a/src/DevHive.Angular/src/app/components/login/login.component.html b/src/DevHive.Angular/src/app/components/login/login.component.html
index 3912004..ea81a8b 100644
--- a/src/DevHive.Angular/src/app/components/login/login.component.html
+++ b/src/DevHive.Angular/src/app/components/login/login.component.html
@@ -1,12 +1,20 @@
 <div id="content">
-	<div class="title">
-		Login
-	</div>
-	<hr>
+	<div class="title">Login</div>
+
 	<form [formGroup]="loginUserFormGroup" (ngSubmit)="onSubmit()">
-		<input type="text" placeholder="Username" name="username" formControlName="username">
-		<input type="text" placeholder="Password" name="password" formControlName="password">
-    <hr>
-    <button type="submit" value="Submit" id="submit-btn">Submit</button>
+		<hr>
+
+		<div class="input-selection">
+			<input type="text" placeholder="Username" class="input-field" formControlName="username" required>
+			<label class="input-field-label">Username</label>
+		</div>
+
+		<div class="input-selection">
+			<input type="password" placeholder="Password" class="input-field" formControlName="password" required>
+			<label class="input-field-label">Password</label>
+		</div>
+
+		<hr>
+		<button class="submit-btn" type="submit">Submit</button>
 	</form>
 </div>