Update modal-window component and modal button

frontend/src/assets/scss/elementStyles.scss

@@ -95,12 +95,10 @@ b, strong {
 	}
 
 	@at-root #{&}--modal {
-		float: right;
-		margin-bottom: 1rem;
-
-		&:last-child {
-			margin-right: 0.5rem;
-		}
+		font-size: 1rem;
+		font-weight: 600;
+		padding: 0.25rem 0.5rem;
+		margin-left: 0.25rem;
 	}
 
 	@at-root #{&}--color_input {
@@ -116,15 +114,7 @@ b, strong {
 
 		@include user-select(none);
 
-		&::after {
-			content: '';
-			width: 100%;
-			height: 100%;
-			position: absolute;
-			left: 0;
-			top: 0;
-			background-color: rgba(240, 240, 240, 0.4);
-		}
+		filter: saturate(80%) grayscale(40%) brightness(110%);
 	}
 
 	@at-root #{&}--lightblue {

frontend/src/components/ModalWindow.vue

@@ -1,20 +1,37 @@
 <template>
 	<div class='modal_window__overlay' :class='{"modal_window--show": value}' @click.self='closeModal'>
 		<div class='modal_window' :class='{"modal_window--show": value}' :style='{"width": width || "20rem"}'>
+			<div
+				class='modal_window__loading_overlay'
+				:class='{
+					"modal_window__loading_overlay--show": loading
+				}'
+			>
+				<loading-icon></loading-icon>
+			</div>
+
 			<span
 				class='modal_window__close fa fa-times'
 				@click='closeModal'
 				v-if='closeButton'
 			></span>
-			<slot></slot>
+			<div class='modal_window__main' :class='{ "modal_window__main--no_padding": noPadding }'>
+				<slot name='main'></slot>
+			</div>
+			<div class='modal_window__footer' v-if='!hideFooter'>
+				<slot name='footer'></slot>
+			</div>
 		</div>
 	</div>
 </template>
 
 <script>
+	import LoadingIcon from './LoadingIcon'
+
 	export default {
 		name: 'ModalWindow',
-		props: ['value', 'width', 'close-button'],
+		props: ['value', 'width', 'close-button', 'hide-footer', 'no-padding', 'loading'],
+		components: { LoadingIcon },
 		methods: {
 			closeModal () {
 				this.$emit('input', false)
@@ -54,7 +71,6 @@
 		//margin-top: -3rem;
 		opacity: 0;
 		position: relative;
-		border: 0.125rem solid $color__gray--darkest;
 		border-radius: 0.25rem;
 		pointer-events: none;
 
@@ -62,6 +78,45 @@
 
 		transition: margin-top 0.3s, opacity 0.3s, transform 0.3s;
 
+		@at-root #{&}__loading_overlay {
+			position: absolute;
+			left: 0;
+			top: 0;
+			height: 100%;
+			width: 100%;
+			z-index: 5;
+			background-color: rgba(0, 0, 0, 0.3);
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			pointer-events: none;
+			opacity: 0;
+
+			transition: all 0.2s;
+
+			@at-root #{&}--show {
+				pointer-events: all;
+				opacity: 1;
+			}
+		}
+
+		@at-root #{&}__main {
+			padding: 0 1rem 1rem 1rem;
+			border-radius: 0.25rem;
+			overflow: hidden;
+
+			@at-root #{&}--no_padding {
+				padding: 0;
+			}
+		}
+		@at-root #{&}__footer {
+			background-color: $color__lightgray--darkest;
+			border-radius: 0 0 0.25rem 0.25rem;
+			display: flex;
+			justify-content: flex-end;
+			padding: 0.35rem 1rem;
+		}
+
 		@at-root #{&}__close {
 			position: absolute;
 			right: 0.7rem;