ConfigBox component

1 files changed, 20 insertions, 13 deletions

diff --git a/src/js/components/Create/CreateDlg.vue b/src/js/components/Create/CreateDlg.vue
index 1020d591..5e570fff 100644
--- a/src/js/components/Create/CreateDlg.vue
+++ b/src/js/components/Create/CreateDlg.vue
@@ -22,14 +22,16 @@
 
 <template lang="html">
 	<div class="create-dialog">
-		<h2>{{ t('polls', 'Create new poll') }}</h2>
-		<input id="pollTitle" ref="pollTitle" v-model="title"
-			type="text" :placeholder="t('polls', 'Enter Title')" @keyup.enter="confirm">
-
-		<div class="config-box">
-			<label class="title icon-checkmark">
-				{{ t('polls', 'Poll type') }}
-			</label>
+		<ConfigBox :title="t('polls', 'Title')" icon-class="icon-sound">
+			<input id="pollTitle"
+				ref="pollTitle"
+				v-model="title"
+				type="text"
+				:placeholder="t('polls', 'Enter Title')"
+				@keyup.enter="confirm">
+		</ConfigBox>
+
+		<ConfigBox :title="t('polls', 'Poll type')" icon-class="icon-checkmark">
 			<input id="datePoll" v-model="type" value="datePoll"
 				type="radio" class="radio">
 			<label for="datePoll">
@@ -40,7 +42,7 @@
 			<label for="textPoll">
 				{{ t('polls', 'Text poll') }}
 			</label>
-		</div>
+		</ConfigBox>
 
 		<div class="create-buttons">
 			<button class="button" @click="cancel">
@@ -56,9 +58,15 @@
 <script>
 import { mapState, mapMutations, mapActions } from 'vuex'
 import { emit } from '@nextcloud/event-bus'
+import ConfigBox from '../Base/ConfigBox'
+
 export default {
 	name: 'CreateDlg',
 
+	components: {
+		ConfigBox,
+	},
+
 	data() {
 		return {
 			id: 0,
@@ -111,7 +119,6 @@ export default {
 			})
 		},
 	},
-
 }
 </script>
 
@@ -120,12 +127,12 @@ export default {
 	/* display: flex; */
 	/* flex-direction: column; */
 	background-color: var(--color-main-background);
-	padding: 20px;
+	padding: 8px 20px;
 }
 
-#pollTitle {
+/* #pollTitle {
 	width: 100%;
-}
+} */
 
 .create-buttons {
 	display: flex;