fix: update font color for RawFluxDataTable to make it visible (#801)

influxdata · Sep 14, 2022 · 8e72a58 · 8e72a58
1 parent a6e26e3
commit 8e72a58
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 25 deletions.
diff --git a/giraffe/package.json b/giraffe/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@influxdata/giraffe",
-  "version": "2.34.2",
+  "version": "2.34.3",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "license": "MIT",

diff --git a/giraffe/src/components/RawFluxDataTable/RawFluxDataGrid.scss b/giraffe/src/components/RawFluxDataTable/RawFluxDataGrid.scss
@@ -1,3 +1,17 @@
+@import '../../style/variables.scss';
+
+@font-face {
+  font-family: 'icomoon';
+  font-style: normal;
+  font-weight: normal;
+  src: url('../../fonts/icomoon.eot') format('embedded-opentype');
+  src: url('../../fonts/icomoon.eot') format('embedded-opentype'),
+    url('../../fonts/icomoon.woff2') format('woff2'),
+    url('../../fonts/icomoon.ttf') format('truetype'),
+    url('../../fonts/icomoon.woff') format('woff'),
+    url('../../fonts/icomoon.svg') format('svg');
+}
+
 .raw-flux-data-table--cell {
   border: 2px solid #202028;
   box-sizing: border-box;
@@ -16,6 +30,9 @@
     box-sizing: border-box;
     border: 2px solid #0f0e15;
     border-radius: 2px;
+    color: $table-graph--text-color;
+    font-size: $table-graph--font;
+    font-weight: 400;
     position: absolute;
     padding: 5px;
     min-height: 100%;

diff --git a/giraffe/src/components/Table/TableGraphs.scss b/giraffe/src/components/Table/TableGraphs.scss
@@ -1,25 +1,4 @@
-$table-graph--border: #292933;
-$table-graph--cell-highlight: #202028;
-$table-graph--cell: #0f0e15;
-$table-graph--font: 12px;
-$table-graph--heading-bg--active: #292933;
-$table-graph--heading-bg: #181820;
-$table-graph--heading-sort: #00a3ff;
-$table-graph--heading-text-corner: #f6f6f8;
-$table-graph--heading-text: #c6cad3;
-$table-graph--text-color: #999dab;
-$table-graph--text-highlight: #ffffff;
-
-$table-light-graph--border: #e7e8eb;
-$table-light-graph--cell-highlight: #f6f6f8;
-$table-light-graph--cell: #ffffff;
-$table-light-graph--heading-bg--active: #e7e8eb;
-$table-light-graph--heading-bg: #eeeff2;
-$table-light-graph--heading-sort: #00a3ff;
-$table-light-graph--heading-text-corner: #434453;
-$table-light-graph--heading-text: #757888;
-$table-light-graph--text-color: #676978;
-$table-light-graph--text-highlight: #383846;
+@import '../../style/variables.scss';
 
 @font-face {
   font-family: 'icomoon';

diff --git a/giraffe/src/style/variables.scss b/giraffe/src/style/variables.scss
@@ -164,3 +164,26 @@ $cf-text-base-2: #{var(--giraffe-step-2)};
     cursor: default;
   }
 }
+
+$table-graph--border: #292933;
+$table-graph--cell-highlight: #202028;
+$table-graph--cell: #0f0e15;
+$table-graph--font: 12px;
+$table-graph--heading-bg--active: #292933;
+$table-graph--heading-bg: #181820;
+$table-graph--heading-sort: #00a3ff;
+$table-graph--heading-text-corner: #f6f6f8;
+$table-graph--heading-text: #c6cad3;
+$table-graph--text-color: #999dab;
+$table-graph--text-highlight: #ffffff;
+
+$table-light-graph--border: #e7e8eb;
+$table-light-graph--cell-highlight: #f6f6f8;
+$table-light-graph--cell: #ffffff;
+$table-light-graph--heading-bg--active: #e7e8eb;
+$table-light-graph--heading-bg: #eeeff2;
+$table-light-graph--heading-sort: #00a3ff;
+$table-light-graph--heading-text-corner: #434453;
+$table-light-graph--heading-text: #757888;
+$table-light-graph--text-color: #676978;
+$table-light-graph--text-highlight: #383846;
diff --git a/stories/package.json b/stories/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@influxdata/giraffe-stories",
-  "version": "2.34.2",
+  "version": "2.34.3",
   "license": "MIT",
   "repository": {
     "type": "git",

diff --git a/stories/src/rawFluxDataTable.stories.tsx b/stories/src/rawFluxDataTable.stories.tsx
@@ -11,7 +11,7 @@ import {fluxCSV} from './data/fluxCSV'
 storiesOf('Raw Flux Data Table', module)
   .addDecorator(withKnobs)
   .add('Raw Flux Data Table', () => {
-    const backgroundColor = text('Background contrast color:', 'grey')
+    const backgroundColor = text('Background contrast color:', 'black')
     const csv1 = text('Paste first CSV here:', '')
     const csv2 = text('Paste second CSV here:', '')