Refactor CSS styles and add modal styling

This commit refactors the CSS code in the app.postcss file, with changes ranging from capitalization of sections, adding outline removal styling, and incorporating modal styles. The refactoring makes the code more consistent by using capital letters for the section comments. Additionally, the new modal styling is provided with a blur effect and a semi-transparent background for a more modern appearance.

Changes made in this commit:
- Capitalize section comments for consistency
- Add outline removal styling section
- Implement modal styling with backdrop-filter and semi-transparent background

src/app.postcss

@@ -3,7 +3,7 @@
 @tailwind components;
 @tailwind utilities;
 
-/* Boilerplate CSS */
+/* BOILERPLATE CSS */
 a,
 button {
 	@apply cursor-default;
@@ -32,6 +32,7 @@ input:focus {
 	cursor: default;
 }
 
+/* OUTLINE REMOVAL  */
 .outline-none-important {
 	@apply outline-none focus:outline-none active:outline-none;
 	outline: none;
@@ -88,17 +89,17 @@ input:focus {
 	height: 0;
 }
 
-/* Side Bar */
+/* SIDE BAR */
 .side-panel {
 	@apply h-full w-[424px] border-r  border-zinc-700;
 }
 
-/* Main Content Container */
+/* MAIN CONTENT CONTAINER */
 .main-content-container {
 	@apply flex h-full w-2/3 flex-auto flex-col;
 }
 
-/* Card Styling */
+/* CARD STYLING */
 .card {
 	@apply rounded border-[0.5px] border-gb-700 bg-card-default shadow;
 	/* background-image: url("http://api.thumbr.it/whitenoise-361x370.png?background=212121ff&noise=4d4d4d&density=40&opacity=100"); */
@@ -106,7 +107,15 @@ input:focus {
 	/* background-image: url(data:image/png;base64,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);  */
 }
 
-/* Text Editor */
+/* MODAL */
+.modal {
+		@apply rounded-lg border-[0.5px] border-modal-stroke;
+		backdrop-filter: blur(10px);
+		background-color: rgb(36 36 41 / 0.8 );
+		/* Note: backdrop-filter has minimal browser support */
+	}
+
+/* TEXT EDITOR */
 .token-attribute {
 	@apply cursor-default select-none;
 }
@@ -114,7 +123,7 @@ input:focus {
 	border-radius: 2px;
 }
 
-/* Terminal */
+/* TERMINAL */
 #terminal {
 	padding-right: 4px;
 	background-color: black;

src/lib/components/CommandPalette/CommandPalette.svelte

@@ -189,7 +189,7 @@
 <Modal bind:this={modal}>
 	<div class="h-[400px]">
 		<div
-			class="command-palette flex max-h-[400px] min-h-[40px] w-[640px] flex-col rounded-lg border-[0.5px] border-[#3F3F3f] bg-zinc-900/70 p-0 text-zinc-400 shadow-lg backdrop-blur-lg"
+			class="command-palette modal modal-command-palette flex max-h-[400px] min-h-[40px] w-[680px] flex-col "
 		>
 			<!-- Search input area -->
 			<header class="search-input-container flex items-center border-b border-zinc-400/20 py-2">
@@ -285,6 +285,10 @@
 </Modal>
 
 <style lang="postcss">
+	.command-palette {
+		@apply rounded-lg border-[0.5px] border-[#3F3F3f]  p-0 text-zinc-400 shadow-lg backdrop-blur-lg;
+		/* @apply bg-zinc-900/70;		 */
+	}
 	.command-pallete-content-container {
 		/* @apply pt-2; */
 	}

src/lib/components/Dialog/Dialog.svelte

@@ -10,7 +10,7 @@
 </script>
 
 <Modal bind:this={modal} let:close>
-	<div class="wrapper flex w-full flex-col text-zinc-300">
+	<div class="modal modal-delete-project flex w-full flex-col text-zinc-300">
 		<header class="flex w-full justify-between gap-4 p-4">
 			<h2 class="text-xl ">
 				<slot name="title">Title</slot>
@@ -35,10 +35,8 @@
 </Modal>
 
 <style>
-	.wrapper {
-		background: linear-gradient(0deg, rgba(43, 43, 48, 0.8), rgba(43, 43, 48, 0.8)),
-			linear-gradient(0deg, rgba(63, 63, 63, 0.5), rgba(63, 63, 63, 0.5));
-	}
+
+
 
 	header {
 		box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.1);

src/lib/components/QuickCommitModal.svelte

@@ -121,7 +121,7 @@
 
 <Modal bind:this={modal} let:close>
 	<form
-		class="font-modal-stroke/50 flex w-[680px] flex-col rounded-lg border-[0.5px] border-modal-stroke bg-modal-background"
+		class="modal modal-quick-commit font-modal-stroke/50 flex w-[680px] flex-col"
 		on:submit|preventDefault={onCommit}
 	>
 		<header class="flex w-full items-center justify-between p-4">