Merge branch 'main' into config

VesperAkshay · Oct 5, 2024 · ac79f84 · ac79f84
2 parents b771c01 + a718543
commit ac79f84
Show file tree

Hide file tree

Showing 34 changed files with 645 additions and 473 deletions.
diff --git a/src/App.js b/src/App.js
@@ -1,46 +1,49 @@
-import React from 'react';
-import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
-import Navbar from './components/Navbar';
-import Home from './pages/Home';
-import DashboardPage from './pages/DashboardPage';
-import QRCodePage from './pages/QRCodePage';
-import ProfilePage from './pages/ProfilePage';
-import Login from './components/Login';
-import Register from './components/Register';
-import { AuthProvider } from './context/AuthContext';
-import Support from './components/Support';
-import Settings from './components/Setting';
-import ImageQRCodeGenerator from './components/ImageQRCodeGenerator';
-import  SocialMedia from './components/SocialMedia';
-import BulkQRCode from './components/BulkQRCode';
-import QRScanner from './components/QRScanner';
-import PdfQRCodeGenerator from './components/PDFToQR';
-import { ThemeProvider } from './context/ThemeContext';
-import { Toaster } from 'react-hot-toast';
+import React from "react";
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+import Navbar from "./components/Navbar";
+import Home from "./pages/Home";
+import DashboardPage from "./pages/DashboardPage";
+import QRCodePage from "./pages/QRCodePage";
+import ProfilePage from "./pages/ProfilePage";
+import Login from "./components/Login";
+import Register from "./components/Register";
+import { AuthProvider } from "./context/AuthContext";
+import Support from "./components/Support";
+import Settings from "./components/Setting";
+import ImageQRCodeGenerator from "./components/ImageQRCodeGenerator";
+import SocialMedia from "./components/SocialMedia";
+import BulkQRCode from "./components/BulkQRCode";
+import QRScanner from "./components/QRScanner";
+import PdfQRCodeGenerator from "./components/PDFToQR";
+import { ThemeProvider } from "./context/ThemeContext";
+import { Toaster } from "react-hot-toast";
+import ProtectedRoute from './components/ProtectedRoute';
 
 export default function App() {
   return (
     <AuthProvider>
       <ThemeProvider>
-      <Router>
-        <Navbar />
-        <Routes>
-          <Route path="/" element={<Home />} />
-          <Route path="/login" element={<Login />} />
-          <Route path="/register" element={<Register />} />
-          <Route path="/dashboard" element={<DashboardPage />} />
-          <Route path="/qr-code" element={<QRCodePage />} />
-          <Route path="/profile" element={<ProfilePage />} />
-          <Route path="/support" element={<Support />} />
-          <Route path="/settings" element={<Settings />} />
-          <Route path="/image-qr-code" element={<ImageQRCodeGenerator />} />
-          <Route path="/social-media-qr" element={<SocialMedia />} />
-          <Route path="/bulk-qr-code" element={<BulkQRCode />} />
-          <Route path="/qr-scanner" element={<QRScanner />} />
-          <Route path="/pdf-qr-code" element={<PdfQRCodeGenerator />} />
-        </Routes>
-        <Toaster />
-      </Router>
+        <Router>
+          <div className="min-h-screen bg-gradient-to-r from-indigo-600 to-purple-600 dark:from-indigo-800 dark:via-purple-800 dark:to-pink-800">
+            <Navbar />
+            <Routes>
+              <Route path="/" element={<Home />} />
+              <Route path="/login" element={<Login />} />
+              <Route path="/register" element={<Register />} />
+              <Route path="/dashboard" element={<ProtectedRoute><DashboardPage /></ProtectedRoute>} />
+              <Route path="/qr-code" element={<QRCodePage />} />
+              <Route path="/profile" element={<ProfilePage />} />
+              <Route path="/support" element={<Support />} />
+              <Route path="/settings" element={<Settings />} />
+              <Route path="/image-qr-code" element={<ImageQRCodeGenerator />} />
+              <Route path="/social-media-qr" element={<SocialMedia />} />
+              <Route path="/bulk-qr-code" element={<BulkQRCode />} />
+              <Route path="/qr-scanner" element={<QRScanner />} />
+              <Route path="/pdf-qr-code" element={<PdfQRCodeGenerator />} />
+            </Routes>
+          </div>
+          <Toaster />
+        </Router>
       </ThemeProvider>
     </AuthProvider>
   );

diff --git a/src/assets/instagram.png b/src/assets/instagram.png
diff --git a/src/assets/linkedin-logo.png b/src/assets/linkedin-logo.png
diff --git a/src/assets/meta.png b/src/assets/meta.png
diff --git a/src/assets/twitter.png b/src/assets/twitter.png
diff --git a/src/components/BulkQRCode.js b/src/components/BulkQRCode.js
@@ -42,12 +42,12 @@ export default function BulkQRCode() {
   };
 
   return (
-    <div className="min-h-screen bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 p-8">
+    <div className="min-h-screen p-8">
       <h1 className="text-5xl font-extrabold text-center text-white mb-12">
         Bulk QR Code Generator
       </h1>
 
-      <div className="bg-white p-6 rounded-lg shadow-lg mb-8">
+      <div className="bg-purple-100 dark:text-gray-200 dark:bg-[#2b2661] p-6 rounded-xl shadow-lg mb-8">
         <h2 className="text-2xl font-semibold mb-4 flex items-center">
           <FiSettings className="mr-2" /> Customize QR Codes
         </h2>
@@ -59,7 +59,7 @@ export default function BulkQRCode() {
               type="number"
               value={size}
               onChange={handleSizeChange}
-              className="p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
+              className="p-3 border dark:bg-indigo-950 border-gray-400 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
               min={64}
               max={512}
             />
@@ -71,7 +71,7 @@ export default function BulkQRCode() {
               type="color"
               value={bgColor}
               onChange={(e) => setBgColor(e.target.value)}
-              className="p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
+              className="p-3 border dark:bg-indigo-950 border-gray-400 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
             />
           </div>
           <div className="flex flex-col">
@@ -81,22 +81,22 @@ export default function BulkQRCode() {
               type="color"
               value={fgColor}
               onChange={(e) => setFgColor(e.target.value)}
-              className="p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
+              className="p-3 border dark:bg-indigo-950 border-gray-400 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
             />
           </div>
         </div>
       </div>
 
       <div className="flex flex-col space-y-6">
         {urls.map((url, index) => (
-          <div key={index} className="bg-white p-6 rounded-lg shadow-lg">
+          <div key={index} className="bg-purple-100 dark:bg-[#2b2661] p-6 rounded-lg shadow-lg">
             <div className="mb-4">
               <input
                 type="text"
                 placeholder={`Enter URL or text for QR code ${index + 1}`}
                 value={url}
                 onChange={(e) => handleUrlChange(index, e.target.value)}
-                className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                className="w-full p-3 border dark:bg-indigo-950 dark:text-gray-200 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
               />
             </div>
 

diff --git a/src/components/CategorySelector.js b/src/components/CategorySelector.js
@@ -12,15 +12,15 @@ export default function CategorySelector({ category, handleCategoryChange }) {
   ];
 
   return (
-    <div className="flex justify-around mb-8 p-4 bg-gradient-to-r from-gray-100 via-white to-gray-100 rounded-xl shadow-lg space-x-6">
+    <div className="flex justify-around mb-8 p-4 bg-gray-100 dark:bg-[#2b2661] rounded-xl shadow-lg space-x-6">
       {categories.map(({ name, icon }) => (
         <motion.button
           key={name}
           onClick={() => handleCategoryChange(name)}
           className={`flex flex-col items-center p-4 rounded-lg font-medium focus:outline-none transition-transform ${
             category === name
               ? 'bg-blue-500 text-white shadow-2xl transform scale-105'
-              : 'bg-white text-gray-700 shadow-md'
+              : 'bg-white dark:bg-indigo-950 text-gray-700 dark:text-gray-200 shadow-md'
           }`}
           whileHover={{
             scale: 1.12,
@@ -35,14 +35,7 @@ export default function CategorySelector({ category, handleCategoryChange }) {
           }}
         >
           <motion.div
-            className={`text-2xl mb-2 p-2 rounded-full bg-white${
-              category === name ? 'text-blue-500' : ' text-gray-700'
-            }`}
-            whileHover={{
-              // scale: 1.25,
-              backgroundColor: category === name ? '#FFFFFF' : '#E5E7EB',
-              // transition: { duration: 0.1 },
-            }}
+            className={`text-2xl mb-2 p-2 rounded-full bg-white text-gray-700`}
           >
             <FontAwesomeIcon icon={icon} />
           </motion.div>

diff --git a/src/components/ColorPicker.js b/src/components/ColorPicker.js
@@ -4,58 +4,58 @@ import { FaPalette, FaSquare, FaCircle, FaBorderStyle } from 'react-icons/fa';
 
 export default function ColorPicker({ color, setColor, bgColor, setBgColor, eyeColor, setEyeColor, shape, setShape, frame, setFrame, eyeShape, setEyeShape }) {
   return (
-    <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-8 p-4 bg-white rounded-xl shadow-lg">
+    <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-8 p-4 bg-gray-100 dark:bg-[#2b2661] rounded-xl shadow-lg">
 
       <div>
-        <label className="flex items-center mb-2 text-gray-800 font-bold">
+        <label className="flex items-center mb-2 text-gray-800 dark:text-gray-200 font-bold">
           <FaPalette className="mr-2 text-blue-500" /> QR Code Color
         </label>
         <motion.input
           type="color"
           value={color}
           onChange={(e) => setColor(e.target.value)}
-          className="w-full h-12 p-2 border border-gray-300 rounded-lg cursor-pointer transition-colors focus:ring-2 focus:ring-blue-500"
+          className="w-full h-12 p-2 border border-gray-500 dark:bg-indigo-950 rounded-lg cursor-pointer transition-colors focus:ring-2 focus:ring-blue-500"
           whileHover={{ scale: 1.05, boxShadow: "0 0 10px rgba(99, 102, 241, 0.5)" }}
           whileTap={{ scale: 0.95 }}
         />
       </div>
 
       <div>
-        <label className="flex items-center mb-2 text-gray-800 font-bold">
+        <label className="flex items-center mb-2 text-gray-800 dark:text-gray-200 font-bold">
           <FaPalette className="mr-2 text-blue-500" /> Background Color
         </label>
         <motion.input
           type="color"
           value={bgColor}
           onChange={(e) => setBgColor(e.target.value)}
-          className="w-full h-12 p-2 border border-gray-300 rounded-lg cursor-pointer transition-colors focus:ring-2 focus:ring-blue-500"
+          className="w-full h-12 p-2 border border-gray-500 dark:bg-indigo-950 rounded-lg cursor-pointer transition-colors focus:ring-2 focus:ring-blue-500"
           whileHover={{ scale: 1.05, boxShadow: "0 0 10px rgba(99, 102, 241, 0.5)" }}
           whileTap={{ scale: 0.95 }}
         />
       </div>
 
       <div>
-        <label className="flex items-center mb-2 text-gray-800 font-bold">
+        <label className="flex items-center mb-2 text-gray-800 dark:text-gray-200 font-bold">
           <FaPalette className="mr-2 text-blue-500" /> Eye Color
         </label>
         <motion.input
           type="color"
           value={eyeColor}
           onChange={(e) => setEyeColor(e.target.value)}
-          className="w-full h-12 p-2 border border-gray-300 rounded-lg cursor-pointer transition-colors focus:ring-2 focus:ring-blue-500"
+          className="w-full h-12 p-2 border border-gray-500 dark:bg-indigo-950 rounded-lg cursor-pointer transition-colors focus:ring-2 focus:ring-blue-500"
           whileHover={{ scale: 1.05, boxShadow: "0 0 10px rgba(99, 102, 241, 0.5)" }}
           whileTap={{ scale: 0.95 }}
         />
       </div>
 
       <div>
-        <label className="flex items-center mb-2 text-gray-800 font-bold">
+        <label className="flex items-center mb-2 text-gray-800 dark:text-gray-200 font-bold">
           <FaSquare className="mr-2 text-blue-500" /> Shape
         </label>
         <motion.select
           value={shape}
           onChange={(e) => setShape(e.target.value)}
-          className="w-full h-12 p-2 border border-gray-300 rounded-lg cursor-pointer transition-colors focus:ring-2 focus:ring-blue-500"
+          className="w-full h-12 p-2 border border-gray-500 dark:text-gray-200 dark:bg-indigo-950 rounded-lg cursor-pointer transition-colors focus:ring-2 focus:ring-blue-500"
           whileHover={{ scale: 1.05, boxShadow: "0 0 10px rgba(99, 102, 241, 0.5)" }}
           whileTap={{ scale: 0.95 }}
         >
@@ -66,13 +66,13 @@ export default function ColorPicker({ color, setColor, bgColor, setBgColor, eyeC
       </div>
 
       <div>
-        <label className="flex items-center mb-2 text-gray-800 font-bold">
+        <label className="flex items-center mb-2 text-gray-800 dark:text-gray-200 font-bold">
           <FaBorderStyle className="mr-2 text-blue-500" /> Frame
         </label>
         <motion.select
           value={frame}
           onChange={(e) => setFrame(e.target.value)}
-          className="w-full h-12 p-2 border border-gray-300 rounded-lg cursor-pointer transition-colors focus:ring-2 focus:ring-blue-500"
+          className="w-full h-12 p-2 border border-gray-500 dark:text-gray-200 dark:bg-indigo-950 rounded-lg cursor-pointer transition-colors focus:ring-2 focus:ring-blue-500"
           whileHover={{ scale: 1.05, boxShadow: "0 0 10px rgba(99, 102, 241, 0.5)" }}
           whileTap={{ scale: 0.95 }}
         >
@@ -83,13 +83,13 @@ export default function ColorPicker({ color, setColor, bgColor, setBgColor, eyeC
       </div>
 
       <div>
-        <label className="flex items-center mb-2 text-gray-800 font-bold">
+        <label className="flex items-center mb-2 text-gray-800 dark:text-gray-200 font-bold">
           <FaCircle className="mr-2 text-blue-500" /> Eye Shape
         </label>
         <motion.select
           value={eyeShape}
           onChange={(e) => setEyeShape(e.target.value)}
-          className="w-full h-12 p-2 border border-gray-300 rounded-lg cursor-pointer transition-colors focus:ring-2 focus:ring-blue-500"
+          className="w-full h-12 p-2 border border-gray-500 dark:text-gray-200 dark:bg-indigo-950 rounded-lg cursor-pointer transition-colors focus:ring-2 focus:ring-blue-500"
           whileHover={{ scale: 1.05, boxShadow: "0 0 10px rgba(99, 102, 241, 0.5)" }}
           whileTap={{ scale: 0.95 }}
         >

diff --git a/src/components/DownloadButton.js b/src/components/DownloadButton.js
@@ -12,7 +12,7 @@ export default function DownloadButton({ handleDownload, downloadFormat, setDown
       <motion.select
         value={downloadFormat}
         onChange={(e) => setDownloadFormat(e.target.value)}
-        className="p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+        className="p-2 dark:bg-[#2b2661] dark:text-gray-200 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
         whileHover={{ scale: 1.05 }}
         whileTap={{ scale: 0.95 }}
       >

diff --git a/src/components/FileUploader.js b/src/components/FileUploader.js
@@ -5,16 +5,16 @@ import { faUpload } from '@fortawesome/free-solid-svg-icons';
 
 export default function FileUploader({ handleLogoChange }) {
   return (
-    <div className="mb-8 p-4 bg-gray-100 rounded-lg shadow-md">
-      <label className=" mb-2 text-gray-700 font-semibold flex items-center">
+    <div className="mb-8 p-4 bg-gray-100 dark:bg-[#2b2661] rounded-lg shadow-md">
+      <label className=" mb-2 text-gray-700 dark:text-gray-300 font-semibold flex items-center">
         <FontAwesomeIcon icon={faUpload} className="text-xl mr-2" />
         <span>Upload Logo (optional)</span>
       </label>
       <motion.input
         type="file"
         accept="image/*"
         onChange={handleLogoChange}
-        className="w-full p-3 border-2 border-gray-300 rounded-lg bg-white hover:border-blue-500 focus:border-blue-500 focus:outline-none transition-colors duration-200"
+        className="w-full p-3 border-2 border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:text-white dark:bg-[#2b2661] hover:border-blue-500 focus:border-blue-500 focus:outline-none transition-colors duration-200"
         whileHover={{ scale: 1.02 }}
         whileTap={{ scale: 0.98 }}
       />

diff --git a/src/components/ImageQRCodeGenerator.js b/src/components/ImageQRCodeGenerator.js
@@ -45,21 +45,21 @@ export default function ImageQRCodeGenerator() {
   };
 
   return (
-    <div className="min-h-screen bg-gray-50 p-8">
-      <h1 className="text-4xl font-bold text-center text-gray-800 mb-6">Image to QR Code Generator</h1>
-      <div className="max-w-md mx-auto bg-white rounded-lg shadow-lg p-6">
+    <div className="min-h-screen p-8">
+      <h1 className="text-4xl font-bold text-center text-gray-800 dark:text-gray-200 mb-6">Image to QR Code Generator</h1>
+      <div className="max-w-md mx-auto bg-indigo-200 dark:bg-purple-950 rounded-2xl shadow-lg p-6">
         <motion.div
           whileHover={{ scale: 1.02 }}
           whileTap={{ scale: 0.98 }}
-          className="border-2 border-dashed border-gray-300 p-6 rounded-lg text-center"
+          className="border-2 border-dashed border-gray-600 dark:border-gray-300 p-6 rounded-xl text-center"
         >
           <label className="cursor-pointer">
-            <FaCloudUploadAlt className="text-6xl text-gray-400 mx-auto mb-4" />
-            <span className="block text-gray-600 font-medium mb-2">Click to upload image</span>
+            <FaCloudUploadAlt className="text-6xl text-gray-600 dark:text-gray-300 mx-auto mb-4" />
+            <span className="block text-gray-600 dark:text-gray-300 font-medium mb-2">Click to upload image</span>
             <input type="file" accept="image/*" onChange={handleImageUpload} className="hidden" />
           </label>
         </motion.div>
-        {isUploading && <p className="text-center text-gray-600 mt-4">Uploading...</p>}
+        {isUploading && <p className="text-center text-gray-600 dark:text-gray-300 mt-4">Uploading...</p>}
         {imageFile && !isUploading && (
           <>
             <div className="mt-6">
@@ -71,7 +71,7 @@ export default function ImageQRCodeGenerator() {
               <h2 className="text-xl font-bold text-gray-800 mb-2">QR Code Customization:</h2>
               <div className="flex justify-between items-center">
                 <div>
-                  <label className="block text-gray-600 font-medium mb-2">Color</label>
+                  <label className="block text-gray-600 dark:text-gray-300 font-medium mb-2">Color</label>
                   <input 
                     type="color" 
                     value={qrColor} 
@@ -80,21 +80,21 @@ export default function ImageQRCodeGenerator() {
                   />
                 </div>
                 <div>
-                  <label className="block text-gray-600 font-medium mb-2">Size</label>
+                  <label className="block text-gray-600 dark:text-gray-300 font-medium mb-2">Size</label>
                   <input 
                     type="number" 
                     value={qrSize} 
                     onChange={(e) => setQrSize(Number(e.target.value))} 
                     min="128" 
                     max="512" 
-                    className="w-full p-2 border border-gray-300 rounded-lg"
+                    className="w-full p-2 border border-gray-400 rounded-lg"
                   />
                 </div>
               </div>
             </div>
 
             <div className="mt-6">
-              <h2 className="text-xl font-bold text-gray-800 mb-2">Generated QR Code:</h2>
+              <h2 className="text-xl font-bolddark:text-gray-200 text-gray-800 mb-2">Generated QR Code:</h2>
               <div ref={qrRef} className="flex justify-center">
                 <QRCode value={qrCodeURL} size={qrSize} fgColor={qrColor} />
               </div>