Tweak feedbacks (#532)

* chore: update product url * tweak: responsive of learning path * tweak: list styles in md * tweak: menu in mobile * tweak: doc home styles * tweak version select styles * tweak: hide learning path if @media(xs) * tweak: add gtm track to ask ai * fix: event listener * tweak: cta styles * Update src/styles/docTemplate.css Co-authored-by: Yuiham <[email protected]> * tweak: raise priority --------- Co-authored-by: Yuiham <[email protected]>
pingcap · Sep 13, 2024 · fd7a2d9 · fd7a2d9
1 parent 816788f
commit fd7a2d9
Show file tree

Hide file tree

Showing 8 changed files with 161 additions and 158 deletions.
diff --git a/src/components/Dropdown/VersionSelect.tsx b/src/components/Dropdown/VersionSelect.tsx
@@ -19,7 +19,7 @@ import { ARCHIVE_WEBSITE_URL } from "shared/resources";
 import { AllVersion } from "shared/utils";
 import CONFIG from "../../../docs/docs.json";
 import LinkComponent from "components/Link";
-import { Typography } from "@mui/material";
+import { Divider, Typography } from "@mui/material";
 
 function renderVersion(
   version: string | null,
@@ -126,25 +126,19 @@ const VersionItems = (props: {
         value={`menu-dev`}
         hidden={shouldHideDevMemo}
         disabled={!availIn.includes(`dev` || "")}
+        component={LinkComponent}
+        isI18n
+        to={`/${pathConfig.repo}/dev/${name}`}
       >
-        <LinkComponent
-          isI18n
-          to={`/${pathConfig.repo}/dev/${name}`}
-          style={{
-            width: "100%",
-            color: "#666666",
+        <Typography
+          component="div"
+          sx={{
+            fontSize: "0.875rem",
+            lineHeight: "1.25rem",
           }}
         >
-          <Typography
-            component="div"
-            sx={{
-              fontSize: "0.875rem",
-              lineHeight: "1.25rem",
-            }}
-          >
-            {renderVersion(`dev`, pathConfig)}
-          </Typography>
-        </LinkComponent>
+          {renderVersion(`dev`, pathConfig)}
+        </Typography>
       </MenuItem>
 
       {pathConfig.repo === "tidb" && (
@@ -164,25 +158,19 @@ const VersionItems = (props: {
           key={`menu-${version}`}
           value={`menu-${version}`}
           disabled={!availIn.includes(version || "")}
+          component={LinkComponent}
+          isI18n
+          to={`/${pathConfig.repo}/${version}/${name}`}
         >
-          <LinkComponent
-            isI18n
-            to={`/${pathConfig.repo}/${version}/${name}`}
-            style={{
-              width: "100%",
-              color: "#666666",
+          <Typography
+            component="div"
+            sx={{
+              fontSize: "0.875rem",
+              lineHeight: "1.25rem",
             }}
           >
-            <Typography
-              component="div"
-              sx={{
-                fontSize: "0.875rem",
-                lineHeight: "1.25rem",
-              }}
-            >
-              {renderVersion(version, pathConfig)}
-            </Typography>
-          </LinkComponent>
+            {renderVersion(version, pathConfig)}
+          </Typography>
         </MenuItem>
       ))}
       {pathConfig.repo === "tidb" && (
@@ -202,47 +190,37 @@ const VersionItems = (props: {
           key={`menu-${version}`}
           value={`menu-${version}`}
           disabled={!availIn.includes(version || "")}
+          component={LinkComponent}
+          isI18n
+          to={`/${pathConfig.repo}/${version}/${name}`}
         >
-          <LinkComponent
-            isI18n
-            to={`/${pathConfig.repo}/${version}/${name}`}
-            style={{
-              width: "100%",
-              color: "#666666",
+          <Typography
+            component="div"
+            sx={{
+              fontSize: "0.875rem",
+              lineHeight: "1.25rem",
             }}
           >
-            <Typography
-              component="div"
-              sx={{
-                fontSize: "0.875rem",
-                lineHeight: "1.25rem",
-              }}
-            >
-              {renderVersion(version, pathConfig)}
-            </Typography>
-          </LinkComponent>
+            {renderVersion(version, pathConfig)}
+          </Typography>
         </MenuItem>
       ))}
-      <LinkComponent
+      <Divider sx={{ margin: "4px 0" }} />
+      <MenuItem
+        component={LinkComponent}
         isI18n
         to={generateArchivedWebsiteUrlByLangAndType(language, pathConfig.repo)}
-        style={{
-          width: "100%",
-          color: "#666666",
-        }}
       >
-        <FormLabel
+        <Typography
+          component="div"
           sx={{
             fontSize: "0.875rem",
             lineHeight: "1.25rem",
-            fontWeight: "bold",
-            pl: "0.5rem",
-            cursor: "pointer",
           }}
         >
           {t("navbar.archive-label")}
-        </FormLabel>
-      </LinkComponent>
+        </Typography>
+      </MenuItem>
     </>
   );
 };
@@ -277,25 +255,19 @@ const VersionItemsArchived = (props: {
           key={`menu-${version}`}
           value={`menu-${version}`}
           disabled={!availIn.includes(version || "")}
+          component={LinkComponent}
+          isI18n
+          to={`/${pathConfig.repo}/${version}/${name}`}
         >
-          <LinkComponent
-            isI18n
-            to={`/${pathConfig.repo}/${version}/${name}`}
-            style={{
-              width: "100%",
-              color: "#666666",
+          <Typography
+            component="div"
+            sx={{
+              fontSize: "0.875rem",
+              lineHeight: "1.25rem",
             }}
           >
-            <Typography
-              component="div"
-              sx={{
-                fontSize: "0.875rem",
-                lineHeight: "1.25rem",
-              }}
-            >
-              {renderVersion(version, pathConfig, true)}
-            </Typography>
-          </LinkComponent>
+            {renderVersion(version, pathConfig, true)}
+          </Typography>
         </MenuItem>
       ))}
     </>

diff --git a/src/components/Layout/HeaderAction.tsx b/src/components/Layout/HeaderAction.tsx
@@ -20,6 +20,7 @@ import Search from "components/Search";
 import { Locale, BuildType } from "shared/interface";
 import { GTMEvent, gtmTrack } from "shared/utils/gtm";
 import { ActionButton } from "components/Card/FeedbackSection/components";
+import { Link } from "gatsby";
 
 const useTiDBAIStatus = () => {
   const [showTiDBAIButton, setShowTiDBAIButton] = React.useState(true);
@@ -30,21 +31,27 @@ const useTiDBAIStatus = () => {
       setInitializingTiDBAI(false);
     }
 
-    window.addEventListener("tidbaiinitialized", () => {
+    const onTiDBAIInitialized = () => {
       setInitializingTiDBAI(false);
-    });
-    window.addEventListener("tidbaierror", () => {
+    };
+    const onTiDBAIError = () => {
       setInitializingTiDBAI(false);
       setShowTiDBAIButton(false);
-    });
+    };
+    window.addEventListener("tidbaiinitialized", onTiDBAIInitialized);
+    window.addEventListener("tidbaierror", onTiDBAIError);
 
     const timer = setTimeout(() => {
       if (!window.tidbai) {
         setInitializingTiDBAI(false);
         setShowTiDBAIButton(false);
       }
     }, 10000);
-    return () => clearTimeout(timer);
+    return () => {
+      clearTimeout(timer);
+      window.removeEventListener("tidbaiinitialized", onTiDBAIInitialized);
+      window.removeEventListener("tidbaierror", onTiDBAIError);
+    };
   }, []);
 
   return { showTiDBAIButton, initializingTiDBAI };
@@ -86,7 +93,12 @@ export default function HeaderAction(props: {
                     xl: "flex",
                   },
                 }}
-                onClick={() => (window.tidbai.open = true)}
+                onClick={() => {
+                  window.tidbai.open = true;
+                  gtmTrack(GTMEvent.AskTiDBAI, {
+                    position: "header",
+                  });
+                }}
               >
                 Ask TiDB.ai
               </ActionButton>
@@ -288,45 +300,41 @@ const TiDBCloudBtnGroup = () => {
           "aria-labelledby": "idb-cloud-menu-button",
         }}
       >
-        <MenuItem onClick={handleClose}>
-          <Typography
-            component="a"
-            href={`https://tidbcloud.com/signin`}
-            // https://developer.chrome.com/blog/referrer-policy-new-chrome-default/
-            referrerPolicy="no-referrer-when-downgrade"
-            target="_blank"
-            sx={{
-              textDecoration: "none",
-            }}
-            onClick={() =>
-              gtmTrack(GTMEvent.SigninCloud, {
-                position: "header",
-              })
-            }
-          >
-            Sign In
-          </Typography>
+        <MenuItem
+          onClick={() => {
+            handleClose();
+            gtmTrack(GTMEvent.SigninCloud, {
+              position: "header",
+            });
+          }}
+          component={Link}
+          to={`https://tidbcloud.com/signin`}
+          target="_blank"
+          referrerPolicy="no-referrer-when-downgrade"
+          sx={{
+            textDecoration: "none",
+          }}
+        >
+          <Typography>Sign In</Typography>
         </MenuItem>
-        <MenuItem onClick={handleClose}>
-          <Typography
-            component="a"
-            target="_blank"
-            href="https://tidbcloud.com/free-trial"
-            // https://developer.chrome.com/blog/referrer-policy-new-chrome-default/
-            referrerPolicy="no-referrer-when-downgrade"
-            sx={{
-              textDecoration: "none",
-            }}
-            onClick={() =>
-              gtmTrack(GTMEvent.SignupCloud, {
-                product_type: "general cloud",
-                button_name: "Try Free",
-                position: "header",
-              })
-            }
-          >
-            Try Free
-          </Typography>
+        <MenuItem
+          onClick={() => {
+            handleClose();
+            gtmTrack(GTMEvent.SignupCloud, {
+              product_type: "general cloud",
+              button_name: "Try Free",
+              position: "header",
+            });
+          }}
+          component={Link}
+          to={`https://tidbcloud.com/free-trial`}
+          target="_blank"
+          referrerPolicy="no-referrer-when-downgrade"
+          sx={{
+            textDecoration: "none",
+          }}
+        >
+          <Typography>Try Free</Typography>
         </MenuItem>
       </Menu>
     </>