In mobile screens display sticky the QRbutton at the bottom right of …

…the screen and create a component for this button
wwWallet · Apr 4, 2024 · 2bb1cce · 2bb1cce
1 parent f5f1354
commit 2bb1cce
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 41 deletions.
diff --git a/src/components/Buttons/QRButton.js b/src/components/Buttons/QRButton.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import { BsQrCodeScan } from 'react-icons/bs';
+
+const QRButton = ({ openQRScanner, isSmallScreen }) => {
+	const isMobile = window.innerWidth <= 480;
+	const buttonClass = "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 shadow-md";
+
+	if (isMobile) {
+		return (
+			<button
+				className={`fixed z-20 bottom-20 right-5 ${buttonClass}`}
+				onClick={openQRScanner}
+			>
+				<div className="flex items-center">
+					<BsQrCodeScan size={20} className="text-white" />
+				</div>
+			</button>
+		);
+	} else if (isSmallScreen) {
+		return (
+			<button
+				className={buttonClass}
+				onClick={openQRScanner}
+			>
+				<div className="flex items-center">
+					<BsQrCodeScan size={20} className="text-white" />
+				</div>
+			</button>
+		);
+	}
+
+	return null;
+};
+
+export default QRButton;
diff --git a/src/pages/AddCredentials/AddCredentials.js b/src/pages/AddCredentials/AddCredentials.js
@@ -1,9 +1,10 @@
 import React, { useState, useEffect } from 'react';
-import {BsQrCodeScan} from 'react-icons/bs'
+import { BsQrCodeScan } from 'react-icons/bs'
 import { useTranslation } from 'react-i18next';
 
 import QRCodeScanner from '../../components/QRCodeScanner/QRCodeScanner';
 import RedirectPopup from '../../components/Popups/RedirectPopup';
+import QRButton from '../../components/Buttons/QRButton';
 import { useApi } from '../../api';
 
 function highlightBestSequence(issuer, search) {
@@ -128,17 +129,7 @@ const Issuers = () => {
 			<div className="sm:px-6 w-full">
 				<div className="flex justify-between items-center">
 					<h1 className="text-2xl font-bold text-custom-blue">{t('common.navItemAddCredentials')}</h1>
-					{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"
-							onClick={openQRScanner} // Open the QR code scanner modal
-						>
-							<div className="flex items-center">
-								<BsQrCodeScan size={20} className="text-white" />
-							</div>
-						</button>
-					)}
-
+					<QRButton openQRScanner={openQRScanner} isSmallScreen={isSmallScreen} />
 				</div>
 				<hr className="mb-2 border-t border-custom-blue/80" />
 				<p className="italic text-gray-700">{t('pageAddCredentials.description')}</p>
@@ -185,9 +176,9 @@ const Issuers = () => {
 
 			{/* QR Code Scanner Modal */}
 			{isQRScannerOpen && (
-					<QRCodeScanner
-						onClose={closeQRScanner}
-					/>
+				<QRCodeScanner
+					onClose={closeQRScanner}
+				/>
 			)}
 
 		</>

diff --git a/src/pages/Home/Home.js b/src/pages/Home/Home.js
@@ -4,7 +4,6 @@ import { useTranslation } from 'react-i18next';
 
 import { BsPlusCircle } from 'react-icons/bs';
 import { BiLeftArrow, BiRightArrow } from 'react-icons/bi';
-import { BsQrCodeScan } from 'react-icons/bs'
 
 import Slider from 'react-slick';
 import "slick-carousel/slick/slick.css";
@@ -20,6 +19,7 @@ import QRCodeScanner from '../../components/QRCodeScanner/QRCodeScanner';
 import FullscreenPopup from '../../components/Popups/FullscreenImg';
 import DeletePopup from '../../components/Popups/DeletePopup';
 import { CredentialImage } from '../../components/Credentials/CredentialImage';
+import QRButton from '../../components/Buttons/QRButton';
 
 const Home = () => {
 	const api = useApi();
@@ -105,18 +105,7 @@ const Home = () => {
 			<div className="sm:px-6 w-full">
 				<div className="flex justify-between items-center">
 					<h1 className="text-2xl font-bold text-custom-blue">{t('common.navItemCredentials')}</h1>
-
-					{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"
-							onClick={openQRScanner} // Open the QR code scanner modal
-						>
-							<div className="flex items-center">
-								<BsQrCodeScan size={20} className="text-white" />
-							</div>
-						</button>
-					)}
-
+					<QRButton openQRScanner={openQRScanner} isSmallScreen={isSmallScreen} />
 				</div>
 				<hr className="mb-2 border-t border-custom-blue/80" />
 				<p className="italic pd-2 text-gray-700">{t('pageCredentials.description')}</p>

diff --git a/src/pages/SendCredentials/SendCredentials.js b/src/pages/SendCredentials/SendCredentials.js
@@ -1,9 +1,9 @@
 import React, { useState, useEffect } from 'react';
-import { BsQrCodeScan } from 'react-icons/bs'
 import { useTranslation } from 'react-i18next';
 
 import QRCodeScanner from '../../components/QRCodeScanner/QRCodeScanner'; // Replace with the actual import path
 import RedirectPopup from '../../components/Popups/RedirectPopup';
+import QRButton from '../../components/Buttons/QRButton';
 import { useApi } from '../../api';
 
 function highlightBestSequence(verifier, search) {
@@ -113,18 +113,7 @@ const Verifiers = () => {
 			<div className="sm:px-6 w-full">
 				<div className="flex justify-between items-center">
 					<h1 className="text-2xl font-bold text-custom-blue">{t('common.navItemSendCredentials')}</h1>
-
-					{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"
-							onClick={openQRScanner} // Open the QR code scanner modal
-						>
-							<div className="flex items-center">
-								<BsQrCodeScan size={20} className="text-white" />
-							</div>
-						</button>
-					)}
-
+					<QRButton openQRScanner={openQRScanner} isSmallScreen={isSmallScreen} />
 				</div>
 				<hr className="mb-2 border-t border-custom-blue/80" />
 				<p className="italic text-gray-700">{t('pageSendCredentials.description')}</p>