From 7c521d70fb51ab5c09207e133db6f948bcafa196 Mon Sep 17 00:00:00 2001
From: Micah <martinstefanovic043@gmail.com>
Date: Wed, 3 Jun 2026 00:44:03 +0200
Subject: [PATCH 1/3] fix: add spacing between email field and action buttons
 in change email modal

---
 apps/frontend/src/pages/settings/account.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/frontend/src/pages/settings/account.vue b/apps/frontend/src/pages/settings/account.vue
index 5a19a46137..144b0f8b05 100644
--- a/apps/frontend/src/pages/settings/account.vue
+++ b/apps/frontend/src/pages/settings/account.vue
@@ -26,7 +26,7 @@
 					:placeholder="formatMessage(messages.emailAddressPlaceholder)"
 					@keyup.enter="saveEmail()"
 				/>
-				<div class="input-group push-right">
+				<div class="input-group push-right mt-3">
 					<ButtonStyled>
 						<button @click="$refs.changeEmailModal.hide()">
 							<XIcon />

From bcbf473de3caee9d0eb852a35842ba015040d440 Mon Sep 17 00:00:00 2001
From: Micah <martinstefanovic043@gmail.com>
Date: Wed, 3 Jun 2026 02:08:41 +0200
Subject: [PATCH 2/3] feat: use NewModal nd the #actions slot for the buttons

---
 apps/frontend/src/pages/settings/account.vue | 36 +++++++++++++++++---
 1 file changed, 31 insertions(+), 5 deletions(-)

diff --git a/apps/frontend/src/pages/settings/account.vue b/apps/frontend/src/pages/settings/account.vue
index 144b0f8b05..2b3cdbff83 100644
--- a/apps/frontend/src/pages/settings/account.vue
+++ b/apps/frontend/src/pages/settings/account.vue
@@ -9,11 +9,13 @@
 			:has-to-type="true"
 			@proceed="deleteAccount"
 		/>
-		<Modal
+		<NewModal
 			ref="changeEmailModal"
 			:header="`${auth.user.email ? formatMessage(messages.changeEmailHeaderChange) : formatMessage(messages.changeEmailHeaderAdd)}`"
+			width="600px"
+			class="change-email-modal"
 		>
-			<div class="universal-modal">
+			<div class="universal-body">
 				<p>{{ formatMessage(messages.emailNotPublicNotice) }}</p>
 				<label for="email-input">
 					<span class="label__title">{{ formatMessage(messages.emailAddressLabel) }}</span>
@@ -24,9 +26,12 @@
 					:maxlength="2048"
 					type="email"
 					:placeholder="formatMessage(messages.emailAddressPlaceholder)"
+					wrapper-class="w-full"
 					@keyup.enter="saveEmail()"
 				/>
-				<div class="input-group push-right mt-3">
+			</div>
+			<template #actions>
+				<div class="input-group push-right">
 					<ButtonStyled>
 						<button @click="$refs.changeEmailModal.hide()">
 							<XIcon />
@@ -40,8 +45,8 @@
 						</button>
 					</ButtonStyled>
 				</div>
-			</div>
-		</Modal>
+			</template>
+		</NewModal>
 		<Modal
 			ref="managePasswordModal"
 			:header="`${
@@ -477,6 +482,7 @@ import {
 	defineMessages,
 	injectNotificationManager,
 	IntlFormatted,
+	NewModal,
 	StyledInput,
 	useVIntl,
 } from '@modrinth/ui'
@@ -1027,3 +1033,23 @@ canvas {
 	}
 }
 </style>
+
+<style lang="scss">
+.change-email-modal {
+	border-color: var(--color-bg);
+}
+
+.change-email-modal > :first-child {
+	background-color: var(--color-bg);
+	border-bottom-color: var(--color-bg);
+}
+
+.change-email-modal > :first-child > div:first-child > span {
+	color: var(--color-base);
+	font-size: 1.25rem;
+}
+
+.modal-root:has(.change-email-modal) .modal-overlay.standard {
+	background: hsla(0, 0%, 0%, 0.6);
+}
+</style>

From f757976fef808d64e3cebf32330a84372d9f041f Mon Sep 17 00:00:00 2001
From: Micah <martinstefanovic043@gmail.com>
Date: Thu, 4 Jun 2026 01:10:58 +0200
Subject: [PATCH 3/3] refactor: use native NewModal styling for change email
 modal

---
 apps/frontend/src/pages/settings/account.vue | 23 +-------------------
 1 file changed, 1 insertion(+), 22 deletions(-)

diff --git a/apps/frontend/src/pages/settings/account.vue b/apps/frontend/src/pages/settings/account.vue
index 2b3cdbff83..333b4c6448 100644
--- a/apps/frontend/src/pages/settings/account.vue
+++ b/apps/frontend/src/pages/settings/account.vue
@@ -13,7 +13,6 @@
 			ref="changeEmailModal"
 			:header="`${auth.user.email ? formatMessage(messages.changeEmailHeaderChange) : formatMessage(messages.changeEmailHeaderAdd)}`"
 			width="600px"
-			class="change-email-modal"
 		>
 			<div class="universal-body">
 				<p>{{ formatMessage(messages.emailNotPublicNotice) }}</p>
@@ -31,7 +30,7 @@
 				/>
 			</div>
 			<template #actions>
-				<div class="input-group push-right">
+				<div class="flex justify-end gap-2">
 					<ButtonStyled>
 						<button @click="$refs.changeEmailModal.hide()">
 							<XIcon />
@@ -1033,23 +1032,3 @@ canvas {
 	}
 }
 </style>
-
-<style lang="scss">
-.change-email-modal {
-	border-color: var(--color-bg);
-}
-
-.change-email-modal > :first-child {
-	background-color: var(--color-bg);
-	border-bottom-color: var(--color-bg);
-}
-
-.change-email-modal > :first-child > div:first-child > span {
-	color: var(--color-base);
-	font-size: 1.25rem;
-}
-
-.modal-root:has(.change-email-modal) .modal-overlay.standard {
-	background: hsla(0, 0%, 0%, 0.6);
-}
-</style>