added & design small btn component

frontend/src/app/components/auth/auth.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { FormsModule, NgForm } from '@angular/forms';
-import { BtnLargeComponent } from '../../shared/components/btn-large/btn-large.component';
+import { BtnLargeComponent } from '../../shared/components/buttons/btn-large/btn-large.component';
 import { Router } from '@angular/router';
 import { CommonModule } from '@angular/common';
 import { ErrorService } from '../../services/error.service';

frontend/src/app/components/auth/forgot-password/forgot-password.component.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
-import { BtnLargeComponent } from '../../../shared/components/btn-large/btn-large.component';
+import { BtnLargeComponent } from '../../../shared/components/buttons/btn-large/btn-large.component';
 import { FormsModule, NgForm } from '@angular/forms';
 import { ActivatedRoute, RouterLink } from '@angular/router';
 import { AuthService } from '../../../services/auth.service';

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

@@ -1,5 +1,5 @@
 import { Component, ViewChild } from '@angular/core';
-import { BtnLargeComponent } from '../../../shared/components/btn-large/btn-large.component';
+import { BtnLargeComponent } from '../../../shared/components/buttons/btn-large/btn-large.component';
 import { FormsModule, NgForm } from '@angular/forms';
 import { Router, RouterLink } from '@angular/router';
 import { AuthService } from '../../../services/auth.service';

frontend/src/app/components/auth/register/register.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { BtnLargeComponent } from '../../../shared/components/btn-large/btn-large.component';
+import { BtnLargeComponent } from '../../../shared/components/buttons/btn-large/btn-large.component';
 import { FormsModule, NgForm } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { CommonModule } from '@angular/common';

frontend/src/app/components/home/browse/browse.component.html

@@ -31,4 +31,7 @@
     <h2>Unfortunately there are no films available in the database.</h2>
   </div>
   }
+  <div class="add-button">
+    <app-btn-small [imgPath]="'add'" (click)="addNewMovie()"></app-btn-small>
+  </div>
 </section>

frontend/src/app/components/home/browse/browse.component.scss

@@ -45,6 +45,12 @@ section {
   transition: opacity 300ms ease-in-out;
 }
 
+.add-button {
+  position: absolute;
+  bottom: 24px;
+  right: 24px;
+}
+
 .back-button {
   cursor: pointer;
   background: none;

frontend/src/app/components/home/browse/browse.component.ts

@@ -7,6 +7,8 @@ import { MovieService } from '../../../services/movie.service';
 import { Observable, Subscription } from 'rxjs';
 import { CommonModule } from '@angular/common';
 import { VideoPlayerComponent } from './vjs-player/vjs-player.component';
+import { BtnLargeComponent } from '../../../shared/components/buttons/btn-large/btn-large.component';
+import { BtnSmallComponent } from '../../../shared/components/buttons/btn-small/btn-small.component';
 
 @Component({
   selector: 'app-browse',
@@ -17,6 +19,7 @@ import { VideoPlayerComponent } from './vjs-player/vjs-player.component';
     HeroBannerComponent,
     CategoriesComponent,
     VideoPlayerComponent,
+    BtnSmallComponent,
   ],
   templateUrl: './browse.component.html',
   styleUrl: './browse.component.scss',
@@ -61,4 +64,6 @@ export class BrowseComponent implements OnInit {
       this.currentMovie.push(this.movies[index]);
     }
   }
+
+  addNewMovie() {}
 }

frontend/src/app/components/home/browse/hero-banner/hero-banner.component.ts

@@ -6,7 +6,7 @@ import {
   Input,
   Output,
 } from '@angular/core';
-import { BtnLargeComponent } from '../../../../shared/components/btn-large/btn-large.component';
+import { BtnLargeComponent } from '../../../../shared/components/buttons/btn-large/btn-large.component';
 import { MovieService } from '../../../../services/movie.service';
 import { environment } from '../../../../environments/environment';
 

frontend/src/app/shared/components/buttons/btn-large/btn-large.component.scss

@@ -1,4 +1,4 @@
-@import "./../../../../assets/style/colors.scss";
+@import "./../../../../../assets/style/colors.scss";
 
 .btn {
   display: flex;

frontend/src/app/shared/components/buttons/btn-small/btn-small.component.html

@@ -0,0 +1,7 @@
+<button class="btn" [disabled]="disabled">
+  <img
+    src="./../../../../assets/img/{{ imgPath }}.svg"
+    alt="{{ imgPath }}"
+    class="icon"
+  />
+</button>

frontend/src/app/shared/components/buttons/btn-small/btn-small.component.scss

@@ -0,0 +1,34 @@
+@import "./../../../../../assets/style/colors.scss";
+
+.btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
+  border-radius: 50%;
+  background-color: blue;
+  border: 1px solid blue;
+  transition: 300ms ease-in-out;
+  cursor: pointer;
+  &:not(:disabled):hover {
+    background-color: white;
+    border: 1px solid blue;
+    .icon {
+      transition: 300ms ease-in-out;
+      filter: brightness(0) saturate(100%) invert(26%) sepia(77%)
+        saturate(2342%) hue-rotate(228deg) brightness(83%) contrast(115%);
+    }
+  }
+  &:disabled {
+    background-color: lightblue;
+    color: darken(white, 10%);
+    border: 1px solid lightblue;
+    cursor: default;
+  }
+  .icon {
+    height: 32px;
+    width: auto;
+  }
+}

frontend/src/app/shared/components/buttons/btn-small/btn-small.component.spec.ts

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

frontend/src/app/shared/components/buttons/btn-small/btn-small.component.ts

@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-btn-small',
+  standalone: true,
+  imports: [],
+  templateUrl: './btn-small.component.html',
+  styleUrl: './btn-small.component.scss',
+})
+export class BtnSmallComponent {
+  @Input() imgPath: string = '';
+  @Input() disabled: boolean = false;
+}

frontend/src/app/shared/components/header/header.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, input } from '@angular/core';
-import { BtnLargeComponent } from '../btn-large/btn-large.component';
+import { BtnLargeComponent } from '../buttons/btn-large/btn-large.component';
 import { Router, RouterLink } from '@angular/router';
 
 @Component({

frontend/src/assets/img/add.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"/></svg>