From 02e04a1740028537282b3216cc722771a82f482f Mon Sep 17 00:00:00 2001 From: Abigail Alexander Date: Thu, 30 Jan 2025 13:45:28 +0000 Subject: [PATCH 1/4] Update font to use default 16px sizing for rem conversion instead of 10px --- src/types/font.test.ts | 4 ++-- src/types/font.ts | 5 ++++- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/types/font.test.ts b/src/types/font.test.ts index c42d7fcd..f91b65bc 100644 --- a/src/types/font.test.ts +++ b/src/types/font.test.ts @@ -6,7 +6,7 @@ describe("Font", (): void => { const fontStyle = font.css(); expect(fontStyle).toEqual({ fontFamily: "sans,sans-serif", - fontSize: "1rem", + fontSize: "0.625rem", fontWeight: "normal", fontStyle: "normal" }); @@ -16,7 +16,7 @@ describe("Font", (): void => { const fontStyle = font.css(); expect(fontStyle).toEqual({ fontFamily: "Liberation sans,sans-serif", - fontSize: "1.6rem", + fontSize: "1rem", fontWeight: "bold", fontStyle: "italic" }); diff --git a/src/types/font.ts b/src/types/font.ts index 3cc6d9de..465fe308 100644 --- a/src/types/font.ts +++ b/src/types/font.ts @@ -34,7 +34,10 @@ export class Font { * user and default properties for optional parameters not input by the user */ public css(): CSSProperties { - const fontSize = this.size ? `${this.size / 10}rem` : undefined; + // Convert from px to REM by dividing pixels by default browser font size 16px + // If a user has manually adjusted their browser font size, this might not be scaled + // correctly, but given bob screens are pixel placed we shouldn't expect this to scale + const fontSize = this.size ? `${this.size / 16}rem` : undefined; const fontWeight = this.style === FontStyle.Bold || this.style === FontStyle.BoldItalic ? "bold" From df4c7f2d55ec5349b3ee02de91fbd4c731183b47 Mon Sep 17 00:00:00 2001 From: Abigail Alexander Date: Thu, 30 Jan 2025 13:45:42 +0000 Subject: [PATCH 2/4] Update tests for new font sizing --- src/ui/widgets/ChoiceButton/choiceButton.test.tsx | 2 +- src/ui/widgets/XYPlot/xyPlotOptions.test.ts | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/ui/widgets/ChoiceButton/choiceButton.test.tsx b/src/ui/widgets/ChoiceButton/choiceButton.test.tsx index 1b28fe71..ed3e634c 100644 --- a/src/ui/widgets/ChoiceButton/choiceButton.test.tsx +++ b/src/ui/widgets/ChoiceButton/choiceButton.test.tsx @@ -21,7 +21,7 @@ describe("", (): void => { expect(buttons[0].style.height).toEqual("43px"); expect(buttons[1].style.width).toEqual("46px"); expect(buttons[0].style.backgroundColor).toEqual("rgb(210, 210, 210)"); - expect(buttons[1].style.fontSize).toEqual("1.4rem"); + expect(buttons[1].style.fontSize).toEqual("0.875rem"); }); test("pass props to widget", (): void => { diff --git a/src/ui/widgets/XYPlot/xyPlotOptions.test.ts b/src/ui/widgets/XYPlot/xyPlotOptions.test.ts index 020ba56a..3c3e155c 100644 --- a/src/ui/widgets/XYPlot/xyPlotOptions.test.ts +++ b/src/ui/widgets/XYPlot/xyPlotOptions.test.ts @@ -388,7 +388,7 @@ describe("Create axis options object", (): void => { }, titlefont: { family: "sans,sans-serif", - size: "1rem" + size: "0.625rem" }, visible: true, zeroline: false @@ -445,7 +445,7 @@ describe("Create axis options object", (): void => { }, titlefont: { family: "sans,sans-serif", - size: "1rem" + size: "0.625rem" }, visible: true, zeroline: false @@ -501,7 +501,7 @@ describe("Create axis options object", (): void => { }, titlefont: { family: "sans,sans-serif", - size: "1rem" + size: "0.625rem" }, visible: true, zeroline: false From 181123fbd2f3ce366f94c8497a02ee9c2c7cb993 Mon Sep 17 00:00:00 2001 From: Abigail Alexander Date: Thu, 30 Jan 2025 13:49:52 +0000 Subject: [PATCH 3/4] Update tab font sizing --- src/ui/widgets/Tabs/tabs.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ui/widgets/Tabs/tabs.module.css b/src/ui/widgets/Tabs/tabs.module.css index eb98dd7d..a6b7219f 100644 --- a/src/ui/widgets/Tabs/tabs.module.css +++ b/src/ui/widgets/Tabs/tabs.module.css @@ -9,7 +9,7 @@ border: 2px solid rgb(227, 227, 227); margin: 0.2em 0.2em 0 0.2em; border-radius: 0.2em 0.2em 0 0; - font-size: 1.5rem; + font-size: 1rem; min-width: 100px; max-width: 200px; flex-grow: 2; From 158c4b550715c16bcf09e001c85edac8a1feb0dc Mon Sep 17 00:00:00 2001 From: Rebecca Williams Date: Fri, 31 Jan 2025 11:52:05 +0000 Subject: [PATCH 4/4] Further widget font size fixes following changes to the conversion factor. --- src/ui/components/ContextMenu/contextMenu.module.css | 2 +- src/ui/widgets/DropDown/dropDown.module.css | 2 +- src/ui/widgets/ProgressBar/progressBar.module.css | 2 +- src/ui/widgets/SlideControl/slideControl.module.css | 1 + src/ui/widgets/Tabs/dynamicTabs.tsx | 3 ++- src/ui/widgets/tooltip.module.css | 2 +- 6 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/ui/components/ContextMenu/contextMenu.module.css b/src/ui/components/ContextMenu/contextMenu.module.css index 5e44b15c..9733fdc6 100644 --- a/src/ui/components/ContextMenu/contextMenu.module.css +++ b/src/ui/components/ContextMenu/contextMenu.module.css @@ -6,7 +6,7 @@ color: #000; cursor: pointer; width: 250px; - font-size: 1.4rem; + font-size: 0.875rem; z-index: 1000; } .customContextItem { diff --git a/src/ui/widgets/DropDown/dropDown.module.css b/src/ui/widgets/DropDown/dropDown.module.css index 0b17d9e0..0a65d235 100644 --- a/src/ui/widgets/DropDown/dropDown.module.css +++ b/src/ui/widgets/DropDown/dropDown.module.css @@ -6,7 +6,7 @@ .Summary { text-align: left; - font-size: 1.5rem; + font-size: 0.9375rem; font-weight: bold; font-family: Helvetica, sans-serif; padding: 0.5em; diff --git a/src/ui/widgets/ProgressBar/progressBar.module.css b/src/ui/widgets/ProgressBar/progressBar.module.css index fb95518e..e8331cb7 100644 --- a/src/ui/widgets/ProgressBar/progressBar.module.css +++ b/src/ui/widgets/ProgressBar/progressBar.module.css @@ -1,7 +1,7 @@ .bar { text-align: center; font-weight: bold; - font-size: 2em; + font-size: 1.25em; height: 100%; width: 100%; } diff --git a/src/ui/widgets/SlideControl/slideControl.module.css b/src/ui/widgets/SlideControl/slideControl.module.css index 26091581..8b2a8e54 100644 --- a/src/ui/widgets/SlideControl/slideControl.module.css +++ b/src/ui/widgets/SlideControl/slideControl.module.css @@ -4,6 +4,7 @@ -webkit-transition: 0.2s; transition: opacity 0.2s; margin: 0px; + font-size: 0.875rem; } .Slider:hover { diff --git a/src/ui/widgets/Tabs/dynamicTabs.tsx b/src/ui/widgets/Tabs/dynamicTabs.tsx index d0c9a9bd..dc1d562d 100644 --- a/src/ui/widgets/Tabs/dynamicTabs.tsx +++ b/src/ui/widgets/Tabs/dynamicTabs.tsx @@ -43,7 +43,8 @@ export const DynamicTabsComponent = ( border: "3px solid lightgrey", height: "100%", width: "100%", - overflow: "auto" + overflow: "auto", + fontSize: "0.625rem" }; if (!tabState || tabState.fileDetails.length === 0) { return ( diff --git a/src/ui/widgets/tooltip.module.css b/src/ui/widgets/tooltip.module.css index b614616b..d3f99fdf 100644 --- a/src/ui/widgets/tooltip.module.css +++ b/src/ui/widgets/tooltip.module.css @@ -8,7 +8,7 @@ z-index: 1; bottom: 110%; left: 50%; - font-size: 1.6rem; + font-size: 1rem; } .TooltipAvailable {