Added tooltips to icons for clarity

bryankhor07 · Nov 26, 2024 · e731a6d · e731a6d
1 parent d6e5a49
commit e731a6d
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 15 deletions.
diff --git a/.firebase/hosting.YnVpbGQ.cache b/.firebase/hosting.YnVpbGQ.cache
@@ -5,14 +5,14 @@ logo512.png,1731212379472,212b102aa09e51b3b3e06647e81f7801a61333e171f6582e812437
 logo192.png,1731212379364,79e2b749561016bc8af300ea19f48347ceed3cb1a54f48ae456172eca45e08f0
 favicon.ico,1731212377518,27edce7be5922cf0bef7d4136f69b5bfbdd5bf8c13c7b026f71187d41a00aa7d
 404.html,1732137662854,762bf484ba67404bd1a3b181546ea28d60dfddf18e9dd4795d8d25bcf3c1a890
-index.html,1732511239070,8f8d2b5afae594dad2d627b36019a4e8801927b518158f39dc8b148837e37f9f
-asset-manifest.json,1732511239069,8f484135c6429484b9b65e7457ae207f2d3052666c06168ee4cee8de391b247e
-static/media/google-icon.c920552d98e3ca0c9df5.webp,1732511239070,5d10e8f1b91339b5922ca21a6eb65c23e8c5508d78342dbc7c25a893a983c16f
-static/js/main.edbc7f5f.js.LICENSE.txt,1732511239070,c65fc35201c941992e9eafa419204cb464665f9b55456cacb63984e17cd81351
-static/css/main.e51f055e.css,1732511239070,488c68ac2f5052f7ee67c7696a90335bd597104d4941988295c4049b00753710
-static/js/453.e120f09d.chunk.js,1732511239070,b835c0a01e69db4978d2421ec616111e38f1c5ca2a7626659d66545c61072f2a
-static/js/453.e120f09d.chunk.js.map,1732511239070,bf336902b329b63f00548cab95d8a810de93c00b7833f9a9f9f951adba94deb3
-static/css/main.e51f055e.css.map,1732511239070,a7c1ac56effdef3f46396d6036a1fb12984e989e458779e4434602d65a2a2e15
-static/media/onlinerecipebackground.f304ebe8c62e40b071d8.jpg,1732511239070,2ada5911bbcc257b7c0cb57ff1512c2365ef2223f9a022c41a38bd7cbaa23c3f
-static/js/main.edbc7f5f.js,1732511239070,6abab6410f1331c703128874564c43d17afc996061fe42d8a6603cc55e0f8d58
-static/js/main.edbc7f5f.js.map,1732511239070,ab21615512fa598b8b71d12d99bdac4516adb7597255727ea8decdbb2d571f60
+index.html,1732562214297,bee3705ec8752ec54d16ad4b49703f14842ef1fc7c3b395f99a1e4072c52df37
+asset-manifest.json,1732562214297,fef2a327394f7fe5b88f134522396a1dffd1755ad4dfa92f04b5c15743434927
+static/media/google-icon.c920552d98e3ca0c9df5.webp,1732562214307,5d10e8f1b91339b5922ca21a6eb65c23e8c5508d78342dbc7c25a893a983c16f
+static/js/main.05be02a3.js.LICENSE.txt,1732562214308,c65fc35201c941992e9eafa419204cb464665f9b55456cacb63984e17cd81351
+static/js/453.e120f09d.chunk.js.map,1732562214308,bf336902b329b63f00548cab95d8a810de93c00b7833f9a9f9f951adba94deb3
+static/js/453.e120f09d.chunk.js,1732562214308,b835c0a01e69db4978d2421ec616111e38f1c5ca2a7626659d66545c61072f2a
+static/css/main.e51f055e.css,1732562214308,488c68ac2f5052f7ee67c7696a90335bd597104d4941988295c4049b00753710
+static/css/main.e51f055e.css.map,1732562214308,a7c1ac56effdef3f46396d6036a1fb12984e989e458779e4434602d65a2a2e15
+static/media/onlinerecipebackground.f304ebe8c62e40b071d8.jpg,1732562214307,2ada5911bbcc257b7c0cb57ff1512c2365ef2223f9a022c41a38bd7cbaa23c3f
+static/js/main.05be02a3.js,1732562214308,0fe42dcca29e1df3cd834c4846e597bb76659329a42be7cb86158be8ecb1c350
+static/js/main.05be02a3.js.map,1732562214310,f7f588960350b6e4faeda68e10039a88bdcf38f70373ecc7717545837d88c93c
diff --git a/src/components/header.jsx b/src/components/header.jsx
@@ -83,7 +83,7 @@ export default function Header() {
             onChange={toggleDarkMode}
             aria-label="Toggle dark mode"
           />
-          <span className="slider">
+          <span className="slider" title="Toggle dark mode">
             <i className="fas fa-sun sun-icon"></i>
             <i className="fas fa-moon moon-icon"></i>
           </span>
@@ -95,6 +95,7 @@ export default function Header() {
               alt="Profile Pic"
               className="profile-photo"
               onClick={redirectToProfilePage}
+              title="Profile"
             />
           ) : null}
           <button className="log-out-btn" onClick={handleLogOut}>

diff --git a/src/components/profileNavBar.jsx b/src/components/profileNavBar.jsx
@@ -7,7 +7,11 @@ export default function ProfileNavBar(props) {
 
   return (
     <div className="profile-navbar">
-      <button className="back-btn" onClick={props.goBack}>
+      <button
+        className="back-btn"
+        onClick={props.goBack}
+        title="Return to Previous Page"
+      >
         <img src={BackButtonImg} alt="Back Button" className="back-btn-img" />
       </button>
       <h1 className="profile-title">{props.profileInfoData.name}'s Profile</h1>

diff --git a/src/components/recipeModal.jsx b/src/components/recipeModal.jsx
@@ -106,7 +106,7 @@ export default function RecipeModal({
   return (
     <div className="recipe-modal">
       <div className="modal-content">
-        <span className="close" onClick={onClose}>
+        <span className="close" onClick={onClose} title="Close">
           &times;
         </span>
         <div className="top-section">
@@ -219,6 +219,7 @@ export default function RecipeModal({
                       <i
                         className="fas fa-trash trash-icon"
                         onClick={() => deleteComment(comment.commentID)}
+                        title="Delete comment"
                       ></i>
                     )}
                   </div>

diff --git a/src/components/searchBar.jsx b/src/components/searchBar.jsx
@@ -15,7 +15,11 @@ const SearchBar = ({ searchQuery, setSearchQuery, onSearch }) => {
           }
         }}
       />
-      <i className="fas fa-search search-icon" onClick={onSearch}></i>
+      <i
+        className="fas fa-search search-icon"
+        onClick={onSearch}
+        title="Search"
+      ></i>
     </div>
   );
 };