wip: confirm modal

src/components/globals/ConfirmModal.vue

@@ -0,0 +1,86 @@
+<template>
+	<div class="wrapper" ref="wrapper">
+		<div class="body animate__animated animate__bounce" ref="body">
+			<h1 style="flex: 1">{{ titleText }}</h1>
+
+			<div class="confirm-area">
+				<button class="no-hover"></button>
+				<button class="btn-red no-hover"></button>
+			</div>
+		</div>
+
+		<div class="overlay"></div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+$body-padding: 2rem;
+$body-radius: 15px;
+
+.wrapper {
+	display: grid;
+	place-items: center;
+
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+
+	z-index: 1000; // +1 of the sidebar
+}
+
+.body {
+	position: relative;
+
+	display: flex;
+	flex-direction: column;
+
+	width: 50vw;
+	height: 30vh;
+
+	border-radius: $body-radius;
+	padding: $body-padding;
+	background: var(--secondary-background);
+	z-index: 2;
+	box-shadow: 9px 10px 39px 12px var(--main-background);
+}
+
+.confirm-area {
+	position: relative;
+
+	flex: 1;
+
+	display: flex;
+	justify-content: flex-end;
+	align-items: flex-end;
+}
+
+.overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+
+	background: var(--secondary-background);
+	opacity: 0.75;
+	z-index: 1;
+}
+</style>
+
+<script>
+export default {
+	data() {
+		return {
+			titleText: 'Are you sure you want to reset settings to default?'
+		}
+	},
+	mounted() {
+		setTimeout(() => {
+			// this.$refs.wrapper.classList.add('bounceIn')
+			// this.$refs.body.classList.add('bounceIn')
+		}, 2000)
+	}
+}
+</script>