added close btn

frontend/src/app/components/home/browse/upload-movie/upload-movie.component.html

@@ -1,7 +1,15 @@
 <div class="overlay" (click)="uploadMovieOverview()">
   <div class="center" (click)="stopPropagation($event)">
     <div class="content">
-      <div class="headline">Upload Movie</div>
+      <div class="headline">
+        Upload Movie
+        <app-btn-small
+          [imgPath]="'close'"
+          [btnRadius]="'32px'"
+          [imgRadius]="'24px'"
+          (click)="uploadMovieOverview()"
+        ></app-btn-small>
+      </div>
       <form
         #movieForm="ngForm"
         (ngSubmit)="onSubmit(movieForm)"

frontend/src/app/components/home/browse/upload-movie/upload-movie.component.scss

@@ -3,9 +3,22 @@
 @import "./../../../../../assets/style/auth-layout.scss";
 
 .center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   text-align: center;
 }
 
+.content {
+  position: relative;
+}
+
+app-btn-small {
+  position: absolute;
+  top: 24px;
+  right: 24px;
+}
+
 // Overlay
 
 .overlay {

frontend/src/app/components/home/browse/upload-movie/upload-movie.component.ts

@@ -5,6 +5,7 @@ import { ErrorService } from '../../../../services/error.service';
 import { BtnLargeComponent } from '../../../../shared/components/buttons/btn-large/btn-large.component';
 import { MovieService } from '../../../../services/movie.service';
 import { LoadingDialogComponent } from '../../../../shared/components/loading-dialog/loading-dialog.component';
+import { BtnSmallComponent } from '../../../../shared/components/buttons/btn-small/btn-small.component';
 
 @Component({
   selector: 'app-upload-movie',
@@ -14,6 +15,7 @@ import { LoadingDialogComponent } from '../../../../shared/components/loading-di
     FormsModule,
     BtnLargeComponent,
     LoadingDialogComponent,
+    BtnSmallComponent,
   ],
   templateUrl: './upload-movie.component.html',
   styleUrl: './upload-movie.component.scss',

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

@@ -1,7 +1,18 @@
-<button class="btn" [disabled]="disabled">
+<button
+  class="btn"
+  [disabled]="disabled"
+  [ngStyle]="{
+    '--btnRadius': btnRadius,
+    '--imgRadius': imgRadius
+  }"
+>
   <img
     src="./../../../../assets/img/{{ imgPath }}.svg"
     alt="{{ imgPath }}"
     class="icon"
+    [ngStyle]="{
+      '--btnRadius': btnRadius,
+      '--imgRadius': imgRadius
+    }"
   />
 </button>

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

@@ -4,8 +4,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 48px;
-  height: 48px;
+  width: var(--btnRadius);
+  height: var(--btnRadius);
   box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
   border-radius: 50%;
   background-color: blue;
@@ -28,7 +28,7 @@
     cursor: default;
   }
   .icon {
-    height: 32px;
-    width: auto;
+    width: var(--imgRadius);
+    height: var(--imgRadius);
   }
 }

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

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