refactor

lifeparticle · Sep 27, 2023 · aa77be1 · aa77be1
1 parent 24087a5
commit aa77be1
Show file tree

Hide file tree

Showing 5 changed files with 130 additions and 117 deletions.
diff --git a/ui/src/components/Hoc/withPageTitle/withPageTitle.tsx b/ui/src/components/Hoc/withPageTitle/withPageTitle.tsx
@@ -10,12 +10,17 @@ const NO_PADDING = [
 	"About",
 	"Terms",
 	"Cookie Policy",
+	"Privacy Policy",
+	"Feedback",
 ];
 
 const NO_TITLE = [
 	"BinaryTree: Developer Productivity Tools",
 	"Terms",
 	"Cookie Policy",
+	"Privacy Policy",
+	"About",
+	"Feedback",
 ];
 
 const withPageTitle = <T extends object>(

diff --git a/ui/src/pages/About/About.module.scss b/ui/src/pages/About/About.module.scss
@@ -1,51 +1,55 @@
 .about {
-	margin: 0 auto;
-	max-width: var(--bt-converter-width);
-	margin-bottom: 100px;
-	padding-left: 10px;
-	padding-right: 10px;
+	padding: 64px 10% 64px 10%;
 
-	&__container {
-		display: flex;
-		flex-direction: column;
-		gap: var(--bt-size-20);
-	}
-
-	&__intro {
-		position: relative;
-		min-height: 250px;
+	&__card {
+		margin: 0 auto;
+		max-width: var(--bt-converter-width);
+		margin-bottom: 100px;
+		padding-left: 10px;
+		padding-right: 10px;
 
-		&_wrapper {
-			position: absolute;
-			top: 0;
-			bottom: 0;
-			left: 10%;
-			right: 10%;
+		&__container {
 			display: flex;
-			align-items: center;
-			justify-content: center;
-			z-index: 1;
+			flex-direction: column;
+			gap: var(--bt-size-20);
+		}
+
+		&__intro {
+			position: relative;
+			min-height: 250px;
+
+			&_wrapper {
+				position: absolute;
+				top: 0;
+				bottom: 0;
+				left: 10%;
+				right: 10%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				z-index: 1;
 
-			&_text {
-				background-color: var(--bt-color-bg);
-				padding: var(--bt-size-10);
-				text-align: center;
-				color: white;
-				max-width: 80vw;
+				&_text {
+					background-color: var(--bt-color-bg);
+					padding: var(--bt-size-10);
+					text-align: center;
+					color: white;
+					max-width: 80vw;
+				}
 			}
-		}
 
-		&_img {
-			width: 100%;
-			height: 250px;
-			object-fit: cover;
-			background-color: #71727e;
+			&_img {
+				width: 100%;
+				height: 250px;
+				object-fit: cover;
+				background-color: #71727e;
+			}
 		}
-	}
 
-	&__socials {
-		display: flex;
-		justify-content: center;
-		margin-top: var(--bt-size-20);
+		&__socials {
+			display: flex;
+			justify-content: center;
+			margin-top: var(--bt-size-20);
+		}
 	}
 }
diff --git a/ui/src/pages/About/index.tsx b/ui/src/pages/About/index.tsx
@@ -14,88 +14,91 @@ import Footer from "components/Layouts/Footer";
 const About = () => {
 	return (
 		<>
-			<Card
-				className={style.about}
-				title="Binary Tree"
-				bordered={false}
-				cover={
-					<div className={style.about__intro}>
-						<div className={style.about__intro_wrapper}>
-							<Typography.Paragraph
-								className={style.about__intro_wrapper_text}
-							>
-								At binarytree.dev, we provide an array of
-								developer productivity tools designed to help
-								you save time. With an{" "}
-								<a
-									href="https://github.com/users/lifeparticle/projects/2"
-									target="_blank"
+			<div className={style.about}>
+				<Card
+					className={style.about__card}
+					title="Binary Tree"
+					bordered={false}
+					cover={
+						<div className={style.about__card__intro}>
+							<div className={style.about__card__intro_wrapper}>
+								<Typography.Paragraph
+									className={
+										style.about__card__intro_wrapper_text
+									}
 								>
-									ever-growing number of features
-								</a>{" "}
-								(currently <b>{FEATURE_DATA.length}</b>), our
-								platform is constantly evolving to meet the
-								needs of developers like you.
-							</Typography.Paragraph>
+									At binarytree.dev, we provide an array of
+									developer productivity tools designed to
+									help you save time. With an{" "}
+									<a
+										href="https://github.com/users/lifeparticle/projects/2"
+										target="_blank"
+									>
+										ever-growing number of features
+									</a>{" "}
+									(currently <b>{FEATURE_DATA.length}</b>),
+									our platform is constantly evolving to meet
+									the needs of developers like you.
+								</Typography.Paragraph>
+							</div>
+							<img
+								loading="lazy"
+								alt="about"
+								src={about}
+								className={style.about__card__intro_img}
+								onClick={() =>
+									window.open(
+										"https://unsplash.com/photos/AaqI2ao96KM",
+										"_blank"
+									)
+								}
+							/>
 						</div>
-						<img
-							loading="lazy"
-							alt="about"
-							src={about}
-							className={style.about__intro_img}
-							onClick={() =>
-								window.open(
-									"https://unsplash.com/photos/AaqI2ao96KM",
-									"_blank"
-								)
-							}
+					}
+				>
+					<div className={style.about__card__container}>
+						<List
+							header={<div>Values</div>}
+							bordered
+							dataSource={APP_VALUES}
+							renderItem={(item) => (
+								<List.Item>
+									<Typography.Text>{item}</Typography.Text>
+								</List.Item>
+							)}
 						/>
-					</div>
-				}
-			>
-				<div className={style.about__container}>
-					<List
-						header={<div>Values</div>}
-						bordered
-						dataSource={APP_VALUES}
-						renderItem={(item) => (
-							<List.Item>
-								<Typography.Text>{item}</Typography.Text>
-							</List.Item>
-						)}
-					/>
-
-					<Table
-						columns={FEATURE_COLUMNS}
-						dataSource={FEATURE_DATA}
-						pagination={false}
-						title={() => "Features"}
-						bordered
-						scroll={{ x: "calc(50%)" }}
-					/>
 
-					<Table
-						columns={OTHER_COLUMNS}
-						dataSource={OTHER_DATA}
-						pagination={false}
-						title={() => "Others"}
-						scroll={{ x: "calc(50%)" }}
-						bordered
-					/>
+						<Table
+							columns={FEATURE_COLUMNS}
+							dataSource={FEATURE_DATA}
+							pagination={false}
+							title={() => "Features"}
+							bordered
+							scroll={{ x: "calc(50%)" }}
+						/>
 
-					<List
-						header={<div>Support</div>}
-						bordered
-						dataSource={APP_SUPPORT}
-						renderItem={(item) => (
-							<List.Item>
-								<Typography.Text>{item}</Typography.Text>
-							</List.Item>
-						)}
-					/>
-				</div>
-			</Card>
+						<Table
+							columns={OTHER_COLUMNS}
+							dataSource={OTHER_DATA}
+							pagination={false}
+							title={() => "Others"}
+							scroll={{ x: "calc(50%)" }}
+							bordered
+						/>
 
+						<List
+							header={<div>Support</div>}
+							bordered
+							dataSource={APP_SUPPORT}
+							renderItem={(item) => (
+								<List.Item>
+									<Typography.Text>{item}</Typography.Text>
+								</List.Item>
+							)}
+						/>
+					</div>
+				</Card>
+			</div>
 			<Footer />
 		</>
 	);

diff --git a/ui/src/pages/Feedback/Feedback.module.scss b/ui/src/pages/Feedback/Feedback.module.scss
@@ -1,4 +1,5 @@
 .feedback {
+	padding: 64px 0 64px 0;
 	display: flex;
 	justify-content: center;
 	flex-direction: column;

diff --git a/ui/src/pages/Routes/utils/constant.tsx b/ui/src/pages/Routes/utils/constant.tsx
@@ -333,7 +333,7 @@ export const routes: Route[] = [
 	{
 		id: "privacypolicy",
 		path: "/privacy-policy",
-		title: "",
+		title: "Privacy Policy",
 		description: "",
 		component: PrivacyPolicy,
 	},