feat: add tooltips to header buttons (#274)

Author: hitarth-gg

src/extension/react/components/Panel.tsx

@@ -219,6 +219,7 @@ function Panel() {
           <div className="font-medium dark:text-charcoal-100">Devtron</div>
           <div className="flex gap-2">
             <CircularButton
+              tooltip="Switch between Light and Dark theme"
               onClick={() => {
                 setTheme(theme === 'light' ? 'dark' : 'light');
               }}
@@ -230,6 +231,7 @@ function Panel() {
               )}
             </CircularButton>
             <CircularButton
+              tooltip="Toggle Detail Panel position (right/bottom)"
               onClick={() => {
                 setDetailPanelPosition(detailPanelPosition === 'right' ? 'bottom' : 'right');
               }}
@@ -242,6 +244,11 @@ function Panel() {
             </CircularButton>
 
             <CircularButton
+              tooltip={
+                lockToBottom
+                  ? 'Turn Auto Scrolling Off'
+                  : 'Turn Auto Scrolling On (Auto Scroll to newly added events)'
+              }
               active={lockToBottom}
               onClick={() => {
                 setLockToBottom(!lockToBottom);
@@ -255,7 +262,7 @@ function Panel() {
               )}
             </CircularButton>
 
-            <CircularButton onClick={clearEvents}>
+            <CircularButton tooltip="Clear all events" onClick={clearEvents}>
               <Ban strokeWidth={3} size={15} />
             </CircularButton>
           </div>

src/extension/react/ui/CircularButton.tsx

@@ -7,21 +7,26 @@ type Props = {
   active?: boolean;
 };
 
-function CircularButton({ children, onClick, disabled = false, active = false }: Props) {
+function CircularButton({
+  children,
+  onClick,
+  tooltip = '',
+  disabled = false,
+  active = false,
+}: Props) {
   return (
-    <div>
-      <button
-        disabled={disabled}
-        className={`${active ? 'text-blue-500' : 'text-charcoal-200'} rounded-full p-1 ${
-          disabled
-            ? 'cursor-not-allowed opacity-50'
-            : 'cursor-pointer hover:bg-gray-300 hover:dark:bg-charcoal-300'
-        }`}
-        onClick={() => onClick()}
-      >
-        {children}
-      </button>
-    </div>
+    <button
+      title={tooltip}
+      disabled={disabled}
+      className={`${active ? 'text-blue-500' : 'text-charcoal-200'} rounded-full p-1 ${
+        disabled
+          ? 'cursor-not-allowed opacity-50'
+          : 'cursor-pointer hover:bg-gray-300 hover:dark:bg-charcoal-300'
+      }`}
+      onClick={() => onClick()}
+    >
+      {children}
+    </button>
   );
 }