hamburguer icon highlights in onboarding tour

nimiq · Feb 12, 2022 · 7576332 · 7576332
1 parent 37e26c0
commit 7576332
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git a/src/lib/tour/onboarding/06_1_MenuIconStep.ts b/src/lib/tour/onboarding/06_1_MenuIconStep.ts
@@ -1,8 +1,8 @@
 import { defaultTooltipModifiers, IWalletHTMLElements } from '..';
-import { ITourStep, OnboardingTourStep } from '../types';
+import { IOnboardingGetStepFnArgs, ITourStep, OnboardingTourStep } from '../types';
 import { getOnboardingTexts } from './OnboardingTourTexts';
 
-export function getMenuIconStep(): ITourStep {
+export function getMenuIconStep({ toggleHighlightButton }: IOnboardingGetStepFnArgs): ITourStep {
     return {
         path: '/',
         tooltip: {
@@ -30,14 +30,17 @@ export function getMenuIconStep(): ITourStep {
         },
         lifecycle: {
             mounted: async ({ goToNextStep }) => {
+                const hamburguerIconSelector = `${IWalletHTMLElements.ACCOUNT_OVERVIEW_TABLET_MENU_BAR} > button.reset`;
                 // User is expected to click the hamburguer icon to go to next step
-                const hamburguerIcon = document.querySelector(
-                    `${IWalletHTMLElements.ACCOUNT_OVERVIEW_TABLET_MENU_BAR} > button.reset`) as HTMLButtonElement;
+                const hamburguerIcon = document.querySelector(hamburguerIconSelector) as HTMLButtonElement;
 
                 const onHamburguerClick = () => goToNextStep();
                 hamburguerIcon!.addEventListener('click', onHamburguerClick, true);
 
+                toggleHighlightButton(hamburguerIconSelector, true, 'gray');
+
                 return () => {
+                    toggleHighlightButton(hamburguerIconSelector, false, 'gray');
                     hamburguerIcon!.removeEventListener('click', onHamburguerClick, true);
                 };
             },

diff --git a/src/lib/tour/onboarding/index.ts b/src/lib/tour/onboarding/index.ts
@@ -58,7 +58,7 @@ export function getOnboardingTourSteps({ root }: SetupContext, screenTypes: Scre
         get [OnboardingTourStep.MENU_ICON]() {
             // show only this step if it is a new user and is not in a large screen
             return (!screenTypes.isLargeScreen.value && startedFrom === ITourOrigin.WELCOME_MODAL)
-                ? getMenuIconStep() : undefined;
+                ? getMenuIconStep(args) : undefined;
         },
         [OnboardingTourStep.ACCOUNT_OPTIONS]: getAccountOptionsStep(args),
         get [OnboardingTourStep.BACKUP_OPTION_FROM_OPTIONS]() {