Update font sizing

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"
     });

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"

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 {

src/ui/widgets/ChoiceButton/choiceButton.test.tsx

@@ -21,7 +21,7 @@ describe("<BoolButton />", (): 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 => {

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;

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%;
 }

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 {

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 (

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;

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

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 {