Set larger clickable area for Version info logo

victronenergy · Mar 9, 2023 · 1791584 · 1791584
1 parent a253ed3
commit 1791584
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git a/src/app/Marine2/components/ui/Footer/Footer.tsx b/src/app/Marine2/components/ui/Footer/Footer.tsx
@@ -4,7 +4,7 @@ import VersionInfo from "../VersionInfo"
 
 const Footer = () => {
   return (
-    <div className="flex w-full flex-row justify-between pt-6 pb-4">
+    <div className="flex w-full flex-row justify-between pt-2 pb-4">
       <VersionInfo />
       <Settings />
     </div>

diff --git a/src/app/Marine2/components/ui/VersionInfo/VersionInfo.tsx b/src/app/Marine2/components/ui/VersionInfo/VersionInfo.tsx
@@ -19,13 +19,15 @@ const VersionInfo = () => {
     appViewsStore.setView(AppViews.DIAGNOSTICS)
   }
 
+  const toggleVersionInfo = () => {
+    setIsModalOpen(!isModalOpen)
+  }
+
   return (
-    <div className="cursor-pointer pl-4">
-      <button onClick={() => setIsModalOpen(!isModalOpen)}>
-        {/* todo: fix types for svg */}
-        {/* @ts-ignore */}
-        <LogoIcon className={"w-32 text-black dark:text-white"} alt={"Victron Energy"} />
-      </button>
+    <div className="cursor-pointer py-3 px-5 outline-none" onClick={toggleVersionInfo}>
+      {/* todo: fix types for svg */}
+      {/* @ts-ignore */}
+      <LogoIcon className={"w-32 text-black dark:text-white"} alt={"Victron Energy"} />
       <div className="flex justify-center items-center w-full">
         <Modal.Frame
           open={isModalOpen}