From 72926df6b49c2daeadd13530b3a2c8e29ac56958 Mon Sep 17 00:00:00 2001
From: venu <venu7731@gmail.com>
Date: Wed, 22 Jul 2020 15:56:32 -0700
Subject: [PATCH] added titles for icons throughout site

---
 src/components/ActionsPanel.js       | 7 ++++++-
 src/components/Footer.js             | 5 +++++
 src/components/MapExplorer.js        | 1 +
 src/components/Navbar.js             | 9 +++++----
 src/components/StateDropdown.js      | 6 +++++-
 src/components/StateHeader.js        | 2 +-
 src/components/Table.js              | 2 +-
 src/components/TimeseriesExplorer.js | 7 ++++++-
 8 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/src/components/ActionsPanel.js b/src/components/ActionsPanel.js
index 5e5699e987..ea412908ea 100644
--- a/src/components/ActionsPanel.js
+++ b/src/components/ActionsPanel.js
@@ -108,7 +108,11 @@ const ActionsPanel = ({
         )} IST`}</h5>
 
         {!showUpdates && (
-          <div className="bell-icon fadeInUp" style={trail[1]}>
+          <div
+            className="bell-icon fadeInUp"
+            title="Show the recent updated notifications."
+            style={trail[1]}
+          >
             {Bell}
             {newUpdate && <div className="indicator"></div>}
           </div>
@@ -117,6 +121,7 @@ const ActionsPanel = ({
         {showUpdates && BellOff}
         <div
           className="timeline-icon fadeInUp"
+          title="Show the recent Timeline."
           onClick={handleClick}
           style={trail[2]}
         >
diff --git a/src/components/Footer.js b/src/components/Footer.js
index 2fbe361dd7..5e314084af 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -22,6 +22,7 @@ function Footer(props) {
       <div className="links">
         <a
           href="https://t.me/covid19indiaorg"
+          title="Telegram"
           className="telegram"
           target="_blank"
           rel="noopener noreferrer"
@@ -30,6 +31,7 @@ function Footer(props) {
         </a>
         <a
           href="https://github.com/covid19india/covid19india-react"
+          title="GitHub"
           className="github"
           target="_blank"
           rel="noopener noreferrer"
@@ -40,6 +42,7 @@ function Footer(props) {
         <a
           className="api"
           href="https://api.covid19india.org"
+          title="COVID19-India API"
           target="_blank"
           rel="noopener noreferrer"
         >
@@ -48,6 +51,7 @@ function Footer(props) {
 
         <a
           href="https://twitter.com/covid19indiaorg"
+          title="Twitter"
           target="_blank"
           rel="noopener noreferrer"
           className="twitter"
@@ -57,6 +61,7 @@ function Footer(props) {
 
         <a
           href="mailto:hello@covid19india.org"
+          title="Mail"
           className="mail"
           target="_blank"
           rel="noopener noreferrer"
diff --git a/src/components/MapExplorer.js b/src/components/MapExplorer.js
index 866bec2fd2..ea79cb8dce 100644
--- a/src/components/MapExplorer.js
+++ b/src/components/MapExplorer.js
@@ -252,6 +252,7 @@ function MapExplorer({
 
             {mapMeta.mapType === MAP_TYPES.STATE && (
               <div
+                title="Back to Home"
                 className="back fadeInUp"
                 onClick={() => {
                   history.push('/#MapExplorer');
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index d815e7227d..8453182947 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -49,6 +49,7 @@ function Navbar({
   return (
     <animated.div className="Navbar" style={spring}>
       <div
+        title="Back to Home"
         className="navbar-left"
         onClick={setShowLanguageSwitcher.bind(this, !showLanguageSwitcher)}
       >
@@ -74,22 +75,22 @@ function Navbar({
 
         {windowSize.width > 769 && (
           <React.Fragment>
-            <Link to="/">
+            <Link to="/" title="Home">
               <span>
                 <Icon.Home {...activeNavIcon('/')} />
               </span>
             </Link>
-            <Link to="/blog">
+            <Link to="/blog" title="Blog">
               <span>
                 <Icon.Book {...activeNavIcon('/blog')} />
               </span>
             </Link>
-            <Link to="/about">
+            <Link to="/about" title="About">
               <span>
                 <Icon.HelpCircle {...activeNavIcon('/about')} />
               </span>
             </Link>
-            <span>
+            <span title="Dark/Light Mode">
               <SunMoon {...{darkMode}} />
             </span>
           </React.Fragment>
diff --git a/src/components/StateDropdown.js b/src/components/StateDropdown.js
index 8562072c37..6db31994fa 100644
--- a/src/components/StateDropdown.js
+++ b/src/components/StateDropdown.js
@@ -48,7 +48,11 @@ const StateDropdown = ({stateCode, trail}) => {
   );
 
   return (
-    <div className="StateDropdown" ref={dropdownRef}>
+    <div
+      className="StateDropdown"
+      title="Click here to select different States/UT."
+      ref={dropdownRef}
+    >
       <animated.h1
         className="state-name fadeInUp"
         style={trail}
diff --git a/src/components/StateHeader.js b/src/components/StateHeader.js
index b79b32d998..588a76ec0d 100644
--- a/src/components/StateHeader.js
+++ b/src/components/StateHeader.js
@@ -53,7 +53,7 @@ function StateHeader({data, stateCode}) {
           </h5>
         )}
         {data?.meta?.tested?.source && (
-          <h5>
+          <h5 title="Show the Relavent website for source.">
             {'per '}
             <a href={data.meta.tested.source} target="_noblank">
               source
diff --git a/src/components/Table.js b/src/components/Table.js
index c643287d8e..d926bc1527 100644
--- a/src/components/Table.js
+++ b/src/components/Table.js
@@ -234,7 +234,7 @@ function Table({data: states, regionHighlighted, setRegionHighlighted}) {
               </div>
             </div>
 
-            <h5 className="text">
+            <h5 className="text" title="About the site.">
               {t('Compiled from State Govt. numbers')},{' '}
               <Link to="/about">{t('know more')}!</Link>
             </h5>
diff --git a/src/components/TimeseriesExplorer.js b/src/components/TimeseriesExplorer.js
index c345943fb6..369c2a5e21 100644
--- a/src/components/TimeseriesExplorer.js
+++ b/src/components/TimeseriesExplorer.js
@@ -161,6 +161,7 @@ function TimeseriesExplorer({
     >
       <div className="timeseries-header">
         <div
+          title="Hepls you to toggle with/without maps."
           className={classnames('anchor', {
             stickied: anchor === 'timeseries',
           })}
@@ -244,7 +245,11 @@ function TimeseriesExplorer({
                 })}
             </select>
           </div>
-          <div className="reset-icon" onClick={resetDropdown}>
+          <div
+            className="reset-icon"
+            title="Reset back."
+            onClick={resetDropdown}
+          >
             <ReplyIcon />
           </div>
         </div>