diff --git a/src/App.css b/src/App.css index 8022b77..5892952 100644 --- a/src/App.css +++ b/src/App.css @@ -469,6 +469,14 @@ h1, h2, h3 { font-weight: 900; letter-spacing: -1px; } flex-direction: column; gap: 0.75rem; } + +.btn-download-main { + width: 100%; /* Makes it fill the entire sidebar width */ + padding: 16px; /* Optional: makes it slightly taller/chunkier */ + font-size: 1rem; /* Optional: makes the text more prominent */ + margin-bottom: 12px; /* Spacing between this and the GitHub link */ +} + .stat-item { font-size: 0.9rem; color: var(--text-muted); diff --git a/src/pages/PluginDetail.tsx b/src/pages/PluginDetail.tsx index b885bc6..e6af0f7 100644 --- a/src/pages/PluginDetail.tsx +++ b/src/pages/PluginDetail.tsx @@ -70,6 +70,7 @@ const PluginDetail = () => { const [reviewForm, setReviewForm] = useState({ rating: 5, comment: '' }); const [adShown, setAdShown] = useState(false); const [mainScreenshot, setMainScreenshot] = useState(null); + const [lightboxImage, setLightboxImage] = useState(null); const [selectedLanguage] = useState('en'); const [currentDescription, setCurrentDescription] = useState(''); const [setLoading] = useState(true); @@ -350,6 +351,8 @@ const PluginDetail = () => { src={mainScreenshot || plugin.screenshots[0].path} alt="Main" className="main-screenshot" + style={{ cursor: 'zoom-in' }} // Suggests it can be expanded + onClick={() => setLightboxImage(mainScreenshot || plugin.screenshots[0].path)} />
{plugin.screenshots.map((shot: any) => ( @@ -604,6 +607,16 @@ const PluginDetail = () => {
+ + {/* LIGHTBOX MODAL */} + {lightboxImage && ( +
setLightboxImage(null)}> +
+ Expanded + +
+
+ )} ); };