Button component

desktop-app-rewrite/src/renderer/components/AddressBar/Menu/Flyout/index.tsx

@@ -2,7 +2,7 @@ import Zoom from './Zoom';
 
 const MenuFlyout = () => {
   return (
-    <div className="absolute top-[20px] right-[-4px] w-48 rounded-md bg-white p-2 shadow-lg ring-1 ring-slate-500 !ring-opacity-40 focus:outline-none dark:bg-slate-900 dark:ring-white dark:!ring-opacity-40">
+    <div className="absolute top-[26px] right-[-4px] w-48 rounded-md bg-white p-2 shadow-lg ring-1 ring-slate-500 !ring-opacity-40 focus:outline-none dark:bg-slate-900 dark:ring-white dark:!ring-opacity-40">
       <Zoom />
     </div>
   );

desktop-app-rewrite/src/renderer/components/AddressBar/Menu/index.tsx

@@ -1,14 +1,15 @@
 import { Icon } from '@iconify/react';
 import { useState } from 'react';
+import Button from 'renderer/components/Button';
 import MenuFlyout from './Flyout';
 
 const Menu = () => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   return (
     <div className="relative flex items-center">
-      <button onClick={() => setIsOpen(!isOpen)} type="button">
+      <Button onClick={() => setIsOpen(!isOpen)} isActive={isOpen}>
         <Icon icon="carbon:overflow-menu-vertical" />
-      </button>
+      </Button>
       {isOpen ? <MenuFlyout /> : null}
     </div>
   );

desktop-app-rewrite/src/renderer/components/AddressBar/NavigationControls.tsx

@@ -1,5 +1,6 @@
 import { Icon } from '@iconify/react';
 import { webViewPubSub } from 'renderer/lib/pubsub';
+import Button from '../Button';
 
 export const NAVIGATION_EVENTS = {
   BACK: 'back',
@@ -15,14 +16,9 @@ interface NavigationItemProps {
 
 const NavigationButton = ({ label, icon, action }: NavigationItemProps) => {
   return (
-    <button
-      type="button"
-      className="flex items-center justify-center rounded-full px-2 py-1"
-      onClick={action}
-      title={label}
-    >
+    <Button className="!rounded-full px-2 py-1" onClick={action} title={label}>
       <Icon icon={icon} />
-    </button>
+    </Button>
   );
 };
 

desktop-app-rewrite/src/renderer/components/AddressBar/index.tsx

@@ -12,6 +12,7 @@ const AddressBar = () => {
   const address = useSelector(selectAddress);
   const darkMode = useSelector(selectDarkMode);
   const dispatch = useDispatch();
+
   useEffect(() => {
     if (address === typedAddress) {
       return;
@@ -35,6 +36,7 @@ const AddressBar = () => {
 
     dispatch(setAddress(newAddress));
   };
+
   const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (e) => {
     if (e.key === 'Enter') {
       inputRef.current?.blur();

desktop-app-rewrite/src/renderer/components/Button/index.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import cx from 'classnames';
+
+interface CustomProps {
+  className?: string;
+  isActive?: boolean;
+}
+
+const Button = ({
+  className = '',
+  isActive = false,
+  children,
+  ...props
+}: CustomProps &
+  React.DetailedHTMLProps<
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
+    HTMLButtonElement
+  >) => {
+  return (
+    <button
+      className={cx(
+        'flex items-center justify-center rounded-sm p-1 hover:bg-slate-400 dark:hover:bg-slate-600',
+        {
+          'bg-slate-400': isActive,
+          'dark:bg-slate-600': isActive,
+          [className]: className?.length,
+        }
+      )}
+      type="button"
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default Button;