Merge pull request #555 from G-Core/WEB-5786

added close button and fixed mobile size of modal

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

@@ -1,6 +1,11 @@
 <ng-container>
-    <gcore-modal [minPaddings]="false" [size]="'medium'" [(isOpen)]="isLoginModalOpen">
-        <gcore-modal-login></gcore-modal-login>
+    <gcore-modal
+        [minPaddings]="false"
+        [size]="'medium'"
+        [isOpen]="isLoginModalOpen"
+        (isOpenChange)="toggleLoginModal(false)"
+    >
+        <gcore-modal-login (closeModalEvent)="toggleLoginModal(false)"></gcore-modal-login>
     </gcore-modal>
 </ng-container>
 <a [routerLink]="'/'" class="logo">
@@ -46,7 +51,9 @@
         [label]="'API'"
         [href]="'https://api.gcore.com/docs'"
     ></gc-redirect-link-button>
-    <button (click)="login()" *ngIf="!isHosting" class="button button_primary header-button">Sign in</button>
+    <button (click)="toggleLoginModal(true)" *ngIf="!isHosting" class="button button_primary header-button">
+        Sign in
+    </button>
     <a
         class="button button_primary header-button"
         *ngIf="isHosting"

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

@@ -60,8 +60,8 @@ export class HeaderComponent implements OnInit, OnDestroy {
         });
     }
 
-    public login(): void {
-        this.menuService.setIsLoginModalOpen(true);
+    public toggleLoginModal(event: boolean): void {
+        this.menuService.setIsLoginModalOpen(event);
         this.cd.detectChanges();
     }
 }

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

@@ -1,4 +1,15 @@
 <div class="gc-modal-login">
+    <button class="gc-close-button" (click)="closeModal()">
+        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none" viewBox="0 0 40 40">
+            <path
+                stroke="#251B29"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="m20 20-7-7m7 7 7 7m-7-7 7-7m-7 7-7 7"
+            />
+        </svg>
+    </button>
     <h2 class="gc-modal-header">Select the Gcore Platform</h2>
     <div class="gc-login gc-login-recommended">
         <div class="gc-login-title">Recommended</div>

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

@@ -1,8 +1,15 @@
 @import '../../../scss/variables';
 
+:host {
+    display: block;
+    height: 100%;
+}
+
 .gc-modal-login {
+    position: relative;
     padding: 1.5rem 2rem;
     background: $bgSurfaceLight;
+    min-height: 100%;
 
     .gc-modal-header {
         color: $contentPrimary;
@@ -12,6 +19,32 @@
         text-align: center;
         margin-bottom: 2rem;
         margin-top: 0;
+        padding-right: 2rem;
+    }
+}
+
+.gc-close-button {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+
+    border-radius: 50%;
+    border: none;
+    padding: 0.5rem;
+    background: $bgSurfaceLight1;
+    transition: 0.15s;
+
+    &:hover {
+        background: $bgSurfaceLight2;
+        cursor: pointer;
+    }
+
+    svg {
+        width: 1.5rem;
+        height: 1.5rem;
+        * {
+            stroke: black;
+        }
     }
 }
 

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

@@ -1,4 +1,4 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { Component, ChangeDetectionStrategy, EventEmitter, Output } from '@angular/core';
 import { Observable } from 'rxjs';
 import { DeviceService } from '../../services/device';
 
@@ -9,6 +9,8 @@ import { DeviceService } from '../../services/device';
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ModalLoginComponent {
+    @Output() public closeModalEvent: EventEmitter<any> = new EventEmitter();
+
     public isMobile$: Observable<boolean> = this.deviceService.isMobile$;
     public showAllProducts = false;
     public gcoreEdgeSolutionsProducts: Array<string> = [
@@ -26,12 +28,15 @@ export class ModalLoginComponent {
         'ImageStack (Optimize and Resize)',
         'Edge Compute (Coming soon)',
     ];
-
     public gcoreHostingProducts: Array<string> = ['VPS Hosting', 'Dedicated Servers'];
 
     constructor(private deviceService: DeviceService) {}
 
     public showAll(): void {
         this.showAllProducts = true;
     }
+
+    public closeModal(): void {
+        this.closeModalEvent.emit();
+    }
 }

src/app/services/menu.service.ts

@@ -29,5 +29,10 @@ export class MenuService {
 
     public setIsLoginModalOpen(isOpen: boolean): void {
         this.isLoginModalOpenSubject.next(isOpen);
+        if (isOpen) {
+            document.body.style.overflowY = 'hidden';
+        } else {
+            document.body.style.overflowY = 'auto';
+        }
     }
 }

src/app/ui-kit/modal/modal.component.scss

@@ -111,3 +111,9 @@
         }
     }
 }
+
+.gc-popup-content {
+    @media (max-width: 800px) {
+        height: 100%;
+    }
+}