Merge pull request #6962 from nextcloud/feat/6927/button-for-room-selector

6927: updated button for room selector

3 files changed, 19 insertions, 19 deletions

diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
index 482944196..a4ba07e27 100644
--- a/src/components/MessagesList/MessagesList.vue
+++ b/src/components/MessagesList/MessagesList.vue
@@ -902,6 +902,7 @@ export default {
 
 <style lang="scss" scoped>
 @import '../../assets/variables';
+
 .scroller {
 	flex: 1 0;
 	overflow-y: auto;
diff --git a/src/views/RoomSelector.spec.js b/src/views/RoomSelector.spec.js
index 14da0efe2..4daa617ac 100644
--- a/src/views/RoomSelector.spec.js
+++ b/src/views/RoomSelector.spec.js
@@ -2,7 +2,7 @@ import mockAxios from '../__mocks__/axios'
 import { generateOcsUrl } from '@nextcloud/router'
 import { shallowMount } from '@vue/test-utils'
 import { CONVERSATION } from '../constants'
-
+import Button from '@nextcloud/vue/dist/Components/Button'
 import RoomSelector from './RoomSelector'
 
 describe('RoomSelector.vue', () => {
@@ -139,8 +139,7 @@ describe('RoomSelector.vue', () => {
 
 		const list = wrapper.findAll('li')
 		await list.at(1).trigger('click')
-
-		await wrapper.find('button').trigger('click')
+		await wrapper.findComponent(Button).vm.$emit('click')
 
 		expect(eventHandler).toHaveBeenCalledWith('token-3')
 	})
diff --git a/src/views/RoomSelector.vue b/src/views/RoomSelector.vue
index 4431b1cf7..7522949df 100644
--- a/src/views/RoomSelector.vue
+++ b/src/views/RoomSelector.vue
@@ -21,7 +21,8 @@
   -->
 
 <template>
-	<Modal :container="container"
+	<Modal size="small"
+		:container="container"
 		@close="close">
 		<div id="modal-inner" class="talk-modal" :class="{ 'icon-loading': loading }">
 			<div id="modal-content">
@@ -55,12 +56,12 @@
 					</div>
 				</div>
 				<div id="modal-buttons">
-					<button v-if="!loading && availableRooms.length > 0"
-						class="primary"
+					<Button v-if="!loading && availableRooms.length > 0"
+						type="primary"
 						:disabled="!selectedRoom"
 						@click="select">
 						{{ t('spreed', 'Select conversation') }}
-					</button>
+					</Button>
 				</div>
 			</div>
 		</div>
@@ -73,12 +74,14 @@ import axios from '@nextcloud/axios'
 import { generateOcsUrl } from '@nextcloud/router'
 import { CONVERSATION } from '../constants'
 import ConversationIcon from '../components/ConversationIcon'
+import Button from '@nextcloud/vue/dist/Components/Button'
 
 export default {
 	name: 'RoomSelector',
 	components: {
 		ConversationIcon,
 		Modal,
+		Button,
 	},
 	props: {
 		container: {
@@ -164,10 +167,15 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+
+.talk-modal {
+	height: 80vh;
+}
+
 #modal-inner {
-	width: 90vw;
-	max-width: 400px;
-	height: 55vh;
+	width: 100%;
+	padding: 16px;
+	margin: 0 auto;
 	position: relative;
 	display: flex;
 	align-items: center;
@@ -183,7 +191,6 @@ export default {
 	height: calc(100% - 40px);
 	display: flex;
 	flex-direction: column;
-	padding: 20px;
 }
 
 #room-list {
@@ -220,14 +227,7 @@ li {
 #modal-buttons {
 	overflow: hidden;
 	flex-shrink: 0;
-	button {
-		height: 44px;
-		margin: 0;
-	}
-
-	.primary {
-		float: right;
-	}
+	margin-left: auto;
 }
 
 .subtitle {