From e4cd12c17f18cd69acaebbd3a6c9cd02f1c072e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Thu, 28 Jul 2022 16:31:37 +0300
Subject: [PATCH] Help mode reduce border size

---
 .../help-mode/help-mode.component.html          | 17 ++++++++++++-----
 .../help-mode/help-mode.component.scss          |  8 ++++++--
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/lib/help-mode/help-mode/help-mode.component.html b/src/lib/help-mode/help-mode/help-mode.component.html
index 0c15be4..f75a9ed 100644
--- a/src/lib/help-mode/help-mode/help-mode.component.html
+++ b/src/lib/help-mode/help-mode/help-mode.component.html
@@ -1,12 +1,19 @@
-<div class="help-mode-border" *ngIf="helpModeService.isHelpModeActive$ | async">
-    <div class="bottom">
-        <p class="heading">{{ 'help-mode.bottom-text' | translate }}</p>
-        <a *ngIf="(helpModeService.helpModeDialogIsOpened$ | async) === false" (click)="helpModeService.openHelpModeDialog()">
+<div *ngIf="helpModeService.isHelpModeActive$ | async" class="help-mode-border">
+    <div class="bottom small-label">
+        <strong>{{ 'help-mode.bottom-text' | translate }}</strong>
+        <a (click)="helpModeService.openHelpModeDialog()" *ngIf="(helpModeService.helpModeDialogIsOpened$ | async) === false">
             {{ 'help-mode.instructions' | translate }}
         </a>
         <div class="close">
             (esc)
-            <iqser-circle-button icon="iqser:close" type="help" (click)="helpModeService.deactivateHelpMode()"></iqser-circle-button>
+            <iqser-circle-button
+                (click)="helpModeService.deactivateHelpMode()"
+                [iconSize]="10"
+                [size]="20"
+                [type]="'help'"
+                class="ml-8"
+                icon="iqser:close"
+            ></iqser-circle-button>
         </div>
     </div>
 </div>
diff --git a/src/lib/help-mode/help-mode/help-mode.component.scss b/src/lib/help-mode/help-mode/help-mode.component.scss
index 104a014..9becf97 100644
--- a/src/lib/help-mode/help-mode/help-mode.component.scss
+++ b/src/lib/help-mode/help-mode/help-mode.component.scss
@@ -6,7 +6,7 @@
     box-sizing: border-box;
     height: 100%;
     width: 100%;
-    border-width: 8px 8px 60px 8px;
+    border-width: 8px 8px 30px 8px;
     border-style: solid;
     border-color: var(--iqser-helpmode-primary);
     z-index: 1000;
@@ -16,7 +16,7 @@
 
     .bottom {
         position: fixed;
-        height: 60px;
+        height: 30px;
         width: 95%;
         bottom: 0;
         display: flex;
@@ -36,3 +36,7 @@
         }
     }
 }
+
+.small-label {
+    opacity: 1;
+}