Skip to content

Commit 8b9bf0a

Browse files
gkatrakazasgkatrakazas
committed
Update step classes in order to adapt fo every screen size and nav display
1 parent 1bd39b1 commit 8b9bf0a

File tree

5 files changed

+50
-40
lines changed

5 files changed

+50
-40
lines changed

‎src/components/BottomNav.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,10 @@ const BottomNav = ({ isOpen, toggle }) => {
1010
const { t } = useTranslation();
1111

1212
const navItems = [
13-
{ icon: <FaWallet size={26} />, path: '/', label: `${t("common.navItemCredentials")}` },
14-
{ icon: <IoIosTime size={26} />, path: '/history', label: `${t("common.navItemHistory")}` },
15-
{ icon: <IoIosAddCircle size={26} />, path: '/add', label: `${t("common.navItemAddCredentialsSimple")}` },
16-
{ icon: <IoIosSend size={26} />, path: '/send', label: `${t("common.navItemSendCredentialsSimple")}` },
13+
{ icon: <FaWallet size={26} />, path: '/', label: `${t("common.navItemCredentials")}`, stepClass: 'step-3-mobile' },
14+
{ icon: <IoIosTime size={26} />, path: '/history', label: `${t("common.navItemHistory")}`, stepClass: 'step-4-mobile' },
15+
{ icon: <IoIosAddCircle size={26} />, path: '/add', label: `${t("common.navItemAddCredentialsSimple")}`, stepClass: 'step-5-mobile' },
16+
{ icon: <IoIosSend size={26} />, path: '/send', label: `${t("common.navItemSendCredentialsSimple")}`, stepClass: 'step-6-mobile' },
1717
];
1818

1919
const handleNavigate = (path) => {
@@ -31,7 +31,7 @@ const BottomNav = ({ isOpen, toggle }) => {
3131
{navItems.map(item => (
3232
<div
3333
key={item.path}
34-
className={`cursor-pointer flex flex-col items-center w-[20%] ${(location.pathname === item.path && !isOpen) ? 'text-custom-blue' : 'text-gray-400'} transition-colors duration-200`}
34+
className={`${item.stepClass} cursor-pointer flex flex-col items-center w-[20%] ${(location.pathname === item.path && !isOpen) ? 'text-custom-blue' : 'text-gray-400'} transition-colors duration-200`}
3535
onClick={() => handleNavigate(item.path)}
3636
title={item.label}
3737
>

‎src/components/Sidebar.js

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -108,35 +108,36 @@ const Sidebar = ({ isOpen, toggle }) => {
108108
<hr className="my-4 border-t border-white/20" />
109109

110110
{/* Nav Menu */}
111-
<div className='max480:hidden'>
111+
<div className='step-3 max480:hidden'>
112112
<NavItem path="/" location={location} handleNavigate={handleNavigate}>
113113
<FaWallet size={30} />
114114
<span>{t("common.navItemCredentials")}</span>
115115
</NavItem>
116116
</div>
117-
<div className='max480:hidden'>
117+
<div className='step-4 max480:hidden'>
118118
<NavItem path="/history" location={location} handleNavigate={handleNavigate}>
119119
<IoIosTime size={30} />
120120
<span>{t("common.navItemHistory")}</span>
121121
</NavItem>
122122
</div>
123-
<div className='max480:hidden'>
123+
<div className='step-5 max480:hidden'>
124124
<NavItem path="/add" location={location} handleNavigate={handleNavigate}>
125125
<IoIosAddCircle size={30} />
126126
<span>{t("common.navItemAddCredentials")}</span>
127127
</NavItem>
128128
</div>
129-
<div className='max480:hidden'>
129+
<div className='step-6 max480:hidden'>
130130
<NavItem path="/send" location={location} handleNavigate={handleNavigate}>
131131
<IoIosSend size={30} />
132132
<span>{t("common.navItemSendCredentials")}</span>
133133
</NavItem>
134134
</div>
135-
<NavItem path="/settings" location={location} handleNavigate={handleNavigate}>
136-
<IoMdSettings size={30} />
137-
<span>{t("common.navItemSettings")}</span>
138-
</NavItem>
139-
135+
<div className='step-7'>
136+
<NavItem path="/settings" location={location} handleNavigate={handleNavigate}>
137+
<IoMdSettings size={30} />
138+
<span>{t("common.navItemSettings")}</span>
139+
</NavItem>
140+
</div>
140141
<hr className="my-4 border-t border-white/20" />
141142

142143
<li

‎src/components/WelcomeTourGuide/WelcomeTourGuide.js

Lines changed: 26 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -14,40 +14,44 @@ const TourGuide = ({ toggleMenu, isOpen }) => {
1414
const { t } = useTranslation();
1515

1616
useEffect(() => {
17+
18+
const getStepSelectorMobile = (stepName) => {
19+
if (window.innerWidth <= 480) {
20+
return stepName + '-mobile';
21+
} else {
22+
return stepName;
23+
}
24+
};
1725
const commonSteps = [
1826
{
1927
selector: '.step-1',
2028
content: t("tourGuide.tourStep1"),
2129
disableInteraction: true,
2230
},
23-
{
31+
...(window.innerWidth < 768 ? [{
2432
selector: '.step-2',
2533
content: t("tourGuide.tourStep2"),
26-
},
27-
...(window.innerWidth < 700 ? [{
28-
selector: '.step-3',
29-
content: t("tourGuide.tourStep3"),
3034
}] : []),
3135
{
32-
selector: '.step-4',
36+
selector: getStepSelectorMobile('.step-3'),
37+
content: t("tourGuide.tourStep3"),
38+
},
39+
{
40+
selector: getStepSelectorMobile('.step-4'),
3341
content: t("tourGuide.tourStep4"),
3442
},
3543
{
36-
selector: '.step-5',
44+
selector: getStepSelectorMobile('.step-5'),
3745
content: t("tourGuide.tourStep5"),
3846
},
3947
{
40-
selector: '.step-6',
48+
selector: getStepSelectorMobile('.step-6'),
4149
content: t("tourGuide.tourStep6"),
4250
},
4351
{
4452
selector: '.step-7',
4553
content: t("tourGuide.tourStep7"),
4654
},
47-
{
48-
selector: '.step-8',
49-
content: t("tourGuide.tourStep8"),
50-
},
5155
{
5256
content: () => (
5357
<>
@@ -69,10 +73,16 @@ const TourGuide = ({ toggleMenu, isOpen }) => {
6973
return {
7074
...step,
7175
action: () => {
72-
if (window.innerWidth < 700) {
73-
if (index >= 3 && index <= 7 && !isOpen) {
76+
if (window.innerWidth < 700 && window.innerWidth > 480) {
77+
if (index >= 2 && index <= 6 && !isOpen) {
78+
toggleMenu();
79+
} else if ((index < 2 || index > 6) && isOpen) {
80+
toggleMenu();
81+
}
82+
} else if (window.innerWidth <= 480) {
83+
if (index === 6 && !isOpen) {
7484
toggleMenu();
75-
} else if ((index < 3 || index > 7) && isOpen) {
85+
} else if ((index !== 6) && isOpen) {
7686
toggleMenu();
7787
}
7888
}
@@ -98,7 +108,7 @@ const TourGuide = ({ toggleMenu, isOpen }) => {
98108

99109
if (authenticationType === 'signup' && showWelcome) {
100110
return (
101-
<div >
111+
<div>
102112
<WelcomeModal isOpen={isModalOpen} onStartTour={startTour} onClose={closeModalAndDisable} />
103113
</div>
104114
);

‎src/locales/en.json

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -217,13 +217,12 @@
217217
},
218218
"tourGuide": {
219219
"tourStep1": "Here, you can view all your stored credentials. Click the 'Add New Credentials' card to get a new VC from an available Issuer",
220-
"tourStep2": "This is another way to get a New Credential",
221-
"tourStep3": "Click this button to scan a QR code for sending or receiving credentials.",
222-
"tourStep4": "The 'Credentials' page is your Home page, where you can manage your credentials.",
223-
"tourStep5": "On the 'History' page, you can view details of credential transmissions, including when and to which verifiers they were sent.",
224-
"tourStep6": "The 'Add Credentials' page allows you to receive credentials from a specific Issuer",
225-
"tourStep7": "Use the 'Send Credentials' page to select a verifier for sharing your credentials.",
226-
"tourStep8": "In the 'Settings' page you can manage your passkeys and account settings.",
220+
"tourStep2": "Click this button to scan a QR code for sending or receiving credentials.",
221+
"tourStep3": "The 'Credentials' page is your Home page, where you can manage your credentials.",
222+
"tourStep4": "On the 'History' page, you can view details of credential transmissions, including when and to which verifiers they were sent.",
223+
"tourStep5": "The 'Add Credentials' page allows you to receive credentials from a specific Issuer",
224+
"tourStep6": "Use the 'Send Credentials' page to select a verifier for sharing your credentials.",
225+
"tourStep7": "In the 'Settings' page you can manage your passkeys and account settings.",
227226
"tourComplete": "Thank you for completing the tour, we hope it was helpful!",
228227
"closeTourButton": "Close Tour"
229228
},

‎src/pages/Home/Home.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ const Home = () => {
108108

109109
{isSmallScreen && (
110110
<button
111-
className="px-2 py-2 mb-2 text-white bg-custom-blue hover:bg-custom-blue-hover focus:ring-4 focus:outline-none focus:ring-custom-blue font-medium rounded-lg text-sm px-4 py-2 text-center dark:bg-custom-blue-hover dark:hover:bg-custom-blue-hover dark:focus:ring-custom-blue-hover"
111+
className="step-2 px-2 py-2 mb-2 text-white bg-custom-blue hover:bg-custom-blue-hover focus:ring-4 focus:outline-none focus:ring-custom-blue font-medium rounded-lg text-sm px-4 py-2 text-center dark:bg-custom-blue-hover dark:hover:bg-custom-blue-hover dark:focus:ring-custom-blue-hover"
112112
onClick={openQRScanner} // Open the QR code scanner modal
113113
>
114114
<div className="flex items-center">
@@ -132,7 +132,7 @@ const Home = () => {
132132
<img
133133
src={addImage}
134134
alt="add new credential"
135-
className="w-full h-auto object-cover rounded-xl opacity-100 hover:opacity-120"
135+
className="step-1 w-full h-auto object-cover rounded-xl opacity-100 hover:opacity-120"
136136
/>
137137
<div className="absolute inset-0 flex flex-col items-center justify-center text-center">
138138
<BsPlusCircle size={60} className="text-white mb-2 mt-4" />
@@ -184,7 +184,7 @@ const Home = () => {
184184
<img
185185
src={addImage}
186186
alt="add new credential"
187-
className="w-full h-auto rounded-xl opacity-100 hover:opacity-120"
187+
className="step-1 w-full h-auto rounded-xl opacity-100 hover:opacity-120"
188188
/>
189189
<div className="absolute inset-0 flex flex-col items-center justify-center text-center">
190190
<BsPlusCircle size={60} className="text-white mb-2 mt-4" />

0 commit comments

Comments
 (0)