refactor: Added small modal size option

frontend/src/components/Modal.vue

@@ -4,7 +4,8 @@
 		<div
 			:class="{
 				'modal-card': true,
-				'modal-wide': wide,
+				'modal-small': size === 'small',
+				'modal-wide': size === 'wide',
 				'modal-split': split
 			}"
 		>
@@ -39,7 +40,7 @@ export default {
 	},
 	props: {
 		title: { type: String, default: "Modal" },
-		wide: { type: Boolean, default: false },
+		size: { type: String, default: null },
 		split: { type: Boolean, default: false }
 	},
 	data() {
@@ -134,6 +135,10 @@ export default {
 		margin: 0;
 		font-size: 16px;
 
+		&.modal-small {
+			width: 640px;
+		}
+
 		&.modal-wide {
 			width: 1300px;
 		}

frontend/src/components/modals/EditNews.vue

@@ -2,7 +2,7 @@
 	<modal
 		class="edit-news-modal"
 		:title="newsId ? 'Edit News' : 'Create News'"
-		:wide="true"
+		:size="'wide'"
 		:split="true"
 	>
 		<template #body>

frontend/src/components/modals/EditPlaylist/index.vue

@@ -7,7 +7,7 @@
 			'edit-playlist-modal': true,
 			'view-only': !isEditable()
 		}"
-		:wide="isEditable()"
+		:size="isEditable() ? 'wide' : null"
 		:split="true"
 	>
 		<template #body>

frontend/src/components/modals/EditSong/index.vue

@@ -1,6 +1,11 @@
 <template>
 	<div>
-		<modal title="Edit Song" class="song-modal" :wide="true" :split="true">
+		<modal
+			title="Edit Song"
+			class="song-modal"
+			:size="'wide'"
+			:split="true"
+		>
 			<template #body>
 				<div class="left-section">
 					<div class="top-section">

frontend/src/components/modals/Login.vue

@@ -1,6 +1,11 @@
 <template>
 	<div>
-		<modal title="Login" class="login-modal" @closed="closeLoginModal()">
+		<modal
+			title="Login"
+			class="login-modal"
+			:size="'small'"
+			@closed="closeLoginModal()"
+		>
 			<template #body>
 				<form>
 					<!-- email address -->

frontend/src/components/modals/ManageStation/index.vue

@@ -10,7 +10,7 @@
 		"
 		:style="`--primary-color: var(--${station.theme})`"
 		class="manage-station-modal"
-		:wide="isOwnerOrAdmin() || sector !== 'home'"
+		:size="isOwnerOrAdmin() || sector !== 'home' ? 'wide' : null"
 		:split="isOwnerOrAdmin() || sector !== 'home'"
 	>
 		<template #body v-if="station && station._id">

frontend/src/components/modals/Register.vue

@@ -3,6 +3,7 @@
 		<modal
 			title="Register"
 			class="register-modal"
+			:size="'small'"
 			@closed="closeRegisterModal()"
 		>
 			<template #body>

frontend/src/components/modals/Report.vue

@@ -3,7 +3,7 @@
 		<modal
 			class="report-modal"
 			title="Report"
-			:wide="existingReports.length > 0"
+			:size="existingReports.length > 0 ? 'wide' : null"
 		>
 			<template #body>
 				<div class="report-modal-inner-container">