Merge branch '29-add-sass-styling-to-other-components' into 28-add-sass-styling-to-components (#28)

client/src/app/app-routing.module.ts

@@ -7,8 +7,11 @@ import { UserRegistrationFormComponent } from './users/user-registration-form/us
 import { UserLoginFormComponent } from './users/user-login-form/user-login-form.component';
 import { UserProfileComponent } from './users/user-profile/user-profile.component';
 import { UserGuestProfileComponent } from './users/user-guest-profile/user-guest-profile.component';
+import { HomeComponent } from './home/home.component';
 
 const routes: Routes = [
+  { path: '', component: HomeComponent },
+
   { path: 'annonse/ny', component: PostFormComponent },
   { path: 'annonse/rediger/:id', component: PostFormComponent },
   { path: 'annonse', component: PostListComponent },

client/src/app/app.component.html

-<div class="navbar">
-	<span class="logo" (click)="navigate('/')">SellPoint</span>
-	<nav>
-		<span (click)="navigate('/annonse')">Annonser</span>
-		<span (click)="navigate('/annonse/ny')">Lag annonse</span>
-		<span *ngIf="!user.getUserId" (click)="navigate('/register')">Registrer</span>
-		<span *ngIf="!user.getUserId" (click)="navigate('/login')">Logg inn</span>
-		<span *ngIf="user.getUserId" (click)="navigate('/profile')">Profil</span>
-		<span *ngIf="user.getUserId" (click)="logout()">Logg ut</span>
-	</nav>
-</div>
-<!-- <div class="splash">
-	<div class="title"><h1>SELLPOINT</h1></div>
-	<div class="wave">
-		<div class="waveImg"></div>
-		<div class="categoryWrapper">
-			<p>Søk etter kategorier...</p>
-			<p>Kategorier...</p>
-			<div class="whiteBox"></div>
-		</div>
-		<div class="cta">
-			<h2>Lorem Ipsum</h2>
-			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-			<div class="buttons">
-				<button (click)="navigate('/register')" class="btn">Registrer deg!</button>
-				<button (click)="navigate('/')" class="btn pink">Les mer</button>
-			</div>
+<div class="body">
+	<div class="navbar">
+		<span class="logo" (click)="navigate('/')">SellPoint</span>
+		<nav>
+			<span (click)="navigate('/annonse')">Annonser</span>
+			<span (click)="navigate('/annonse/ny')">Lag annonse</span>
+			<span *ngIf="!user.getUserId" (click)="navigate('/register')">Registrer</span>
+			<span *ngIf="!user.getUserId" (click)="navigate('/login')">Logg inn</span>
+			<span *ngIf="user.getUserId" (click)="navigate('/profile')">Profil</span>
+			<span *ngIf="user.getUserId" (click)="logout()">Logg ut</span>
+		</nav>
+	</div>
+
+	<div class="splash">
+		<div class="title"><h1>SELLPOINT</h1></div>
+
+		<div class="wave">
+			<div class="waveImg"></div>
 		</div>
 	</div>
-</div> -->
 
-<div class="wrapper">
-	<router-outlet></router-outlet>
+	<div class="wrapper">
+		<router-outlet></router-outlet>
+	</div>
 </div>
-
 <div class="footer">
 	<div class="logo"><h1>SELLPOINT LOGO</h1></div>
 	<div class="info">
 		<div class="bedrift">
-			<h3>Lorem ipsum</h3>
+			<h3>For bedrifter</h3>
 			<ul>
 				<li>Lorem ipsum</li>
 				<li>Lorem ipsum</li>
@@ -45,7 +35,7 @@
 			</ul>
 		</div>
 		<div class="omoss">
-			<h3>Lorem ipsum</h3>
+			<h3>Om SellPoint</h3>
 			<ul>
 				<li>Lorem ipsum</li>
 				<li>Lorem ipsum</li>
@@ -53,7 +43,7 @@
 			</ul>
 		</div>
 		<div class="personvern">
-			<h3>Lorem ipsum</h3>
+			<h3>Personvern</h3>
 			<ul>
 				<li>Lorem ipsum</li>
 				<li>Lorem ipsum</li>
@@ -61,4 +51,4 @@
 			</ul>
 		</div>
 	</div>
-</div>
+</div>
\ No newline at end of file

client/src/app/app.component.scss

+div.body{
+	min-height: calc(100vh - 200px);
+}
+
 div.navbar {
 	background-color: #fff;
 	display: flex;
@@ -18,14 +22,18 @@ div.navbar {
 	nav {
 		span{
 			padding: 10px;
-			margin: 10px;
 			cursor: pointer;
+			margin: 20px;
 			font-size: 25px;
+			background-color: #fff;
+		}
+		span:hover{
+			background-color: #eee;
 		}
 	}
 }
 div.splash {
-	position: relative;
+	position: absolute;
 	width: 100%;
 	height: 55vh;
 	background-color: springgreen;
@@ -55,34 +63,6 @@ div.splash {
 			letter-spacing: 10px;
 		}
 	}
-	div.categoryWrapper {
-		padding: 10px;
-		margin-left: 5%;
-		background: linear-gradient(90deg, #14A35A 0%, #24e072 100%);
-		width: 40%;
-		height: 300px;
-		p {
-			margin-bottom: 10px;
-		}
-		div.whiteBox {
-			width: 100%;
-			height: 56%;
-			background-color: #ffffff;
-		}
-	}
-	div.cta {
-		color: #030303;
-		text-align: right;
-		margin-right: 5%;
-		margin-top: 60px;
-		width: 400px;
-		z-index: 2;
-		div.buttons {
-			display: flex;
-			text-align: center;
-			justify-content: flex-end;
-		}
-	}
 	img {
 		position: absolute;
 		height: 100%;
@@ -93,8 +73,10 @@ div.splash {
 		position: absolute;
 		left: 0;
 		bottom: 0;
-		height: 50%;
+		position: absolute;
+		top: 250px;
 		width: 100%;
+		height: 100%;
 		display: flex;
 		justify-content: space-between;
 
@@ -112,7 +94,11 @@ div.splash {
 	}
 }
 div.wrapper {
-	min-height: calc(100vh - 62px - 200px); // pageheight - (header + footer)
+	position: relative;
+	top: 125px;
+	padding: 5%;
+	width: 100%;
+	height: 100%;
 }
 div.footer {
 	color: #ffffff;
@@ -120,7 +106,10 @@ div.footer {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
+	font-family: 'Josefin Sans', sans-serif;
+	clear: both;
 	height: 200px;
+	width: 100%;
 	div.info {
 		display: flex;
 		flex-direction: row;

client/src/app/app.module.ts

@@ -9,6 +9,7 @@ import { PostModule } from './posts/post.module';
 import { UserModule } from './users/user.module';
 import { AuthModule } from './authentication/auth.module';
 import { SharedModule } from './shared/shared.module';
+import { HomeComponent } from './home/home.component';
 
 export function tokenGetter() {
   return localStorage.getItem("token");
@@ -16,7 +17,8 @@ export function tokenGetter() {
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    HomeComponent
   ],
   imports: [
     BrowserModule,

client/src/app/home/home.component.html

+<div class="home">
+    <div class="categoryWrapper">
+        <p>Kategorier</p>
+        <div class="whiteBox"></div>
+    </div>
+    <div class="cta">
+        <h2>Lorem Ipsum</h2>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        <div class="buttons">
+            <button (click)="navigate('/register')" class="btn">Registrer deg!</button>
+            <button (click)="navigate('/')" class="btn pink">Les mer</button>
+        </div>
+    </div>
+</div>
\ No newline at end of file

client/src/app/home/home.component.scss

+div.home {
+	position: relative;
+	width: 100%;
+	height: 600px;
+	background-size: cover;
+	display: flex;
+	justify-content: space-between;
+	overflow: hidden;
+	color: #ffffff;
+	font-family: 'Inter', sans-serif;
+	button {
+		color: #ffffff;
+		text-decoration: none;
+	}
+	div {
+		position: relative;
+	}
+	div.categoryWrapper {
+		padding: 10px;
+		margin-left: 5%;
+		background: linear-gradient(90deg, #14A35A 0%, #24e072 100%);
+		width: 40%;
+		height: 300px;
+		box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
+		p {
+            padding-left: 10px;
+            padding-bottom: 5px;
+			margin-bottom: 5px;
+            border-bottom: white solid 1px;
+            width: 105px;
+		}
+		div.whiteBox {
+			width: 100%;
+			height: 250px;
+			background-color: #ffffff;
+			box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.5);
+		}
+	}
+	div.cta {
+		color: #030303;
+		text-align: right;
+		margin-right: 5%;
+		margin-top: 60px;
+		width: 400px;
+		z-index: 2;
+		div.buttons {
+			display: flex;
+			text-align: center;
+			justify-content: flex-end;
+		}
+		button.btn {
+			background: #13D05E;
+			width: 200px;
+			margin: 10px 0 10px 10px;
+			padding: 20px;
+			box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25);
+			font-family: 'Josefin Sans', sans-serif;
+			font-size: 20px;
+			border: none;
+			cursor: pointer;
+		}
+		button.pink {
+			background: #FFA1A1;
+		}
+
+	}
+}
\ No newline at end of file

client/src/app/shared/password-input/password-input.component.spec.ts → client/src/app/home/home.component.spec.ts

 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { FormsModule } from '@angular/forms';
-import { SharedModule } from '../shared.module';
 
-import { PasswordInputComponent } from './password-input.component';
+import { HomeComponent } from './home.component';
 
-describe('PasswordInputComponent', () => {
-  let component: PasswordInputComponent;
-  let fixture: ComponentFixture<PasswordInputComponent>;
+describe('HomeComponent', () => {
+  let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ PasswordInputComponent ],
-      imports: [ SharedModule, FormsModule ]
+      declarations: [ HomeComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(PasswordInputComponent);
+    fixture = TestBed.createComponent(HomeComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

client/src/app/home/home.component.ts

+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.scss']
+})
+export class HomeComponent implements OnInit {
+
+  constructor(private router: Router){}
+
+  ngOnInit(): void {
+  }
+
+  navigate(url) {
+    this.router.navigateByUrl(url);
+  }
+
+}

client/src/app/posts/post-details/post-details.component.html

-<h2>{{post.getTitle}}</h2>
-
-<img [src]="post.getImageUrl">
-<h4>{{post.getPrice}} kr</h4>
-<p>{{post.getDescription}}</p>
-<br>
-<p>Publisert: {{post.getTimestamp}}</p>
-<p>Eier: {{post.getOwner}}</p>
-
-<div *ngIf="userId == post.getOwner">
-    <app-button text="Rediger annonse" (click)="editPost()"></app-button>
-    <app-button text="Slett annonse" (click)="deletePost()"></app-button>
+<div class="container">
+    <div class="greenBox">
+        <h2>{{post.getTitle}}</h2>
+        <div class="whiteBox">
+            <div class="pinkBox">
+                <img [src]="post.getImageUrl">
+            </div>
+
+            <div class="ownerInfo">
+                <p>Owner: {{owner.getUsername}}</p>
+                <p>E-mail: {{owner.getEmail}}</p>
+            </div>
+
+            <hr>
+            
+            <p>Pris:</p>
+            <h3>{{post.getPrice}} kr</h3>
+
+            <p id="description">{{post.getDescription}}</p>
+            <br>
+
+            <p id="timestamp">Publisert: {{post.getTimestamp}}</p>
+
+            <div *ngIf="userId == post.getOwner" class="buttonContainer">
+                <app-button class="ownerButton" text="Rediger annonse" (click)="editPost()"></app-button>
+                <app-button class="ownerButton" text="Slett annonse" (click)="deletePost()"></app-button>
+            </div>
+        </div>
+    </div>
 </div>

client/src/app/posts/post-details/post-details.component.scss

+div.container{
+    margin-top: 250px;
+    margin-bottom: 50px;
+    font-family: 'Josefin Sans', sans-serif;
+
+    div.greenBox{
+        background: linear-gradient(#24e072 0%, #14A35A 100%);
+        padding: 20px;
+        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
+        width: 66%;
+        margin: auto;
+
+        h2{
+            color: white;
+            margin-bottom: 18px;
+        }
+
+        div.whiteBox{
+            background-color: white;
+            box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.5);
+            padding: 20px;
+
+            div.pinkBox{
+                background-color: #FFA1A1;
+                padding: 15px;
+                width: 66%;
+                margin: auto;
+                box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
+
+                img{
+                    width: 100%;
+                }
+            }
+
+            div.ownerInfo{
+                width: 300px;
+                margin: auto;
+                margin-top: 20px;
+            }
+
+            div.buttonContainer{
+                margin-top: 30px;
+                display: grid;
+                gap: 15px;
+            }
+
+            hr{
+				margin: 20px;
+			}
+
+            p{
+				font-size: 16pt;
+			}
+
+            h3{
+                font-size: 30pt;
+                margin-left: 30px;
+            }
+
+            p#description{
+                margin-top: 30px;
+            }
+
+            p#timestamp{
+                margin-top: 30px;
+                font-size: 14pt;
+            }
+        }
+    }
+}
\ No newline at end of file

client/src/app/posts/post-details/post-details.component.ts

@@ -3,6 +3,8 @@ import { Post } from 'src/app/models/post.model';
 import { PostService } from '../post.service';
 import { ActivatedRoute, Router } from '@angular/router'
 import { AuthService } from 'src/app/authentication/auth.service';
+import { User } from 'src/app/models/user.model';
+import { UserService } from 'src/app/users/user.service';
 
 @Component({
   selector: 'app-post-details',
@@ -12,11 +14,13 @@ import { AuthService } from 'src/app/authentication/auth.service';
 export class PostDetailsComponent implements OnInit {
 
   post: Post = new Post();
+  owner: User = new User();
   userId: number = 0;
 
-  constructor(private postService: PostService, private activatedRoute: ActivatedRoute, private router: Router, private authService: AuthService) { }
+  constructor(private postService: PostService, private activatedRoute: ActivatedRoute, private router: Router,
+              private authService: AuthService, private userService: UserService) { }
 
-  ngOnInit(): void {
+  ngOnInit() {
     // Gets ID from current user
     this.userId = this.authService.getCurrentUser(false).getUserId;
 
@@ -26,6 +30,13 @@ export class PostDetailsComponent implements OnInit {
     // Gets Post with id from database
     this.postService.getPost(id).then(post => {
       this.post = post;
+      
+      // Gets Post owner from database
+      this.userService.getUser(this.post.getOwner).then(user => {
+        this.owner = user;
+      }).catch(error => {
+        console.log(error);
+      });
     }).catch(error => {
       console.log(error);
     });

client/src/app/posts/post-form/post-form.component.html

-<div class="postform">
-	<h3>{{id ? 'Rediger annonse' : 'Lag annonse'}}</h3>
+<div class="title">
+	<h2>{{id ? 'REDIGER ANNONSE' : 'OPPRETT NY ANNONSE'}}</h2>
+</div>
 
-	<app-text-input [(inputModel)]="title" label="Tittel" (blur)="checkForm()"></app-text-input>
+<div class="postform">
+	<div class="greenBox">
+		<app-input [(inputModel)]="title" type="text" label="Annonsens tittel" (blur)="checkForm()" [dark]="false"></app-input>
 
-	<app-text-input [(inputModel)]="description" label="Beskrivelse" (blur)="checkForm()"></app-text-input>
+		<div class="whiteBox">
+			<app-text-area-input [(inputModel)]="description" label="Beskrivelse" (blur)="checkForm()"></app-text-area-input>
 
-	<app-number-input [(inputModel)]="price" label="Pris" (blur)="checkForm()"></app-number-input>
+			<div class="horizontalGrid">
+				<app-input [(inputModel)]="price" type="number" label="Pris" (blur)="checkForm()"></app-input>
 
-	<app-select [(inputModel)]="categoryid" (change)="checkForm()" label="Kategori">
-		<option value="0" [selected]="categoryid == 0" hidden>Velg kategori</option>
-		<option *ngFor="let category of categories" [value]="category.getCategoryId" [selected]="categoryid == category.getCategoryId">{{category.getName}}</option>
-	</app-select>
+				<app-select [(inputModel)]="categoryid" (change)="checkForm()">
+					<option value="0" [selected]="categoryid == 0" hidden>Velg kategori . . .</option>
+					<option *ngFor="let category of categories" [value]="category.getCategoryId" [selected]="categoryid == category.getCategoryId">{{category.getName}}</option>
+				</app-select>
+			</div>
 
-	<app-text-input [(inputModel)]="imageUrl" label="Bilde URL" (blur)="showImage(imageUrl)"></app-text-input>
-	<img [src]="displayImageUrl" (error)="showImage('https://i.stack.imgur.com/y9DpT.jpg')">
+			<app-input [(inputModel)]="imageUrl" type="text" label="Bilde URL" (blur)="showImage(imageUrl)"></app-input>
+			<img [src]="displayImageUrl" (error)="showImage('https://i.stack.imgur.com/y9DpT.jpg')">
 
-	<p>{{statusMessage}}</p>
+			<p>{{statusMessage}}</p>
 
-	<app-button (click)="publishPost()" text="Publiser"></app-button>
-	<app-button *ngIf="id" (click)="deletePost()" text="Slett annonse"></app-button>
+			<app-button (click)="publishPost()" text="Publiser"></app-button>
+			<app-button *ngIf="id" (click)="deletePost()" text="Slett annonse"></app-button>
+		</div>
+	</div>
 </div>

client/src/app/posts/post-form/post-form.component.scss

+div.title {
+    position: absolute;
+    top: 50px;
+    left: 50%;
+	width: 500px;
+	text-align: center;
+    transform: translateX(-50%);
+    font-family: 'Inter', sans-serif;
+    font-size: 2em;
+    text-shadow: -2px 2px 3px #000000;
+    color: white;
+    h2 {
+        letter-spacing: 10px;
+    }
+}
+
 div.postform {
-	display: flex;
-	flex-direction: column;
+	margin-bottom: 100px;
+	margin-top: 250px;
+	font-family: 'Josefin Sans', sans-serif;
+
+	div.greenBox{
+		background: linear-gradient(#24e072 0%, #14A35A 100%);
+		width: 50%;
+		margin: auto;
+		padding: 20px;
+		box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
+
+		div.whiteBox{
+			margin-top: 20px;
+			background-color: white;
+			padding: 10px;
+			padding-top: 20px;
+			box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.5);
+			display: grid;
+			grid-template-columns: 1fr;
+			gap: 30px;
+
+			div.horizontalGrid{
+				display: grid;
+				grid-template-columns: 1fr 1fr;
+				gap: 20px;
+			}
+
+			img{
+				width: 100%;
+			}
+		}
+	}
 }

client/src/app/posts/post-list/post-list.component.html

-<div>
-	<app-select [(inputModel)]="selectedCategory" (change)="filterCategory()">
-		<option value="0" selected>Ingen kategori</option>
-		<option *ngFor="let category of categories" [value]="category.getCategoryId">{{category.getName}}</option>
-	</app-select>
+<div class="title">
+	<h2>ANNONSER</h2>
+</div>
+
+<div class="container">
+	<div class="filterContainer">
+		<div class="whiteBox">
+			<app-select id="categorySelect" [(inputModel)]="selectedCategory" (change)="filterCategory()">
+				<option value="0" selected>Velg kategori . . .</option>
+				<option *ngFor="let category of categories" [value]="category.getCategoryId">{{category.getName}}</option>
+			</app-select>
+		</div>
+	</div>
 
-    <app-post-thumbnail *ngFor="let post of allPosts" [post]="post"></app-post-thumbnail>
+	<div class="postContainer">
+		<app-post-thumbnail *ngFor="let post of allPosts" [post]="post"></app-post-thumbnail>
+	</div>
 </div>

client/src/app/posts/post-list/post-list.component.scss

+div.title {
+    position: absolute;
+    top: 50px;
+    left: 50%;
+    transform: translateX(-50%);
+    font-family: 'Inter', sans-serif;
+    font-size: 2em;
+    text-shadow: -2px 2px 3px #000000;
+    color: white;
+    h2 {
+        letter-spacing: 10px;
+    }
+}
+
+div.container{
+    margin-bottom: 100px;
+    margin-top: 250px;
+    display: grid;
+    grid-template-columns: 400px 3fr;
+    gap: 25px;
+
+    div.filterContainer{
+        background: linear-gradient(#24e072 0%, #14A35A 100%);
+        height: 250px;
+        padding: 15px;
+        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5); 
+        
+        div.whiteBox{
+            background-color: #fff;
+            padding: 20px;
+            height: 100%;
+            box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.5); 
+        }
+    }
+
+    div.postContainer{
+        width: 100%;
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        gap: 30px;
+    }
+}
\ No newline at end of file

client/src/app/posts/post-thumbnail/post-thumbnail.component.html

-<div class="postthumb">
-	<a href="javascript:void(0)" (click)="goToPost()">{{post.getTitle}}</a>
+<div class="postthumb" (click)="goToPost()">
+	<img [src]="post.getImageUrl">
+
+	<p class="price">{{post.getPrice}} kr</p>
+	<p class="title">{{post.getTitle}}</p>
 </div>

client/src/app/posts/post-thumbnail/post-thumbnail.component.scss

 div.postthumb {
 	padding: 10px;
-	margin: 10px;
-	background-color: rgba(0,0,0,.1);
+	background-color: #FFA1A1;
+	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
+	font-family: 'Josefin Sans', sans-serif;
+	width: 384px;
+	cursor: pointer;
+
+	img{
+		object-fit: cover;
+		width: 364px;
+		height: 364px;
+		border: 4px #e98686 solid;
+	}
+
+	p.price{
+		position: relative;
+		top: -31px;
+		left: 15px;
+		text-shadow: -1px 1px 4px #000000;
+    	color: white;
+		font-size: 16pt;
+	}
+
+	p.title{
+		margin-top: -10px;
+		font-size: 18pt;
+	}
 }

client/src/app/shared/button/button.component.scss

 button{
-    padding: 5px;
+    padding: 10px;
+    width: 100%;
+    font-family: 'Josefin Sans', sans-serif;
+    font-size: 16pt;
+    border: none;
+    background-color: #FFA1A1;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
+    outline: none;
 }
-:host.btn {
-    margin: 10px 0;
-    & > button {
-        color: #fff;
-        background: #13D05E;
-        min-width: 200px;
-        width: 100%;
-        padding: 10px;
-        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25);
-        font-family: 'Josefin Sans', sans-serif;
-        font-size: 20px;
-        border: none;
-        cursor: pointer;
-    }
+
+button:hover{
+    background-color: #e98686;
 }
-:host.btn.pink > button {
-    background: #FFA1A1;
+
+button:active{
+    background-color: #e07d7d;
 }
\ No newline at end of file

client/src/app/shared/text-input/text-input.component.html → client/src/app/shared/input/input.component.html

-<label>
+<label [class]="dark?'dark':'light'">
     {{label}}
 
-    <input  
-    type="text"
+    <input
+    [class]="dark?'dark':'light'"
+    [type]="isVisible ? 'text' : type"
     [placeholder]="placeholder"
     [(ngModel)]="inputModel" 
     (ngModelChange)="inputModelChange.emit(inputModel)" 
     (change)="change.emit($event)"
     (focus)="focus.emit($event)"
     (blur)="blur.emit($event)">
+    <i *ngIf="type == 'password'" class="material-icons" (click)="togglePasswordVisible()">{{toggleText}}</i>
 </label>
\ No newline at end of file

client/src/app/shared/text-input/text-input.component.scss → client/src/app/shared/input/input.component.scss

+label.light {
+    color: white;
+}
+
+label.dark {
+    color: black;
+}
+
 label {
+    position: relative;
     font-family: 'Josefin Sans', sans-serif;
     margin: 10px 0 5px 0;
     display: flex;
@@ -8,11 +17,45 @@ label {
         padding: 10px 0 5px 0;
         font-family: 'Josefin Sans', sans-serif;
         border: none;
-        border-bottom: 2px solid #797979;
         font-size: 1rem;
+        padding-right: 50px;
         outline: none;
+        background-color: rgba(0, 0, 0, 0);
+    }
+
+    input.light{
+        border-bottom: 2px solid #fff;
+        color: white;
+        &:focus {
+            border-bottom: 2px solid #444;
+        }
+    }
+    
+    input.dark{
+        border-bottom: 2px solid #797979;
+        color: black;
         &:focus {
             border-bottom: 2px solid #14A35A;
         }
     }
+
+    .material-icons {
+        position: absolute;
+        right: 2.5px;
+        bottom: 7.5px;
+        cursor: pointer;
+    }
+}
+
+/* Remove arrows from number input */
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type=number] {
+  -moz-appearance: textfield;
 }
\ No newline at end of file