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

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

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

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

-import { Component, EventEmitter, Input, Output, ViewEncapsulation  } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 @Component({
-  selector: 'app-password-input',
-  templateUrl: './password-input.component.html',
-  styleUrls: ['./password-input.component.scss'],
-  encapsulation: ViewEncapsulation.None
+  selector: 'app-input',
+  templateUrl: './input.component.html',
+  styleUrls: ['./input.component.scss']
 })
-export class PasswordInputComponent {
-
-  isVisible: boolean = false;
-  toggleText: string = "visibility";
+export class InputComponent {
+  
+  @Input()
+  dark: boolean = true;
 
   @Input()
   label: string = "";
 
   @Input()
-  inputModel: string;
+  type: string = "text";
+
+  @Input()
+  inputModel: any;
 
   @Input()
   placeholder: string = "";
 
   @Output()
-  inputModelChange = new EventEmitter<string>();
+  inputModelChange = new EventEmitter<any>();
 
   @Output()
   change = new EventEmitter();
@@ -32,8 +34,11 @@ export class PasswordInputComponent {
   @Output()
   blur = new EventEmitter();
 
-  constructor() { }
+  isVisible: boolean = false;
+  toggleText: string = "visibility_off";
 
+  constructor() { }
+  
   togglePasswordVisible() {
     this.isVisible = !this.isVisible;
     this.toggleText = this.isVisible ? "visibility" : "visibility_off";

client/src/app/shared/number-input/number-input.component.scss

-input{
-    padding: 5px;
-}
\ No newline at end of file

client/src/app/shared/number-input/number-input.component.ts

-import { Component, EventEmitter, Input, Output } from '@angular/core';
-
-@Component({
-  selector: 'app-number-input',
-  templateUrl: './number-input.component.html',
-  styleUrls: ['./number-input.component.scss']
-})
-export class NumberInputComponent {
-
-  @Input()
-  label: string = "";
-
-  @Input()
-  inputModel: number;
-
-  @Input()
-  placeholder: string = "";
-
-  @Output()
-  inputModelChange = new EventEmitter<number>();
-
-  @Output()
-  change = new EventEmitter();
-
-  @Output()
-  focus = new EventEmitter();
-
-  @Output()
-  blur = new EventEmitter();
-
-  constructor() { }
-
-}

client/src/app/shared/password-input/password-input.component.html

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

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

-select{
-    padding: 5px;
+select {
+    padding: 15px 10px 15px 10px;
+    font-family: 'Josefin Sans', sans-serif;
+    font-size: 20px;
+    width: 100%;
+    background-color: #FFA1A1;
+    border: none;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
 }
\ No newline at end of file

client/src/app/shared/shared.module.ts

 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { TextInputComponent } from './text-input/text-input.component';
-import { PasswordInputComponent } from './password-input/password-input.component';
-import { NumberInputComponent } from './number-input/number-input.component';
+import { InputComponent } from './input/input.component';
 import { ButtonComponent } from './button/button.component';
 import { SelectComponent } from './select/select.component';
+import { TextAreaInputComponent } from './text-area-input/text-area-input.component';
 
 
 @NgModule({
   declarations: [
-    TextInputComponent,
-    NumberInputComponent,
+    InputComponent,
+    TextAreaInputComponent,
     ButtonComponent,
-    SelectComponent,
-    PasswordInputComponent
+    SelectComponent
   ],
   exports: [
-    TextInputComponent,
-    NumberInputComponent,
-    PasswordInputComponent,
+    InputComponent,
+    TextAreaInputComponent,
     ButtonComponent,
     SelectComponent
   ],

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

-<label>
+<label [class]="dark?'dark':'light'">
     {{label}}
 
-    <input  
-    type="number"
+    <textarea
+    [class]="dark?'dark':'light'"
     [placeholder]="placeholder"
     [(ngModel)]="inputModel" 
     (ngModelChange)="inputModelChange.emit(inputModel)" 
     (change)="change.emit($event)"
     (focus)="focus.emit($event)"
     (blur)="blur.emit($event)">
+    </textarea>
 </label>
\ No newline at end of file

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

+label.light {
+    color: white;
+}
+
+label.dark {
+    color: black;
+}
+
 label {
     position: relative;
     font-family: 'Josefin Sans', sans-serif;
@@ -5,33 +13,30 @@ label {
     display: flex;
     flex-direction: column;
     font-size: 1.3rem;
-    input{
+    textarea{
         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);
+        height: 150px;
+    }
+
+    textarea.light{
+        border-bottom: 2px solid #fff;
+        color: white;
         &:focus {
-            border-bottom: 2px solid #14A35A;
+            border-bottom: 2px solid #444;
         }
     }
-    .material-icons {
-        position: absolute;
-        right: 2.5px;
-        bottom: 7.5px;
-    }
-    .togglePasswordVisible {
-        position: absolute;
-        bottom: 5px;
-        right: 0;
-        button {
-            background: transparent;
-            border: none;
-            width: 30px;
-            height: 30px;
-            cursor: pointer;
+    
+    textarea.dark{
+        border-bottom: 2px solid #797979;
+        color: black;
+        &:focus {
+            border-bottom: 2px solid #14A35A;
         }
     }
 }
\ No newline at end of file

client/src/app/shared/text-input/text-input.component.ts → client/src/app/shared/text-area-input/text-area-input.component.ts

 import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 @Component({
-  selector: 'app-text-input',
-  templateUrl: './text-input.component.html',
-  styleUrls: ['./text-input.component.scss']
+  selector: 'app-text-area-input',
+  templateUrl: './text-area-input.component.html',
+  styleUrls: ['./text-area-input.component.scss']
 })
-export class TextInputComponent {
+export class TextAreaInputComponent {
   
+  @Input()
+  dark: boolean = true;
+
   @Input()
   label: string = "";
 

client/src/app/users/user-guest-profile/user-guest-profile.component.html

-<div class="headerSplash">
-	<img src="/assets/img/waveBig.svg" alt="splash background">
-	<div class="title">
-		<h1>SELLPOINT</h1>
-        <h2>{{user.getUsername}}</h2>
-	</div>
-</div>
 <div class="profile">
     <div class="profile_info">
         <div class="titleWrapper">

client/src/app/users/user-guest-profile/user-guest-profile.component.scss

-.headerSplash {
-    position: relative;
-    width: 100%;
-    color: #fff;
-    img {
-        width: 100%;
-    }
-    div.title {
-        text-align: center;
-		position: absolute;
-		top: 50px;
-		left: 50%;
-		transform: translateX(-50%);
-		font-family: 'Inter', sans-serif;
-		font-size: 2em;
-		text-shadow: -2px 2px 3px #000000;
-		h1 {
-			letter-spacing: 10px;
-		}
-        h2 {
-            font-size: 1.5em;
-            letter-spacing: 15px;
-        }
-	}
-    &::after {
-        content: "";
-        position: absolute;
-        width: 100%;
-        height: 10px;
-        left: 0;
-        bottom: 0;
-        background: #fff;
-    }
-}
 :host > .profile {
+    margin-top: 300px;
     display:flex;
     justify-content: center;
     padding: 0 5% 5% 5%;

client/src/app/users/user-login-form/user-login-form.component.html

-<div class="headerSplash">
-	<img src="/assets/img/waveSmall.svg" alt="splash background">
-	<div class="title">
-		<h1>SELLPOINT</h1>
-	</div>
-</div>
 <div class="loginForm">
 	<div class="cardWrapper">
 		<h3>Logg inn på kontoen din</h3>
 		<div>
-			<app-text-input [(inputModel)]="username" label="Brukernavn" (blur)="checkForm()"></app-text-input>
-			<app-password-input [(inputModel)]="password" label="Passord" (blur)="checkForm()"></app-password-input>
+			<app-input [(inputModel)]="username" label="Brukernavn" (blur)="checkForm()"></app-input>
+			<app-input type="password" [(inputModel)]="password" label="Passord" (blur)="checkForm()"></app-input>
 			<p class="status">{{statusMessage}}</p>
 			<app-button (click)="loginUser()" text="Logg inn" class="btn pink"></app-button>
 			<div class="other">

client/src/app/users/user-login-form/user-login-form.component.scss

-.headerSplash {
-    position: relative;
-    width: 100%;
-    color: #fff;
-    img {
-        width: 100%;
-    }
-    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;
-		h1 {
-			letter-spacing: 10px;
-		}
-	}
-    &::after {
-        content: "";
-        position: absolute;
-        width: 100%;
-        height: 10px;
-        left: 0;
-        bottom: 0;
-        background: #fff;
-    }
-}
 :host > .loginForm {
     padding: 5%;
     display:flex;
@@ -52,6 +23,7 @@ div.cardWrapper > div {
     color: #000;
     display: flex;
     flex-direction: column;
+    gap: 10px;
     background-color: #fff;
     padding: 20px 10px;
 }

client/src/app/users/user-profile/user-profile.component.html

-<div class="headerSplash">
-	<img src="/assets/img/waveBig.svg" alt="splash background">
-	<div class="title">
-		<h1>SELLPOINT</h1>
-        <h2>Min profil</h2>
-	</div>
-</div>
 <div class="profile">
     <div class="profile_info">
         <div class="titleWrapper">

client/src/app/users/user-profile/user-profile.component.scss

-.headerSplash {
-    position: relative;
-    width: 100%;
-    color: #fff;
-    img {
-        width: 100%;
-    }
-    div.title {
-        text-align: center;
-		position: absolute;
-		top: 50px;
-		left: 50%;
-		transform: translateX(-50%);
-		font-family: 'Inter', sans-serif;
-		font-size: 2em;
-		text-shadow: -2px 2px 3px #000000;
-		h1 {
-			letter-spacing: 10px;
-		}
-        h2 {
-            font-size: 1.5em;
-            letter-spacing: 15px;
-        }
-	}
-    &::after {
-        content: "";
-        position: absolute;
-        width: 100%;
-        height: 10px;
-        left: 0;
-        bottom: 0;
-        background: #fff;
-    }
-}
 :host > .profile {
+    margin-top: 200px;
     display:flex;
     justify-content: center;
     padding: 0 5% 5% 5%;

client/src/app/users/user-registration-form/user-registration-form.component.html

-<div class="headerSplash">
-	<img src="/assets/img/waveSmall.svg" alt="splash background">
-	<div class="title">
-		<h1>SELLPOINT</h1>
-	</div>
-</div>
 <div class="registrationForm">
 	<div class="cardWrapper">
 		<h3>Registrer din profil</h3>
 		<div>
 			<div class="split">
-				<app-text-input class="splittedInput" [(inputModel)]="firstname" label="Fornavn" (blur)="checkForm()"></app-text-input>
-				<app-text-input class="splittedInput" [(inputModel)]="lastname" label="Etternavn" (blur)="checkForm()"></app-text-input>
+				<app-input class="splittedInput" [(inputModel)]="firstname" label="Fornavn" (blur)="checkForm()"></app-input>
+				<app-input class="splittedInput" [(inputModel)]="lastname" label="Etternavn" (blur)="checkForm()"></app-input>
 			</div>
-			<app-text-input [(inputModel)]="username" label="Brukernavn" (blur)="checkForm()"></app-text-input>
-			<app-text-input [(inputModel)]="email" label="Epost" (blur)="checkForm()"></app-text-input>
-			<app-text-input [(inputModel)]="phone_number" label="Mobilnummer" (blur)="checkForm()"></app-text-input>
-			<app-password-input [(inputModel)]="password" label="Passord" (blur)="checkForm()"></app-password-input>
-			<app-password-input [(inputModel)]="confirm_password" label="Bekreft passord" (blur)="checkForm()"></app-password-input>
+			<app-input [(inputModel)]="username" label="Brukernavn" (blur)="checkForm()"></app-input>
+			<app-input [(inputModel)]="email" label="Epost" (blur)="checkForm()"></app-input>
+			<app-input [(inputModel)]="phone_number" label="Mobilnummer" (blur)="checkForm()"></app-input>
+			<app-input [(inputModel)]="password" type="password" label="Passord" (blur)="checkForm()"></app-input>
+			<app-input [(inputModel)]="confirm_password" type="password" label="Bekreft passord" (blur)="checkForm()"></app-input>
 			<p class="status">{{statusMessage}}</p>
 			<app-button (click)="registerUser()" text="Registrer profil" class="btn pink"></app-button>
 		</div>

client/src/app/users/user-registration-form/user-registration-form.component.scss

-.headerSplash {
-    position: relative;
-    width: 100%;
-    color: #fff;
-    img {
-        width: 100%;
-    }
-    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;
-		h1 {
-			letter-spacing: 10px;
-		}
-	}
-    &::after {
-        content: "";
-        position: absolute;
-        width: 100%;
-        height: 10px;
-        left: 0;
-        bottom: 0;
-        background: #fff;
-    }
-}
 :host > .registrationForm {
     padding: 5%;
     display:flex;
@@ -53,6 +24,7 @@ div.cardWrapper > div {
     display: flex;
     flex-direction: column;
     background-color: #fff;
+    gap: 10px;
     padding: 20px 10px;
     .split {
         display: flex;