refine(components/email-subscription): improve translations and styles (

#482) * refine(components/email-subscription): remove colons * fix(locale): fix release subscription translations * refine(components/email-subscription): improve subscribe button styles
pingcap · May 24, 2024 · fb53257 · fb53257
1 parent 927c86a
commit fb53257
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 7 deletions.
diff --git a/locale/en/translation.json b/locale/en/translation.json
@@ -144,7 +144,7 @@
     "goToFeedback": "Was this page helpful?"
   },
   "releaseSubscription": {
-    "title": "Get future LTS release notice via email",
+    "title": "Get future Long-Term Support (LTS) release notices via email:",
     "placeholder": "Your email",
     "button": {
       "subscribe": "Subscribe",
@@ -154,7 +154,7 @@
       "invalidEmail": "Invalid email address.",
       "networkError": "Network error, please try again later."
     },
-    "success": "Thank you! You will be notified when new LTS release comes out."
+    "success": "Thank you! You will be notified when a new TiDB LTS release comes out."
   },
   "banner": {
     "docDash2024": {

diff --git a/locale/zh/translation.json b/locale/zh/translation.json
@@ -141,7 +141,7 @@
     "goToFeedback": "文档内容是否有帮助？"
   },
   "releaseSubscription": {
-    "title": "订阅 LTS 版本更新",
+    "title": "订阅 LTS 版本更新：",
     "placeholder": "邮箱地址",
     "button": {
       "subscribe": "订阅",

diff --git a/src/components/MDXComponents/EmailSubscriptionForm.tsx b/src/components/MDXComponents/EmailSubscriptionForm.tsx
@@ -77,7 +77,7 @@ function EmailSubscriptionForm() {
     <div>
       <p>
         <strong>
-          <Trans i18nKey="releaseSubscription.title" />:
+          <Trans i18nKey="releaseSubscription.title" />
         </strong>
       </p>
 
@@ -100,10 +100,26 @@ function EmailSubscriptionForm() {
               <LoadingButton
                 type="submit"
                 variant="contained"
-                color="primary"
                 loading={formData.loading}
-                loadingIndicator={t('releaseSubscription.button.subscribing')}
-                sx={{ ml: '1rem' }}
+                aria-label="subscribe"
+                sx={{
+                  ml: 2,
+                  backgroundColor: "website.k1",
+                  boxShadow: "none",
+                  "&:hover": {
+                    backgroundColor: "#0A85C2",
+                    boxShadow: "0px 1px 4px rgba(0, 0, 0, 0.16)",
+                  },
+                  "&.MuiLoadingButton-loading": {
+                    color: "rgba(0, 0, 0, 0.26)"
+                  },
+                  ".MuiLoadingButton-loadingIndicator": {
+                    position: 'auto',
+                    left: 'auto',
+                    transform: 'none',
+                    mr: 1
+                  }
+                }}
               >
                 <Trans i18nKey="releaseSubscription.button.subscribe" />
               </LoadingButton>