fix: change fonts on gauge and single-stat to Proxima Nova

Previously, these fonts used Rubik, which doesn't exist in this repo anymore, which caused the fonts to fallback to the browser default, which appeared to be Times New Roman, or a generic serif font.
influxdata · Sep 21, 2022 · d94e0c9 · d94e0c9
1 parent 939bdfa
commit d94e0c9
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 16 deletions.
diff --git a/giraffe/src/components/Gauge/Gauge.tsx b/giraffe/src/components/Gauge/Gauge.tsx
@@ -317,7 +317,7 @@ const drawGaugeLabels = (
   const arcIncrement = arcLength / lineCount
 
   // Format labels text
-  ctx.font = `bold ${labelFontSize}px Rubik`
+  ctx.font = `bold ${labelFontSize}px 'Proxima Nova', Helvetica, Arial, Tahoma, Verdana, sans-serif`
   ctx.fillStyle = labelColor
   ctx.textBaseline = 'middle'
   ctx.textAlign = 'right'
@@ -356,7 +356,7 @@ const drawGaugeValue = (
   const {gaugePosition, prefix, suffix, decimalPlaces} = props
   const {valueColor, valuePositionYOffset, valuePositionXOffset} = props.theme
 
-  ctx.font = `${labelValueFontSize}px Rubik`
+  ctx.font = `${labelValueFontSize}px 'Proxima Nova', Helvetica, Arial, Tahoma, Verdana, sans-serif`
   ctx.fillStyle = valueColor
   ctx.textBaseline = 'middle'
   ctx.textAlign = 'center'

diff --git a/giraffe/src/components/Input/Input.scss b/giraffe/src/components/Input/Input.scss
@@ -14,7 +14,7 @@
   border: 2px solid #383846;
   box-sizing: border-box;
   color: #bec2cc;
-  font-family: 'Rubik', Helvetica, Arial, Tahoma, Verdana, sans-serif;
+  font-family: 'Proxima Nova', Helvetica, Arial, Tahoma, Verdana, sans-serif;
   font-weight: 500;
   outline: none;
   position: relative;

diff --git a/giraffe/src/constants/singleStatStyles.ts b/giraffe/src/constants/singleStatStyles.ts
@@ -5,25 +5,26 @@ export const LASER = '#00C9FF'
 export const SINGLE_STAT_DEFAULT_TEST_ID = 'giraffe-layer-single-stat'
 
 export const SINGLE_STAT_DEFAULT_STYLE: CSS.Properties = {
-  display: 'flex',
   alignItems: 'center',
-  justifyContent: 'center',
-  overflow: 'hidden',
-  width: '100%',
-  height: '100%',
-  padding: '8px',
+  borderRadius: '4px',
+  bottom: 0,
   color: LASER,
-  userSelect: 'text',
-  WebkitUserSelect: 'text',
+  cursor: 'text',
+  display: 'flex',
+  fontFamily: '"Proxima Nova", Helvetica, Arial, Tahoma, Verdana, sans-serif',
+  height: '100%',
+  justifyContent: 'center',
+  left: 0,
   MozUserSelect: 'text',
   msUserSelect: 'text',
-  cursor: 'text',
+  overflow: 'hidden',
+  padding: '8px',
   position: 'absolute',
-  top: 0,
-  left: 0,
   right: 0,
-  bottom: 0,
-  borderRadius: '4px',
+  top: 0,
+  userSelect: 'text',
+  WebkitUserSelect: 'text',
+  width: '100%',
 }
 
 export const SINGLE_STAT_RESIZER_DEFAULT_STYLE: CSS.Properties = {