Style changes for larger pulse/alert tables

src/metabase/email/_footer_pulse.mustache

+  </div>
+  {{#quotation}}
+    <div style="padding-top: 2em; padding-bottom: 1em; text-align: left; color: #CCCCCC; font-size: small;">"{{quotation}}"<br/>- {{quotationAuthor}}</div>
+  {{/quotation}}
+  {{#logoFooter}}
+    <div style="padding-bottom: 2em; padding-top: 1em; text-align: left;">
+      <img width="32" height="40" src="http://static.metabase.com/email_logo.png"/>
+    </div>
+  {{/logoFooter}}
+</body>
+</html>

src/metabase/email/_header.mustache

@@ -14,4 +14,4 @@
       <img width="47" height="60" src="http://static.metabase.com/email_logo.png"/>
     </div>
   {{/logoHeader}}
-  <div class="container" style="margin: 0 auto; padding: 0 0 2em 0; max-width: 500px; font-size: 16px; line-height: 24px; color: #616D75;">
+  <div class="container" style="margin: 0; padding: 0 0 2em 0; max-width: 100%; font-size: 16px; line-height: 24px; color: #616D75;">

src/metabase/email/pulse.mustache

 {{> metabase/email/_header}}
   {{#pulseName}}
-    <h1 style="{{sectionStyle}} margin: 16px; color: {{colorGrey4}};">
+    <h1 style="{{sectionStyle}} margin: 16px; color: {{color-brand}};">
       {{pulseName}}
     </h1>
   {{/pulseName}}
   {{{pulse}}}
-{{> metabase/email/_footer}}
+{{> metabase/email/_footer_pulse}}

src/metabase/pulse/render.clj

@@ -44,14 +44,17 @@
 (def ^:private ^:const sparkline-pad 8)
 
 ;;; ## STYLES
-(def ^:private ^:const color-brand  "rgb(45,134,212)")
-(def ^:private ^:const color-purple "rgb(135,93,175)")
-(def ^:private ^:const color-gold   "#F9D45C")
-(def ^:private ^:const color-error  "#EF8C8C")
-(def ^:private ^:const color-gray-1 "rgb(248,248,248)")
-(def ^:private ^:const color-gray-2 "rgb(189,193,191)")
-(def ^:private ^:const color-gray-3 "rgb(124,131,129)")
+(def ^:private ^:const color-brand      "rgb(45,134,212)")
+(def ^:private ^:const color-purple     "rgb(135,93,175)")
+(def ^:private ^:const color-gold       "#F9D45C")
+(def ^:private ^:const color-error      "#EF8C8C")
+(def ^:private ^:const color-gray-1     "rgb(248,248,248)")
+(def ^:private ^:const color-gray-2     "rgb(189,193,191)")
+(def ^:private ^:const color-gray-3     "rgb(124,131,129)")
 (def ^:const color-gray-4 "A ~25% Gray color." "rgb(57,67,64)")
+(def ^:private ^:const color-dark-gray  "#616D75")
+(def ^:private ^:const color-row-border "#EDF0F1")
+
 
 (def ^:private ^:const font-style    {:font-family "Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif"})
 (def ^:const section-style
@@ -70,19 +73,47 @@
                      :color       color-brand}))
 
 (def ^:private ^:const bar-th-style
-  (merge font-style {:font-size      :10px
-                     :font-weight    400
-                     :color          color-gray-4
-                     :border-bottom  (str "4px solid " color-gray-1)
-                     :padding-top    :0px
-                     :padding-bottom :10px}))
+  (merge font-style {:font-size       :14.22px
+                     :font-weight     700
+                     :color           color-gray-4
+                     :border-bottom   (str "1px solid " color-row-border)
+                     :padding-top     :20px
+                     :padding-bottom  :5px}))
+
+;; TO-DO for @senior: apply this style to headings of numeric columns
+(def ^:private ^:const bar-th-numeric-style
+  (merge font-style {:text-align      :right
+                     :font-size       :14.22px
+                     :font-weight     700
+                     :color           color-gray-4
+                     :border-bottom   (str "1px solid " color-row-border)
+                     :padding-top     :20px
+                     :padding-bottom  :5px}))
 
 (def ^:private ^:const bar-td-style
-  (merge font-style {:font-size     :16px
-                     :font-weight   400
-                     :text-align    :left
-                     :padding-right :1em
-                     :padding-top   :8px}))
+  (merge font-style {:font-size      :14.22px
+                     :font-weight    400
+                     :color          color-dark-gray
+                     :text-align     :left
+                     :padding-right  :1em
+                     :padding-top    :2px
+                     :padding-bottom :1px
+                     :max-width      :500px
+                     :overflow       :hidden
+                     :text-overflow  :ellipsis
+                     :border-bottom  (str "1px solid " color-row-border)}))
+
+;; TO-DO for @senior: apply this style to numeric cells
+(def ^:private ^:const bar-td-style-numeric
+  (merge font-style {:font-size      :14.22px
+                     :font-weight    400
+                     :color          color-dark-gray
+                     :text-align     :right
+                     :padding-right  :1em
+                     :padding-top    :2px
+                     :padding-bottom :1px
+                     :font-family    "Courier, Monospace"
+                     :border-bottom  (str "1px solid " color-row-border)}))
 
 (def ^:private RenderedPulseCard
   "Schema used for functions that operate on pulse card contents and their attachments"