From caa994306280185197410270164f0adeef4b3553 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Wed, 16 Jul 2025 13:46:14 +0800
Subject: [PATCH] style of change email template

---
 ...hange_mail_confirm_new_template_en-US.html | 82 +++++++++++++------
 ...hange_mail_confirm_new_template_zh-CN.html | 82 +++++++++++++------
 ...hange_mail_confirm_old_template_en-US.html | 82 +++++++++++++------
 ...hange_mail_confirm_old_template_zh-CN.html | 82 +++++++++++++------
 4 files changed, 236 insertions(+), 92 deletions(-)

diff --git a/api/templates/change_mail_confirm_new_template_en-US.html b/api/templates/change_mail_confirm_new_template_en-US.html
index 7e2ccca493..45f971741b 100644
--- a/api/templates/change_mail_confirm_new_template_en-US.html
+++ b/api/templates/change_mail_confirm_new_template_en-US.html
@@ -13,56 +13,91 @@
     }
 
     .container {
-      width: 600px;
-      height: 360px;
+      width: 504px;
+      height: 454px;
       margin: 40px auto;
-      padding: 36px 48px;
+      padding: 0 48px;
       background-color: #fcfcfd;
       border-radius: 16px;
       border: 1px solid #ffffff;
-      box-shadow: 0 2px 4px -2px rgba(9, 9, 11, 0.08);
+      box-shadow: 0px 3px 10px -2px rgba(9, 9, 11, 0.08), 0px 2px 4px -2px rgba(9, 9, 11, 0.06);
     }
 
     .header {
-      margin-bottom: 24px;
+      padding-top: 36px;
+      padding-bottom: 24px;
     }
 
     .header img {
-      max-width: 100px;
+      max-width: 63px;
       height: auto;
     }
 
     .title {
-      font-weight: 600;
+      margin: 0;
+      padding-top: 8px;
+      padding-bottom: 16px;
+      color: #101828;
       font-size: 24px;
-      line-height: 28.8px;
+      font-family: Inter;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 120%; /* 28.8px */
     }
 
     .description {
-      font-size: 13px;
-      line-height: 16px;
-      color: #676f83;
-      margin-top: 12px;
+      color: #354052;
+      font-size: 14px;
+      font-family: Inter;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px; /* 142.857% */
+      letter-spacing: -0.07px;
+    }
+
+    .content1 {
+      margin: 0;
+      padding-top: 16px;
+      padding-bottom: 12px;
+    }
+
+    .content2 {
+      margin: 0;
+    }
+
+    .content3 {
+      margin: 0;
+      padding-bottom: 12px;
     }
 
     .code-content {
+      margin-bottom: 8px;
       padding: 16px 32px;
       text-align: center;
       border-radius: 16px;
       background-color: #f2f4f7;
-      margin: 16px auto;
     }
 
-    .code {
-      line-height: 36px;
-      font-weight: 700;
+    .code {      
+      color: #101828;
+      font-family: Inter;
       font-size: 30px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 36px;
     }
 
     .tips {
-      line-height: 16px;
-      color: #676f83;
-      font-size: 13px;
+      margin: 0;
+      padding-top: 12px;
+      padding-bottom: 16px;
+      color: #354052;
+      font-size: 14px;
+      font-family: Inter;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px; /* 142.857% */
+      letter-spacing: -0.07px;
     }
   </style>
 </head>
@@ -74,10 +109,11 @@
       <img src="https://assets.dify.ai/images/logo.png" alt="Dify Logo" />
     </div>
     <p class="title">Confirm Your New Email Address</p>
-    <p class="description">You’re updating the email address linked to your Dify account.
-
-      To confirm this action, please use the verification code below.
-      This code will only be valid for the next 5 minutes:</p>
+    <div class="description">
+      <p class="content1">You’re updating the email address linked to your Dify account.</p>
+      <p class="content2">To confirm this action, please use the verification code below.</p>
+      <p class="content3">This code will only be valid for the next 5 minutes:</p>
+    </div>
     <div class="code-content">
       <span class="code">{{code}}</span>
     </div>
diff --git a/api/templates/change_mail_confirm_new_template_zh-CN.html b/api/templates/change_mail_confirm_new_template_zh-CN.html
index ccaaf60255..4373ca93bf 100644
--- a/api/templates/change_mail_confirm_new_template_zh-CN.html
+++ b/api/templates/change_mail_confirm_new_template_zh-CN.html
@@ -13,56 +13,91 @@
     }
 
     .container {
-      width: 600px;
-      height: 360px;
+      width: 504px;
+      height: 454px;
       margin: 40px auto;
-      padding: 36px 48px;
+      padding: 0 48px;
       background-color: #fcfcfd;
       border-radius: 16px;
       border: 1px solid #ffffff;
-      box-shadow: 0 2px 4px -2px rgba(9, 9, 11, 0.08);
+      box-shadow: 0px 3px 10px -2px rgba(9, 9, 11, 0.08), 0px 2px 4px -2px rgba(9, 9, 11, 0.06);
     }
 
     .header {
-      margin-bottom: 24px;
+      padding-top: 36px;
+      padding-bottom: 24px;
     }
 
     .header img {
-      max-width: 100px;
+      max-width: 63px;
       height: auto;
     }
 
     .title {
-      font-weight: 600;
+      margin: 0;
+      padding-top: 8px;
+      padding-bottom: 16px;
+      color: #101828;
       font-size: 24px;
-      line-height: 28.8px;
+      font-family: Inter;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 120%; /* 28.8px */
     }
 
     .description {
-      font-size: 13px;
-      line-height: 16px;
-      color: #676f83;
-      margin-top: 12px;
+      color: #354052;
+      font-size: 14px;
+      font-family: Inter;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px; /* 142.857% */
+      letter-spacing: -0.07px;
+    }
+
+    .content1 {
+      margin: 0;
+      padding-top: 16px;
+      padding-bottom: 12px;
+    }
+
+    .content2 {
+      margin: 0;
+    }
+
+    .content3 {
+      margin: 0;
+      padding-bottom: 12px;
     }
 
     .code-content {
+      margin-bottom: 8px;
       padding: 16px 32px;
       text-align: center;
       border-radius: 16px;
       background-color: #f2f4f7;
-      margin: 16px auto;
     }
 
-    .code {
-      line-height: 36px;
-      font-weight: 700;
+    .code {      
+      color: #101828;
+      font-family: Inter;
       font-size: 30px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 36px;
     }
 
     .tips {
-      line-height: 16px;
-      color: #676f83;
-      font-size: 13px;
+      margin: 0;
+      padding-top: 12px;
+      padding-bottom: 16px;
+      color: #354052;
+      font-size: 14px;
+      font-family: Inter;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px; /* 142.857% */
+      letter-spacing: -0.07px;
     }
   </style>
 </head>
@@ -74,10 +109,11 @@
       <img src="https://assets.dify.ai/images/logo.png" alt="Dify Logo" />
     </div>
     <p class="title">确认您的邮箱地址变更</p>
-    <p class="description">您正在更新与您的 Dify 账户关联的邮箱地址。
-
-      为了确认此操作，请使用以下验证码。
-      此验证码仅在接下来的5分钟内有效：</p>
+    <div class="description">
+      <p class="content1">您正在更新与您的 Dify 账户关联的邮箱地址。</p>
+      <p class="content2">为了确认此操作，请使用以下验证码。</p>
+      <p class="content3">此验证码仅在接下来的5分钟内有效：</p>
+    </div>
     <div class="code-content">
       <span class="code">{{code}}</span>
     </div>
diff --git a/api/templates/change_mail_confirm_old_template_en-US.html b/api/templates/change_mail_confirm_old_template_en-US.html
index e5a1cac373..5e6ff245d8 100644
--- a/api/templates/change_mail_confirm_old_template_en-US.html
+++ b/api/templates/change_mail_confirm_old_template_en-US.html
@@ -13,56 +13,91 @@
     }
 
     .container {
-      width: 600px;
-      height: 360px;
+      width: 504px;
+      height: 454px;
       margin: 40px auto;
-      padding: 36px 48px;
+      padding: 0 48px;
       background-color: #fcfcfd;
       border-radius: 16px;
       border: 1px solid #ffffff;
-      box-shadow: 0 2px 4px -2px rgba(9, 9, 11, 0.08);
+      box-shadow: 0px 3px 10px -2px rgba(9, 9, 11, 0.08), 0px 2px 4px -2px rgba(9, 9, 11, 0.06);
     }
 
     .header {
-      margin-bottom: 24px;
+      padding-top: 36px;
+      padding-bottom: 24px;
     }
 
     .header img {
-      max-width: 100px;
+      max-width: 63px;
       height: auto;
     }
 
     .title {
-      font-weight: 600;
+      margin: 0;
+      padding-top: 8px;
+      padding-bottom: 16px;
+      color: #101828;
       font-size: 24px;
-      line-height: 28.8px;
+      font-family: Inter;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 120%; /* 28.8px */
     }
 
     .description {
-      font-size: 13px;
-      line-height: 16px;
-      color: #676f83;
-      margin-top: 12px;
+      color: #354052;
+      font-size: 14px;
+      font-family: Inter;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px; /* 142.857% */
+      letter-spacing: -0.07px;
+    }
+
+    .content1 {
+      margin: 0;
+      padding-top: 16px;
+      padding-bottom: 12px;
+    }
+
+    .content2 {
+      margin: 0;
+    }
+
+    .content3 {
+      margin: 0;
+      padding-bottom: 12px;
     }
 
     .code-content {
+      margin-bottom: 8px;
       padding: 16px 32px;
       text-align: center;
       border-radius: 16px;
       background-color: #f2f4f7;
-      margin: 16px auto;
     }
 
-    .code {
-      line-height: 36px;
-      font-weight: 700;
+    .code {      
+      color: #101828;
+      font-family: Inter;
       font-size: 30px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 36px;
     }
 
     .tips {
-      line-height: 16px;
-      color: #676f83;
-      font-size: 13px;
+      margin: 0;
+      padding-top: 12px;
+      padding-bottom: 16px;
+      color: #354052;
+      font-size: 14px;
+      font-family: Inter;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px; /* 142.857% */
+      letter-spacing: -0.07px;
     }
   </style>
 </head>
@@ -74,10 +109,11 @@
       <img src="https://assets.dify.ai/images/logo.png" alt="Dify Logo" />
     </div>
     <p class="title">Verify Your Request to Change Email</p>
-    <p class="description">We received a request to change the email address associated with your Dify account.
-
-      To confirm this action, please use the verification code below.
-      This code will only be valid for the next 5 minutes:</p>
+    <div class="description">
+      <p class="content1">We received a request to change the email address associated with your Dify account.</p>
+      <p class="content2">To confirm this action, please use the verification code below.</p>
+      <p class="content3">This code will only be valid for the next 5 minutes:</p>
+    </div>
     <div class="code-content">
       <span class="code">{{code}}</span>
     </div>
diff --git a/api/templates/change_mail_confirm_old_template_zh-CN.html b/api/templates/change_mail_confirm_old_template_zh-CN.html
index ce1deccc9e..2734593216 100644
--- a/api/templates/change_mail_confirm_old_template_zh-CN.html
+++ b/api/templates/change_mail_confirm_old_template_zh-CN.html
@@ -13,56 +13,91 @@
     }
 
     .container {
-      width: 600px;
-      height: 360px;
+      width: 504px;
+      height: 454px;
       margin: 40px auto;
-      padding: 36px 48px;
+      padding: 0 48px;
       background-color: #fcfcfd;
       border-radius: 16px;
       border: 1px solid #ffffff;
-      box-shadow: 0 2px 4px -2px rgba(9, 9, 11, 0.08);
+      box-shadow: 0px 3px 10px -2px rgba(9, 9, 11, 0.08), 0px 2px 4px -2px rgba(9, 9, 11, 0.06);
     }
 
     .header {
-      margin-bottom: 24px;
+      padding-top: 36px;
+      padding-bottom: 24px;
     }
 
     .header img {
-      max-width: 100px;
+      max-width: 63px;
       height: auto;
     }
 
     .title {
-      font-weight: 600;
+      margin: 0;
+      padding-top: 8px;
+      padding-bottom: 16px;
+      color: #101828;
       font-size: 24px;
-      line-height: 28.8px;
+      font-family: Inter;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 120%; /* 28.8px */
     }
 
     .description {
-      font-size: 13px;
-      line-height: 16px;
-      color: #676f83;
-      margin-top: 12px;
+      color: #354052;
+      font-size: 14px;
+      font-family: Inter;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px; /* 142.857% */
+      letter-spacing: -0.07px;
+    }
+
+    .content1 {
+      margin: 0;
+      padding-top: 16px;
+      padding-bottom: 12px;
+    }
+
+    .content2 {
+      margin: 0;
+    }
+
+    .content3 {
+      margin: 0;
+      padding-bottom: 12px;
     }
 
     .code-content {
+      margin-bottom: 8px;
       padding: 16px 32px;
       text-align: center;
       border-radius: 16px;
       background-color: #f2f4f7;
-      margin: 16px auto;
     }
 
-    .code {
-      line-height: 36px;
-      font-weight: 700;
+    .code {      
+      color: #101828;
+      font-family: Inter;
       font-size: 30px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 36px;
     }
 
     .tips {
-      line-height: 16px;
-      color: #676f83;
-      font-size: 13px;
+      margin: 0;
+      padding-top: 12px;
+      padding-bottom: 16px;
+      color: #354052;
+      font-size: 14px;
+      font-family: Inter;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px; /* 142.857% */
+      letter-spacing: -0.07px;
     }
   </style>
 </head>
@@ -74,10 +109,11 @@
       <img src="https://assets.dify.ai/images/logo.png" alt="Dify Logo" />
     </div>
     <p class="title">验证您的邮箱变更请求</p>
-    <p class="description"> 我们收到了一个变更您 Dify 账户关联邮箱地址的请求。
-
-      我们收到了一个变更您 Dify 账户关联邮箱地址的请求。
-      此验证码仅在接下来的5分钟内有效：</p>
+    <div class="description"> 
+      <p class="content1">我们收到了一个变更您 Dify 账户关联邮箱地址的请求。</p>
+      <p class="content2">我们收到了一个变更您 Dify 账户关联邮箱地址的请求。</p>
+      <p class="content3">此验证码仅在接下来的5分钟内有效：</p>
+    </div>
     <div class="code-content">
       <span class="code">{{code}}</span>
     </div>