From aab7e8c0b1b4822f31777ffc8a38febdfc2ea041 Mon Sep 17 00:00:00 2001
From: Valentin Mihai <valentin@devplant.ro>
Date: Tue, 29 Mar 2022 12:00:03 +0300
Subject: [PATCH] RED-3709 -> updated help mode button

---
 src/assets/styles/common-base-screen.scss                  | 2 +-
 src/assets/styles/common-buttons.scss                      | 6 +++++-
 src/lib/buttons/circle-button/circle-button.component.html | 1 +
 src/lib/buttons/circle-button/circle-button.component.ts   | 3 ++-
 src/lib/buttons/types/circle-button.type.ts                | 1 +
 src/lib/help-mode/help-mode/help-mode.component.html       | 5 -----
 6 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/assets/styles/common-base-screen.scss b/src/assets/styles/common-base-screen.scss
index de8ba39..346f630 100644
--- a/src/assets/styles/common-base-screen.scss
+++ b/src/assets/styles/common-base-screen.scss
@@ -46,7 +46,7 @@
         margin-right: 8px;
 
         > *:not(:last-child) {
-            margin-right: 2px;
+            margin-right: 14px;
         }
     }
 }
diff --git a/src/assets/styles/common-buttons.scss b/src/assets/styles/common-buttons.scss
index f60932d..4806cb6 100644
--- a/src/assets/styles/common-buttons.scss
+++ b/src/assets/styles/common-buttons.scss
@@ -64,7 +64,7 @@ iqser-circle-button {
             background: rgba(var(--iqser-primary-rgb), 0.1);
         }
 
-        &:not(.overlay):not(.mat-button-disabled):not(.primary):not(.dark-bg):not(.warn):hover {
+        &:not(.overlay):not(.mat-button-disabled):not(.primary):not(.dark-bg):not(.warn):not(.help):hover {
             background-color: var(--iqser-btn-bg);
         }
 
@@ -81,6 +81,10 @@ iqser-circle-button {
         &.dark-bg:hover {
             background-color: var(--iqser-btn-bg-hover);
         }
+
+        &.help {
+            background-color: var(--iqser-helpmode-primary);
+        }
     }
 
     .dot {
diff --git a/src/lib/buttons/circle-button/circle-button.component.html b/src/lib/buttons/circle-button/circle-button.component.html
index 9bc746a..db64330 100644
--- a/src/lib/buttons/circle-button/circle-button.component.html
+++ b/src/lib/buttons/circle-button/circle-button.component.html
@@ -5,6 +5,7 @@
         [class.overlay]="showDot"
         [class.primary]="type === circleButtonTypes.primary"
         [class.warn]="type === circleButtonTypes.warn"
+        [class.help]="type === circleButtonTypes.help"
         [class.grey-selected]="greySelected"
         [disabled]="disabled"
         [type]="isSubmit ? 'submit' : 'button'"
diff --git a/src/lib/buttons/circle-button/circle-button.component.ts b/src/lib/buttons/circle-button/circle-button.component.ts
index e699595..a694712 100644
--- a/src/lib/buttons/circle-button/circle-button.component.ts
+++ b/src/lib/buttons/circle-button/circle-button.component.ts
@@ -21,6 +21,7 @@ export class CircleButtonComponent implements OnInit {
     @Input() disabled = false;
     @Input() type: CircleButtonType = CircleButtonTypes.default;
     @Input() greySelected = false;
+    @Input() helpModeButton = false;
     @Input() removeTooltip = false;
     @Input() isSubmit = false;
     @Input() size = 34;
@@ -51,7 +52,7 @@ export class CircleButtonComponent implements OnInit {
         }
     }
 
-    get buttonId (): String {
+    get buttonId(): string {
         return `${Math.random().toString(36).substring(2, 9)}-button`;
     }
 }
diff --git a/src/lib/buttons/types/circle-button.type.ts b/src/lib/buttons/types/circle-button.type.ts
index 349c720..dd4494c 100644
--- a/src/lib/buttons/types/circle-button.type.ts
+++ b/src/lib/buttons/types/circle-button.type.ts
@@ -3,6 +3,7 @@ export const CircleButtonTypes = {
     primary: 'primary',
     warn: 'warn',
     dark: 'dark',
+    help: 'help',
 } as const;
 
 export type CircleButtonType = keyof typeof CircleButtonTypes;
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 4a01d8b..8cbab9b 100644
--- a/src/lib/help-mode/help-mode/help-mode.component.html
+++ b/src/lib/help-mode/help-mode/help-mode.component.html
@@ -1,8 +1,3 @@
-<div class="help-button" *ngIf="(helpModeService.isHelpModeActive$ | async) === false" (click)="helpModeService.activateHelpMode()">
-    <mat-icon svgIcon="iqser:help-outline"></mat-icon>
-    <div class="text">{{ 'help-mode.button-text' | translate }}</div>
-</div>
-
 <div class="help-mode-border" *ngIf="helpModeService.isHelpModeActive$ | async">
     <div class="bottom">
         <p class="heading">{{ 'help-mode.text' | translate }}</p>