From b0d57aa517da5a4dd3f7662deef18b572b4883a3 Mon Sep 17 00:00:00 2001
From: xuliwenwenwen <74528885+xuliwenwenwen@users.noreply.github.com>
Date: Fri, 15 Nov 2024 15:02:37 +0800
Subject: [PATCH] Feat/form modal (#44)

* feat: form modal

* style: update
---
 pingcap-jp/.prettierrc.js               | 26 +++++++++++++++++++------
 pingcap-jp/css/blocks/tabs.scss         |  6 +++---
 pingcap-jp/css/scaffold/buttons.scss    |  4 ++--
 pingcap-jp/css/scaffold/typography.scss |  2 +-
 pingcap-jp/css/vendor/hubspot.scss      |  4 ++++
 pingcap-jp/js/App.js                    | 23 +++++++++++++++++-----
 6 files changed, 48 insertions(+), 17 deletions(-)

diff --git a/pingcap-jp/.prettierrc.js b/pingcap-jp/.prettierrc.js
index 600c001..8cf97b7 100644
--- a/pingcap-jp/.prettierrc.js
+++ b/pingcap-jp/.prettierrc.js
@@ -1,8 +1,22 @@
 module.exports = {
-  tabWidth: 2,
-  useTabs: false,
-  singleQuote: true,
-  jsxSingleQuote: false,
-  printWidth: 100,
-  trailingComma: 'none'
+	tabWidth: 4,
+	useTabs: true,
+	singleQuote: true,
+	jsxSingleQuote: false,
+	printWidth: 100,
+	trailingComma: 'none',
+	overrides: [
+		{
+			files: '*.scss',
+			options: {
+				singleQuote: false
+			}
+		},
+		{
+			files: '*.css',
+			options: {
+				singleQuote: false
+			}
+		}
+	]
 };
diff --git a/pingcap-jp/css/blocks/tabs.scss b/pingcap-jp/css/blocks/tabs.scss
index 3927f38..61689bf 100644
--- a/pingcap-jp/css/blocks/tabs.scss
+++ b/pingcap-jp/css/blocks/tabs.scss
@@ -202,7 +202,7 @@
 			cursor: pointer;
 			i {
 				font-size: 4rem;
-				color: #2e33b4;
+				color: #2C80CE;
 			}
 			h5 {
 				font-size: 14px;
@@ -212,7 +212,7 @@
 				margin-bottom: 0;
 			}
 			&.active {
-				background-color: #2e33b4;
+				background-color: #2C80CE;
 				h5,
 				p,
 				i {
@@ -241,7 +241,7 @@
 				}
 			}
 			h3 {
-				border-bottom: 1px solid #3a40e1;
+				border-bottom: 1px solid #2c80ce;
 			}
 		}
 	}
diff --git a/pingcap-jp/css/scaffold/buttons.scss b/pingcap-jp/css/scaffold/buttons.scss
index 6e2b895..218fb79 100644
--- a/pingcap-jp/css/scaffold/buttons.scss
+++ b/pingcap-jp/css/scaffold/buttons.scss
@@ -237,8 +237,8 @@ input[type="submit"],
 		left: 0;
 		right: 0;
 		bottom: -100%;
-		width: 30px;
-		height: 30px;
+		width: 34px;
+		height: 34px;
 		border-radius: 50%;
 		margin: auto;
 		background: #dc150b;
diff --git a/pingcap-jp/css/scaffold/typography.scss b/pingcap-jp/css/scaffold/typography.scss
index 89a886f..286b5f5 100644
--- a/pingcap-jp/css/scaffold/typography.scss
+++ b/pingcap-jp/css/scaffold/typography.scss
@@ -123,7 +123,7 @@ span {
 h1 {
 	font-weight: var(--font-weight-semibold);
 	font-size: 36px;
-	line-height: 100%;
+	line-height: 125%;
 	color: var(--h1-color);
 	@include media-min($medium) {
 		font-size: clamp(36px, 3.65vw, 52px);
diff --git a/pingcap-jp/css/vendor/hubspot.scss b/pingcap-jp/css/vendor/hubspot.scss
index aca56d0..e712c18 100644
--- a/pingcap-jp/css/vendor/hubspot.scss
+++ b/pingcap-jp/css/vendor/hubspot.scss
@@ -17,6 +17,10 @@
 		}
 	}
 
+	ul[role="checkbox"] {
+		list-style: none;
+	}
+
 	input[type="text"],
 	input[type="number"],
 	input[type="tel"],
diff --git a/pingcap-jp/js/App.js b/pingcap-jp/js/App.js
index d187b14..2341ae6 100644
--- a/pingcap-jp/js/App.js
+++ b/pingcap-jp/js/App.js
@@ -76,7 +76,7 @@ class App {
 			templates: {
 				frontPage: null,
 				activityPage: null,
-				aiPage: null,
+				aiPage: null
 			},
 			blocks: {
 				testimonials: [],
@@ -122,6 +122,16 @@ class App {
 			`.trim()
 		});
 
+		const hubspotTriggerEl = Array.from(document.querySelectorAll('.js--trigger-form-modal'));
+		if (hubspotTriggerEl.length && typeof window.hbspt === 'undefined') {
+			const script = document.createElement('script');
+			script.src = '//js.hsforms.net/forms/v2.js';
+			script.type = 'text/javascript';
+			script.async = true;
+
+			document.head.appendChild(script);
+		}
+
 		/**
 		 * Setup event delegators
 		 */
@@ -263,9 +273,13 @@ class App {
 		});
 
 		// posts list - ebook whitepaper
-		Array.from(document.querySelectorAll('.posts-list-ebook-whitepaper')).forEach((postsListEbookWhitepaperEl) => {
-			this.instances.components.postsListEbookWhitepaper.push(new PostsListEbookWhitepaper(postsListEbookWhitepaperEl));
-		});
+		Array.from(document.querySelectorAll('.posts-list-ebook-whitepaper')).forEach(
+			(postsListEbookWhitepaperEl) => {
+				this.instances.components.postsListEbookWhitepaper.push(
+					new PostsListEbookWhitepaper(postsListEbookWhitepaperEl)
+				);
+			}
+		);
 
 		// posts list - case study
 		Array.from(document.querySelectorAll('.posts-list-case-study')).forEach(
@@ -313,7 +327,6 @@ class App {
 			this.instances.templates.aiPage = new AIPage(aiPageEl);
 		}
 
-
 		const tidbPage = document.querySelector('.tmpl-tidb');
 		if (tidbPage) {
 			this.loadRepoInfo();