Made register style DIY and moved most register CSS components to the global styles

5 files changed, 224 insertions, 102 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 f8b6963..82ec645 100644
--- a/src/DevHive.Angular/src/app/components/login/login.component.css
+++ b/src/DevHive.Angular/src/app/components/login/login.component.css
@@ -1,19 +1,4 @@
-#content {
-	height: 100%;
-  max-width: 20em;
-	margin-left: auto;
-	margin-right: auto;
-
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	flex-direction: column;
-}
 
-#title {
-	font-size: 2em;
-	font-weight: bold;
-}
 
 #content input[type=text], #content #submit-btn {
 	border: 2px solid black;
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 c33f493..3912004 100644
--- a/src/DevHive.Angular/src/app/components/login/login.component.html
+++ b/src/DevHive.Angular/src/app/components/login/login.component.html
@@ -1,5 +1,5 @@
 <div id="content">
-	<div id="title">
+	<div class="title">
 		Login
 	</div>
 	<hr>
diff --git a/src/DevHive.Angular/src/app/components/register/register.component.css b/src/DevHive.Angular/src/app/components/register/register.component.css
index 06c8c52..46bd842 100644
--- a/src/DevHive.Angular/src/app/components/register/register.component.css
+++ b/src/DevHive.Angular/src/app/components/register/register.component.css
@@ -1,52 +1,19 @@
-#content {
-	height: 100%;
-	max-width: 25%;
-	margin: auto;
-	margin-top: 10%;
+/* A lot of stuff are moved to the global styles! */
 
-	display: flex;
-	flex-wrap: nowrap;
-	flex-flow: column;
+* {
+  transition: 0.2s;
 }
 
-#content hr {
-	width: 100%;
-	border: 1px solid black;
-	box-sizing: border-box;
-	margin-top: 2%;
-	margin-bottom: 2%;
-}
-
-#content mat-form-field {
-	width: 100%;
-}
-
-.title {
-	text-align: center;
-	font-size: 250%;
-	font-weight: bold;
+form {
+  width: 100%;
 }
 
-form :nth-last-child(3) {
-	padding-bottom: 1%;
-}
-
-.submit-btn {
-	width: 100%;
-	background-color: black;
-	color: white;
-	text-align: center;
-	margin-top: 1%;
-	
-	border-radius: 10px;
-}
-
-.submit-btn:hover {
-	cursor: pointer;
-	border-color: darkgrey;
-	background-color: darkgrey;
+#content hr {
+  width: 100%;
+  border: 1px solid black;
+  box-sizing: border-box;
 }
 
-.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/register/register.component.html b/src/DevHive.Angular/src/app/components/register/register.component.html
index 3c8a563..c203369 100644
--- a/src/DevHive.Angular/src/app/components/register/register.component.html
+++ b/src/DevHive.Angular/src/app/components/register/register.component.html
@@ -1,52 +1,63 @@
 <div id="content">
-	<h1 class="title">Register</h1>
+	<div class="title">Register</div>
 
 	<form [formGroup]="registerUserFormGroup" (ngSubmit)="onSubmit()">
 		<hr>
 		<!-- Value: {{ registerUserFormGroup.value | json }}
 		<hr> -->
 
-		<mat-form-field class="firstNameField">
-			<mat-label>First Name*</mat-label>
-			<input matInput placeholder="Goshko, is that u?" formControlName="firstName">
-
-			<mat-error *ngIf="registerUserFormGroup.get('firstName')?.hasError('required')">* This is required</mat-error>
-			<mat-error *ngIf="firstName?.invalid">* Min length of 3</mat-error>
-		</mat-form-field>
-		
-		<mat-form-field class="lastNameField">
-			<mat-label>Last Name*</mat-label>
-			<input matInput placeholder="Trapov? Really??" formControlName="lastName">
-			
-			<mat-error *ngIf="registerUserFormGroup.get('lastName')?.hasError('required')">* This is required</mat-error>
-			<mat-error *ngIf="lastName?.invalid">* Min length of 3</mat-error>
-		</mat-form-field>
-		
-		<mat-form-field class="usernameField">
-			<mat-label>Username*</mat-label>
-			<input matInput placeholder="Think of something cool to flex on other kids" formControlName="username">
-
-			<mat-error *ngIf="username?.invalid">* Min length of 3</mat-error>
-			<mat-error *ngIf="registerUserFormGroup.get('username')?.hasError('required')">* This is required</mat-error>
-		</mat-form-field>
-		
-		<mat-form-field class="emailField">
-			<mat-label>Email*</mat-label>
-			<input matInput placeholder="You expect an email joke? I have none, mail me one" formControlName="email">
-
-			<mat-error *ngIf="email?.invalid">* You dummy, enter @</mat-error>
-			<mat-error *ngIf="registerUserFormGroup.get('email')?.hasError('required')">* This is required</mat-error>
-		</mat-form-field>
-		
-		<mat-form-field class="passwordField">
-			<mat-label>Password*</mat-label>
-			<input matInput type="password" placeholder="Make sure it's long & strong(just like my d***)" formControlName="password">
-
-			<mat-hint align="end">You must have at least one number</mat-hint>
-			<mat-error *ngIf="password?.invalid">* Min length of 5</mat-error>
-			<mat-error *ngIf="registerUserFormGroup.get('password')?.hasError('required')">* This is required</mat-error>
-		</mat-form-field>
+		<div class="input-selection">
+			<input type="text" placeholder="Goshko, is that u?" class="input-field" formControlName="firstName" required>
+			<label class="input-field-label">First Name</label>
+
+			<div class="input-errors">
+				<label *ngIf="registerUserFormGroup.get('firstName')?.hasError('required')" class="error">*This is required</label>
+				<label *ngIf="firstName?.invalid" class="error">*Minimum length of 3</label>
+			</div>
+		</div>
+
+		<div class="input-selection">
+			<input type="text" placeholder="Trapov? Really??" class="input-field" formControlName="lastName" required>
+			<label class="input-field-label">Last Name</label>
+
+			<div class="input-errors">
+				<label *ngIf="registerUserFormGroup.get('lastName')?.hasError('required')" class="error">*This is required</label>
+				<label *ngIf="lastName?.invalid" class="error">*Minimum length of 3</label>
+			</div>
+		</div>
+
+		<div class="input-selection">
+			<input type="text" placeholder="Think of something cool to flex on other kids" class="input-field" formControlName="username" required>
+			<label class="input-field-label">Username</label>
+
+			<div class="input-errors">
+				<label *ngIf="registerUserFormGroup.get('username')?.hasError('required')" class="error">*This is required</label>
+				<label *ngIf="username?.invalid" class="error">*Minimum length of 3</label>
+			</div>
+		</div>
+
+		<div class="input-selection">
+			<input type="text" placeholder="You expect an email joke? I have none, mail me one" class="input-field" formControlName="email" required>
+			<label class="input-field-label">Email</label>
+
+			<div class="input-errors">
+				<label *ngIf="registerUserFormGroup.get('email')?.hasError('required')" class="error">*This is required</label>
+				<label *ngIf="email?.invalid" class="error">*Invalid email</label>
+			</div>
+		</div>
+
+		<div class="input-selection">
+			<input type="password" placeholder="Make sure it's long & strong (just like my d***)" class="input-field" formControlName="password" required>
+			<label class="input-field-label">Password</label>
+
+			<div class="input-errors">
+				<label *ngIf="registerUserFormGroup.get('password')?.hasError('required')" class="error">*This is required</label>
+				<label *ngIf="password?.invalid" class="error">*Minimum length of 3</label>
+				<!-- <mat&#45;hint align="end">You must have at least one number</mat&#45;hint> -->
+			</div>
+		</div>
+
 		<hr>
-		<button mat-button class="submit-btn" type="submit">Submit</button>
+		<button class="submit-btn" type="submit">Submit</button>
 	</form>
 </div>
diff --git a/src/DevHive.Angular/src/styles.css b/src/DevHive.Angular/src/styles.css
index 2bd0a3b..b5a763a 100644
--- a/src/DevHive.Angular/src/styles.css
+++ b/src/DevHive.Angular/src/styles.css
@@ -3,6 +3,7 @@
 
 :root {
   --bg-color: white;
+  --focus-color: forestgreen;
 }
 
 html, body {
@@ -17,6 +18,21 @@ input:focus, button:focus {
   outline: 0;
 }
 
+#content { /* Used for the login and register pages */
+  height: 100%;
+  max-width: 20em;
+  box-sizing: border-box;
+  border: .5em solid var(--bg-color);
+
+  margin-left: auto;
+  margin-right: auto;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
 .rounded-border {
   border: 2px solid black;
   border-radius: .6em;
@@ -27,3 +43,146 @@ input:focus, button:focus {
   border-radius: 50%;
   object-fit: cover;
 }
+
+.title {
+  font-size: 2em;
+  font-weight: bold;
+}
+
+.error {
+  color: red;
+}
+
+/* Inputs, the type found in login and register */
+
+.input-selection {
+  position: relative;
+  margin-top: 0.7em;
+}
+
+  /* Don't show the placeholder when the label is on top
+   */
+.input-selection .input-field::-webkit-input-placeholder {
+  opacity: 0;
+}
+
+.input-field {
+  width: 100%;
+
+  border: 0;
+  border-bottom: 1px solid grey;
+  box-sizing: border-box;
+
+  margin-bottom: 0.5em;
+  padding: 0.4em;
+  padding-left: 0;
+
+  font-size: inherit;
+}
+
+.input-field-label {
+  width: inherit;
+  height: inherit;
+  position: absolute;
+  left: 0;
+
+  margin-top: 0.4em;
+  color: grey;
+}
+
+  /* When hovering, typing or having typed something in an input,
+   * make the label smaller, color it and then move it up
+   */
+.input-selection:hover > .input-field-label ,
+.input-selection > input:not(:placeholder-shown) + .input-field-label ,
+.input-selection > input:focus + .input-field-label {
+  font-size: 0.7em;
+  color: var(--focus-color);
+  transform: translate(0, -1.2em);
+}
+
+  /* Show the placeholder, when you've hovered or
+   * focused (typing in) on the input-field
+   */
+.input-selection:hover > .input-field::-webkit-input-placeholder,
+.input-selection > .input-field:focus::-webkit-input-placeholder {
+  opacity: 1;
+}
+
+  /* Make the underline thicker and change it's and the cursors's
+   * color when hovered or focused (typing in) on the input-field
+   */
+.input-selection:hover > .input-field,
+.input-field:focus {
+  border-color: var(--focus-color) !important;
+  caret-color: var(--focus-color);
+  border-width: 2px !important;
+  margin-top: -1px !important;
+}
+
+
+/* Input errors */
+
+.input-errors {
+  margin-top: -.8em;
+  font-size: 0.7em;
+
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+  /* Move the errors above the input when
+   * using the site on a small screen and
+   * add some space for them above the input
+   */
+@media screen and (max-width: 350px) {
+  .input-errors {
+    margin-top: -1.8em;
+  }
+  .input-selection {
+    margin-top: 1.6em;
+  }
+}
+
+.input-errors > .error {
+  margin-left: .3em;
+}
+
+.input-field:focus ~ .input-errors > .error {
+  opacity: 1 !important;
+}
+
+.input-field:placeholder-shown ~ .input-errors > .error {
+  opacity: 0;
+}
+
+/* Submit button */
+
+.submit-btn {
+  width: 100%;
+  color: white;
+  background-color: black;
+
+  border: 2px solid black;
+  border-radius: 0.4em;
+  box-sizing: border-box;
+
+  font-size: 0.8em;
+  text-align: center;
+
+  margin-top: 0.5em;
+  padding: 0.3em;
+}
+
+.submit-btn:hover {
+  cursor: pointer;
+  color: var(--focus-color);
+  background-color: white;
+  border-color: var(--focus-color) !important;
+}
+
+.submit-btn:active {
+  transition: 0s;
+  transform: scale(0.9);
+}