Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fixed the dropdown close issue on tap and the UI, implemented the dark mode feature on all the pages added some animations #82

Merged
merged 10 commits into from
Oct 5, 2024
Merged

Fixed the dropdown close issue on tap and the UI, implemented the dark mode feature on all the pages added some animations #82

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
1b36efb
Dark mode ui implemnt & dropdown section
varunvaatsalya Oct 4, 2024
1e87f44
Merge branch 'main' of https://github.com/varunvaatsalya/qr-code-gene…
varunvaatsalya Oct 4, 2024
d1c0889
Resolved conflicts
varunvaatsalya Oct 4, 2024
358b9a3
Resolved conflicts
varunvaatsalya Oct 4, 2024
9105200
Resolved conflicts
varunvaatsalya Oct 4, 2024
98a82a8
Resolved conflicts
varunvaatsalya Oct 4, 2024
6828d23
formatting
varunvaatsalya Oct 4, 2024
8dc6e31
added some info
varunvaatsalya Oct 4, 2024
81056d8
Resolved conflicts
varunvaatsalya Oct 5, 2024
9f79563
some bug
varunvaatsalya Oct 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 38 additions & 37 deletions src/App.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading