Merge pull request #949 from Eastern-Research-Group/bugfix/679_visx-a…

…xis-labels Bugfix/679 visx axis labels
Eastern-Research-Group · Feb 7, 2024 · a69ee1c · a69ee1c
2 parents 381ec54 + 78cc32f
commit a69ee1c
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 8 deletions.
diff --git a/app/client/src/components/shared/AddSaveDataWidget.js b/app/client/src/components/shared/AddSaveDataWidget.js
@@ -15,6 +15,8 @@ import URLPanel from 'components/shared/AddSaveDataWidget.URLPanel';
 // contexts
 import { useAddSaveDataWidgetState } from 'contexts/AddSaveDataWidget';
 import { LocationSearchContext } from 'contexts/locationSearch';
+// styles
+import { fonts } from 'styles';
 
 // --- styles (AddData) ---
 const containerStyles = css`
@@ -59,8 +61,7 @@ const widgetHeaderStyles = css`
 
   h1 {
     margin: 0 10px;
-    font-family: 'Source Sans Pro Web', 'Helvetica Neue', 'Helvetica', 'Roboto',
-      'Arial', sans-serif;
+    font-family: ${fonts.primary};
     font-size: 16px;
     line-height: 35px;
     padding: 0;

diff --git a/app/client/src/components/shared/DataContent.js b/app/client/src/components/shared/DataContent.js
@@ -99,8 +99,7 @@ const pageErrorBoxStyles = css`
 const titleStyles = css`
   display: inline;
   line-height: 1.125;
-  font-family: 'Source Sans Pro Web', 'Helvetica Neue', Helvetica, Roboto, Arial,
-    sans-serif;
+  font-family: ${fonts.primary};
 
   @media (min-width: 30em) {
     font-size: 1.375em;

diff --git a/app/client/src/components/shared/VisxGraph.tsx b/app/client/src/components/shared/VisxGraph.tsx
@@ -13,6 +13,7 @@ import {
   Tooltip,
   XYChart,
 } from '@visx/xychart';
+import { fonts } from 'styles';
 // types
 import type { ReactNode } from 'react';
 import type { GlyphProps, TooltipData } from '@visx/xychart';
@@ -23,6 +24,12 @@ const DEFAULT_COLOR = '#2C2E43';
 ## Styles
 */
 
+const axisTitleStyles = {
+  fontFamily: fonts.primary,
+  fontSize: '1rem',
+  fontWeight: 'bold',
+};
+
 const legendContainerStyles = css`
   display: flex;
   flex-direction: row;
@@ -44,6 +51,12 @@ const glyphStyles = css`
   }
 `;
 
+const tickLabelStyles = {
+  fontFamily: fonts.primary,
+  fontWeight: 400,
+  fontSize: '0.75rem',
+};
+
 /*
 ## Types
 */
@@ -200,8 +213,8 @@ export function VisxGraph({
           labelProps={{
             dy: 15,
             fill: '#2C2E43',
-            style: { fontWeight: 'bold' },
             verticalAnchor: 'start',
+            ...axisTitleStyles,
           }}
           numTicks={width ? Math.floor(width / 120) : 4}
           orientation="bottom"
@@ -211,6 +224,7 @@ export function VisxGraph({
             dx: -5,
             textAnchor: 'start',
             y: 15,
+            ...tickLabelStyles,
           }}
           tickLength={3}
         />
@@ -220,14 +234,15 @@ export function VisxGraph({
             fill: '#2C2E43',
             dx: -45,
             lineHeight: '1.2em',
-            style: { fontWeight: 'bold' },
             scaleToFit: false,
             textAnchor: 'middle',
             width: height,
+            ...axisTitleStyles,
           }}
           orientation="left"
           strokeWidth={2}
           tickFormat={yTickFormat}
+          tickLabelProps={tickLabelStyles}
           tickLength={5}
         />
         {lineVisible && (

diff --git a/app/client/src/index.tsx b/app/client/src/index.tsx
@@ -18,6 +18,7 @@ import { SurroundingsProvider } from 'contexts/Surroundings';
 // errors
 import { defaultErrorBoundaryMessage } from 'config/errorMessages';
 // styles
+import { fonts } from 'styles';
 import '@arcgis/core/assets/esri/themes/light/main.css';
 import 'styles/mapStyles.css';
 
@@ -26,8 +27,7 @@ smoothscroll.polyfill();
 const globalStyles = css`
   #root {
     margin: 0;
-    font-family: 'Source Sans Pro Web', 'Helvetica Neue', 'Helvetica', 'Roboto',
-      'Arial', sans-serif;
+    font-family: ${fonts.primary};
     font-size: 16px;
     line-height: 1;
     color: #444;