Cleanup styles and update logo

Author: leemunroe

src/css/scss/default/_buttons.scss

@@ -6,7 +6,7 @@
   width: 100%;
 
   > tr > td {
-    padding-bottom: 15px;
+    padding-bottom: 16px;
   }
 
   table {
@@ -19,17 +19,17 @@
     text-align: center;
   }
 
-  a{
+  a {
     background-color: #ffffff;
     border: solid 1px $primary-color;
     border-radius: $btn-br;
     color: $primary-color;
     cursor: pointer;
     display: inline-block;
-    font-size: 14px;
+    font-size: 16px;
     font-weight: bold;
     margin: 0;
-    padding: 12px 25px;
+    padding: 12px 24px;
     text-decoration: none;
     text-transform: capitalize;
   }
@@ -42,7 +42,7 @@
     background-color: $primary-color;
   }
 
-  a{
+  a {
     background-color: $primary-color;
     border-color: $primary-color;
     color: #ffffff;
@@ -56,7 +56,7 @@
     background-color: transparent;
   }
 
-  a{
+  a {
     background-color: transparent;
     border-color: $primary-color;
     color: $primary-color;

src/css/scss/default/_config.scss

@@ -2,40 +2,40 @@
     CONFIGURE YOUR VARIABLES
 ------------------------------------- */
 
-$padding: 30px; // For consistent padding
-$grey: #f6f6f6; // Background color
+$padding: 24px; // For consistent padding
+$grey: #f4f5f6; // Background color
 $width: 580px; // Width of the content area
-$br: 3px; // Border radius
-$btn-br: 5px; // Border radius
-$primary-color: #348eda; // Primary color for buttons and links
-$font-color: #111111; // Default font color
+$br: 8px; // Border radius
+$btn-br: 4px; // Border radius
+$primary-color: #0867ec; // Primary color for buttons and links
+$font-color: #161f33; // Default font color
 
 // Typography
 // -------
 
 $body-font-family:          "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default;
 $body-font-weight:          400 !default;
-$body-font-size:            14px !default;
-$body-font-color:           #555 !default;
+$body-font-size:            16px !default;
+$body-font-color:           $font-color !default;
 $body-line-height:          1.6 !default;
 
 // Notices
 // -------
 
-$notice-color-info:         #3d88ce !default;
-$notice-color-success:      #81ad22 !default;
-$notice-color-warning:      #c6a121 !default;
-$notice-color-danger:       #be2c2c !default;
+$notice-color-info:         #0867ec !default;
+$notice-color-success:      #00aa55 !default;
+$notice-color-warning:      #f39c12 !default;
+$notice-color-danger:       #d51507 !default;
 
-$notice-border-radius:      6px !default;
+$notice-border-radius:      4px !default;
 $notice-font-size:          $body-font-size !default;
 $notice-font-weight:        $body-font-weight !default;
 $notice-line-height:        $body-line-height !default;
 $notice-padding:            8px 12px !default;
-$notice-margin:             10px 0 !default;
+$notice-margin:             8px 0 !default;
 
 // Dividers
 // --------
 
-$divider-margin:			20px 0 !default;
-$divider-color:				#ccc !default;
+$divider-margin:			24px 0 !default;
+$divider-color:				#eaebed !default;

src/css/scss/default/_global.scss

@@ -22,7 +22,7 @@ html {
 body {
   font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
-  font-size: 14px;
+  font-size: 16px;
   height: 100% !important;
   line-height: 1.6em;
   margin: 0;
@@ -41,7 +41,7 @@ table {
 
   td {
     font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
-    font-size: 14px;
+    font-size: 16px;
     vertical-align: top;
   }
 }

src/css/scss/default/_layout.scss

@@ -16,7 +16,7 @@ body{
   display: block;
   Margin: 0 auto !important; /* makes it centered */
   max-width: $width;
-  padding: 10px;
+  padding: 8px;
   width: auto !important;
   width: $width;
 }
@@ -26,7 +26,7 @@ body{
   display: block;
   margin: 0 auto;
   max-width: $width;
-  padding: 10px;
+  padding: 8px;
 }
 
 
@@ -51,8 +51,8 @@ body{
 }
 
 .header {
-  margin-bottom: $padding;
-  margin-top: ($padding - 10);
+  margin-bottom: $padding/2;
+  margin-top: $padding/2;
   width: 100%;
 }
 
@@ -66,6 +66,6 @@ body{
   }
 
   td {
-    padding: 20px 0;
+    padding: 24px 0;
   }
 }

src/css/scss/default/_notices.scss

@@ -5,9 +5,9 @@
 @mixin create-notice($color) {
   td {
     background: lighten($color, 44%);
-    border: 1px solid lighten($color, 30%);
+    border: 1px solid $color;
     border-radius: $notice-border-radius;
-    color: darken($color, 10%);
+    color: darken($color, 20%);
     padding: $notice-padding;
   }
 }

src/css/scss/default/_type.scss

@@ -11,7 +11,7 @@ h4 {
   font-weight: 400;
   line-height: 1.4em;
   margin: 0;
-  margin-bottom: 30px;
+  margin-bottom: 24px;
 }
 
 h1 {
@@ -26,22 +26,22 @@ h3 {
   font-size: 18px;
 }
 h4 {
-  font-size: 14px;
+  font-size: 16px;
   font-weight:500;
 }
 
 p,
 ul,
 ol {
   font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
-  font-size: 14px;
+  font-size: 16px;
   font-weight: normal;
   margin: 0;
-  margin-bottom: 15px;
+  margin-bottom: 16px;
 
   li {
     list-style-position: inside;
-    margin-left: 5px;
+    margin-left: 4px;
   }
 }
 

src/emails/branded.hbs

@@ -7,7 +7,7 @@ subject: Branded transaction email example
   <table>
     <tr>
       <td class="align-center">
-        <a href="http://www.mailgun.com"><img src="../src/img/mailgun.png" height="50" alt="Mailgun"></a>
+        <a href="https://htmlemail.io"><img src="../src/img/logo.png" width="40" height="40" alt="HTML Email"></a>
       </td>
     </tr>
   </table>