From 9b7cdb2d481983b1cd96a582718cab8b93e5f1ac Mon Sep 17 00:00:00 2001
From: George Hopkins <george-hopkins@null.net>
Date: Fri, 22 Mar 2024 14:01:18 +0100
Subject: [PATCH] feat: Add tooltips to sidebar footer (#1888)

---
 .../src/components/Notifications/index.js     |  9 ++---
 .../bruno-app/src/components/Sidebar/index.js | 35 ++++++++++---------
 2 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/packages/bruno-app/src/components/Notifications/index.js b/packages/bruno-app/src/components/Notifications/index.js
index bb7df5b2f..15a055c76 100644
--- a/packages/bruno-app/src/components/Notifications/index.js
+++ b/packages/bruno-app/src/components/Notifications/index.js
@@ -84,8 +84,9 @@ const Notifications = () => {
 
   return (
     <StyledWrapper>
-      <div
-        className="relative"
+      <a
+        title="Notifications"
+        className="relative cursor-pointer"
         onClick={() => {
           dispatch(fetchNotifications());
           setShowNotificationsModal(true);
@@ -97,9 +98,9 @@ const Notifications = () => {
           className={`mr-2 hover:text-gray-700 ${unreadNotifications?.length > 0 ? 'bell' : ''}`}
         />
         {unreadNotifications.length > 0 && (
-          <div className="notification-count text-xs">{unreadNotifications.length}</div>
+          <span className="notification-count text-xs">{unreadNotifications.length}</span>
         )}
-      </div>
+      </a>
 
       {showNotificationsModal && (
         <Modal
diff --git a/packages/bruno-app/src/components/Sidebar/index.js b/packages/bruno-app/src/components/Sidebar/index.js
index 1b906d412..6f5f72730 100644
--- a/packages/bruno-app/src/components/Sidebar/index.js
+++ b/packages/bruno-app/src/components/Sidebar/index.js
@@ -93,26 +93,29 @@ const Sidebar = () => {
               <Collections />
             </div>
 
-            <div className="footer flex px-1 py-2 absolute bottom-0 left-0 right-0 items-center cursor-pointer select-none">
+            <div className="footer flex px-1 py-2 absolute bottom-0 left-0 right-0 items-center select-none">
               <div className="flex items-center ml-1 text-xs ">
-                <IconSettings
-                  size={18}
-                  strokeWidth={1.5}
-                  className="mr-2 hover:text-gray-700"
+                <a
+                  title="Preferences"
+                  className="mr-2 cursor-pointer hover:text-gray-700"
                   onClick={() => dispatch(showPreferences(true))}
-                />
-                <IconCookie
-                  size={18}
-                  strokeWidth={1.5}
-                  className="mr-2 hover:text-gray-700"
+                >
+                  <IconSettings size={18} strokeWidth={1.5} />
+                </a>
+                <a
+                  title="Cookies"
+                  className="mr-2 cursor-pointer hover:text-gray-700"
                   onClick={() => setCookiesOpen(true)}
-                />
-                <IconHeart
-                  size={18}
-                  strokeWidth={1.5}
-                  className="mr-2 hover:text-gray-700"
+                >
+                  <IconCookie size={18} strokeWidth={1.5} />
+                </a>
+                <a
+                  title="Golden Edition"
+                  className="mr-2 cursor-pointer hover:text-gray-700"
                   onClick={() => setGoldenEditonOpen(true)}
-                />
+                >
+                  <IconHeart size={18} strokeWidth={1.5} />
+                </a>
                 <Notifications />
               </div>
               <div className="pl-1" style={{ position: 'relative', top: '3px' }}>