UX Updates

client/components/dashboard/dashboard-directive.html

@@ -40,7 +40,7 @@
                  ng-bind="dashboardSvc.replaceTokens(widget.model.title)"></div>
           </div>
           <div ng-show="widget.model.header_text || container.model.container.widget_header_height"
-              class="pk-widget-section-text"
+              class="pk-widget-header"
               ng-class="{'pk-section-fixed-height': container.model.container.widget_header_height}"
               ng-click="clickWidget($event, widget, container)"
               ng-style="{'height': container.model.container.widget_header_height + 'px'}"
@@ -60,7 +60,7 @@
             </div>
           </div>
           <div ng-show="widget.model.footer_text || container.model.container.widget_footer_height"
-              class="pk-widget-section-text"
+              class="pk-widget-footer"
               ng-class="{'pk-section-fixed-height': container.model.container.widget_footer_height}"
               ng-click="clickWidget($event, widget, container)"
               ng-style="{'height': container.model.container.widget_footer_height + 'px'}"

client/components/widget/data_viz/gviz/gviz-directive.js

@@ -62,13 +62,9 @@ const ResultsDataStatus = explorer.models.ResultsDataStatus;
 const WorkQueueService = explorer.components.util.WorkQueueService;
 
 
-// TODO: Determine why Linux and OSX Chrome versions treat chart sizing differently.
-/** @type {number} Specifies the number of pixels that the chart's width needs to be reduced by. */
-const CHART_EXTRA_WIDTH_PX = 16;
 /** @type {number} Specifies the number of pixels that the chart's width needs to be reduced by. */
 const CHART_EXTRA_HEIGHT_PX = 16;
 
-
 /**
  * See module docstring for more information about purpose and usage.
  *
@@ -237,8 +233,7 @@ explorer.components.widget.data_viz.gviz.gvizChart = function(
 
       let adjustWidth = function() {
         if (scope.widgetConfig.model.chart) {
-          scope.widgetConfig.state().chart.width =
-              element.parent().prop('offsetWidth') - CHART_EXTRA_WIDTH_PX;
+          scope.widgetConfig.state().chart.width = element.parent().width();
         }
       };
       adjustWidth();

client/components/widget/widget-directive.css

@@ -17,7 +17,7 @@
 
 .pk-widget-selected .pk-widget-body {
   background-color: #fff;
-  border: 2px solid #616161;
+  border: 2px solid #1565C0;
   margin: 14px;
 }
 
@@ -38,8 +38,8 @@
   background: #ffffff;
   display: flex;
   flex-direction: row-reverse;
-  min-height: 25px;
-  padding: 4px 10px;
+  height: 40px;
+  padding: 12px 12px;
 }
 
 .pk-widget-title {
@@ -77,16 +77,8 @@
   margin: 0.25em 0;
 }
 
-.pk-widget-section-text {
-  padding-left: 10px;
-  padding-right: 10px;
-}
-
-.pk-widget-footer, .pk-widget-header {
-  padding-bottom: 4px;
-  padding-left: 8px;
-  padding-right: 8px;
-  padding-top: 4px;
+.pk-widget-header, .pk-widget-content, .pk-widget-footer {
+  padding: 0 12px 12px;
 }
 
 .pk-widget-statistics {

client/css/base.css

@@ -144,44 +144,48 @@ a:active {
   color: #DD4B39;
 }
 
-h1 {
-  font-size: 36px;
-  font-weight: bold;
+/**
+ * Heading styles are derived from the Material Design typography spec
+ * at https://www.google.com/design/spec/style/typography.html#typography-styles
+ */ 
+h1 { /* Display 2 */
+  font-size: 45px;
+  font-weight: normal;
   margin-top: 8px;
   margin-bottom: 12px;
 }
 
-h2 {
-  font-size: 30px;
-  font-weight: bold;
+h2 { /* Display 1 */
+  font-size: 34px;
+  font-weight: 400;
   margin-top: 6px;
   margin-bottom: 12px;
 }
 
-h3 {
+h3 { /* Headline */
   font-size: 24px;
-  font-weight: bold;
+  font-weight: 400;
   margin-top: 6px;
   margin-bottom: 10px;
 }
 
-h4 {
+h4 { /* Title */
   font-size: 20px;
-  font-weight: bold;
+  font-weight: 400;
   margin-top: 4px;
   margin-bottom: 10px;
 }
 
-h5 {
-  font-size: 16px;
-  font-weight: bold;
+h5 { /* Subheading */
+  font-size: 15px;
+  font-weight: 400;
   margin-top: 4px;
   margin-bottom: 8px;
 }
 
-h6 {
-  font-size: 14px;
-  font-weight: bold;
+h6 { /* Body 2 */
+  font-size: 13px;
+  font-weight: 600;
   margin-top: 4px;
   margin-bottom: 8px;
 }