Merge pull request #4998 from nextcloud/bugfix/noid/fix-descriptions-icon-sizes

Fix description icon sizes

7 files changed, 36 insertions, 54 deletions

diff --git a/css/icons.scss b/css/icons.scss
index a31c35911..cea8444f2 100644
--- a/css/icons.scss
+++ b/css/icons.scss
@@ -113,6 +113,11 @@
 			filter: initial;
 		}
 	}
+
+	// Patch material design icons' span wrong height
+	.material-design-icon {
+		display: contents;
+	}
 }
 
 // The atwho panel is a direct child of the body, so it is not affected by
diff --git a/src/assets/buttons.scss b/src/assets/buttons.scss
index 730c59cc5..f1c5b4af8 100644
--- a/src/assets/buttons.scss
+++ b/src/assets/buttons.scss
@@ -32,6 +32,7 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	margin: 0;
 	&:not(.primary) {
 		background-color: transparent;
 	}
diff --git a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
index 4b474b8f4..109b9fad7 100644
--- a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
+++ b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
@@ -30,7 +30,7 @@
 			<Plus
 				decorative
 				title=""
-				:size="24" />
+				:size="20" />
 		</button>
 		<!-- New group form -->
 		<Modal
@@ -352,6 +352,9 @@ $dialog-height: 480px;
 	width: 44px;
 	padding: 0;
 	margin: 0 0 0 4px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 }
 
 .new-group-conversation {
diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
index ea32261ae..a7ea914e1 100644
--- a/src/components/MessagesList/MessagesList.vue
+++ b/src/components/MessagesList/MessagesList.vue
@@ -59,7 +59,7 @@ get the messagesList array and loop through the list to generate the messages.
 				<ChevronDown
 					decorative
 					title=""
-					:size="24" />
+					:size="20" />
 			</button>
 		</transition>
 	</div>
@@ -726,12 +726,14 @@ export default {
 	position: absolute;
 	width: 44px;
 	height: 44px;
-
 	bottom: 76px;
 	right: 24px;
 	z-index: 2;
 	padding: 0;
 	margin: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 }
 
 </style>
diff --git a/src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue b/src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue
index 47420290a..6edf70a1e 100644
--- a/src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue
+++ b/src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue
@@ -408,8 +408,7 @@ export default {
 	overflow: visible;
 	width: 100%;
 	border:none;
-	margin: 0;
-	margin-left: 6px !important;
+	margin: 0 6px !important;
 	word-break: break-word;
 	white-space: pre-wrap;
 	padding: 8px 16px;
diff --git a/src/components/NewMessageForm/NewMessageForm.vue b/src/components/NewMessageForm/NewMessageForm.vue
index aef7a059d..bd223ea56 100644
--- a/src/components/NewMessageForm/NewMessageForm.vue
+++ b/src/components/NewMessageForm/NewMessageForm.vue
@@ -66,11 +66,11 @@
 					<EmojiPicker @select="addEmoji">
 						<button
 							type="button"
-							class="new-message-form__icon new-message-form__button"
+							class="nc-button nc-button__main"
 							:aria-label="t('spreed', 'Add emoji')"
 							:aria-haspopup="true">
 							<EmoticonOutline
-								:size="20"
+								:size="16"
 								decorative
 								title="" />
 						</button>
@@ -99,10 +99,11 @@
 					:disabled="isReadOnly"
 					type="submit"
 					:aria-label="t('spreed', 'Send message')"
-					class="new-message-form__button submit"
+					class="nc-button nc-button__main"
 					@click.prevent="handleSubmit">
 					<Send
-						:size="20"
+						title=""
+						:size="16"
 						decorative />
 				</button>
 			</form>
@@ -447,7 +448,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/variables';
+@import '../../assets/buttons';
 
 .wrapper {
 	position: sticky;
@@ -474,18 +475,6 @@ export default {
 			overflow-x: hidden;
 			max-width: 638px;
 		}
-		&__button {
-			width: 44px;
-			height: 44px;
-			background-color: transparent;
-			border: none;
-			margin: 0 4px;
-			color: var(--color-main-text);
-			opacity: .9;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-		}
 		&__quote {
 			margin: 0 16px 12px 24px;
 			background-color: var(--color-background-hover);
diff --git a/src/components/RightSidebar/Description/Description.vue b/src/components/RightSidebar/Description/Description.vue
index d0165098b..4f3b73c8f 100644
--- a/src/components/RightSidebar/Description/Description.vue
+++ b/src/components/RightSidebar/Description/Description.vue
@@ -38,23 +38,23 @@
 		<template v-if="!loading">
 			<template v-if="editing">
 				<button
-					class="description__button"
+					class="nc-button nc-button__main description__action"
 					:aria-label="t('spreed','Cancel editing description')"
 					@click="handleCancelEditing">
 					<Close
 						decorative
 						title=""
-						:size="20" />
+						:size="16" />
 				</button>
 				<button
-					class="description__button primary"
+					class="nc-button nc-button__main primary description__action"
 					:aria-label="t('spreed','Submit conversation description')"
 					:disabled="!canSubmit"
 					@click="handleSubmitDescription">
 					<Check
 						decorative
 						title=""
-						:size="20" />
+						:size="16" />
 				</button>
 				<div v-if="showCountDown"
 					v-tooltip.auto="countDownWarningText"
@@ -65,17 +65,21 @@
 				</div>
 			</template>
 			<button v-if="!editing && editable"
-				class="description__button"
+				class="nc-button nc-button__main"
 				:aria-label="t('spreed','Edit conversation description')"
 				@click="handleEditDescription">
 				<Pencil
 					decorative
-					:size="20" />
+					title=""
+					:size="16" />
 			</button>
 		</template>
 		<div v-if="loading" class="icon-loading-small spinner" />
-		<button v-if="!editing && overflows && expanded" class="expand-indicator description__button" @click="handleClick">
-			<ChevronDown />
+		<button v-if="!editing && overflows && expanded" class="expand-indicator nc-button nc-button__main" @click="handleClick">
+			<ChevronDown
+				decorative
+				title=""
+				:size="16" />
 		</button>
 		<div v-if="showOverlay"
 			cursor="pointer"
@@ -288,6 +292,7 @@ export default {
 
 <style lang="scss" scoped>
 @import '../../../assets/variables.scss';
+@import '../../../assets/buttons.scss';
 
 .description {
 	margin: -20px 0 8px 8px;
@@ -328,32 +333,10 @@ export default {
 			color: var(--color-text-maxcontrast);
 		}
 	}
-	&__buttons{
-		display: flex;
-		margin-top: 8px;
-		justify-content: flex-end;
-	}
-	&__button {
-		width: $clickable-area;
-		height: $clickable-area;
-		flex-shrink: 0;
-		border: 0;
-		padding: 0;
+
+	&__action {
 		margin: 0 0 4px 4px;
-		z-index: 1;
-		&:not(.primary) {
-			background-color: transparent;
-		}
 
-		&:hover,
-		&:focus {
-			background-color: var(--color-background-hover);
-		}
-		&:disabled {
-			&:hover {
-				background-color: var(--color-primary-element);
-			}
-		}
 	}
 }