Skip to content

Commit

Permalink
Merge pull request #82 from varunvaatsalya/main
Browse files Browse the repository at this point in the history 
Fixed the dropdown close issue on tap and the UI, implemented the dark mode feature on all the pages added some animations
  • Loading branch information
@VesperAkshay
VesperAkshay authored Oct 5, 2024
2 parents 7308c2c + 9f79563 commit a718543
Show file tree
Hide file tree
Showing 25 changed files with 515 additions and 384 deletions.
75 changes: 38 additions & 37 deletions src/App.js
View file
Original file line number Diff line number Diff line change
@@ -1,47 +1,48 @@
// App.js
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 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={<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 />} />
{/* Remove the line for Verify */}
{/* <Route path="/verify" element={<Verify />} /> */}
</Routes>
<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>
Expand Down
14 changes: 7 additions & 7 deletions src/components/BulkQRCode.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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}
/>
Expand All @@ -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">
Expand All @@ -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>

Expand Down
13 changes: 3 additions & 10 deletions src/components/CategorySelector.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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>
Expand Down
26 changes: 13 additions & 13 deletions src/components/ColorPicker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 }}
>
Expand All @@ -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 }}
>
Expand All @@ -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 }}
>
Expand Down
2 changes: 1 addition & 1 deletion src/components/DownloadButton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 }}
>
Expand Down
6 changes: 3 additions & 3 deletions src/components/FileUploader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 }}
/>
Expand Down
22 changes: 11 additions & 11 deletions src/components/ImageQRCodeGenerator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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}
Expand All @@ -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>
Expand Down
Loading

0 comments on commit a718543

Please sign in to comment.