Move vue views from Card to Sections

dashboard/src/components/ApiTokens.vue

@@ -37,12 +37,11 @@
       </div>
     </Dialog>
 
-    <h2 class="header header-with-button">
-      {{ $t('profile.apiTokens.title') }}
-      <Button @click="newDialog.open()" icon="fa fa-plus">{{ $t('profile.apiTokens.newApiToken') }}</Button>
-    </h2>
+    <Section :title="$t('profile.apiTokens.title')">
+      <template #header-buttons>
+        <Button @click="newDialog.open()" icon="fa fa-plus">{{ $t('profile.apiTokens.newApiToken') }}</Button>
+      </template>
 
-    <Card>
       <p v-html="$t('profile.apiTokens.description', { apiDocsLink: 'https://docs.cloudron.io/api.html' })"></p>
       <table class="table table-hover" style="margin: 0;">
         <thead>
@@ -73,7 +72,7 @@
           </tr>
         </tbody>
       </table>
-    </Card>
+    </Section>
   </div>
 </template>
 
@@ -89,7 +88,7 @@ import { ref, onMounted, computed, useTemplateRef } from 'vue';
 import { Button, Dialog, InputDialog, FormGroup, Radiobutton, TextInput } from 'pankow';
 import { copyToClipboard, prettyLongDate } from 'pankow/utils';
 import { TOKEN_TYPES } from '../constants.js';
-import Card from './Card.vue';
+import Section from './Section.vue';
 import TokensModel from '../models/TokensModel.js';
 
 const tokensModel = TokensModel.create(API_ORIGIN, localStorage.token);