added login header component & design register

src/app/components/login/header/header.component.html

@@ -0,0 +1,7 @@
+<img class="logo" src="./../../../assets/img/login/logo.svg" alt="" />
+@if (signUpBtn) {
+<div class="register">
+  <p>Not a Join user?</p>
+  <button routerLink="/register">Sign up</button>
+</div>
+}

src/app/components/login/header/header.component.scss

@@ -0,0 +1,68 @@
+.logo {
+  position: absolute;
+  left: 57px;
+  top: 60px;
+  height: 100px;
+  width: 122px;
+}
+
+.register {
+  position: absolute;
+  top: 67px;
+  right: 100px;
+  display: inline-flex;
+  align-items: center;
+  p {
+    display: flex;
+    align-items: center;
+    padding-right: 32px;
+    font-size: 16px;
+    font-weight: 400;
+  }
+  button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--dark-blue);
+    color: var(--white);
+    width: 91px;
+    height: 49px;
+    border-radius: 8px;
+    font-size: 16px;
+    font-weight: 700;
+    border: 0px;
+    transition: 125ms ease-in-out;
+    cursor: pointer;
+    &:hover {
+      box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
+      background-color: var(--light-blue);
+    }
+  }
+}
+
+/*------------- RESPONSIVE -------------*/
+
+@media (max-height: 820px) {
+  .logo {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 650px) {
+  .register {
+    top: unset;
+    right: unset;
+    left: 0;
+    bottom: 99px;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+  }
+
+  .logo {
+    left: 38px;
+    top: 37px;
+    height: 64px;
+    width: 78px;
+  }
+}

src/app/components/login/header/header.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeaderComponent } from './header.component';
+
+describe('HeaderComponent', () => {
+  let component: HeaderComponent;
+  let fixture: ComponentFixture<HeaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HeaderComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(HeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/login/header/header.component.ts

@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+@Component({
+  selector: 'app-header',
+  standalone: true,
+  imports: [RouterModule],
+  templateUrl: './header.component.html',
+  styleUrl: './header.component.scss',
+})
+export class HeaderComponent {
+  @Input() signUpBtn: boolean = false;
+}

src/app/components/login/login.component.html

@@ -1,9 +1,5 @@
 <section>
-  <img class="logo" src="./../../../assets/img/login/logo.svg" alt="" />
+  <app-header [signUpBtn]="true"></app-header>
-  <div class="register">
-    <p>Not a Join user?</p>
-    <button routerLink="register">Sign up</button>
-  </div>
   <form
     id="form"
     #taskForm="ngForm"

src/app/components/login/login.component.scss

@@ -3,48 +3,6 @@ section {
   height: 100vh;
 }
 
-.logo {
-  position: absolute;
-  left: 57px;
-  top: 60px;
-  height: 100px;
-  width: 122px;
-}
-
-.register {
-  position: absolute;
-  top: 67px;
-  right: 100px;
-  display: inline-flex;
-  align-items: center;
-  p {
-    display: flex;
-    align-items: center;
-    padding-right: 32px;
-    font-size: 16px;
-    font-weight: 400;
-  }
-  button {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: var(--dark-blue);
-    color: var(--white);
-    width: 91px;
-    height: 49px;
-    border-radius: 8px;
-    font-size: 16px;
-    font-weight: 700;
-    border: 0px;
-    transition: 125ms ease-in-out;
-    cursor: pointer;
-    &:hover {
-      box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
-      background-color: var(--light-blue);
-    }
-  }
-}
-
 // LOGIN
 
 .content {
@@ -126,15 +84,6 @@ section {
 
 /*------------- RESPONSIVE -------------*/
 
-@media (max-height: 820px) {
-  .content {
-    top: 40%;
-  }
-  .logo {
-    display: none;
-  }
-}
-
 @media screen and (max-width: 650px) {
   .content {
     width: 322px;
@@ -144,23 +93,6 @@ section {
       font-size: 47px;
     }
   }
-
-  .register {
-    top: unset;
-    right: unset;
-    left: 0;
-    bottom: 99px;
-    display: flex;
-    justify-content: center;
-    width: 100%;
-  }
-
-  .logo {
-    left: 38px;
-    top: 37px;
-    height: 64px;
-    width: 78px;
-  }
 }
 
 @media (max-height: 550px) {

src/app/components/login/login.component.ts

@@ -7,11 +7,18 @@ import { Router } from '@angular/router';
 import { LoginService } from '../../services/login.service';
 import { SharedService } from '../../services/shared.service';
 import { FooterComponent } from './footer/footer.component';
+import { HeaderComponent } from './header/header.component';
 
 @Component({
   selector: 'app-login',
   standalone: true,
-  imports: [FormsModule, CommonModule, FormBtnComponent, FooterComponent],
+  imports: [
+    FormsModule,
+    CommonModule,
+    FormBtnComponent,
+    FooterComponent,
+    HeaderComponent,
+  ],
   templateUrl: './login.component.html',
   styleUrl: './login.component.scss',
 })

src/app/components/login/register/register.component.html

@@ -1 +1,4 @@
-<p>register works!</p>
+<section>
+  <app-header [signUpBtn]="false"></app-header>
+  <app-footer></app-footer>
+</section>

src/app/components/login/register/register.component.scss

@@ -0,0 +1,12 @@
+section {
+  width: 100vw;
+  height: 100vh;
+}
+
+.logo {
+  position: absolute;
+  left: 57px;
+  top: 60px;
+  height: 100px;
+  width: 122px;
+}

src/app/components/login/register/register.component.ts

@@ -1,12 +1,12 @@
 import { Component } from '@angular/core';
+import { HeaderComponent } from '../header/header.component';
+import { FooterComponent } from '../footer/footer.component';
 
 @Component({
   selector: 'app-register',
   standalone: true,
-  imports: [],
+  imports: [HeaderComponent, FooterComponent],
   templateUrl: './register.component.html',
-  styleUrl: './register.component.scss'
+  styleUrl: './register.component.scss',
 })
-export class RegisterComponent {
+export class RegisterComponent {}
-
-}