From d2ce57f843b5b275c84899c8f1e41a3e2226c7a0 Mon Sep 17 00:00:00 2001
From: SrGooglo <srgooglo@ragestudio.net>
Date: Wed, 9 Apr 2025 14:15:22 +0000
Subject: [PATCH] improve confirm modal style

---
 .../src/layouts/components/modals/index.jsx   |   6 +-
 .../components/modals/modal/index.less        | 182 ++++++++++--------
 2 files changed, 106 insertions(+), 82 deletions(-)

diff --git a/packages/app/src/layouts/components/modals/index.jsx b/packages/app/src/layouts/components/modals/index.jsx
index 6f91e866..7d40272b 100755
--- a/packages/app/src/layouts/components/modals/index.jsx
+++ b/packages/app/src/layouts/components/modals/index.jsx
@@ -32,8 +32,8 @@ function ConfirmModal(props) {
 	}
 
 	return (
-		<div className="drawer_close_confirm">
-			<div className="drawer_close_confirm_content">
+		<div className="app-modal_confirm">
+			<div className="app-modal_confirm_content">
 				<h1>{props.headerText ?? "Are you sure?"}</h1>
 
 				{props.descriptionText && <p>{props.descriptionText}</p>}
@@ -41,7 +41,7 @@ function ConfirmModal(props) {
 
 			{typeof props.render === "function" && props.render()}
 
-			<div className="drawer_close_confirm_actions">
+			<div className="app-modal_confirm_actions">
 				<Button
 					onClick={() => close({ confirm: false })}
 					disabled={loading}
diff --git a/packages/app/src/layouts/components/modals/modal/index.less b/packages/app/src/layouts/components/modals/modal/index.less
index 7a6becd6..6d711fb4 100644
--- a/packages/app/src/layouts/components/modals/modal/index.less
+++ b/packages/app/src/layouts/components/modals/modal/index.less
@@ -1,119 +1,143 @@
 @import "@styles/vars.less";
 
 .app_modal_wrapper {
-    box-sizing: border-box;
+	box-sizing: border-box;
 
-    position: fixed;
-    top: 0;
-    left: 0;
+	position: fixed;
+	top: 0;
+	left: 0;
 
-    display: flex;
-    flex-direction: column;
+	display: flex;
+	flex-direction: column;
 
-    align-items: center;
-    justify-content: center;
+	align-items: center;
+	justify-content: center;
 
-    width: 100%;
-    height: 100%;
+	width: 100%;
+	height: 100%;
 
-    transition: all 150ms ease-in-out;
+	transition: all 150ms ease-in-out;
 
-    #mask_trigger {
-        position: fixed;
+	font-size: 0.9rem;
 
-        top: 0;
-        left: 0;
+	#mask_trigger {
+		position: fixed;
 
+		top: 0;
+		left: 0;
 
-        width: 100vw;
-        height: 100vh;
-    }
+		width: 100vw;
+		height: 100vh;
+	}
 
-    &.framed {
-        .app_modal_content {
-            display: flex;
-            flex-direction: column;
+	&.framed {
+		.app_modal_content {
+			display: flex;
+			flex-direction: column;
 
-            padding: 30px;
+			padding: 20px;
 
-            background-color: var(--background-color-accent);
+			background-color: var(--background-color-accent);
 
-            border: 2px solid var(--border-color);
+			border: 2px solid var(--border-color);
 
-            border-radius: 12px;
-        }
-    }
+			border-radius: 12px;
+		}
+	}
 
-    &.active {
-        background-color: rgba(var(--bg_color_6), 0.1);
+	&.active {
+		background-color: rgba(var(--bg_color_6), 0.1);
 
-        backdrop-filter: blur(@modal_background_blur);
-        -webkit-backdrop-filter: blur(@modal_background_blur);
+		backdrop-filter: blur(@modal_background_blur);
+		-webkit-backdrop-filter: blur(@modal_background_blur);
 
-        .app_modal_content {
-            opacity: 1;
-            transform: translateY(0);
-        }
-    }
+		.app_modal_content {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
 
-    .app_modal_content {
-        position: relative;
+	.app_modal_content {
+		position: relative;
 
-        box-sizing: border-box;
+		box-sizing: border-box;
 
-        display: flex;
-        flex-direction: column;
+		display: flex;
+		flex-direction: column;
 
-        align-items: center;
-        justify-content: center;
+		align-items: center;
+		justify-content: center;
 
-        opacity: 0;
-        transform: translateY(100px);
+		opacity: 0;
+		transform: translateY(100px);
 
-        height: fit-content;
-        width: 40vw;
+		height: fit-content;
+		width: 40vw;
 
-        max-width: 600px;
+		max-width: 600px;
 
-        transition: all 150ms ease-in-out;
+		transition: all 150ms ease-in-out;
 
-        .app_modal_close {
-            position: sticky;
+		.app_modal_close {
+			position: sticky;
 
-            align-self: flex-end;
+			align-self: flex-end;
 
-            top: 0;
-            right: 0;
+			top: 0;
+			right: 0;
 
-            font-size: 1.5rem;
+			font-size: 1.5rem;
 
-            cursor: pointer;
+			cursor: pointer;
 
-            backdrop-filter: blur(10px);
-            -webkit-backdrop-filter: blur(10px);
+			backdrop-filter: blur(10px);
+			-webkit-backdrop-filter: blur(10px);
 
-            padding: 5px;
+			padding: 5px;
 
-            border-radius: 12px;
+			border-radius: 12px;
 
-            svg {
-                margin: 0;
-                color: var(--text-color);
-            }
-        }
+			svg {
+				margin: 0;
+				color: var(--text-color);
+			}
+		}
 
-        // fixments
-        .postCreator {
-            box-shadow: @card-shadow;
-            -webkit-box-shadow: @card-shadow;
-            -moz-box-shadow: @card-shadow;
-        }
+		// fixments
+		.postCreator {
+			box-shadow: @card-shadow;
+			-webkit-box-shadow: @card-shadow;
+			-moz-box-shadow: @card-shadow;
+		}
 
-        .searcher {
-            box-sizing: border-box;
+		.searcher {
+			box-sizing: border-box;
 
-            width: 48vw;
-            height: 80vh;
-        }
-    }
-}
\ No newline at end of file
+			width: 48vw;
+			height: 80vh;
+		}
+	}
+}
+
+.app-modal_confirm {
+	display: flex;
+	flex-direction: column;
+
+	gap: 15px;
+
+	width: 100%;
+
+	.app-modal_confirm_content {
+		display: flex;
+		flex-direction: column;
+
+		gap: 2px;
+	}
+
+	.app-modal_confirm_actions {
+		display: flex;
+		flex-direction: row;
+
+		gap: 10px;
+	}
+}