✨ Edit profile page

2024-09-13 19:09:51 +02:00
parent 3b90f9acd2
commit 172208a978
16 changed files with 414 additions and 100 deletions
@@ -0,0 +1,93 @@
+.settings {
+	flex-grow: 1;
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+	width: 100%;
+	background-color: #d94253;
+
+	& > .header {
+		display: grid;
+		grid-template-columns: 25px 1fr;
+		align-items: center;
+		gap: 15px;
+		padding: 15px;
+		color: #ffffff;
+		box-shadow: 0 0 6px rgba(255, 255, 255, 0.2);
+
+		& > .backButton {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+		}
+
+		& > .title {
+			font-size: 1.2rem;
+		}
+	}
+
+	& > .form {
+		display: grid;
+		grid-template-rows: repeat(2, 1fr);
+		align-items: center;
+		gap: 20px;
+		padding: 20px;
+		padding-bottom: 0;
+
+		& > .buttonsContainer {
+			display: grid;
+			grid-template-columns: repeat(2, 1fr);
+			gap: 20px;
+
+			& > .submitButton,
+			& > .resetButton {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				gap: 5px;
+				padding: 10px;
+				border: 1px solid #ffffff;
+				border-radius: 5px;
+				background-color: #ffffff;
+				font-size: 1rem;
+				color: #d94253;
+				cursor: pointer;
+			}
+
+			& > .resetButton {
+				background-color: #d94253;
+				color: #ffffff;
+			}
+		}
+	}
+
+	& > .separator {
+		display: block;
+		margin: 20px auto;
+		width: 90%;
+		height: 1px;
+		background-color: rgb(254, 254, 250);
+		background: linear-gradient(
+			90deg,
+			rgba(254, 254, 250, 0) 0%,
+			rgba(254, 254, 250, 1) 10%,
+			rgba(254, 254, 250, 1) 90%,
+			rgba(254, 254, 250, 0) 100%
+		);
+	}
+
+	& > .deleteButton {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		gap: 5px;
+		margin: 0 20px;
+		padding: 10px;
+		border: 1px solid #d80135;
+		border-radius: 5px;
+		background-color: #d80135;
+		font-size: 1rem;
+		color: #ffffff;
+		cursor: pointer;
+	}
+}