Fix buttons

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>

5 files changed, 40 insertions, 26 deletions

diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
index 1eab560c0..5c3045098 100644
--- a/src/components/LeftSidebar/LeftSidebar.vue
+++ b/src/components/LeftSidebar/LeftSidebar.vue
@@ -274,7 +274,7 @@ export default {
 
 .new-conversation {
 	display: flex;
-	padding: 6px;
+	padding: 8px;
 	border-bottom: 1px solid var(--color-border-dark);
 }
 
diff --git a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
index feafa5593..d2af36a9b 100644
--- a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
+++ b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
@@ -20,16 +20,16 @@
 -->
 
 <template>
-	<div>
+	<div class="wrapper">
 		<!-- Tooltip -->
 		<Popover trigger="hover" placement="bottom">
-			<Actions slot="trigger">
-				<ActionButton
-					class="toggle"
-					icon="icon-add"
-					:aria-label="t('spreed','Create a new group conversation')"
-					@click="showModal" />
-			</Actions>
+			<Button slot="trigger"
+				class="toggle"
+				icon=""
+				:aria-label="t('spreed','Create a new group conversation')"
+				@click="showModal">
+				<Plus size="24" />
+			</Button>
 			<p>{{ t('spreed','Create a new group conversation') }}</p>
 		</Popover>
 		<!-- New group form -->
@@ -89,7 +89,7 @@
 					<!-- First page -->
 					<button
 						v-if="page===0"
-						class="navigation__button-right primary"
+						class="navigation__button navigation__button-right primary"
 						:disabled="disabled"
 						@click="handleSetConversationName">
 						{{ t('spreed', 'Add participants') }}
@@ -97,20 +97,20 @@
 					<!-- Second page -->
 					<button
 						v-if="page===1"
-						class="navigation__button-left"
+						class="navigation__button navigation__button-left"
 						@click="handleClickBack">
 						{{ t('spreed', 'Back') }}
 					</button>
 					<button
 						v-if="page===1"
-						class="navigation__button-right primary"
+						class="navigation__button navigation__button-right primary"
 						@click="handleCreateConversation">
 						{{ t('spreed', 'Create conversation') }}
 					</button>
 					<!-- Third page -->
 					<button
 						v-if="page===2 && (error || isPublic)"
-						class="navigation__button-right primary"
+						class="navigation__button navigation__button-right primary"
 						@click="closeModal">
 						{{ t('spreed', 'Close') }}
 					</button>
@@ -123,9 +123,8 @@
 <script>
 
 import Modal from '@nextcloud/vue/dist/Components/Modal'
-import Actions from '@nextcloud/vue/dist/Components/Actions'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
 import Popover from '@nextcloud/vue/dist/Components/Popover'
+import Plus from 'vue-material-design-icons/Plus'
 import SetContacts from './SetContacts/SetContacts'
 import SetConversationName from './SetConversationName/SetConversationName'
 import SetConversationType from './SetConversationType/SetConversationType'
@@ -146,14 +145,13 @@ export default {
 
 	components: {
 		Modal,
-		Actions,
-		ActionButton,
 		SetContacts,
 		SetConversationName,
 		SetConversationType,
 		Confirmation,
 		Popover,
 		PasswordProtect,
+		Plus,
 	},
 
 	data() {
@@ -339,7 +337,10 @@ $dialog-width: 300px;
 $dialog-height: 480px;
 
 .toggle {
-	margin-left: 5px !important;
+	height: 44px;
+	width: 44px;
+	padding: 0;
+	margin: 0 0 0 4px;
 }
 
 .new-group-conversation {
@@ -373,8 +374,16 @@ it back */
 	z-index: 1;
 	// Same as above
 	width: $dialog-width - $dialog-margin * 2;
+	&__button {
+		height: 44px;
+		padding: 0 16px;
+	}
 	&__button-right {
 		margin-left:auto;
 	}
 }
+
+.wrapper {
+	margin: auto;
+}
 </style>
diff --git a/src/components/LeftSidebar/SearchBox/SearchBox.vue b/src/components/LeftSidebar/SearchBox/SearchBox.vue
index 39af1a0a8..923e7062b 100644
--- a/src/components/LeftSidebar/SearchBox/SearchBox.vue
+++ b/src/components/LeftSidebar/SearchBox/SearchBox.vue
@@ -129,11 +129,11 @@ export default {
 	z-index: 1;
 	display: flex;
 	justify-content: center;
-
 	&__input {
 		align-self: center;
 		width: 100%;
-		margin: 0;
+		margin: 4px;
+		padding-left: 8px;
 	}
 }
 
diff --git a/src/components/TopBar/CallButton.vue b/src/components/TopBar/CallButton.vue
index e25c295a7..b3bc7248a 100644
--- a/src/components/TopBar/CallButton.vue
+++ b/src/components/TopBar/CallButton.vue
@@ -228,12 +228,17 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.top-bar__button .icon {
-	opacity: 1;
-	margin-right: 4px;
+.top-bar__button {
+	height: 44px;
+	padding: 0 16px;
 
-	&.icon-incoming-call {
-		animation: pulse 2s infinite;
+	.icon {
+		opacity: 1;
+		margin-right: 8px;
+
+		&.icon-incoming-call {
+			animation: pulse 2s infinite;
+		}
 	}
 }
 
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index 89b70a7e3..2bbaa48b4 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -510,7 +510,7 @@ export default {
 	display: flex;
 	z-index: 10;
 	justify-content: flex-end;
-	padding: 0 6px;
+	padding: 8px;
 	&__button {
 		margin: 0 2px;
 		align-self: center;