From 349c6fa5ccc248b908d21c388ac1639971777132 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 4 Jul 2025 07:31:33 +0000 Subject: [PATCH 1/2] Initial plan From 7b05fe6ecc22ec2c16c161c2afe1a2d91da0a348 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 4 Jul 2025 07:43:09 +0000 Subject: [PATCH 2/2] Implement minimalist theme switcher with rich/minimal themes Co-authored-by: Akshit2004 <83849030+Akshit2004@users.noreply.github.com> --- src/App.jsx | 15 +- src/components/ThemeSwitcher.jsx | 29 ++++ src/context/ThemeContext.jsx | 45 ++++++ src/pages/PDF-Editor/editor.css | 182 ++++++++++++++++++++++ src/pages/PDF-Editor/editor.jsx | 2 + src/pages/landing page/landing.css | 242 +++++++++++++++++++++++++++++ src/pages/landing page/landing.jsx | 10 +- 7 files changed, 516 insertions(+), 9 deletions(-) create mode 100644 src/components/ThemeSwitcher.jsx create mode 100644 src/context/ThemeContext.jsx diff --git a/src/App.jsx b/src/App.jsx index 8cf0317..6a0bec9 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,16 +1,19 @@ import React from 'react'; import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; +import { ThemeProvider } from './context/ThemeContext'; import Landing from './pages/landing page/landing'; import Editor from './pages/PDF-Editor/editor'; function App() { return ( - - - } /> - } /> - - + + + + } /> + } /> + + + ); } diff --git a/src/components/ThemeSwitcher.jsx b/src/components/ThemeSwitcher.jsx new file mode 100644 index 0000000..a608047 --- /dev/null +++ b/src/components/ThemeSwitcher.jsx @@ -0,0 +1,29 @@ +import React from 'react'; +import { useTheme } from '../context/ThemeContext'; +import { FaPalette, FaDesktop } from 'react-icons/fa'; + +const ThemeSwitcher = () => { + const { theme, toggleTheme } = useTheme(); + + return ( + + ); +}; + +export default ThemeSwitcher; \ No newline at end of file diff --git a/src/context/ThemeContext.jsx b/src/context/ThemeContext.jsx new file mode 100644 index 0000000..688ab65 --- /dev/null +++ b/src/context/ThemeContext.jsx @@ -0,0 +1,45 @@ +import React, { createContext, useContext, useState, useEffect } from 'react'; + +const ThemeContext = createContext(); + +export const useTheme = () => { + const context = useContext(ThemeContext); + if (!context) { + throw new Error('useTheme must be used within a ThemeProvider'); + } + return context; +}; + +export const ThemeProvider = ({ children }) => { + const [theme, setTheme] = useState(() => { + // Get theme from localStorage or default to 'rich' (current theme) + const savedTheme = localStorage.getItem('pdfeditor-theme'); + return savedTheme || 'rich'; + }); + + useEffect(() => { + // Save theme to localStorage + localStorage.setItem('pdfeditor-theme', theme); + + // Apply theme to document body + document.body.className = theme === 'minimal' ? 'theme-minimal' : 'theme-rich'; + }, [theme]); + + const toggleTheme = () => { + setTheme(prev => prev === 'rich' ? 'minimal' : 'rich'); + }; + + const value = { + theme, + setTheme, + toggleTheme, + isMinimal: theme === 'minimal', + isRich: theme === 'rich' + }; + + return ( + + {children} + + ); +}; \ No newline at end of file diff --git a/src/pages/PDF-Editor/editor.css b/src/pages/PDF-Editor/editor.css index 2d0d427..71a12d2 100644 --- a/src/pages/PDF-Editor/editor.css +++ b/src/pages/PDF-Editor/editor.css @@ -1661,3 +1661,185 @@ margin: 0; opacity: 0.9; } + +/* Theme Switcher Styles for Editor */ +.editor-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem 2rem; + background: rgba(26, 26, 46, 0.6); + backdrop-filter: blur(10px); + border-bottom: 1px solid rgba(255, 255, 255, 0.1); +} + +.editor-title-animated { + font-size: 1.5rem; + font-weight: 700; + color: #fff; + margin: 0; +} + +/* Minimal Theme Styles for Editor */ +.theme-minimal .editor-bg { + background: #f8f9fa !important; + color: #333 !important; +} + +.theme-minimal .editor-bg::before { + display: none !important; +} + +.theme-minimal .editor-header { + background: #fff !important; + border-bottom: 1px solid #e0e0e0 !important; + backdrop-filter: none !important; +} + +.theme-minimal .editor-title-animated { + color: #333 !important; +} + +.theme-minimal .glass-modal { + background: rgba(0, 0, 0, 0.5) !important; + backdrop-filter: none !important; +} + +.theme-minimal .modal-content { + background: #fff !important; + border: 1px solid #e0e0e0 !important; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important; +} + +.theme-minimal .modal-title { + color: #333 !important; +} + +.theme-minimal .modal-subtitle { + color: #666 !important; +} + +.theme-minimal .upload-drop-zone { + background: #f8f9fa !important; + border: 2px dashed #ddd !important; + color: #666 !important; +} + +.theme-minimal .upload-drop-zone:hover, +.theme-minimal .upload-drop-zone.drag-over { + border-color: #007bff !important; + background: #e3f2fd !important; +} + +.theme-minimal .modal-upload-icon { + color: #007bff !important; +} + +.theme-minimal .upload-hint { + color: #666 !important; +} + +.theme-minimal .upload-button { + background: #007bff !important; + color: #fff !important; + box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2) !important; +} + +.theme-minimal .upload-button:hover { + background: #0056b3 !important; +} + +.theme-minimal .pdf-preview-container { + background: #fff !important; + border: 1px solid #e0e0e0 !important; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important; +} + +.theme-minimal .editor-page-nav { + background: #fff !important; + border: 1px solid #e0e0e0 !important; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; +} + +.theme-minimal .page-nav-btn { + background: #007bff !important; + color: #fff !important; + box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2) !important; +} + +.theme-minimal .page-nav-btn:hover { + background: #0056b3 !important; +} + +.theme-minimal .page-nav-btn:disabled { + background: #ddd !important; + color: #999 !important; +} + +.theme-minimal .page-nav-info { + color: #333 !important; +} + +.theme-minimal .editor-toolbar { + background: #fff !important; + border-top: 1px solid #e0e0e0 !important; + box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1) !important; +} + +.theme-minimal .toolbar-tool { + color: #333 !important; +} + +.theme-minimal .toolbar-tool:hover { + background: #f8f9fa !important; +} + +.theme-minimal .toolbar-tool.disabled { + color: #999 !important; +} + +.theme-minimal .editor-indicator { + background: #fff !important; + color: #333 !important; + border: 1px solid #e0e0e0 !important; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; + backdrop-filter: none !important; +} + +.theme-minimal .editor-indicator.delete-mode { + background: #fff5f5 !important; + color: #dc3545 !important; + border-color: #dc3545 !important; +} + +.theme-minimal .editor-indicator.erase-mode { + background: #f0fdfa !important; + color: #059669 !important; + border-color: #059669 !important; +} + +.theme-minimal .editor-indicator.move-mode { + background: #f0f4ff !important; + color: #3b82f6 !important; + border-color: #3b82f6 !important; +} + +.theme-minimal .text-element { + border: 1px solid #007bff !important; + background: rgba(0, 123, 255, 0.1) !important; +} + +.theme-minimal .text-element:hover { + border-color: #0056b3 !important; +} + +.theme-minimal .color-picker { + background: #fff !important; + border: 1px solid #e0e0e0 !important; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important; +} + +.theme-minimal .signature-canvas { + border: 1px solid #ddd !important; + background: #fff !important; +} diff --git a/src/pages/PDF-Editor/editor.jsx b/src/pages/PDF-Editor/editor.jsx index a0788b4..fd52d5b 100644 --- a/src/pages/PDF-Editor/editor.jsx +++ b/src/pages/PDF-Editor/editor.jsx @@ -7,6 +7,7 @@ import './editor.css'; import './react-pdf-overrides.css'; import EditToolbar from './EditToolbar'; import FilterToolbar from './FilterToolbar'; +import ThemeSwitcher from '../../components/ThemeSwitcher'; import JSZip from 'jszip'; import { saveAs } from 'file-saver'; @@ -1025,6 +1026,7 @@ function PngPreview({ pdfFile, pageNum }) { <>
PDF Editor +
{/* Page navigation bar above the PDF preview (not above toolbar) */} {!showModal && pdfFile && numPages && ( diff --git a/src/pages/landing page/landing.css b/src/pages/landing page/landing.css index 5f4c64c..d0b349a 100644 --- a/src/pages/landing page/landing.css +++ b/src/pages/landing page/landing.css @@ -1065,3 +1065,245 @@ body, html, .landing { min-width: 0; } } + +/* Theme Switcher Styles */ +.theme-switcher { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.6rem 1.2rem; + background: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 1rem; + color: #fff; + font-size: 0.9rem; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + backdrop-filter: blur(10px); +} + +.theme-switcher:hover { + background: rgba(255, 255, 255, 0.15); + border-color: #6a82fb; + transform: translateY(-2px); +} + +.theme-switcher .theme-icon { + font-size: 1rem; +} + +.nav-actions { + display: flex; + align-items: center; + gap: 1rem; +} + +/* Minimal Theme Styles */ +.theme-minimal { + /* Override body background */ + background: #f8f9fa !important; + color: #333 !important; +} + +.theme-minimal .landing { + background: #f8f9fa !important; +} + +.theme-minimal .bg-shapes { + display: none !important; +} + +.theme-minimal .nav { + background: #fff !important; + border: 1px solid #e0e0e0 !important; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; + backdrop-filter: none !important; +} + +.theme-minimal .nav-logo .logo-text { + color: #333 !important; +} + +.theme-minimal .nav-logo .highlight { + color: #007bff !important; +} + +.theme-minimal .theme-switcher { + background: #f8f9fa !important; + border: 1px solid #ddd !important; + color: #333 !important; + backdrop-filter: none !important; +} + +.theme-minimal .theme-switcher:hover { + background: #e9ecef !important; + border-color: #007bff !important; +} + +.theme-minimal .cta-button { + background: #007bff !important; + color: #fff !important; +} + +.theme-minimal .cta-button:hover { + background: #0056b3 !important; +} + +.theme-minimal .hero-title { + color: #333 !important; +} + +.theme-minimal .gradient-text { + background: #007bff !important; + -webkit-background-clip: text !important; + -webkit-text-fill-color: transparent !important; + background-clip: text !important; +} + +.theme-minimal .hero-subtitle { + color: #666 !important; +} + +.theme-minimal .primary-button { + background: #007bff !important; + color: #fff !important; + box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2) !important; +} + +.theme-minimal .primary-button:hover { + background: #0056b3 !important; + transform: translateY(-1px) !important; +} + +.theme-minimal .secondary-button { + background: #fff !important; + color: #007bff !important; + border: 1px solid #007bff !important; +} + +.theme-minimal .secondary-button:hover { + background: #007bff !important; + color: #fff !important; +} + +.theme-minimal .badge { + background: #007bff !important; + color: #fff !important; +} + +.theme-minimal .stat-number { + color: #007bff !important; +} + +.theme-minimal .stat-label { + color: #666 !important; +} + +.theme-minimal .hero-image { + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important; +} + +.theme-minimal .floating-element { + display: none !important; +} + +.theme-minimal .glow-effect { + display: none !important; +} + +.theme-minimal .merger-workspace { + background: #fff !important; + border: 1px solid #e0e0e0 !important; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important; + backdrop-filter: none !important; +} + +.theme-minimal .merger-title { + color: #333 !important; +} + +.theme-minimal .merger-subtitle { + color: #666 !important; +} + +.theme-minimal .merger-upload-zone { + background: #f8f9fa !important; + border: 2px dashed #ddd !important; + color: #666 !important; +} + +.theme-minimal .merger-upload-zone:hover { + border-color: #007bff !important; + background: #e3f2fd !important; +} + +.theme-minimal .merger-upload-zone.drag-over { + border-color: #007bff !important; + background: #e3f2fd !important; +} + +.theme-minimal .merger-action-btn { + background: #007bff !important; + color: #fff !important; + box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2) !important; +} + +.theme-minimal .merger-clear-btn { + background: #f8f9fa !important; + color: #333 !important; + border: 1px solid #ddd !important; +} + +.theme-minimal .merger-clear-btn:hover { + background: #e9ecef !important; +} + +.theme-minimal .extract-section { + background: #fff !important; + border: 1px solid #e0e0e0 !important; +} + +.theme-minimal .extract-title { + color: #333 !important; +} + +.theme-minimal .extract-subtitle { + color: #666 !important; +} + +.theme-minimal .extract-result-block { + background: #f8f9fa !important; + border: 1px solid #ddd !important; + color: #333 !important; +} + +.theme-minimal .filename-modal-overlay { + background: rgba(0, 0, 0, 0.5) !important; +} + +.theme-minimal .filename-modal { + background: #fff !important; + color: #333 !important; + border: 1px solid #e0e0e0 !important; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important; +} + +.theme-minimal .filename-input { + background: #f8f9fa !important; + border: 1px solid #ddd !important; + color: #333 !important; +} + +.theme-minimal .filename-input:focus { + border-color: #007bff !important; +} + +.theme-minimal .filename-modal-actions button { + background: #007bff !important; + color: #fff !important; +} + +.theme-minimal .filename-modal-actions button:last-child { + background: #dc3545 !important; +} diff --git a/src/pages/landing page/landing.jsx b/src/pages/landing page/landing.jsx index fbdf5fb..54c72b7 100644 --- a/src/pages/landing page/landing.jsx +++ b/src/pages/landing page/landing.jsx @@ -11,6 +11,7 @@ import { FaTrash, FaClone } from 'react-icons/fa'; +import ThemeSwitcher from '../../components/ThemeSwitcher'; import './landing.css'; import * as pdfjsLib from 'pdfjs-dist/build/pdf'; @@ -144,9 +145,12 @@ const Landing = () => {
PDFFusion
- - Try Now - +
+ + + Try Now + +
{/* Hero section */}