modified code and few styles

yashchaudhari008 · Nov 2, 2024 · 5ece12f · 5ece12f
1 parent fd51be3
commit 5ece12f
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 42 deletions.
diff --git a/src/pages/Settings/Settings.tsx b/src/pages/Settings/Settings.tsx
@@ -10,9 +10,9 @@ const Settings = () => {
 		navigate("/");
 	};
 
-	const getHeaderDom = () => {
-		return (
-			<div className={styles.headerWrapper}>
+	return (
+		<div className={styles.settingsWrapper}>
+			<div className={styles.settings}>
 				<div className={styles.header}>
 					<p className={styles.headerText}>Settings</p>
 					<FontAwesomeIcon
@@ -22,26 +22,13 @@ const Settings = () => {
 						onClick={closeSettingPage}
 					/>
 				</div>
-			</div>
-		);
-	};
-
-	const getFooterDom = () => {
-		return (
-			<div className={styles.footer}>
-				<button className={styles.saveBtn}>
-					<FontAwesomeIcon icon={faSave} />
-					<span className={styles.saveBtnText}>Save</span>
-				</button>
-			</div>
-		);
-	};
-
-	return (
-		<div className={styles.mainWrapper}>
-			<div className={styles.settings}>
-				{getHeaderDom()}
-				{getFooterDom()}
+				<div className={styles.content}></div>
+				<div className={styles.footer}>
+					<button className={styles.saveBtn}>
+						<FontAwesomeIcon icon={faSave} />
+						<span className={styles.saveBtnText}>Save</span>
+					</button>
+				</div>
 			</div>
 		</div>
 	);

diff --git a/src/pages/Settings/settings.module.scss b/src/pages/Settings/settings.module.scss
@@ -1,36 +1,43 @@
 @import "/src/styles/variables.scss";
 @import "/src/styles/mixins.scss";
 
-.mainWrapper {
+.settingsWrapper {
 	height: 100%;
-	padding: 20px 0;
+	display: flex;
+	gap: 16px;
+	padding: 32px;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
 	.settings {
 		@include font-poppins;
 		color: $clockColor;
-		width: 70%;
-		margin: auto;
-		padding: 40px;
+		max-width: max(60vw, 900px);
+		max-height: 80vh;
+		width: 100%;
+
 		display: flex;
 		flex-direction: column;
 		height: 100%;
 
-		.headerWrapper {
-			flex: 1;
-
-			.header {
-				display: flex;
-				justify-content: space-between;
-				align-items: center;
+		.header {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
 
-				.headerText {
-					font-size: 46px;
-					font-weight: 800;
-				}
-				.closeIcon {
-					cursor: pointer;
-				}
+			.headerText {
+				margin: 0;
+				font-size: 46px;
+				font-weight: 800;
+			}
+			.closeIcon {
+				cursor: pointer;
 			}
 		}
+
+		.content {
+			flex: 1;
+		}
 		.footer {
 			display: flex;
 			justify-content: flex-end;