From 4f627b4363d15c57cf76232599829b8110ed004a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Hatcher?= <nicolas@theuniverse.today>
Date: Thu, 27 Feb 2025 18:37:46 +0100
Subject: [PATCH] FIX: More sensible decrease/increase font-size

---
 .../src/components/Toolbar/Toolbar.tsx        | 44 +++++++++++++------
 .../src/components/Workbook/Workbook.tsx      |  1 +
 2 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/webapp/IronCalc/src/components/Toolbar/Toolbar.tsx b/webapp/IronCalc/src/components/Toolbar/Toolbar.tsx
index f572eae..9dd50fe 100644
--- a/webapp/IronCalc/src/components/Toolbar/Toolbar.tsx
+++ b/webapp/IronCalc/src/components/Toolbar/Toolbar.tsx
@@ -7,8 +7,6 @@ import type {
 import { styled } from "@mui/material/styles";
 import type {} from "@mui/system";
 import {
-  AArrowDown,
-  AArrowUp,
   AlignCenter,
   AlignLeft,
   AlignRight,
@@ -22,9 +20,11 @@ import {
   Grid2x2X,
   ImageDown,
   Italic,
+  Minus,
   PaintBucket,
   PaintRoller,
   Percent,
+  Plus,
   Redo2,
   RemoveFormatting,
   Strikethrough,
@@ -74,6 +74,7 @@ type ToolbarProperties = {
   onDownloadPNG: () => void;
   fillColor: string;
   fontColor: string;
+  fontSize: number;
   bold: boolean;
   underline: boolean;
   italic: boolean;
@@ -253,17 +254,7 @@ function Toolbar(properties: ToolbarProperties) {
       >
         <Type />
       </StyledButton>
-      <StyledButton
-        type="button"
-        $pressed={false}
-        disabled={!canEdit}
-        onClick={() => {
-          properties.onIncreaseFontSize(1);
-        }}
-        title={t("toolbar.increase_font_size")}
-      >
-        <AArrowUp />
-      </StyledButton>
+      <Divider />
       <StyledButton
         type="button"
         $pressed={false}
@@ -273,8 +264,21 @@ function Toolbar(properties: ToolbarProperties) {
         }}
         title={t("toolbar.decrease_font_size")}
       >
-        <AArrowDown />
+        <Minus />
       </StyledButton>
+      <FontSizeBox>{properties.fontSize}</FontSizeBox>
+      <StyledButton
+        type="button"
+        $pressed={false}
+        disabled={!canEdit}
+        onClick={() => {
+          properties.onIncreaseFontSize(1);
+        }}
+        title={t("toolbar.increase_font_size")}
+      >
+        <Plus />
+      </StyledButton>
+      <Divider />
       <StyledButton
         type="button"
         $pressed={false}
@@ -534,4 +538,16 @@ const Divider = styled("div")({
   margin: "0px 12px",
 });
 
+const FontSizeBox = styled("div")({
+  width: "24px",
+  height: "24px",
+  lineHeight: "24px",
+  textAlign: "center",
+  fontFamily: "Inter",
+  fontSize: "11px",
+  border: `1px solid ${theme.palette.grey["300"]}`,
+  borderRadius: "4px",
+  minWidth: "24px",
+});
+
 export default Toolbar;
diff --git a/webapp/IronCalc/src/components/Workbook/Workbook.tsx b/webapp/IronCalc/src/components/Workbook/Workbook.tsx
index 0cdee3c..bbe861e 100644
--- a/webapp/IronCalc/src/components/Workbook/Workbook.tsx
+++ b/webapp/IronCalc/src/components/Workbook/Workbook.tsx
@@ -628,6 +628,7 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
         }}
         fillColor={style.fill.fg_color || "#FFFFFF"}
         fontColor={style.font.color}
+        fontSize={style.font.sz}
         bold={style.font.b}
         underline={style.font.u}
         italic={style.font.i}