Merge pull request #6949 from nextcloud/feat/6927/button-for-new-grou…

…p-conversation 6927: updated button for NewGroupConversation
nextcloud · Mar 7, 2022 · e0f4228 · e0f4228
2 parents 81a5d90 + 76b5161
commit e0f4228
Showing 1 changed file with 21 additions and 25 deletions.
diff --git a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
@@ -21,16 +21,17 @@
 
 <template>
 	<div class="wrapper">
-		<button slot="trigger"
+		<Button slot="trigger"
 			v-tooltip.bottom="t('spreed', 'Create a new group conversation')"
+			type="tertiary"
 			class="toggle"
 			icon=""
 			:aria-label="t('spreed', 'Create a new group conversation')"
 			@click="showModal">
 			<Plus decorative
 				title=""
 				:size="20" />
-		</button>
+		</Button>
 		<!-- New group form -->
 		<Modal v-if="modal"
 			:container="container"
@@ -77,35 +78,35 @@
 				placement are rendered depending on the current page -->
 				<div class="navigation">
 					<!-- First page -->
-					<button v-if="page===0 && isPublic"
-						class="navigation__button navigation__button-left "
+					<Button v-if="page===0 && isPublic"
 						:disabled="disabled"
+						type="tertiary"
 						@click="handleCreateConversation">
 						{{ t('spreed', 'Create conversation') }}
-					</button>
-					<button v-if="page===0"
-						class="navigation__button navigation__button-right primary"
+					</Button>
+					<Button v-if="page===0"
+						type="primary"
 						:disabled="disabled"
 						@click="handleSetConversationName">
 						{{ t('spreed', 'Add participants') }}
-					</button>
+					</Button>
 					<!-- Second page -->
-					<button v-if="page===1"
-						class="navigation__button navigation__button-left"
+					<Button v-if="page===1"
+						type="tertiary"
 						@click="handleClickBack">
 						{{ t('spreed', 'Back') }}
-					</button>
-					<button v-if="page===1"
-						class="navigation__button navigation__button-right primary"
+					</Button>
+					<Button v-if="page===1"
+						type="primary"
 						@click="handleCreateConversation">
 						{{ t('spreed', 'Create conversation') }}
-					</button>
+					</Button>
 					<!-- Third page -->
-					<button v-if="page===2 && (error || isPublic)"
-						class="navigation__button navigation__button-right primary"
+					<Button v-if="page===2 && (error || isPublic)"
+						type="primary"
 						@click="closeModal">
 						{{ t('spreed', 'Close') }}
-					</button>
+					</Button>
 				</div>
 			</div>
 		</modal>
@@ -121,6 +122,7 @@ import SetContacts from './SetContacts/SetContacts'
 import SetConversationName from './SetConversationName/SetConversationName'
 import SetConversationType from './SetConversationType/SetConversationType'
 import Confirmation from './Confirmation/Confirmation'
+import Button from '@nextcloud/vue/dist/Components/Button'
 import { addParticipant } from '../../../services/participantsService'
 import {
 	createPublicConversation,
@@ -148,6 +150,7 @@ export default {
 		SetContacts,
 		SetConversationName,
 		SetConversationType,
+		Button,
 		Confirmation,
 		PasswordProtect,
 		ListableSettings,
@@ -363,7 +366,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
 .toggle {
 	height: 44px;
 	width: 44px;
@@ -398,18 +400,12 @@ it back */
 
 .navigation {
 	display: flex;
+	justify-content: space-between;
 	flex: 0 0 40px;
 	height: 50px;
 	box-shadow: 0 -10px 5px var(--color-main-background);
 	z-index: 1;
 	width: 100%;
-	&__button {
-		height: 44px;
-		padding: 0 16px;
-	}
-	&__button-right {
-		margin-left:auto;
-	}
 }
 
 .wrapper {