Merge pull request #3256 from influxdata/polish/shrink-dashboard-text

Shrink Dashboard Text

CHANGELOG.md

@@ -7,6 +7,7 @@
 1.  [#3204](https://github.com/influxdata/chronograf/pull/3204): Notify user when a dashboard cell is added, removed, or cloned
 1.  [#3215](https://github.com/influxdata/chronograf/pull/3215): Fix Template Variables Control Bar to top of dashboard page
 1.  [#3214](https://github.com/influxdata/chronograf/pull/3214): Remove extra click when creating dashboard cell
+1.  [#3256](https://github.com/influxdata/chronograf/pull/3256): Reduce font sizes in dashboards for increased space efficiency
 
 ### Bug Fixes
 

ui/src/shared/graphs/helpers.js

@@ -196,5 +196,5 @@ export const hasherino = (str, len) =>
     .map(char => char.charCodeAt(0))
     .reduce((hash, code) => hash + code, 0) % len
 
-export const LABEL_WIDTH = 60
+export const LABEL_WIDTH = 44
 export const CHAR_PIXELS = 7

ui/src/style/components/dygraphs.scss

@@ -42,8 +42,9 @@
 /* Axis Labels */
 .dygraph-axis-label {
   color: $g11-sidewalk !important;
-  font-weight: 500 !important;
+  font-weight: 600 !important;
   user-select: none;
+  font-size: 11px;
 }
 .dygraph-axis-label-y {
   padding: 0 9px 0 0 !important;
@@ -66,10 +67,10 @@
   position: absolute;
   width: 100%;
   text-align: center;
-  font-size: 12px;
+  font-size: 11px;
   top: -12px !important;
   color: $g11-sidewalk;
-  font-weight: 500;
+  font-weight: 600;
   padding: 0 0 2px 0 !important;
   border-bottom: 2px solid $g4-onyx !important;
   overflow: hidden;
@@ -226,7 +227,7 @@
 .dygraph-legend--timestamp {
   margin-right: 8px;
   height: 30px;
-  font-size: 14px;
+  font-size: 13px;
   white-space: nowrap;
   line-height: 30px;
   font-weight: 600;
@@ -258,12 +259,13 @@
   justify-content: space-between;
   flex-wrap: nowrap;
   opacity: 0.5;
-  font-size: 13px;
-  line-height: 13px;
+  font-size: 11px;
+  line-height: 11px;
+  font-weight: 600;
   padding: 3px 0;
 
   span {
-    font-weight: 600;
+    font-weight: 900;
     padding: 0;
     white-space: nowrap;
   }

ui/src/style/components/static-legend.scss

@@ -21,15 +21,15 @@
 
 .static-legend--item,
 .static-legend--single {
-  height: 22px;
-  line-height: 22px;
+  height: 19px;
+  line-height: 19px;
   white-space: nowrap;
   background-color: $g4-onyx;
   border-radius: 3px;
   color: $g20-white;
-  font-size: 12px;
+  font-size: 11px;
   font-weight: 600;
-  padding: 0 7px;
+  padding: 0 6px;
   margin: 1px;
 }
 .static-legend--item {

ui/src/style/components/table-graph.scss

@@ -17,7 +17,8 @@
 .table-graph-cell {
   line-height: 28px; // Cell height - 2x border width
   padding: 0 6px;
-  font-size: 13px;
+  font-size: 12px;
+  font-weight: 500;
   color: $g12-forge;
   border: 1px solid $g5-pepper;
   overflow: hidden;

ui/src/style/pages/dashboards.scss

@@ -152,7 +152,7 @@ $dash-graph-options-arrow: 8px;
   }
 }
 .dash-graph--name {
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 600;
   border-radius: $radius;
   overflow: hidden;