Update template to reflect new branding

dashboards-reports/server/routes/utils/notification/notification_content_template/email_content_template.html

@@ -20,7 +20,7 @@
 
       body {
         background-color: #f6f6f6;
-        font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+        font-family: "Open Sans", "Segoe UI", Tahoma, sans-serif;
         -webkit-font-smoothing: antialiased;
         font-size: 14px;
         line-height: 1.4;
@@ -49,7 +49,7 @@
       ------------------------------------- */
 
       .body {
-        background-color: #f6f6f6;
+        background-color: #F6F8F8;
         width: 100%;
       }
 
@@ -71,8 +71,7 @@
 
       .logo {
           float: right;
-          margin-top: 10px;
-          max-width: 150px;
+          max-width: 64px;
           height: auto;
       }
 
@@ -81,10 +80,10 @@
         top: -20px;
         left: -20px;
         width: 100%;
-        padding: 20px 20px 10px;
+        padding: 20px 20px 20px;
         display: block;
         overflow: hidden;
-        background-color: #0a1f72;
+        background-color: #002A3A ;
         border-top-right-radius: 5px;
         border-top-left-radius: 5px;
       }
@@ -93,7 +92,7 @@
           HEADER, FOOTER, MAIN
       ------------------------------------- */
       .main {
-        font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+        font-family: "Open Sans", "Segoe UI", Tahoma, sans-serif;
         background-color: #fff;
         border: 1px solid #D3DAE6;
         box-shadow: 0 2px 2px -1px rgba(152, 162, 179, 0.3), 0 1px 5px -2px rgba(152, 162, 179, 0.3);
@@ -134,21 +133,21 @@
       h2,
       h3,
       h4 {
-        color: #000000;
-        font-family: sans-serif;
-        font-weight: 400;
+        color: #002A3A;
+        font-family: "Open Sans", "Segoe UI", Tahoma, sans-serif;
+        font-weight: 700;
         line-height: 1.4;
         margin: 0;
         margin-bottom: 20px; 
       }
 
       h1 {
-        font-size: 35px;
+        font-size: 32px;
         font-weight: 300;
         float: left;
         text-transform: capitalize;
         margin-bottom: 10px;
-        margin-top: 5px;
+        margin-top: 8px;
         white-space: nowrap;
         color: #fff;
       }
@@ -157,7 +156,7 @@
       ul,
       ol,
       blockquote {
-        font-family: sans-serif;
+        font-family: "Open Sans", "Segoe UI", Tahoma, sans-serif;
         font-size: 14px;
         font-weight: normal;
         margin: 0;
@@ -206,7 +205,7 @@
         .btn a {
           background-color: #ffffff;
           border: 1px solid;
-          border-color: #0a2694 #0a1f72 #051246;
+          border-color: #005EB8 #00488c #00488c;
           border-radius: 5px;
           box-sizing: border-box;
           color: #FFFFFF;
@@ -222,15 +221,15 @@
       }
 
       .btn-primary table td {
-        background-color: #0a1f72;
-        background-image: linear-gradient(180deg,#132f9e 0,#0d1e66);
+        background-color: #005EB8;
+        background-image: linear-gradient(180deg,#005EB8 0,#004381);
         color: #ffffff;
       }
 
       .btn-primary a {
-        background-color: #0a1f72;
-        border-color: #0a2694 #0a1f72 #051246;
-        background-image: linear-gradient(180deg,#132f9e 0,#0d1e66);
+        background-color: #005EB8;
+        border-color: #005EB8 #00488c #00488c;
+        background-image: linear-gradient(180deg,#005EB8 0,#004381  );
         color: #ffffff; 
       }
 
@@ -298,7 +297,7 @@
       @media only screen and (max-width: 620px) {
         table[class=body] h1 {
           font-size: 24px !important;
-          margin-top: 7px !important;
+          margin-top: 16px !important;
           margin-bottom: 0px !important;
         }
         table[class=body] p,
@@ -377,11 +376,11 @@
         }
         .btn-primary table td:hover {
           background-color: #0a2694 !important;
-          background-image: linear-gradient(180deg,#253fa8 0,#0a2188) !important;
+          background-image: linear-gradient(180deg,#137CC1 0,#00529E) !important;
         }
         .btn-primary a:hover {
           background-color: #0a2694 !important;
-          background-image: linear-gradient(180deg,#253fa8 0,#0a2188) !important;
+          background-image: linear-gradient(180deg,#137CC1 0,#00529E) !important;
         } 
       }
 
@@ -409,7 +408,7 @@
                                 <table role="presentation" border="0" cellpadding="0" cellspacing="0">
                                     <tr>
                                         <td class="brand">
-                                            <img src="logo.png" width="362px" height="80px" class="logo" alt="OpenSearch"><h1>OpenSearch Dashboards reports</h1>
+                                            <img src="logo.png" width="360px" height="360px" class="logo" alt="OpenSearch"><h1>OpenSearch Dashboards reports</h1>
                                         </td>
                                     </tr>
                                     <tr>