layout add custom station modal

src/views/Favorites.vue

@@ -64,8 +64,25 @@
 				</template>
 			</EmptyContent>
 			<Modal v-if="modal" @close="closeModal">
-				<div class="modal__content">
+				<div class="modalContent">
-					Hello world
+					<h2 class="oc-dialog-title">
+						Add custom station
+					</h2>
+					<form>
+						<label for="stationName">Name:</label>
+						<input id="stationName" type="text">
+						<label for="streamUrl">Stream url:</label>
+						<input id="streamUrl" type="text">
+						<label for="faviconUrl">Favicon url:</label>
+						<input id="faviconUrl" type="text">
+					</form>
+					<div class="formControls">
+						<!-- FIXME: Use nextcloud-vue button component -->
+						<button class="icon-add-white primary button new-button"
+							@click="addCustomStation()">
+							Add station
+						</button>
+					</div>
 				</div>
 			</Modal>
 		</AppContent>
@@ -114,7 +131,7 @@ export default {
 		showSidebar: false,
 		sidebarStation: {},
 		tableData: [],
-		modal: false,
+		modal: true,
 	}),
 	computed: {
 		...mapGetters([
@@ -212,11 +229,16 @@ export default {
 			this.modal = false
 		},
 
+		addCustomStation() {
+			console.log('Add custom station')
+			// this.addFavorite(station)
+		},
+
 	},
 }
 </script>
 
-<style>
+<style lang="scss">
 
 .controls {
 	position: sticky;
@@ -237,10 +259,38 @@ export default {
 	display: none;
 }
 
-.modal__content {
+.modalContent {
-	width: 50vw;
+	max-width: 300px;
-	text-align: center;
+	width: 100%;
-	margin: 10vw 0;
+	padding: 20px;
+	display: flex;
+	flex-direction: column;
+
+	h2 {
+		// FIXME: No flex gap support in Chrome
+		margin-bottom: 15px;
+	}
+
+	form {
+		flex-grow: 1;
+		display: grid;
+		grid-template-columns: 100px 1fr;
+		align-items: center;
+		// FIXME: No flex gap support in Chrome
+		margin-bottom: 15px;
+	}
+
+	.formControls {
+		display: flex;
+		justify-content: flex-end;
+		margin-right: 40px;
+
+		.button {
+			padding-left: 35px;
+			padding-right: 15px;
+			background-position: 10px center;
+		}
+	}
 }
 
 @media only screen and (max-width: 1024px) {