From 8e2030b0abfa2d53cae83414bee3bbafdbd46dea Mon Sep 17 00:00:00 2001
From: seccodesmith <admin@seccodesmith.pl>
Date: Mon, 26 May 2025 00:06:30 +0200
Subject: [PATCH] feat: enhance ProjectModal and Projects components by
 removing unused onClose prop and improving modal styling

---
 src/components/ProjectCard.tsx  |   2 +-
 src/components/ProjectModal.tsx | 102 ++++++++++++++++++++++++++++----
 src/pages/Projects.tsx          |   6 +-
 3 files changed, 92 insertions(+), 18 deletions(-)

diff --git a/src/components/ProjectCard.tsx b/src/components/ProjectCard.tsx
index 142c1b0..01a5a48 100644
--- a/src/components/ProjectCard.tsx
+++ b/src/components/ProjectCard.tsx
@@ -63,7 +63,7 @@ const ProjectLinks: React.FC<{ links: { github?: string; demo?: string }, id: st
     <button
       className={`btn btn-outline-secondary  ${style.btnOutlineSecondary}`}
       onClick={() => onOpenDetails(id)}
-    >
+       data-bs-toggle="modal" data-bs-target="#shadowguardianModal">
       <i className={`fas fa-info-circle ${style.btnIcon}`} ></i>
       Project Details
     </button>
diff --git a/src/components/ProjectModal.tsx b/src/components/ProjectModal.tsx
index a3e3330..6cc4f03 100644
--- a/src/components/ProjectModal.tsx
+++ b/src/components/ProjectModal.tsx
@@ -5,23 +5,24 @@ import style from '@styles/Project.module.scss'
 
 interface ProjectModalProps {
   project: ProjectProps | null;
-  onClose: () => void;
 }
 
-export const ProjectModal: React.FC<ProjectModalProps> = ({ project, onClose }) => {
+export const ProjectModal: React.FC<ProjectModalProps> = ({ project }) => {
   if (!project) return null;
   
   return (
     <div className="modal fade" id="shadowguardianModal" tabIndex={-1} aria-labelledby="shadowguardianModalLabel" aria-hidden="true">
         <div className="modal-dialog modal-xl modal-dialog-scrollable">
-            <div className="modal-content">
+            <div className={`modal-content ${style.modalContent}`}>
                 <div className="modal-header">
-                    <h5 className="modal-title" id="shadowguardianModalLabel">ShadowGuardian: Secure IoT Monitoring System</h5>
-                    <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    <h5 className={style.modalHeader} id="shadowguardianModalLabel">
+                        {project.title}
+                    </h5>
+                    <button type="button" className={`btn-close ${style.btnClose}`} data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
-                <div className="modal-body">
+                <div className={`modal-body ${style.modalBody}`}>
                     <div className="mb-4">
-                        <img src="/api/placeholder/1000/400" className="img-fluid rounded mb-3" alt="ShadowGuardian Project"></img>
+                        <img src="/api/placeholder/1000/400" className="img-fluid rounded mb-3" alt="ShadowGuardian Project" />
                         <div className="row">
                             <div className="col-md-8">
                                 <p>ShadowGuardian is a comprehensive security monitoring system designed for both residential and commercial applications. Built on a foundation of STM32 microcontrollers, it provides reliable, secure monitoring with extremely low power consumption, allowing for battery operation of up to 2 years.</p>
@@ -56,18 +57,95 @@ export const ProjectModal: React.FC<ProjectModalProps> = ({ project, onClose })
                         <li>Optional cellular backup connection for critical deployments</li>
                     </ul>
                     
+                    <h4 className="mt-4 mb-3">Technologies Used</h4>
+                    <div className="mb-4">
+                        <span className="tech-chip">
+                            <i className="devicon-cplusplus-plain tech-chip-icon"></i>
+                            <span className="tech-chip-name">C++</span>
+                        </span>
+                        <span className="tech-chip">
+                            <i className="fas fa-microchip tech-chip-icon"></i>
+                            <span className="tech-chip-name">STM32F4</span>
+                        </span>
+                        <span className="tech-chip">
+                            <i className="fas fa-wifi tech-chip-icon"></i>
+                            <span className="tech-chip-name">ESP32</span>
+                        </span>
+                        <span className="tech-chip">
+                            <i className="fas fa-shield-alt tech-chip-icon"></i>
+                            <span className="tech-chip-name">AES-256</span>
+                        </span>
+                        <span className="tech-chip">
+                            <i className="devicon-react-original tech-chip-icon"></i>
+                            <span className="tech-chip-name">React Native</span>
+                        </span>
+                        <span className="tech-chip">
+                            <i className="fas fa-broadcast-tower tech-chip-icon"></i>
+                            <span className="tech-chip-name">BLE 5.0</span>
+                        </span>
+                        <span className="tech-chip">
+                            <i className="fas fa-network-wired tech-chip-icon"></i>
+                            <span className="tech-chip-name">Zigbee</span>
+                        </span>
+                        <span className="tech-chip">
+                            <i className="fas fa-server tech-chip-icon"></i>
+                            <span className="tech-chip-name">Node.js</span>
+                        </span>
+                        <span className="tech-chip">
+                            <i className="fas fa-database tech-chip-icon"></i>
+                            <span className="tech-chip-name">PostgreSQL</span>
+                        </span>
+                        <span className="tech-chip">
+                            <i className="devicon-docker-plain tech-chip-icon"></i>
+                            <span className="tech-chip-name">Docker</span>
+                        </span>
+                    </div>
+                    
+                    <h4 className="mt-4 mb-3">Gallery</h4>
+                    <div className="row">
+                        <div className="col-md-4 col-6">
+                            <div className="gallery-item">
+                                <img src="/api/placeholder/300/300" alt="ShadowGuardian Hub" className="gallery-image"></img>
+                            </div>
+                        </div>
+                        <div className="col-md-4 col-6">
+                            <div className="gallery-item">
+                                <img src="/api/placeholder/300/300" alt="ShadowGuardian Sensor" className="gallery-image"></img>
+                            </div>
+                        </div>
+                        <div className="col-md-4 col-6">
+                            <div className="gallery-item">
+                                <img src="/api/placeholder/300/300" alt="Mobile App Dashboard" className="gallery-image" />
+                            </div>
+                        </div>
+                        <div className="col-md-4 col-6">
+                            <div className="gallery-item">
+                                <img src="/api/placeholder/300/300" alt="Door Sensor Installation" className="gallery-image" />
+                            </div>
+                        </div>
+                        <div className="col-md-4 col-6">
+                            <div className="gallery-item">
+                                <img src="/api/placeholder/300/300" alt="System Architecture Diagram" className="gallery-image" />
+                            </div>
+                        </div>
+                        <div className="col-md-4 col-6">
+                            <div className="gallery-item">
+                                <img src="/api/placeholder/300/300" alt="PCB Design" className="gallery-image" />
+                            </div>
+                        </div>
+                    </div>
                 </div>
-                <div className="modal-footer">
-                    <a href="#" className="btn btn-outline-secondary">
+                <div className={`modal-footer ${style.modalFooter}`}>
+                    <a href="#" className={`btn btn-outline-secondary ${style.btnOutlineSecondary}`}>
                         <i className="fab fa-github btn-icon"></i>Source Code
                     </a>
-                    <a href="#" className="btn btn-outline-secondary">
+                    <a href="#" className={`btn btn-outline-secondary ${style.btnOutlineSecondary}`}>
                         <i className="fas fa-external-link-alt btn-icon"></i>Live Demo
                     </a>
-                    <a href="#" className="btn btn-outline-secondary">
+                    <a href="#" className={`btn btn-outline-secondary ${style.btnOutlineSecondary}`}>
                         <i className="fas fa-book btn-icon"></i>Documentation
                     </a>
-                    <button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                    <button type="button" className={`btn btn-secondary`} data-bs-dismiss="modal">Close</button>
                 </div>
             </div>
         </div>
diff --git a/src/pages/Projects.tsx b/src/pages/Projects.tsx
index acc020a..fb9b6c6 100644
--- a/src/pages/Projects.tsx
+++ b/src/pages/Projects.tsx
@@ -32,10 +32,6 @@ export const Projects = () => {
     }
   };
 
-  const handleCloseDetails = () => {
-    setSelectedProject(null);
-  };
-
   return (
     <>
       <PageHeader
@@ -90,7 +86,7 @@ export const Projects = () => {
       </div>
 
       {selectedProject && (
-        <ProjectModal project={selectedProject} onClose={handleCloseDetails} />
+        <ProjectModal project={selectedProject} />
       )}
     </>
   );