From 9a3ea181ee9af3a29f8959f6247010ddca99478c Mon Sep 17 00:00:00 2001
From: Dallas <71103219+LeleDallas@users.noreply.github.com>
Date: Fri, 17 Nov 2023 16:26:54 +0100
Subject: [PATCH] fix: Reliability issue

---
 src/screens/About.tsx         | 11 +++++++----
 src/screens/Modal.tsx         |  4 ++--
 src/screens/ModalProjects.tsx |  2 +-
 src/screens/Projects.tsx      | 10 ++++++----
 src/screens/Resume.tsx        |  7 ++++++-
 5 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/screens/About.tsx b/src/screens/About.tsx
index 1cf1daa..634f375 100644
--- a/src/screens/About.tsx
+++ b/src/screens/About.tsx
@@ -8,6 +8,11 @@ const About = ({ active }: ScreenProps) => {
     const [visible, setVisible] = useState(false)
     const [data, setData] = useState<DataModel>(technologiesItems[0])
 
+    const onClick = (technology: DataModel) => {
+        setVisible(true)
+        setData(technology)
+    }
+
     return (
         <article
             style={{ padding: "30px" }}
@@ -49,10 +54,8 @@ const About = ({ active }: ScreenProps) => {
                 <ul className="testimonials-list has-scrollbar">
                     {technologiesItems.map(technology =>
                         <li key={technology.title}
-                            onClick={() => {
-                                setVisible(true)
-                                setData(technology)
-                            }}
+                            onKeyDown={() => onClick(technology)}
+                            onClick={() => onClick(technology)}
                             className="testimonials-item"
                         >
                             <div className="content-card">
diff --git a/src/screens/Modal.tsx b/src/screens/Modal.tsx
index 9f635f5..5130c04 100644
--- a/src/screens/Modal.tsx
+++ b/src/screens/Modal.tsx
@@ -3,14 +3,14 @@ import { ModalProps } from "../types"
 
 const Modal = ({ visible, setVisible, data }: ModalProps) =>
     <div className={visible ? "modal-container active" : "modal-container"}  >
-        <div className={visible ? "overlay active" : "overlay"} onClick={() => setVisible(false)}></div>
+        <div className={visible ? "overlay active" : "overlay"} onClick={() => setVisible(false)} onKeyDown={() => setVisible(false)}></div>
         <section className="testimonials-modal">
             <button className="modal-close-btn" onClick={() => setVisible(false)}>
                 <IconFont name="close1" color={"white"} size={10} />
             </button>
             <div className="modal-img-wrapper">
                 <figure className="modal-avatar-box">
-                    <img style={{ padding: 10}} src={data.image} alt={data.title} width="80" />
+                    <img style={{ padding: 10 }} src={data.image} alt={data.title} width="80" />
                 </figure>
                 <img src="./assets/icon-quote.svg" alt="quote icon" />
             </div>
diff --git a/src/screens/ModalProjects.tsx b/src/screens/ModalProjects.tsx
index 42b2727..8c62edd 100644
--- a/src/screens/ModalProjects.tsx
+++ b/src/screens/ModalProjects.tsx
@@ -8,7 +8,7 @@ const ModalProjects = ({ visible, setVisible, data }: ModalProjectProps) => {
     const [overIos, setOverIos] = useState(false)
     return (
         <div className={visible ? "modal-container active" : "modal-container"}  >
-            <div className={visible ? "overlay active" : "overlay"} onClick={() => setVisible(false)} />
+            <div className={visible ? "overlay active" : "overlay"} onKeyDown={() => setVisible(false)} onClick={() => setVisible(false)} />
             <section style={{ width: 1050 }} className="testimonials-modal">
                 <button className="modal-close-btn" onClick={() => setVisible(false)}>
                     <IconFont name="close1" color={"white"} size={10} />
diff --git a/src/screens/Projects.tsx b/src/screens/Projects.tsx
index c0803e2..9c8cc42 100644
--- a/src/screens/Projects.tsx
+++ b/src/screens/Projects.tsx
@@ -16,6 +16,10 @@ const Projects = ({ active }: ScreenProps) => {
 
     const items = ["All", "Mobile", "Software", "Web"]
 
+    const onClick = (project: DataProjectModel) => {
+        setData(project)
+        setVisible(true)
+    }
     return (
         <article
             style={{ padding: "30px" }}
@@ -51,10 +55,8 @@ const Projects = ({ active }: ScreenProps) => {
                 <ul className="project-list">
                     {projects.filter(project => selectedCategory === "All" ? true : project.type.includes(selectedCategory)).map(project =>
                         <li
-                            onClick={() => {
-                                setData(project)
-                                setVisible(true)
-                            }}
+                            onKeyDown={() => onClick(project)}
+                            onClick={() => onClick(project)}
                             key={project.title} className="project-item  active">
                             <a href="#">
                                 <figure className="project-img">
diff --git a/src/screens/Resume.tsx b/src/screens/Resume.tsx
index 91e4c7f..9dd2d24 100644
--- a/src/screens/Resume.tsx
+++ b/src/screens/Resume.tsx
@@ -59,6 +59,7 @@ const Resume = ({ active }: ScreenProps) => {
                     <div className="service-content-box">
                         <a href="#">
                             <h4 onClick={() => setVisible(true)}
+                                onKeyDown={() => setVisible(true)}
                                 className="h4 service-item-title"
                                 style={{ textAlign: "center" }}>
                                 Check full resume
@@ -66,6 +67,7 @@ const Resume = ({ active }: ScreenProps) => {
                         </a>
                         <a href="#">
                             <p onClick={downloadPdfResume}
+                                onKeyDown={downloadPdfResume}
                                 className="service-item-text"
                                 style={{ textAlign: "center" }}>
                                 Download resume
@@ -75,7 +77,10 @@ const Resume = ({ active }: ScreenProps) => {
                 </div>
             </section>
             <div className={visible ? "modal-container active" : "modal-container"}  >
-                <div className={visible ? "overlay active" : "overlay"} onClick={() => setVisible(false)} />
+                <div className={visible ? "overlay active" : "overlay"}
+                    onKeyDown={() => setVisible(false)}
+                    onClick={() => setVisible(false)}
+                />
                 <section style={{ width: 1050, height: 680, }} className="testimonials-modal">
                     <button className="modal-close-btn" onClick={() => setVisible(false)}>
                         <IconFont name="close1" color={"white"} size={10} />