From 9895c32b0b30d6af2c0507a2c6641f08c70458e1 Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Tue, 11 Feb 2020 17:45:32 +0100
Subject: [PATCH] replace remaining instances of ds-card with base-card

---
 webapp/pages/admin/categories.vue             |  5 +-
 webapp/pages/admin/donations.vue              |  5 +-
 webapp/pages/admin/hashtags.vue               |  5 +-
 webapp/pages/admin/index.vue                  |  4 +-
 webapp/pages/admin/invite.vue                 |  5 +-
 webapp/pages/admin/notifications.vue          |  5 +-
 webapp/pages/admin/organizations.vue          |  5 +-
 webapp/pages/admin/pages.vue                  |  5 +-
 webapp/pages/admin/settings.vue               |  5 +-
 webapp/pages/admin/users.vue                  | 51 ++++++++++--------
 webapp/pages/notifications/index.vue          |  4 +-
 webapp/pages/post/_id/_slug/more-info.vue     |  6 +--
 webapp/pages/post/_id/_slug/take-action.vue   |  5 +-
 webapp/pages/settings/blocked-users.vue       | 13 ++---
 webapp/pages/settings/data-download.vue       |  5 +-
 webapp/pages/settings/embeds.vue              |  5 +-
 webapp/pages/settings/index.vue               |  5 +-
 webapp/pages/settings/invites.vue             |  5 +-
 webapp/pages/settings/languages.vue           |  5 +-
 webapp/pages/settings/muted-users.vue         | 13 ++---
 .../settings/my-email-address/enter-nonce.vue | 19 ++++---
 .../pages/settings/my-email-address/index.vue | 24 ++++-----
 .../settings/my-email-address/verify.vue      |  4 +-
 webapp/pages/settings/my-organizations.vue    |  5 +-
 webapp/pages/settings/my-social-media.vue     |  5 +-
 webapp/pages/settings/privacy.vue             |  5 +-
 webapp/pages/settings/security.vue            |  5 +-
 webapp/pages/terms-and-conditions-confirm.vue | 52 +++++++++++--------
 28 files changed, 156 insertions(+), 124 deletions(-)

diff --git a/webapp/pages/admin/categories.vue b/webapp/pages/admin/categories.vue
index c72506e64..3c6069678 100644
--- a/webapp/pages/admin/categories.vue
+++ b/webapp/pages/admin/categories.vue
@@ -1,11 +1,12 @@
 <template>
-  <ds-card :header="$t('admin.categories.name')">
+  <base-card>
+    <h2 class="title">{{ $t('admin.categories.name') }}</h2>
     <ds-table :data="Category" :fields="fields" condensed>
       <template slot="icon" slot-scope="scope">
         <base-icon :name="scope.row.icon" />
       </template>
     </ds-table>
-  </ds-card>
+  </base-card>
 </template>
 
 <script>
diff --git a/webapp/pages/admin/donations.vue b/webapp/pages/admin/donations.vue
index f40cb4c7d..e628a1119 100644
--- a/webapp/pages/admin/donations.vue
+++ b/webapp/pages/admin/donations.vue
@@ -1,5 +1,6 @@
 <template>
-  <ds-card :header="$t('admin.donations.name')">
+  <base-card>
+    <h2 class="title">{{ $t('admin.donations.name') }}</h2>
     <ds-form v-model="formData" @submit="submit">
       <ds-input model="goal" :label="$t('admin.donations.goal')" placeholder="15000" icon="money" />
       <ds-input
@@ -12,7 +13,7 @@
         {{ $t('actions.save') }}
       </base-button>
     </ds-form>
-  </ds-card>
+  </base-card>
 </template>
 
 <script>
diff --git a/webapp/pages/admin/hashtags.vue b/webapp/pages/admin/hashtags.vue
index 521d3110a..ea774aab1 100644
--- a/webapp/pages/admin/hashtags.vue
+++ b/webapp/pages/admin/hashtags.vue
@@ -1,5 +1,6 @@
 <template>
-  <ds-card :header="$t('admin.hashtags.name')">
+  <base-card>
+    <h2 class="title">{{ $t('admin.hashtags.name') }}</h2>
     <ds-table :data="Tag" :fields="fields" condensed>
       <template slot="index" slot-scope="scope">{{ scope.index + 1 }}.</template>
       <template slot="id" slot-scope="scope">
@@ -8,7 +9,7 @@
         </nuxt-link>
       </template>
     </ds-table>
-  </ds-card>
+  </base-card>
 </template>
 
 <script>
diff --git a/webapp/pages/admin/index.vue b/webapp/pages/admin/index.vue
index b966fd416..22f0bd678 100644
--- a/webapp/pages/admin/index.vue
+++ b/webapp/pages/admin/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <ds-card>
+  <base-card>
     <ApolloQuery :query="Statistics">
       <template v-slot="{ result: { loading, error, data } }">
         <template v-if="loading">
@@ -123,7 +123,7 @@
         </template>
       </template>
     </ApolloQuery>
-  </ds-card>
+  </base-card>
 </template>
 
 <script>
diff --git a/webapp/pages/admin/invite.vue b/webapp/pages/admin/invite.vue
index b45f8101c..8f5c7b083 100644
--- a/webapp/pages/admin/invite.vue
+++ b/webapp/pages/admin/invite.vue
@@ -1,13 +1,12 @@
 <template>
-  <!-- This registration form will be visible to the public as soon as the registration is open to the public. -->
   <ds-section>
     <ds-space>
       <ds-heading size="h3">{{ $t('admin.invites.title') }}</ds-heading>
       <ds-text>{{ $t('admin.invites.description') }}</ds-text>
     </ds-space>
-    <ds-card class="signup">
+    <base-card>
       <signup :invitation="true" />
-    </ds-card>
+    </base-card>
   </ds-section>
 </template>
 
diff --git a/webapp/pages/admin/notifications.vue b/webapp/pages/admin/notifications.vue
index faad87a46..beb7f93c1 100644
--- a/webapp/pages/admin/notifications.vue
+++ b/webapp/pages/admin/notifications.vue
@@ -1,7 +1,8 @@
 <template>
-  <ds-card :header="$t('admin.notifications.name')">
+  <base-card>
+    <h2 class="title">{{ $t('admin.notifications.name') }}</h2>
     <hc-empty icon="tasks" message="Coming Soon…" />
-  </ds-card>
+  </base-card>
 </template>
 
 <script>
diff --git a/webapp/pages/admin/organizations.vue b/webapp/pages/admin/organizations.vue
index a80d03a3d..adfc2b18b 100644
--- a/webapp/pages/admin/organizations.vue
+++ b/webapp/pages/admin/organizations.vue
@@ -1,7 +1,8 @@
 <template>
-  <ds-card :header="$t('admin.organizations.name')">
+  <base-card>
+    <h2 class="title">{{ $t('admin.organizations.name') }}</h2>
     <hc-empty icon="tasks" message="Coming Soon…" />
-  </ds-card>
+  </base-card>
 </template>
 
 <script>
diff --git a/webapp/pages/admin/pages.vue b/webapp/pages/admin/pages.vue
index 5538dfd41..496e03cb2 100644
--- a/webapp/pages/admin/pages.vue
+++ b/webapp/pages/admin/pages.vue
@@ -1,7 +1,8 @@
 <template>
-  <ds-card :header="$t('admin.pages.name')">
+  <base-card>
+    <h2 class="title">{{ $t('admin.pages.name') }}</h2>
     <hc-empty icon="tasks" message="Coming Soon…" />
-  </ds-card>
+  </base-card>
 </template>
 
 <script>
diff --git a/webapp/pages/admin/settings.vue b/webapp/pages/admin/settings.vue
index 9ad3ecd10..0b7b87b09 100644
--- a/webapp/pages/admin/settings.vue
+++ b/webapp/pages/admin/settings.vue
@@ -1,7 +1,8 @@
 <template>
-  <ds-card :header="$t('admin.settings.name')">
+  <base-card>
+    <h2 class="title">{{ $t('admin.settings.name') }}</h2>
     <hc-empty icon="tasks" message="Coming Soon…" />
-  </ds-card>
+  </base-card>
 </template>
 
 <script>
diff --git a/webapp/pages/admin/users.vue b/webapp/pages/admin/users.vue
index 610307704..a879d4f35 100644
--- a/webapp/pages/admin/users.vue
+++ b/webapp/pages/admin/users.vue
@@ -1,24 +1,23 @@
 <template>
-  <div>
-    <ds-space>
-      <ds-card :header="$t('admin.users.name')">
-        <ds-form v-model="form" @submit="submit">
-          <ds-flex gutter="small">
-            <ds-flex-item width="90%">
-              <ds-input
-                model="query"
-                :placeholder="$t('admin.users.form.placeholder')"
-                icon="search"
-              />
-            </ds-flex-item>
-            <ds-flex-item width="30px">
-              <base-button filled circle type="submit" icon="search" :loading="$apollo.loading" />
-            </ds-flex-item>
-          </ds-flex>
-        </ds-form>
-      </ds-card>
-    </ds-space>
-    <ds-card v-if="User && User.length">
+  <div class="admin-users">
+    <base-card>
+      <h2 class="title">{{ $t('admin.users.name') }}</h2>
+      <ds-form v-model="form" @submit="submit">
+        <ds-flex gutter="small">
+          <ds-flex-item width="90%">
+            <ds-input
+              model="query"
+              :placeholder="$t('admin.users.form.placeholder')"
+              icon="search"
+            />
+          </ds-flex-item>
+          <ds-flex-item width="30px">
+            <base-button filled circle type="submit" icon="search" :loading="$apollo.loading" />
+          </ds-flex-item>
+        </ds-flex>
+      </ds-form>
+    </base-card>
+    <base-card v-if="User && User.length">
       <ds-table :data="User" :fields="fields" condensed>
         <template slot="index" slot-scope="scope">{{ scope.row.index + 1 }}.</template>
         <template slot="name" slot-scope="scope">
@@ -51,10 +50,10 @@
         </template>
       </ds-table>
       <pagination-buttons :hasNext="hasNext" :hasPrevious="hasPrevious" @next="next" @back="back" />
-    </ds-card>
-    <ds-card v-else>
+    </base-card>
+    <base-card v-else>
       <ds-placeholder>{{ $t('admin.users.empty') }}</ds-placeholder>
-    </ds-card>
+    </base-card>
   </div>
 </template>
 
@@ -178,3 +177,9 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+.admin-users >.base-card:first-child {
+  margin-bottom: $space-small;
+}
+</style>
diff --git a/webapp/pages/notifications/index.vue b/webapp/pages/notifications/index.vue
index c49d208be..f59eef2f1 100644
--- a/webapp/pages/notifications/index.vue
+++ b/webapp/pages/notifications/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <ds-card space="small">
+  <base-card>
     <ds-flex class="notifications-page-flex">
       <ds-flex-item :width="{ lg: '85%' }">
         <ds-heading tag="h3">{{ $t('notifications.title') }}</ds-heading>
@@ -16,7 +16,7 @@
       :notifications="notifications"
     />
     <pagination-buttons :hasNext="hasNext" :hasPrevious="hasPrevious" @back="back" @next="next" />
-  </ds-card>
+  </base-card>
 </template>
 
 <script>
diff --git a/webapp/pages/post/_id/_slug/more-info.vue b/webapp/pages/post/_id/_slug/more-info.vue
index 48bdf3307..e8a90b61d 100644
--- a/webapp/pages/post/_id/_slug/more-info.vue
+++ b/webapp/pages/post/_id/_slug/more-info.vue
@@ -1,6 +1,6 @@
 <template>
-  <ds-card>
-    <h2 style="margin-bottom: .2em;">{{ $t('post.moreInfo.title') }}</h2>
+  <base-card>
+    <h2 class="title">{{ $t('post.moreInfo.title') }}</h2>
     <p>{{ $t('post.moreInfo.description') }}</p>
     <ds-space />
     <h3>{{ $t('post.moreInfo.titleOfCategoriesSection') }}</h3>
@@ -33,7 +33,7 @@
       </masonry-grid>
       <hc-empty v-else margin="large" icon="file" message="No related Posts" />
     </ds-section>
-  </ds-card>
+  </base-card>
 </template>
 
 <script>
diff --git a/webapp/pages/post/_id/_slug/take-action.vue b/webapp/pages/post/_id/_slug/take-action.vue
index a476894fd..97eb28096 100644
--- a/webapp/pages/post/_id/_slug/take-action.vue
+++ b/webapp/pages/post/_id/_slug/take-action.vue
@@ -1,7 +1,8 @@
 <template>
-  <ds-card header="Werde aktiv!">
+  <base-card>
+    <h2 class="title">Werde aktiv!</h2>
     <hc-empty icon="tasks" message="Coming Soon…" />
-  </ds-card>
+  </base-card>
 </template>
 
 <script>
diff --git a/webapp/pages/settings/blocked-users.vue b/webapp/pages/settings/blocked-users.vue
index 9ac088ea4..cef9218f4 100644
--- a/webapp/pages/settings/blocked-users.vue
+++ b/webapp/pages/settings/blocked-users.vue
@@ -1,7 +1,8 @@
 <template>
   <div>
     <ds-space>
-      <ds-card :header="$t('settings.blocked-users.name')">
+      <base-card>
+        <h2 class="title">{{ $t('settings.blocked-users.name') }}</h2>
         <ds-text>
           {{ $t('settings.blocked-users.explanation.intro') }}
         </ds-text>
@@ -16,9 +17,9 @@
             {{ $t('settings.blocked-users.explanation.notifications') }}
           </ds-list-item>
         </ds-list>
-      </ds-card>
+      </base-card>
     </ds-space>
-    <ds-card v-if="blockedUsers && blockedUsers.length">
+    <base-card v-if="blockedUsers && blockedUsers.length">
       <ds-table :data="blockedUsers" :fields="fields" condensed>
         <template #avatar="scope">
           <nuxt-link
@@ -55,8 +56,8 @@
           <base-button circle size="small" @click="unblockUser(scope)" icon="user-plus" />
         </template>
       </ds-table>
-    </ds-card>
-    <ds-card v-else>
+    </base-card>
+    <base-card v-else>
       <ds-space>
         <ds-placeholder>
           {{ $t('settings.blocked-users.empty') }}
@@ -67,7 +68,7 @@
           {{ $t('settings.blocked-users.how-to') }}
         </ds-text>
       </ds-space>
-    </ds-card>
+    </base-card>
   </div>
 </template>
 
diff --git a/webapp/pages/settings/data-download.vue b/webapp/pages/settings/data-download.vue
index 4a6f35997..b7951182d 100644
--- a/webapp/pages/settings/data-download.vue
+++ b/webapp/pages/settings/data-download.vue
@@ -1,7 +1,8 @@
 <template>
-  <ds-card :header="$t('settings.download.name')">
+  <base-card>
+    <h2 class="title">{{ $t('settings.download.name') }}</h2>
     <hc-empty icon="tasks" message="Coming Soon…" />
-  </ds-card>
+  </base-card>
 </template>
 
 <script>
diff --git a/webapp/pages/settings/embeds.vue b/webapp/pages/settings/embeds.vue
index 22050c636..01e508ad9 100644
--- a/webapp/pages/settings/embeds.vue
+++ b/webapp/pages/settings/embeds.vue
@@ -1,5 +1,6 @@
 <template>
-  <ds-card :header="$t('settings.embeds.name')">
+  <base-card>
+    <h2 class="title">{{ $t('settings.embeds.name') }}</h2>
     <ds-section>
       <ds-text>
         {{ $t('settings.embeds.status.description') }}
@@ -31,7 +32,7 @@
         </li>
       </ul>
     </ds-section>
-  </ds-card>
+  </base-card>
 </template>
 
 <script>
diff --git a/webapp/pages/settings/index.vue b/webapp/pages/settings/index.vue
index 20034d5af..e66b807c3 100644
--- a/webapp/pages/settings/index.vue
+++ b/webapp/pages/settings/index.vue
@@ -1,7 +1,8 @@
 <template>
   <ds-form v-model="form" :schema="formSchema" @submit="submit">
     <template slot-scope="{ errors }">
-      <ds-card :header="$t('settings.data.name')">
+      <base-card>
+        <h2 class="title">{{ $t('settings.data.name') }}</h2>
         <ds-input
           id="name"
           model="name"
@@ -35,7 +36,7 @@
             {{ $t('actions.save') }}
           </base-button>
         </template>
-      </ds-card>
+      </base-card>
     </template>
   </ds-form>
 </template>
diff --git a/webapp/pages/settings/invites.vue b/webapp/pages/settings/invites.vue
index c81d2fa90..0871084e3 100644
--- a/webapp/pages/settings/invites.vue
+++ b/webapp/pages/settings/invites.vue
@@ -1,7 +1,8 @@
 <template>
-  <ds-card :header="$t('settings.invites.name')">
+  <base-card>
+    <h2 class="title">{{ $t('settings.invites.name') }}</h2>
     <hc-empty icon="tasks" message="Coming Soon…" />
-  </ds-card>
+  </base-card>
 </template>
 
 <script>
diff --git a/webapp/pages/settings/languages.vue b/webapp/pages/settings/languages.vue
index e93b54363..e60cc456a 100644
--- a/webapp/pages/settings/languages.vue
+++ b/webapp/pages/settings/languages.vue
@@ -1,7 +1,8 @@
 <template>
-  <ds-card :header="$t('settings.languages.name')">
+  <base-card>
+    <h2 class="title">{{ $t('settings.languages.name') }}</h2>
     <hc-empty icon="tasks" message="Coming Soon…" />
-  </ds-card>
+  </base-card>
 </template>
 
 <script>
diff --git a/webapp/pages/settings/muted-users.vue b/webapp/pages/settings/muted-users.vue
index 630877eea..f6aefc986 100644
--- a/webapp/pages/settings/muted-users.vue
+++ b/webapp/pages/settings/muted-users.vue
@@ -1,7 +1,8 @@
 <template>
   <div>
     <ds-space>
-      <ds-card :header="$t('settings.muted-users.name')">
+      <base-card>
+        <h2 class="title">{{ $t('settings.muted-users.name') }}</h2>
         <ds-text>
           {{ $t('settings.muted-users.explanation.intro') }}
         </ds-text>
@@ -13,9 +14,9 @@
             {{ $t('settings.muted-users.explanation.search') }}
           </ds-list-item>
         </ds-list>
-      </ds-card>
+      </base-card>
     </ds-space>
-    <ds-card v-if="mutedUsers && mutedUsers.length">
+    <base-card v-if="mutedUsers && mutedUsers.length">
       <ds-table :data="mutedUsers" :fields="fields" condensed>
         <template #avatar="scope">
           <nuxt-link
@@ -52,8 +53,8 @@
           <base-button circle size="small" @click="unmuteUser(scope)" icon="user-plus" />
         </template>
       </ds-table>
-    </ds-card>
-    <ds-card v-else>
+    </base-card>
+    <base-card v-else>
       <ds-space>
         <ds-placeholder>
           {{ $t('settings.muted-users.empty') }}
@@ -64,7 +65,7 @@
           {{ $t('settings.muted-users.how-to') }}
         </ds-text>
       </ds-space>
-    </ds-card>
+    </base-card>
   </div>
 </template>
 
diff --git a/webapp/pages/settings/my-email-address/enter-nonce.vue b/webapp/pages/settings/my-email-address/enter-nonce.vue
index 91b2e269f..c6a9c2dce 100644
--- a/webapp/pages/settings/my-email-address/enter-nonce.vue
+++ b/webapp/pages/settings/my-email-address/enter-nonce.vue
@@ -1,7 +1,8 @@
 <template>
   <ds-form v-model="form" :schema="formSchema" @submit="submit">
     <template slot-scope="{ errors }">
-      <ds-card :header="$t('settings.email.name')">
+      <base-card>
+        <h2 class="title">{{ $t('settings.email.name') }}</h2>
         <ds-input
           id="email"
           model="email"
@@ -15,13 +16,15 @@
           icon="question-circle"
           :label="$t('settings.email.labelNonce')"
         />
-
-        <template slot="footer">
-          <base-button class="submit-button" icon="check" :disabled="errors" type="submit" filled>
-            {{ $t('actions.save') }}
-          </base-button>
-        </template>
-      </ds-card>
+        <base-button
+          icon="check"
+          :disabled="errors"
+          type="submit"
+          filled
+        >
+          {{ $t('actions.save') }}
+        </base-button>
+      </base-card>
     </template>
   </ds-form>
 </template>
diff --git a/webapp/pages/settings/my-email-address/index.vue b/webapp/pages/settings/my-email-address/index.vue
index 4e01bbb44..43b038a6b 100644
--- a/webapp/pages/settings/my-email-address/index.vue
+++ b/webapp/pages/settings/my-email-address/index.vue
@@ -1,29 +1,27 @@
 <template>
-  <ds-card centered v-if="data">
+  <base-card v-if="data">
     <transition name="ds-transition-fade">
       <sweetalert-icon icon="info" />
     </transition>
     <ds-text v-html="submitMessage" />
-  </ds-card>
+  </base-card>
   <ds-form v-else v-model="form" :schema="formSchema" @submit="submit">
     <template slot-scope="{ errors }">
-      <ds-card :header="$t('settings.email.name')">
+      <base-card>
+        <h2 class="title">{{ $t('settings.email.name') }}</h2>
         <ds-input
           id="email"
           model="email"
           icon="envelope"
           :label="$t('settings.email.labelEmail')"
         />
-
-        <template slot="footer">
-          <ds-space class="backendErrors" v-if="backendErrors">
-            <ds-text align="center" bold color="danger">{{ backendErrors.message }}</ds-text>
-          </ds-space>
-          <base-button icon="check" :disabled="errors" type="submit" filled>
-            {{ $t('actions.save') }}
-          </base-button>
-        </template>
-      </ds-card>
+        <ds-space class="backendErrors" v-if="backendErrors">
+          <ds-text align="center" bold color="danger">{{ backendErrors.message }}</ds-text>
+        </ds-space>
+        <base-button icon="check" :disabled="errors" type="submit" filled>
+          {{ $t('actions.save') }}
+        </base-button>
+      </base-card>
     </template>
   </ds-form>
 </template>
diff --git a/webapp/pages/settings/my-email-address/verify.vue b/webapp/pages/settings/my-email-address/verify.vue
index 21e4fd775..efb823b93 100644
--- a/webapp/pages/settings/my-email-address/verify.vue
+++ b/webapp/pages/settings/my-email-address/verify.vue
@@ -1,5 +1,5 @@
 <template>
-  <ds-card>
+  <base-card>
     <transition name="ds-transition-fade">
       <client-only>
         <sweetalert-icon :icon="sweetAlertIcon" />
@@ -34,7 +34,7 @@
         </client-only>
       </ds-space>
     </template>
-  </ds-card>
+  </base-card>
 </template>
 
 <script>
diff --git a/webapp/pages/settings/my-organizations.vue b/webapp/pages/settings/my-organizations.vue
index aefd602b7..194fa3f7e 100644
--- a/webapp/pages/settings/my-organizations.vue
+++ b/webapp/pages/settings/my-organizations.vue
@@ -1,7 +1,8 @@
 <template>
-  <ds-card :header="$t('settings.organizations.name')">
+  <base-card>
+    <h2 class="title">{{ $t('settings.organizations.name') }}</h2>
     <hc-empty icon="tasks" message="Coming Soon…" />
-  </ds-card>
+  </base-card>
 </template>
 
 <script>
diff --git a/webapp/pages/settings/my-social-media.vue b/webapp/pages/settings/my-social-media.vue
index 6ed2f1bc6..d909f4008 100644
--- a/webapp/pages/settings/my-social-media.vue
+++ b/webapp/pages/settings/my-social-media.vue
@@ -6,7 +6,8 @@
     @input-valid="handleInputValid"
     @submit="handleSubmitSocialMedia"
   >
-    <ds-card :header="$t('settings.social-media.name')">
+    <base-card>
+      <h2 class="title">{{ $t('settings.social-media.name') }}</h2>
       <ds-space v-if="socialMediaLinks" margin-top="base" margin="x-small">
         <ds-list>
           <ds-list-item v-for="link in socialMediaLinks" :key="link.id" class="list-item--high">
@@ -62,7 +63,7 @@
           </base-button>
         </ds-space>
       </ds-space>
-    </ds-card>
+    </base-card>
   </ds-form>
 </template>
 
diff --git a/webapp/pages/settings/privacy.vue b/webapp/pages/settings/privacy.vue
index f759926b7..14f27bf8f 100644
--- a/webapp/pages/settings/privacy.vue
+++ b/webapp/pages/settings/privacy.vue
@@ -1,11 +1,12 @@
 <template>
-  <ds-card :header="$t('settings.privacy.name')">
+  <base-card>
+    <h2 class="title">{{ $t('settings.privacy.name') }}</h2>
     <ds-space margin-bottom="small">
       <input id="allow-shouts" type="checkbox" v-model="shoutsAllowed" />
       <label for="allow-shouts">{{ $t('settings.privacy.make-shouts-public') }}</label>
     </ds-space>
     <base-button filled @click="submit" :disabled="disabled">{{ $t('actions.save') }}</base-button>
-  </ds-card>
+  </base-card>
 </template>
 
 <script>
diff --git a/webapp/pages/settings/security.vue b/webapp/pages/settings/security.vue
index e1c8ca0e0..e8754ada9 100644
--- a/webapp/pages/settings/security.vue
+++ b/webapp/pages/settings/security.vue
@@ -1,7 +1,8 @@
 <template>
-  <ds-card :header="$t('settings.security.name')">
+  <base-card>
+    <h2 class="title">{{ $t('settings.security.name') }}</h2>
     <change-password />
-  </ds-card>
+  </base-card>
 </template>
 
 <script>
diff --git a/webapp/pages/terms-and-conditions-confirm.vue b/webapp/pages/terms-and-conditions-confirm.vue
index 0716048b5..96d3f4e1f 100644
--- a/webapp/pages/terms-and-conditions-confirm.vue
+++ b/webapp/pages/terms-and-conditions-confirm.vue
@@ -1,27 +1,21 @@
 <template>
-  <ds-container width="medium">
-    <ds-card icon="balance-scale" :header="$t(`termsAndConditions.newTermsAndConditions`)" centered>
-      <p>
-        <nuxt-link :to="{ name: 'terms-and-conditions' }" target="_blank">
-          <base-button>
-            {{ $t(`termsAndConditions.termsAndConditionsNewConfirmText`) }}
-          </base-button>
-        </nuxt-link>
-      </p>
-      <ds-text>
-        <input id="checkbox" type="checkbox" v-model="checked" :checked="checked" />
-        <label
-          for="checkbox"
-          v-html="$t('termsAndConditions.termsAndConditionsNewConfirm')"
-        ></label>
-      </ds-text>
-
-      <template slot="footer">
-        <base-button filled @click="submit" :disabled="!checked">
-          {{ $t(`actions.save`) }}
+  <ds-container width="medium" class="terms-and-conditions-confirm">
+    <base-card>
+      <base-icon name="balance-scale" />
+      <h2 class="title">{{ $t(`termsAndConditions.newTermsAndConditions`) }}</h2>
+      <nuxt-link :to="{ name: 'terms-and-conditions' }" target="_blank">
+        <base-button>
+          {{ $t(`termsAndConditions.termsAndConditionsNewConfirmText`) }}
         </base-button>
-      </template>
-    </ds-card>
+      </nuxt-link>
+      <label for="checkbox">
+        <input id="checkbox" type="checkbox" v-model="checked" :checked="checked" />
+        {{ $t('termsAndConditions.termsAndConditionsNewConfirm') }}
+      </label>
+      <base-button filled @click="submit" :disabled="!checked">
+        {{ $t(`actions.save`) }}
+      </base-button>
+    </base-card>
   </ds-container>
 </template>
 
@@ -91,3 +85,17 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+.terms-and-conditions-confirm > .base-card {
+  height: 280px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+
+  > .base-icon {
+    font-size: $font-size-xxx-large;
+  }
+}
+</style>