From c92c0650732ddc1ca408c83f3c0c3c574e9ac878 Mon Sep 17 00:00:00 2001
From: Daniel <danielglezalbo@gmail.com>
Date: Wed, 4 Dec 2024 23:37:34 +0100
Subject: [PATCH] UPDATE: Added a Help button

---
 webapp/src/AppComponents/FileBar.tsx | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/webapp/src/AppComponents/FileBar.tsx b/webapp/src/AppComponents/FileBar.tsx
index 647554e..773e56a 100644
--- a/webapp/src/AppComponents/FileBar.tsx
+++ b/webapp/src/AppComponents/FileBar.tsx
@@ -35,6 +35,11 @@ export function FileBar(properties: {
         }}
         onDelete={properties.onDelete}
       />
+      <HelpButton
+        onClick={() => window.open("https://docs.ironcalc.com", "_blank")}
+      >
+        Help
+      </HelpButton>
       <WorkbookTitle
         name={properties.model.getName()}
         onNameChange={(name) => {
@@ -98,6 +103,19 @@ const StyledIronCalcIcon = styled(IronCalcIcon)`
   }
 `;
 
+const HelpButton = styled("div")`
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  font-family: Inter;
+  padding: 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  &:hover {
+    background-color: #f2f2f2;
+  }
+`;
+
 const Toast = styled("div")`
   font-weight: 400;
   font-size: 12px;
@@ -107,7 +125,7 @@ const Toast = styled("div")`
 `;
 
 const Divider = styled("div")`
-  margin: 0px 16px;
+  margin: 0px 8px 0px 16px;
   height: 12px;
   border-left: 1px solid #e0e0e0;
 `;