wip: confirm modal

package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "deemix-webui",
-	"version": "0.2.0",
+	"version": "1.0.0",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {

src/App.vue

@@ -14,6 +14,7 @@
 
 		<TheTrackPreview />
 		<TheQualityModal />
+		<!-- <ConfirmModal /> -->
 
 		<TheContextMenu />
 	</div>
@@ -39,6 +40,7 @@ import BaseLoadingPlaceholder from '@components/globals/BaseLoadingPlaceholder.v
 import TheContextMenu from '@components/globals/TheContextMenu.vue'
 import TheTrackPreview from '@components/globals/TheTrackPreview.vue'
 import TheQualityModal from '@components/globals/TheQualityModal.vue'
+import ConfirmModal from '@components/globals/ConfirmModal.vue'
 
 import TheSidebar from '@components/TheSidebar.vue'
 import TheSearchBar from '@components/TheSearchBar.vue'
@@ -53,7 +55,8 @@ export default {
 		TheQualityModal,
 		BaseLoadingPlaceholder,
 		TheContextMenu,
-		TheContent
+		TheContent,
+		ConfirmModal
 	}
 }
 </script>

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>

src/styles/scss/globals/_globals.scss

@@ -93,6 +93,22 @@ button {
 		opacity: 0.75;
 	}
 
+	&.btn-green {
+		background-color: green;
+
+		&:active {
+			background-color: green;
+		}
+	}
+
+	&.btn-red {
+		background-color: red;
+
+		&:active {
+			background-color: red;
+		}
+	}
+
 	&.selective {
 		background-color: var(--main-background);
 		color: var(--foreground);
@@ -128,7 +144,7 @@ button {
 		transform: scale(0.98);
 	}
 
-	&:hover {
+	&:not(.no-hover):hover {
 		background: none;
 		border: 1px solid var(--accent-color);
 	}