Update tour guide after the screen display changes

wwWallet · Oct 22, 2024 · 590d853 · 590d853
1 parent fa18839
commit 590d853
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 31 deletions.
diff --git a/src/components/Layout/Navigation/BottomNav.js b/src/components/Layout/Navigation/BottomNav.js
@@ -17,10 +17,10 @@ const BottomNav = ({ isOpen, toggle }) => {
 	const { t } = useTranslation();
 
 	const navItems = [
-		{ icon: <FaWallet size={26} />, path: '/', alias: '/cb', label: `${t("common.navItemCredentials")}`, stepClass: 'step-3-mobile' },
-		{ icon: <IoIosAddCircle size={26} />, path: '/add', label: `${t("common.navItemAddCredentialsSimple")}`, stepClass: 'step-4-mobile' },
-		{ icon: <BsQrCodeScan size={19} />, path: '/qr', label: ``, stepClass: 'step-qr-mobile', isQR: true }, // QR button
-		{ icon: <IoIosSend size={26} />, path: '/send', label: `${t("common.navItemSendCredentialsSimple")}`, stepClass: 'step-5-mobile' },
+		{ icon: <FaWallet size={26} />, path: '/', alias: '/cb', label: `${t("common.navItemCredentials")}`, stepClass: 'step-2-small-screen' },
+		{ icon: <IoIosAddCircle size={26} />, path: '/add', label: `${t("common.navItemAddCredentialsSimple")}`, stepClass: 'step-3-small-screen' },
+		{ icon: <BsQrCodeScan size={19} />, path: '/qr', label: ``, stepClass: 'step-4', isQR: true }, // QR button
+		{ icon: <IoIosSend size={26} />, path: '/send', label: `${t("common.navItemSendCredentialsSimple")}`, stepClass: 'step-5-small-screen' },
 	];
 
 	const handleNavigate = (path) => {
@@ -43,7 +43,7 @@ const BottomNav = ({ isOpen, toggle }) => {
 				{navItems.map(item => (
 					<button
 						key={item.path}
-						className={`${item.isQR ? 'bg-primary dark:bg-primary-light text-white dark:text-white rounded-full p-3 shadow-lg step-2' : `${item.stepClass} cursor-pointer flex flex-col items-center w-[20%]`} ${isActive(item) && !isOpen ? 'text-primary dark:text-white' : 'text-gray-400 dark:text-gray-400'} transition-colors duration-200`}
+						className={`${item.stepClass} ${item.isQR ? 'bg-primary dark:bg-primary-light text-white dark:text-white rounded-full p-3 shadow-lg' : `cursor-pointer flex flex-col items-center w-[20%]`} ${isActive(item) && !isOpen ? 'text-primary dark:text-white' : 'text-gray-400 dark:text-gray-400'} transition-colors duration-200`}
 						onClick={() => item.isQR ? openQRScanner() : handleNavigate(item.path)}
 						title={item.label}
 					>

diff --git a/src/components/Layout/Navigation/Sidebar.js b/src/components/Layout/Navigation/Sidebar.js
@@ -112,13 +112,13 @@ const Sidebar = ({ isOpen, toggle }) => {
 						<hr className="my-2 border-t border-white/20" />
 
 						{/* Nav Menu */}
-						<div className='step-3 hidden md:block'>
+						<div className='step-2 hidden md:block'>
 							<NavItem path="/" alias="/cb" location={location} handleNavigate={handleNavigate}>
 								<FaWallet size={30} />
 								<span>{t("common.navItemCredentials")}</span>
 							</NavItem>
 						</div>
-						<div className='step-4 hidden md:block'>
+						<div className='step-3 hidden md:block'>
 							<NavItem path="/add" location={location} handleNavigate={handleNavigate}>
 								<IoIosAddCircle size={30} />
 								<span>{t("common.navItemAddCredentials")}</span>

diff --git a/src/components/WelcomeTourGuide/WelcomeTourGuide.js b/src/components/WelcomeTourGuide/WelcomeTourGuide.js
@@ -20,9 +20,9 @@ const TourGuide = ({ toggleMenu, isOpen }) => {
 
 	useEffect(() => {
 
-		const getStepSelectorMobile = (stepName) => {
-			if (screenType === 'mobile') {
-				return stepName + '-mobile';
+		const getStepSelectorSmallScreen = (stepName) => {
+			if (screenType != 'desktop') {
+				return stepName + '-small-screen';
 			} else {
 				return stepName;
 			}
@@ -33,24 +33,20 @@ const TourGuide = ({ toggleMenu, isOpen }) => {
 				content: t("tourGuide.tourStep1"),
 				disableInteraction: true,
 			},
-			...(screenType === 'tablet' ? [{
-				selector: '.step-2',
+			{
+				selector: getStepSelectorSmallScreen('.step-2'),
 				content: t("tourGuide.tourStep2"),
-			}] : []),
+			},
 			{
-				selector: getStepSelectorMobile('.step-3'),
+				selector: getStepSelectorSmallScreen('.step-3'),
 				content: t("tourGuide.tourStep3"),
 			},
-			{
-				selector: getStepSelectorMobile('.step-4'),
+			...(screenType !== 'desktop' ? [{
+				selector: '.step-4',
 				content: t("tourGuide.tourStep4"),
-			},
-			...(screenType === 'mobile' ? [{
-				selector: '.step-2',
-				content: t("tourGuide.tourStep2"),
 			}] : []),
 			{
-				selector: getStepSelectorMobile('.step-5'),
+				selector: getStepSelectorSmallScreen('.step-5'),
 				content: t("tourGuide.tourStep5"),
 			},
 			{
@@ -80,13 +76,7 @@ const TourGuide = ({ toggleMenu, isOpen }) => {
 			return {
 				...step,
 				action: () => {
-					if (screenType === 'tablet') {
-						if (index >= 2 && index <= 6 && !isOpen) {
-							toggleMenu();
-						} else if ((index < 2 || index > 6) && isOpen) {
-							toggleMenu();
-						}
-					} else if (screenType === 'mobile') {
+					if (screenType != 'desktop') {
 						if (index >= 5 && index <= 6 && !isOpen) {
 							toggleMenu();
 						} else if ((index < 5 || index > 6) && isOpen) {

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -268,9 +268,9 @@
 	},
 	"tourGuide": {
 		"tourStep1": "Here, you can view all your stored credentials. Click the 'Add New Credentials' card to get a new VC from an available Issuer",
-		"tourStep2": "Click this button to scan a QR code for sending or receiving credentials.",
-		"tourStep3": "The 'Credentials' page is your Home page, where you can manage your credentials.",
-		"tourStep4": "The 'Add Credentials' page allows you to receive credentials from a specific Issuer",
+		"tourStep2": "The 'Credentials' page is your Home page, where you can manage your credentials.",
+		"tourStep3": "The 'Add Credentials' page allows you to receive credentials from a specific Issuer",
+		"tourStep4": "Click this button to scan a QR code for sending or receiving credentials.",
 		"tourStep5": "Use the 'Send Credentials' page to select a verifier for sharing your credentials.",
 		"tourStep6": "On the 'History' page, you can view details of credential transmissions, including when and to which verifiers they were sent.",
 		"tourStep7": "In the 'Settings' page you can manage your passkeys and account settings.",