Modernize email template

See: laravel/framework#57987

Author: samuelwei

resources/views/vendor/mail/html/themes/default.css

@@ -12,7 +12,7 @@ body *:not(html):not(style):not(br):not(tr):not(code) {
 body {
     -webkit-text-size-adjust: none;
     background-color: #ffffff;
-    color: #718096;
+    color: #52525b;
     height: 100%;
     line-height: 1.4;
     margin: 0;
@@ -29,7 +29,7 @@ blockquote {
 }
 
 a {
-    color: #3869d4;
+    color: #18181b;
 }
 
 a img {
@@ -39,7 +39,7 @@ a img {
 /* Typography */
 
 h1 {
-    color: #3d4852;
+    color: #18181b;
     font-size: 18px;
     font-weight: bold;
     margin-top: 0;
@@ -81,7 +81,7 @@ img {
     -premailer-cellpadding: 0;
     -premailer-cellspacing: 0;
     -premailer-width: 100%;
-    background-color: #edf2f7;
+    background-color: #fafafa;
     margin: 0;
     padding: 0;
     width: 100%;
@@ -104,7 +104,7 @@ img {
 }
 
 .header a {
-    color: #3d4852;
+    color: #18181b;
     font-size: 19px;
     font-weight: bold;
     text-decoration: none;
@@ -114,6 +114,8 @@ img {
 
 .logo {
     width: 150px;
+    margin-top: 15px;
+    margin-bottom: 10px;
 }
 
 /* Body */
@@ -122,9 +124,9 @@ img {
     -premailer-cellpadding: 0;
     -premailer-cellspacing: 0;
     -premailer-width: 100%;
-    background-color: #edf2f7;
-    border-bottom: 1px solid #edf2f7;
-    border-top: 1px solid #edf2f7;
+    background-color: #fafafa;
+    border-bottom: 1px solid #fafafa;
+    border-top: 1px solid #fafafa;
     margin: 0;
     padding: 0;
     width: 100%;
@@ -135,12 +137,10 @@ img {
     -premailer-cellspacing: 0;
     -premailer-width: 570px;
     background-color: #ffffff;
-    border-color: #e8e5ef;
-    border-radius: 2px;
+    border-color: #e4e4e7;
+    border-radius: 4px;
     border-width: 1px;
-    box-shadow:
-        0 2px 0 rgba(0, 0, 150, 0.025),
-        2px 4px 0 rgba(0, 0, 150, 0.015);
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
     margin: 0 auto;
     padding: 0;
     width: 570px;
@@ -153,7 +153,7 @@ img {
 /* Subcopy */
 
 .subcopy {
-    border-top: 1px solid #e8e5ef;
+    border-top: 1px solid #e4e4e7;
     margin-top: 25px;
     padding-top: 25px;
 }
@@ -175,13 +175,13 @@ img {
 }
 
 .footer p {
-    color: #b0adc5;
+    color: #a1a1aa;
     font-size: 12px;
     text-align: center;
 }
 
 .footer a {
-    color: #b0adc5;
+    color: #a1a1aa;
     text-decoration: underline;
 }
 
@@ -196,13 +196,13 @@ img {
 }
 
 .table th {
-    border-bottom: 1px solid #edeff2;
+    border-bottom: 1px solid #e4e4e7;
     margin: 0;
     padding-bottom: 8px;
 }
 
 .table td {
-    color: #74787e;
+    color: #52525b;
     font-size: 15px;
     line-height: 18px;
     margin: 0;
@@ -238,46 +238,46 @@ img {
 
 .button-blue,
 .button-primary {
-    background-color: #2d3748;
-    border-bottom: 8px solid #2d3748;
-    border-left: 18px solid #2d3748;
-    border-right: 18px solid #2d3748;
-    border-top: 8px solid #2d3748;
+    background-color: #18181b;
+    border-bottom: 8px solid #18181b;
+    border-left: 18px solid #18181b;
+    border-right: 18px solid #18181b;
+    border-top: 8px solid #18181b;
 }
 
 .button-green,
 .button-success {
-    background-color: #48bb78;
-    border-bottom: 8px solid #48bb78;
-    border-left: 18px solid #48bb78;
-    border-right: 18px solid #48bb78;
-    border-top: 8px solid #48bb78;
+    background-color: #16a34a;
+    border-bottom: 8px solid #16a34a;
+    border-left: 18px solid #16a34a;
+    border-right: 18px solid #16a34a;
+    border-top: 8px solid #16a34a;
 }
 
 .button-red,
 .button-error {
-    background-color: #e53e3e;
-    border-bottom: 8px solid #e53e3e;
-    border-left: 18px solid #e53e3e;
-    border-right: 18px solid #e53e3e;
-    border-top: 8px solid #e53e3e;
+    background-color: #dc2626;
+    border-bottom: 8px solid #dc2626;
+    border-left: 18px solid #dc2626;
+    border-right: 18px solid #dc2626;
+    border-top: 8px solid #dc2626;
 }
 
 /* Panels */
 
 .panel {
-    border-left: #2d3748 solid 4px;
+    border-left: #18181b solid 4px;
     margin: 21px 0;
 }
 
 .panel-content {
-    background-color: #edf2f7;
-    color: #718096;
+    background-color: #fafafa;
+    color: #52525b;
     padding: 16px;
 }
 
 .panel-content p {
-    color: #718096;
+    color: #52525b;
 }
 
 .panel-item {