use new button component

Signed-off-by: Vanessa Pertsch <vanessa.pertsch@posteo.com>
Signed-off-by: Vanessa Pertsch <vanessa.pertsch@posteo.de>

apps/settings/css/settings.scss

@@ -1040,7 +1040,7 @@ span.version {
 		background-color: var(--color-main-background);
 		position: fixed;
 		z-index: 1;
-		height: $header-height;
+		height: $header-height + 10px;
 	}
 
 	&.installed {
@@ -1048,7 +1048,7 @@ span.version {
 			display: table;
 			width: 100%;
 			height: auto;
-			margin-top: $header-height;
+			margin-top: $header-height + 10px;
 		}
 
 		margin-bottom: 100px;

apps/settings/src/components/AppList.vue

@@ -26,12 +26,12 @@
 			<template v-if="useListView">
 				<div v-if="showUpdateAll" class="counter">
 					{{ n('settings', '%n app has an update available', '%n apps have an update available', counter) }}
-					<button v-if="showUpdateAll"
+					<Button v-if="showUpdateAll"
 						id="app-list-update-all"
-						class="primary"
+						type="primary"
 						@click="updateAll">
 						{{ t('settings', 'Update all') }}
-					</button>
+					</Button>
 				</div>
 				<div v-if="!showUpdateAll" class="counter">
 					{{ t('settings', 'All apps are up-to-date.') }}
@@ -104,11 +104,13 @@
 import AppItem from './AppList/AppItem'
 import PrefixMixin from './PrefixMixin'
 import pLimit from 'p-limit'
+import Button from '@nextcloud/vue/dist/Components/Button'
 
 export default {
 	name: 'AppList',
 	components: {
 		AppItem,
+		Button,
 	},
 	mixins: [PrefixMixin],
 	props: ['category', 'app', 'search'],