RED-3709 -> updated help mode button

src/assets/styles/common-base-screen.scss

@@ -46,7 +46,7 @@
         margin-right: 8px;
 
         > *:not(:last-child) {
-            margin-right: 2px;
+            margin-right: 14px;
         }
     }
 }

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 {

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'"

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`;
     }
 }

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;

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>