Revert "chore: undo changes"

This reverts commit 1dc1d08.

__tests__/components/LoginModal.test.tsx

@@ -13,7 +13,7 @@ describe('LoginModal Component', () => {
                 }}
             />
         );
-        const closeButton = screen.getByTestId('close-login-modal');
+        const closeButton = screen.getByTestId('close-modal');
         expect(closeButton).toBeInTheDocument();
     });
 

__tests__/components/Navbar/Navbar.test.tsx

@@ -94,7 +94,7 @@ describe('Navbar', () => {
             const originalIsLoggedIn = screen.getByText('Sign In');
             fireEvent.click(originalIsLoggedIn);
 
-            const closeButton = screen.getByTestId('close-login-modal');
+            const closeButton = screen.getByTestId('close-modal');
             fireEvent.click(closeButton);
 
             const modal = screen.queryByText('Sign to your account');
@@ -130,7 +130,7 @@ describe('Navbar', () => {
             const originalIsLoggedIn = screen.getByText('Sign In');
             fireEvent.click(originalIsLoggedIn);
 
-            const closeButton = screen.getByTestId('close-login-modal');
+            const closeButton = screen.getByTestId('close-modal');
             fireEvent.click(closeButton);
 
             expect(mockSetShowLoginModal).toHaveBeenCalled();

__tests__/pages/app.test.tsx

@@ -110,7 +110,7 @@ describe('App Component', () => {
         const generateButton = screen.getByText('Shorten');
         fireEvent.change(urlInput, { target: { value: 'https://www.longurl.com' } });
         fireEvent.click(generateButton);
-        const closeButton = await screen.findByTestId('close-login-modal');
+        const closeButton = await screen.findByTestId('close-modal');
         fireEvent.click(closeButton);
         const loginModal = screen.queryByText('Log in to generate short links');
         expect(loginModal).not.toBeInTheDocument();

__tests__/pages/dashboard.test.tsx

@@ -82,7 +82,7 @@ describe('Dashboard', () => {
         );
         expect(screen.getByTestId('login-modal')).toBeInTheDocument();
         expect(screen.getByText('Login to view your URLs and create new ones')).toBeInTheDocument();
-        const closeButton = screen.getByTestId('close-login-modal');
+        const closeButton = screen.getByTestId('close-modal');
         closeButton.click();
     });
 

src/components/App/InputSection.tsx

@@ -10,25 +10,28 @@ interface InputSectionProps {
 
 const InputSection: React.FC<InputSectionProps> = ({ url, setUrl, handleUrl }) => (
     <form
-        className="flex flex-col items-center rounded-2xl mt-5 sm:mt-10 w-full text-gray-400"
+        className="flex flex-col items-center rounded-2xl w-full text-gray-400 text-center"
         onSubmit={(e: FormEvent) => {
             e.preventDefault();
             handleUrl();
         }}
         data-testid="input-section"
     >
-        <h1 className="text-3xl md:text-4xl xl:text-4xl text-center mb-4 text-white font-semibold">
-            Enter a URL to shorten
+        <h1 className="text-3xl md:text-6xl xl:text-80px xl:leading-custom-100px text-center text-white font-semibold">
+            Shorten Your URL
         </h1>
 
-        <div className="flex flex-col sm:flex-row items-center justify-center mt-5 sm:mt-10 w-full">
-            <div className="bg-gray-200 flex items-center rounded-2xl w-full  sm:w-2/4">
-                <label htmlFor="url-input" className="ml-2">
-                    🔗
-                </label>
+        <h3 className="text-2xl md:text-4xl md:leading-10 xl:text-5xl xl:leading-custom-60px text-center md:my-4 text-white font-semibold">
+            Perfect Links Every Time
+        </h3>
+
+        <p className="text-xl ">Ready to shorten your URL? Enter your URL below</p>
+
+        <div className="flex flex-col items-center justify-center mt-5 sm:mt-10 w-full gap-5 ">
+            <div className="flex items-center justify-center rounded-lg w-full  sm:w-2/4">
                 <input
                     type="text"
-                    className="bg-gray-200 text-black p-4 rounded-2xl focus:outline-none w-full"
+                    className="bg-gray-200 text-black p-4 rounded-lg focus:outline-none w-96 h-11"
                     onChange={(e: ChangeEvent<HTMLInputElement>) => setUrl(e.target.value)}
                     value={url}
                     placeholder="Enter the URL"
@@ -37,7 +40,7 @@ const InputSection: React.FC<InputSectionProps> = ({ url, setUrl, handleUrl }) =
             </div>
             <Button
                 type="submit"
-                className="bg-gray-300 text-black text-lg rounded-2xl py-2 sm:py-4 px-8 hover:bg-gray-400 mt-2 sm:mt-0 sm:ml-2"
+                className="bg-gray-300 text-black text-lg rounded-lg px-8 hover:bg-gray-400 mt-2 sm:mt-0 sm:ml-2 h-9"
                 testId="shorten-button"
                 onClick={handleUrl}
             >

src/components/App/OutputSection.tsx

@@ -1,16 +1,17 @@
 import Link from 'next/link';
+import QRCode from 'qrcode.react';
 import React from 'react';
-import { AiOutlineArrowDown } from 'react-icons/ai';
-import { IoIosCopy, IoIosShareAlt } from 'react-icons/io';
-import { LuQrCode } from 'react-icons/lu';
+import { FaRegCopy } from 'react-icons/fa';
+import { HiOutlineDownload } from 'react-icons/hi';
+import { IoIosShareAlt } from 'react-icons/io';
 
 import Button from '@/components/Button';
-// import QRCodeModal from '@/components/QRCodeModal';
 import { removeProtocol } from '@/constants/constants';
 
-import QRCodeModal from '../QRCodeModal.tsx';
 import OutputSectionShimmer from '../ShimmerEffect/OutputSectionShimmer';
 
+const RDSIcon = '_next/image?url=%2Frds.png&w=64&q=75';
+
 interface OutputSectionProps {
     originalUrl: string;
     shortUrl: string;
@@ -19,79 +20,89 @@ interface OutputSectionProps {
     handleCopyUrl: () => void;
 }
 
-const OutputSection: React.FC<OutputSectionProps> = ({
-    shortUrl,
-    originalUrl,
-    isLoaded,
-    handleCopyUrl,
-    handleCreateNew,
-}) => {
-    const [showQRCodeModal, setShowQRCodeModal] = React.useState<boolean>(false);
+const OutputSection: React.FC<OutputSectionProps> = ({ shortUrl, isLoaded, handleCopyUrl, handleCreateNew }) => {
     if (!isLoaded) {
         return <OutputSectionShimmer />;
     }
 
+    const handleDownload = () => {
+        const canvas = document.getElementById('qr-code') as HTMLCanvasElement;
+        if (canvas) {
+            const pngUrl = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');
+            const downloadLink = document.createElement('a');
+            downloadLink.href = pngUrl;
+            downloadLink.download = `${shortUrl.split('/').pop()}.png`;
+            document.body.appendChild(downloadLink);
+            downloadLink.click();
+            document.body.removeChild(downloadLink);
+        }
+    };
+
     return (
         <>
             <section
-                className="flex flex-col justify-between items-center  rounded-2xl mt-5 sm:mt-10 w-[80%] text-gray-400"
+                className="flex flex-col items-center rounded-lg w-[80%] relative bottom-6"
                 data-testid="output-section"
             >
-                <h1 className="text-2xl md:text-3xl xl:text-3xl text-center mb-2 text-white font-semibold">
-                    Your Tiny URL is ready! 🎉🎉
+                <h1 className="text-xl md:text-2xl xl:text-2xl text-center mb-9 font-semibold">
+                    Your shortened URL is ready!
                 </h1>
-                <span className="ml-2 p-4 text-center w-full sm:w-[60%] ellipsis overflow-hidden overflow-ellipsis whitespace-nowrap">
-                    {originalUrl}
-                </span>
-                <AiOutlineArrowDown style={{ fontSize: '5rem', paddingBottom: '15px' }} />
-
-                <div className="text-white flex flex-col md:flex-row justify-center items-center  rounded-2xl w-auto bg-black p-2">
+                <QRCode
+                    data-testid="qrcode"
+                    id="qr-code"
+                    value={shortUrl}
+                    size={112}
+                    includeMargin={true}
+                    imageSettings={{
+                        src: RDSIcon,
+                        height: 35,
+                        width: 35,
+                        excavate: true,
+                    }}
+                    renderAs="canvas"
+                    level="M"
+                />
+                <Button
+                    className="bg-gray-900 flex items-center gap-1 p-[6px] sm:p-[10px] rounded-2xl text-white my-4 xl:w-36 justify-center"
+                    onClick={handleDownload}
+                >
+                    <HiOutlineDownload />
+                    Download
+                </Button>
+                <div className="flex flex-col md:flex-row justify-center items-center rounded-lg w-auto p-2 border-2 border-gray-500 h-11">
                     <span className="ml-2 p-4 text-center w-full sm:w-[80%] ellipsis overflow-hidden overflow-ellipsis whitespace-nowrap sm:text-2xl md:text-3xl xl:text-3xl">
                         {shortUrl.replace(removeProtocol, '')}
                     </span>
-                    <div className="flex w-full sm:w-[80%] md:w-auto justify-center items-center space-x-2 rounded-2xl px-2">
+                    <div className="flex w-full sm:w-[80%] md:w-auto justify-center items-center space-x-2 rounded-lg px-2">
                         <Link
                             type="button"
-                            className="bg-gray-900 p-[6px] sm:p-[10px]  hover:bg-gray-800 w-[50%] rounded-l-2xl after:content-['Visit'] md:after:content-[''] flex justify-center items-center"
+                            className=" p-[6px] sm:p-[10px] w-[50%] rounded-l-2xl flex justify-center items-center"
                             href={shortUrl}
                             target="_blank"
                             data-testid="share-button"
                             rel="noopener noreferrer"
                         >
-                            <IoIosShareAlt className="text-4xl sm:text-[2.5rem] " />
-                            &nbsp;
+                            <IoIosShareAlt className="text-2xl sm:text-[1.5rem]" />
                         </Link>
 
                         <Button
                             type="button"
-                            className="bg-gray-900  p-[6px] sm:p-[10px]  hover:bg-gray-800  w-[50%]  md:rounded-none flex justify-center items-center after:content-['Copy'] md:after:content-['']"
+                            className=" p-[6px] sm:p-[10px] w-[50%] md:rounded-none flex justify-center items-center"
                             testId="copy-button"
                             onClick={handleCopyUrl}
                         >
-                            <IoIosCopy className="text-4xl sm:text-[2.5rem] " />
-                            &nbsp;
-                        </Button>
-
-                        <Button
-                            type="button"
-                            className="bg-gray-900 md:rounded-r-2xl p-[6px] sm:p-[10px]  hover:bg-gray-800  w-[50%] rounded-r-2xl md:rounded-none flex justify-center items-center after:content-['QR'] md:after:content-['']"
-                            testId="qr-code-button"
-                            onClick={() => setShowQRCodeModal(!showQRCodeModal)}
-                        >
-                            <LuQrCode className="text-4xl sm:text-[2.5rem] " />
-                            &nbsp;
+                            <FaRegCopy className="text-2xl sm:text-[1.5rem]" />
                         </Button>
                     </div>
                 </div>
                 <Button
-                    className="mt-10 text-white p-3 rounded-full shadow-lg cursor-pointer hover:underline text-[20px]"
+                    className="mt-10 p-3 rounded-full shadow-lg cursor-pointer hover:underline text-[20px]"
                     testId="create-new-button"
                     onClick={handleCreateNew}
                 >
                     Create New
                 </Button>
             </section>
-            {showQRCodeModal && <QRCodeModal shortUrl={shortUrl} onClose={() => setShowQRCodeModal(false)} />}
         </>
     );
 };

src/components/LoginModal/index.tsx

@@ -38,7 +38,7 @@ const LoginModal: React.FC<LoginModalProps> = ({ onClose, children }) => {
                 ref={modalRef}
                 className="bg-gray-800 p-8 rounded-md w-[330px] relative flex flex-col justify-center items-center shadow-lg"
             >
-                <Button className="absolute top-2 right-2 text-white" testId="close-login-modal" onClick={onClose}>
+                <Button className="absolute top-2 right-2 text-white" testId="close-modal" onClick={onClose}>
                     <IoCloseSharp style={{ fontSize: '1.5em' }} />
                 </Button>
                 <h2 className="text-2xl font-bold mb-4 text-white">Please log in</h2>

src/components/Modal/index.tsx

@@ -0,0 +1,49 @@
+import React, { useEffect, useRef } from 'react';
+import { IoCloseSharp } from 'react-icons/io5';
+
+interface ModalProps {
+    onClose: () => void;
+    children?: React.ReactNode;
+    title?: string;
+    width?: string;
+    height?: string;
+}
+
+const Modal: React.FC<ModalProps> = ({ onClose, children, title, width = '330px', height = 'auto' }) => {
+    const modalRef = useRef<HTMLDivElement>(null);
+
+    const handleClickOutside = (event: MouseEvent) => {
+        if (modalRef.current && !modalRef.current.contains(event.target as Node)) {
+            onClose();
+        }
+    };
+
+    useEffect(() => {
+        document.addEventListener('mousedown', handleClickOutside);
+
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [onClose]);
+
+    return (
+        <dialog
+            className="fixed top-0 left-0 w-full h-full flex justify-center items-center bg-transparent backdrop-blur-sm z-50"
+            data-testid="modal"
+        >
+            <div
+                ref={modalRef}
+                className={'bg-white p-8 rounded-md relative flex flex-col justify-center items-center shadow-lg'}
+                style={{ width: width, height: height }}
+            >
+                <button className="absolute top-2 right-2" data-testid="close-modal" onClick={onClose}>
+                    <IoCloseSharp style={{ fontSize: '1.5em' }} />
+                </button>
+                {title && <h2 className="text-2xl font-bold mb-4 text-white">{title}</h2>}
+                {children}
+            </div>
+        </dialog>
+    );
+};
+
+export default Modal;