Merge pull request #7704 from nextcloud/bugfix/noid/remove-nc_button-class

Remove the unused nc-button class

11 files changed, 9 insertions, 104 deletions

diff --git a/src/assets/buttons.scss b/src/assets/buttons.scss
deleted file mode 100644
index 1718a8db7..000000000
--- a/src/assets/buttons.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-/**
- * @copyright Copyright (c) 2020 Marco Ambrosini <marcoambrosini@icloud.com>
- *
- * @author Marco Ambrosini <marcoambrosini@icloud.com>
- *
- * @license GNU AGPL version 3 or any later version
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- *
- */
-
-@import 'variables';
-
-.nc-button {
-	width: $clickable-area;
-	height: $clickable-area;
-	flex-shrink: 0;
-	border: 0;
-	padding: 0;
-	z-index: 1;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	margin: 0;
-	&:not(.primary) {
-		background-color: transparent;
-	}
-	&__main {
-		&:hover,
-		&:focus {
-			background-color: var(--color-background-hover);
-		}
-		&:disabled {
-			&:hover {
-				background-color: var(--color-primary-element);
-			}
-		}
-	}
-	// Used on top of gray background such as hovered messages
-	&__main--dark {
-		&:hover,
-		&:focus {
-			background-color: var(--color-background-darker);
-		}
-	}
-
-}
diff --git a/src/components/ConversationSettings/ConversationPermissionsSettings.vue b/src/components/ConversationSettings/ConversationPermissionsSettings.vue
index 5dec2e2ab..ff5515d82 100644
--- a/src/components/ConversationSettings/ConversationPermissionsSettings.vue
+++ b/src/components/ConversationSettings/ConversationPermissionsSettings.vue
@@ -236,8 +236,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/buttons';
-
 ::v-deep .mx-input {
 	margin: 0;
 }
diff --git a/src/components/ConversationSettings/DangerZone.vue b/src/components/ConversationSettings/DangerZone.vue
index c0c8398aa..610b9f278 100644
--- a/src/components/ConversationSettings/DangerZone.vue
+++ b/src/components/ConversationSettings/DangerZone.vue
@@ -178,13 +178,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-button {
-	height: 44px;
-	border: none;
-	display: block;
-	margin: 8px 0;
-}
-
 h4 {
 	font-weight: bold;
 }
diff --git a/src/components/ConversationSettings/Matterbridge/BridgePart.vue b/src/components/ConversationSettings/Matterbridge/BridgePart.vue
index 19dde6197..80aefd666 100644
--- a/src/components/ConversationSettings/Matterbridge/BridgePart.vue
+++ b/src/components/ConversationSettings/Matterbridge/BridgePart.vue
@@ -185,10 +185,6 @@ export default {
 	padding-top: 10px;
 }
 
-button {
-	display: inline-block;
-}
-
 h3 {
 	display: flex;
 	margin-bottom: 0;
diff --git a/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue b/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue
index 621eab861..5a614651d 100644
--- a/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue
+++ b/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue
@@ -728,21 +728,6 @@ export default {
 					margin: 0 10px 0 15px;
 				}
 			}
-			button {
-				opacity: 0.5;
-				width: 44px;
-				height: 44px;
-				border-radius: var(--border-radius-pill);
-				background-color: transparent;
-				border: none;
-				margin: 0;
-
-				&:hover,
-				&:focus {
-					opacity: 1;
-					background-color: var(--color-background-hover);
-				}
-			}
 		}
 	}
 
diff --git a/src/components/Description/Description.vue b/src/components/Description/Description.vue
index 17f53b55e..6d9cb9dff 100644
--- a/src/components/Description/Description.vue
+++ b/src/components/Description/Description.vue
@@ -243,7 +243,6 @@ export default {
 
 <style lang="scss" scoped>
 @import '../../assets/variables';
-@import '../../assets/buttons';
 
 .description {
 	display: flex;
diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.spec.js b/src/components/MessagesList/MessagesGroup/Message/Message.spec.js
index 0c19aea9f..aaf04708d 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.spec.js
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.spec.js
@@ -5,6 +5,7 @@ import { cloneDeep } from 'lodash'
 import { EventBus } from '../../../../services/EventBus.js'
 import storeConfig from '../../../../store/storeConfig.js'
 import { CONVERSATION, ATTENDEE, PARTICIPANT } from '../../../../constants.js'
+import ButtonVue from '@nextcloud/vue/dist/Components/Button'
 
 // Components
 import Check from 'vue-material-design-icons/Check'
@@ -665,13 +666,13 @@ describe('Message.vue', () => {
 
 			expect(wrapper.vm.showReloadButton).toBe(true)
 
-			const reloadButtonIcon = reloadButton.find('button')
-			expect(reloadButtonIcon.exists()).toBe(true)
+			const reloadButtonVue = wrapper.findComponent(ButtonVue)
+			expect(reloadButtonVue.exists()).toBe(true)
 
 			const retryEvent = jest.fn()
 			EventBus.$on('retry-message', retryEvent)
 
-			await reloadButtonIcon.trigger('click')
+			await reloadButtonVue.vm.$emit('click')
 
 			expect(retryEvent).toHaveBeenCalledWith(123)
 		})
diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index 69fa93422..eb32cc13d 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -79,14 +79,13 @@ the main body of the message as well as a quote.
 						@focus="showReloadButton = true"
 						@mouseleave="showReloadButton = true"
 						@blur="showReloadButton = true">
-						<Button v-if="sendingErrorCanRetry && showReloadButton"
-							class="nc-button nc-button__main--dark"
+						<ButtonVue v-if="sendingErrorCanRetry && showReloadButton"
 							:aria-label="sendingErrorIconTooltip"
 							@click="handleRetry">
 							<template #icon>
 								<Reload :size="16" />
 							</template>
-						</Button>
+						</ButtonVue>
 						<AlertCircle v-else
 							:size="16" />
 					</div>
@@ -170,6 +169,7 @@ the main body of the message as well as a quote.
 </template>
 
 <script>
+import ButtonVue from '@nextcloud/vue/dist/Components/Button'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
 import CallButton from '../../../TopBar/CallButton.vue'
 import DeckCard from './MessagePart/DeckCard.vue'
@@ -204,6 +204,7 @@ export default {
 	},
 
 	components: {
+		ButtonVue,
 		CallButton,
 		Quote,
 		RichText,
@@ -782,7 +783,6 @@ export default {
 
 <style lang="scss" scoped>
 @import '../../../../assets/variables';
-@import '../../../../assets/buttons';
 
 .message:hover .normal-message-body {
 	border-radius: 8px;
diff --git a/src/components/NewMessageForm/AudioRecorder/AudioRecorder.vue b/src/components/NewMessageForm/AudioRecorder/AudioRecorder.vue
index 5425986d2..80d98a751 100644
--- a/src/components/NewMessageForm/AudioRecorder/AudioRecorder.vue
+++ b/src/components/NewMessageForm/AudioRecorder/AudioRecorder.vue
@@ -330,8 +330,6 @@ export default {
 
 <style lang="scss" scoped>
 
-@import '../../../assets/buttons';
-
 .audio-recorder {
 	display: flex;
 	// Audio record button
diff --git a/src/components/NewMessageForm/NewMessageForm.vue b/src/components/NewMessageForm/NewMessageForm.vue
index 462840628..792dcfe36 100644
--- a/src/components/NewMessageForm/NewMessageForm.vue
+++ b/src/components/NewMessageForm/NewMessageForm.vue
@@ -561,7 +561,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/buttons';
+@import '../../assets/variables';
 
 .wrapper {
 	display: flex;
diff --git a/src/components/PermissionsEditor/PermissionsEditor.vue b/src/components/PermissionsEditor/PermissionsEditor.vue
index c1daeff22..a3a731891 100644
--- a/src/components/PermissionsEditor/PermissionsEditor.vue
+++ b/src/components/PermissionsEditor/PermissionsEditor.vue
@@ -220,13 +220,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/buttons';
-
-.nc-button {
-	width: 100%;
-	margin-top: 12px;
-}
-
 .wrapper {
 	padding: 0 24px 24px 24px;
 }