From 4016eb5944767ad2ff93c47b0c82b66df20b9703 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Hatcher?= <nicolas@theuniverse.today>
Date: Wed, 9 Oct 2024 18:08:06 +0200
Subject: [PATCH] FIX: Better support for mobile phones

---
 webapp/src/AppComponents/FileBar.tsx       | 23 +++++++++++++++++++---
 webapp/src/AppComponents/FileMenu.tsx      |  1 -
 webapp/src/components/navigation/sheet.tsx |  2 +-
 webapp/src/components/toolbar.tsx          |  1 +
 webapp/src/icons/index.ts                  |  2 ++
 5 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/webapp/src/AppComponents/FileBar.tsx b/webapp/src/AppComponents/FileBar.tsx
index 63f8baa..e7f685f 100644
--- a/webapp/src/AppComponents/FileBar.tsx
+++ b/webapp/src/AppComponents/FileBar.tsx
@@ -2,7 +2,7 @@ import styled from "@emotion/styled";
 import type { Model } from "@ironcalc/wasm";
 import { CircleCheck } from "lucide-react";
 import { useRef, useState } from "react";
-import { IronCalcLogo } from "./../icons";
+import { IronCalcIcon, IronCalcLogo } from "./../icons";
 import { FileMenu } from "./FileMenu";
 import { ShareButton } from "./ShareButton";
 import { WorkbookTitle } from "./WorkbookTitle";
@@ -19,7 +19,8 @@ export function FileBar(properties: {
   const [toast, setToast] = useState(false);
   return (
     <FileBarWrapper>
-      <IronCalcLogo style={{ width: "120px", marginLeft: "10px" }} />
+      <StyledDesktopLogo />
+      <StyledIronCalcIcon />
       <Divider />
       <FileMenu
         newModel={properties.newModel}
@@ -77,6 +78,22 @@ export function FileBar(properties: {
   );
 }
 
+const StyledDesktopLogo = styled(IronCalcLogo)`
+  width: 120px;
+  margin-left: 10px;
+  @media (max-width: 769px) {
+    display: none;
+  }
+`;
+
+const StyledIronCalcIcon = styled(IronCalcIcon)`
+  width: 36px;
+  margin-left: 10px;
+  @media (min-width: 769px) {
+    display: none;
+  }
+`;
+
 const Toast = styled("div")`
   font-weight: 400;
   font-size: 12px;
@@ -97,7 +114,7 @@ const FileBarWrapper = styled("div")`
   background: #fff;
   display: flex;
   align-items: center;
-  border-bottom: 1px solid #E0E0E0;
+  border-bottom: 1px solid #e0e0e0;
   position: relative;
   justify-content: space-between;
 `;
diff --git a/webapp/src/AppComponents/FileMenu.tsx b/webapp/src/AppComponents/FileMenu.tsx
index 6879404..4dd29a4 100644
--- a/webapp/src/AppComponents/FileMenu.tsx
+++ b/webapp/src/AppComponents/FileMenu.tsx
@@ -147,7 +147,6 @@ const FileMenuWrapper = styled("div")`
   padding: 10px;
   height: 20px;
   border-radius: 4px;
-  margin: 10px;
   &:hover {
     background-color: #f2f2f2;
   }
diff --git a/webapp/src/components/navigation/sheet.tsx b/webapp/src/components/navigation/sheet.tsx
index b7940e7..59bc47d 100644
--- a/webapp/src/components/navigation/sheet.tsx
+++ b/webapp/src/components/navigation/sheet.tsx
@@ -127,7 +127,7 @@ function Sheet(props: SheetProps) {
 const StyledMenu = styled(Menu)``;
 
 const StyledMenuItem = styled(MenuItem)`
-font-size: 12px;
+  font-size: 12px;
 `;
 
 const StyledButton = styled(Button)`
diff --git a/webapp/src/components/toolbar.tsx b/webapp/src/components/toolbar.tsx
index 8d085f1..d4ca308 100644
--- a/webapp/src/components/toolbar.tsx
+++ b/webapp/src/components/toolbar.tsx
@@ -397,6 +397,7 @@ const ToolbarContainer = styled("div")`
   font-family: Inter;
   border-radius: 4px 4px 0px 0px;
   overflow-x: auto;
+  padding-left: 11px;
 `;
 
 type TypeButtonProperties = { $pressed: boolean; $underlinedColor?: string };
diff --git a/webapp/src/icons/index.ts b/webapp/src/icons/index.ts
index f4565fe..4f5700a 100644
--- a/webapp/src/icons/index.ts
+++ b/webapp/src/icons/index.ts
@@ -21,6 +21,7 @@ import InsertRowAboveIcon from "./insert-row-above.svg?react";
 import InsertRowBelow from "./insert-row-below.svg?react";
 
 import IronCalcLogo from "./orange+black.svg?react";
+import IronCalcIcon from "./ironcalc_icon.svg?react";
 
 import Fx from "./fx.svg?react";
 
@@ -44,6 +45,7 @@ export {
   InsertColumnRightIcon,
   InsertRowAboveIcon,
   InsertRowBelow,
+  IronCalcIcon,
   IronCalcLogo,
   Fx,
 };