Skip to content

Commit

Permalink
Update step classes in order to adapt fo every screen size and nav di…
Browse files Browse the repository at this point in the history 
…splay
  • Loading branch information
@gkatrakazas
gkatrakazas committed Apr 3, 2024
1 parent 1bd39b1 commit 8b9bf0a
Show file tree
Hide file tree
Showing 5 changed files with 50 additions and 40 deletions.
10 changes: 5 additions & 5 deletions src/components/BottomNav.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@ const BottomNav = ({ isOpen, toggle }) => {
const { t } = useTranslation();

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

const handleNavigate = (path) => {
Expand All @@ -31,7 +31,7 @@ const BottomNav = ({ isOpen, toggle }) => {
{navItems.map(item => (
<div
key={item.path}
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`}
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`}
onClick={() => handleNavigate(item.path)}
title={item.label}
>
Expand Down
19 changes: 10 additions & 9 deletions src/components/Sidebar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,35 +108,36 @@ const Sidebar = ({ isOpen, toggle }) => {
<hr className="my-4 border-t border-white/20" />

{/* Nav Menu */}
<div className='max480:hidden'>
<div className='step-3 max480:hidden'>
<NavItem path="/" location={location} handleNavigate={handleNavigate}>
<FaWallet size={30} />
<span>{t("common.navItemCredentials")}</span>
</NavItem>
</div>
<div className='max480:hidden'>
<div className='step-4 max480:hidden'>
<NavItem path="/history" location={location} handleNavigate={handleNavigate}>
<IoIosTime size={30} />
<span>{t("common.navItemHistory")}</span>
</NavItem>
</div>
<div className='max480:hidden'>
<div className='step-5 max480:hidden'>
<NavItem path="/add" location={location} handleNavigate={handleNavigate}>
<IoIosAddCircle size={30} />
<span>{t("common.navItemAddCredentials")}</span>
</NavItem>
</div>
<div className='max480:hidden'>
<div className='step-6 max480:hidden'>
<NavItem path="/send" location={location} handleNavigate={handleNavigate}>
<IoIosSend size={30} />
<span>{t("common.navItemSendCredentials")}</span>
</NavItem>
</div>
<NavItem path="/settings" location={location} handleNavigate={handleNavigate}>
<IoMdSettings size={30} />
<span>{t("common.navItemSettings")}</span>
</NavItem>

<div className='step-7'>
<NavItem path="/settings" location={location} handleNavigate={handleNavigate}>
<IoMdSettings size={30} />
<span>{t("common.navItemSettings")}</span>
</NavItem>
</div>
<hr className="my-4 border-t border-white/20" />

<li
Expand Down
42 changes: 26 additions & 16 deletions src/components/WelcomeTourGuide/WelcomeTourGuide.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,40 +14,44 @@ const TourGuide = ({ toggleMenu, isOpen }) => {
const { t } = useTranslation();

useEffect(() => {

const getStepSelectorMobile = (stepName) => {
if (window.innerWidth <= 480) {
return stepName + '-mobile';
} else {
return stepName;
}
};
const commonSteps = [
{
selector: '.step-1',
content: t("tourGuide.tourStep1"),
disableInteraction: true,
},
{
...(window.innerWidth < 768 ? [{
selector: '.step-2',
content: t("tourGuide.tourStep2"),
},
...(window.innerWidth < 700 ? [{
selector: '.step-3',
content: t("tourGuide.tourStep3"),
}] : []),
{
selector: '.step-4',
selector: getStepSelectorMobile('.step-3'),
content: t("tourGuide.tourStep3"),
},
{
selector: getStepSelectorMobile('.step-4'),
content: t("tourGuide.tourStep4"),
},
{
selector: '.step-5',
selector: getStepSelectorMobile('.step-5'),
content: t("tourGuide.tourStep5"),
},
{
selector: '.step-6',
selector: getStepSelectorMobile('.step-6'),
content: t("tourGuide.tourStep6"),
},
{
selector: '.step-7',
content: t("tourGuide.tourStep7"),
},
{
selector: '.step-8',
content: t("tourGuide.tourStep8"),
},
{
content: () => (
<>
Expand All @@ -69,10 +73,16 @@ const TourGuide = ({ toggleMenu, isOpen }) => {
return {
...step,
action: () => {
if (window.innerWidth < 700) {
if (index >= 3 && index <= 7 && !isOpen) {
if (window.innerWidth < 700 && window.innerWidth > 480) {
if (index >= 2 && index <= 6 && !isOpen) {
toggleMenu();
} else if ((index < 2 || index > 6) && isOpen) {
toggleMenu();
}
} else if (window.innerWidth <= 480) {
if (index === 6 && !isOpen) {
toggleMenu();
} else if ((index < 3 || index > 7) && isOpen) {
} else if ((index !== 6) && isOpen) {
toggleMenu();
}
}
Expand All @@ -98,7 +108,7 @@ const TourGuide = ({ toggleMenu, isOpen }) => {

if (authenticationType === 'signup' && showWelcome) {
return (
<div >
<div>
<WelcomeModal isOpen={isModalOpen} onStartTour={startTour} onClose={closeModalAndDisable} />
</div>
);
Expand Down
13 changes: 6 additions & 7 deletions src/locales/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -217,13 +217,12 @@
},
"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": "This is another way to get a New Credential",
"tourStep3": "Click this button to scan a QR code for sending or receiving credentials.",
"tourStep4": "The 'Credentials' page is your Home page, where you can manage your credentials.",
"tourStep5": "On the 'History' page, you can view details of credential transmissions, including when and to which verifiers they were sent.",
"tourStep6": "The 'Add Credentials' page allows you to receive credentials from a specific Issuer",
"tourStep7": "Use the 'Send Credentials' page to select a verifier for sharing your credentials.",
"tourStep8": "In the 'Settings' page you can manage your passkeys and account settings.",
"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": "On the 'History' page, you can view details of credential transmissions, including when and to which verifiers they were sent.",
"tourStep5": "The 'Add Credentials' page allows you to receive credentials from a specific Issuer",
"tourStep6": "Use the 'Send Credentials' page to select a verifier for sharing your credentials.",
"tourStep7": "In the 'Settings' page you can manage your passkeys and account settings.",
"tourComplete": "Thank you for completing the tour, we hope it was helpful!",
"closeTourButton": "Close Tour"
},
Expand Down
6 changes: 3 additions & 3 deletions src/pages/Home/Home.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ const Home = () => {

{isSmallScreen && (
<button
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"
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"
onClick={openQRScanner} // Open the QR code scanner modal
>
<div className="flex items-center">
Expand All @@ -132,7 +132,7 @@ const Home = () => {
<img
src={addImage}
alt="add new credential"
className="w-full h-auto object-cover rounded-xl opacity-100 hover:opacity-120"
className="step-1 w-full h-auto object-cover rounded-xl opacity-100 hover:opacity-120"
/>
<div className="absolute inset-0 flex flex-col items-center justify-center text-center">
<BsPlusCircle size={60} className="text-white mb-2 mt-4" />
Expand Down Expand Up @@ -184,7 +184,7 @@ const Home = () => {
<img
src={addImage}
alt="add new credential"
className="w-full h-auto rounded-xl opacity-100 hover:opacity-120"
className="step-1 w-full h-auto rounded-xl opacity-100 hover:opacity-120"
/>
<div className="absolute inset-0 flex flex-col items-center justify-center text-center">
<BsPlusCircle size={60} className="text-white mb-2 mt-4" />
Expand Down

0 comments on commit 8b9bf0a

Please sign in to comment.