replace another batch of ds-buttons with base-buttons (wip)

webapp/pages/admin/donations.vue

@@ -8,9 +8,9 @@
         placeholder="1200"
         icon="money"
       />
-      <ds-button primary type="submit" :disabled="!formData.goal || !formData.progress">
+      <base-button primary type="submit" :disabled="!formData.goal || !formData.progress">
         {{ $t('actions.save') }}
-      </ds-button>
+      </base-button>
     </ds-form>
   </ds-card>
 </template>

webapp/pages/admin/users.vue

@@ -12,7 +12,7 @@
               />
             </ds-flex-item>
             <ds-flex-item width="30px">
-              <ds-button primary type="submit" icon="search" :loading="$apollo.loading" />
+              <base-button primary circle type="submit" icon="search" :loading="$apollo.loading" />
             </ds-flex-item>
           </ds-flex>
         </ds-form>
@@ -50,14 +50,7 @@
           {{ scope.row.createdAt | dateTime }}
         </template>
       </ds-table>
-      <ds-flex direction="row-reverse">
-        <ds-flex-item width="50px">
-          <ds-button @click="next" :disabled="!hasNext" icon="arrow-right" primary />
-        </ds-flex-item>
-        <ds-flex-item width="50px">
-          <ds-button @click="back" :disabled="!hasPrevious" icon="arrow-left" primary />
-        </ds-flex-item>
-      </ds-flex>
+      <hc-paginate :hasNext="hasNext" :hasPrevious="hasPrevious" @next="next" @back="back" />
     </ds-card>
     <ds-card v-else>
       <ds-placeholder>{{ $t('admin.users.empty') }}</ds-placeholder>
@@ -69,8 +62,12 @@
 import gql from 'graphql-tag'
 import { isEmail } from 'validator'
 import normalizeEmail from '~/components/utils/NormalizeEmail'
+import HcPaginate from '~/components/Paginate/Paginate'
 
 export default {
+  components: {
+    HcPaginate,
+  },
   data() {
     const pageSize = 15
     return {

webapp/pages/index.vue

@@ -8,7 +8,7 @@
         <!--<donation-info /> -->
         <div>
           <a target="_blank" href="https://human-connection.org/spenden/">
-            <ds-button primary>{{ $t('donations.donate-now') }}</ds-button>
+            <base-button primary>{{ $t('donations.donate-now') }}</base-button>
           </a>
         </div>
         <div class="sorting-dropdown">
@@ -40,14 +40,15 @@
       </template>
     </masonry-grid>
     <client-only>
-      <ds-button
-        v-tooltip="{ content: $t('contribution.newPost'), placement: 'left', delay: { show: 500 } }"
-        :path="{ name: 'post-create' }"
-        class="post-add-button"
-        icon="plus"
-        size="x-large"
-        primary
-      />
+      <nuxt-link :to="{ name: 'post-create' }">
+        <base-button
+          v-tooltip="{ content: $t('contribution.newPost'), placement: 'left', delay: { show: 500 } }"
+          class="post-add-button"
+          icon="plus"
+          primary
+          circle
+        />
+      </nuxt-link>
     </client-only>
     <client-only>
       <infinite-loading v-if="hasMore" @infinite="showMoreContributions">
@@ -235,7 +236,10 @@ export default {
   }
 }
 
-.post-add-button {
+.base-button.--circle.post-add-button {
+  height: 54px;
+  width: 54px;
+  font-size: 26px;
   z-index: 100;
   position: fixed;
   bottom: -5px;

webapp/pages/profile/_id/_slug.vue

@@ -73,9 +73,9 @@
                 @optimistic="optimisticFollow"
                 @update="updateFollow"
               />
-              <ds-button v-else fullwidth @click="unblock(user)">
+              <base-button v-else @click="unblock(user)" class="unblock-user-button">
                 {{ $t('settings.blocked-users.unblock') }}
-              </ds-button>
+              </base-button>
             </template>
           </ds-space>
           <template v-if="user.about">
@@ -215,7 +215,7 @@
 
           <ds-grid-item :row-span="2" column-span="fullWidth">
             <ds-space centered>
-              <ds-button
+              <base-button
                 v-if="myProfile"
                 v-tooltip="{
                   content: $t('contribution.newPost'),
@@ -225,7 +225,7 @@
                 :path="{ name: 'post-create' }"
                 class="profile-post-add-button"
                 icon="plus"
-                size="large"
+                circle
                 primary
               />
             </ds-space>
@@ -550,4 +550,8 @@ export default {
 .profile-post-add-button {
   box-shadow: $box-shadow-x-large;
 }
+.unblock-user-button {
+  display: block;
+  width: 100%;
+}
 </style>

webapp/pages/settings/blocked-users.vue

@@ -58,7 +58,7 @@
         </template>
 
         <template slot="unblock" slot-scope="scope">
-          <ds-button size="small" @click="unblock(scope)"><ds-icon name="user-plus" /></ds-button>
+          <base-button circle size="small" @click="unblock(scope)" icon="user-plus" />
         </template>
       </ds-table>
     </ds-card>

webapp/pages/settings/embeds.vue

@@ -16,12 +16,12 @@
       <ds-text>
         {{ $t('settings.embeds.status.change.question') }}
       </ds-text>
-      <ds-button @click="submit" :primary="!disabled" :disabled="!disabled">
+      <base-button @click="submit" :primary="!disabled" :disabled="!disabled">
         {{ $t('settings.embeds.status.change.deny') }}
-      </ds-button>
-      <ds-button @click="submit" :primary="disabled" :disabled="disabled">
+      </base-button>
+      <base-button @click="submit" :primary="disabled" :disabled="disabled">
         {{ $t('settings.embeds.status.change.allow') }}
-      </ds-button>
+      </base-button>
 
       <p>{{ $t('settings.embeds.info-description') }}</p>
       <ul>

webapp/pages/settings/index.vue

@@ -31,9 +31,9 @@
           :placeholder="$t('settings.data.labelBio')"
         />
         <template slot="footer">
-          <ds-button icon="check" :disabled="errors" type="submit" :loading="loadingData" primary>
+          <base-button icon="check" :disabled="errors" type="submit" :loading="loadingData" primary>
             {{ $t('actions.save') }}
-          </ds-button>
+          </base-button>
         </template>
       </ds-card>
     </template>

webapp/pages/settings/my-email-address/enter-nonce.vue

@@ -17,9 +17,9 @@
         />
 
         <template slot="footer">
-          <ds-button class="submit-button" icon="check" :disabled="errors" type="submit" primary>
+          <base-button class="submit-button" icon="check" :disabled="errors" type="submit" primary>
             {{ $t('actions.save') }}
-          </ds-button>
+          </base-button>
         </template>
       </ds-card>
     </template>

webapp/pages/settings/my-email-address/index.vue

@@ -19,9 +19,9 @@
           <ds-space class="backendErrors" v-if="backendErrors">
             <ds-text align="center" bold color="danger">{{ backendErrors.message }}</ds-text>
           </ds-space>
-          <ds-button icon="check" :disabled="errors" type="submit" primary>
+          <base-button icon="check" :disabled="errors" type="submit" primary>
             {{ $t('actions.save') }}
-          </ds-button>
+          </base-button>
         </template>
       </ds-card>
     </template>

webapp/pages/settings/my-social-media.vue

@@ -24,22 +24,20 @@
                 {{ link.url }}
               </a>
               <span class="divider">|</span>
-              <a name="edit" @click="handleEditSocialMedia(link)">
-                <base-icon
-                  :aria-label="$t('actions.edit')"
-                  class="icon-button"
-                  name="edit"
-                  :title="$t('actions.edit')"
-                />
-              </a>
-              <a name="delete" @click="handleDeleteSocialMedia(link)">
-                <base-icon
-                  :aria-label="$t('actions.delete')"
-                  class="icon-button"
-                  name="trash"
-                  :title="$t('actions.delete')"
-                />
-              </a>
+              <base-button
+                icon="edit"
+                circle
+                ghost
+                @click="handleEditSocialMedia(link)"
+                :title="$t('actions.edit')"
+              />
+              <base-button
+                icon="trash"
+                circle
+                ghost
+                @click="handleDeleteSocialMedia(link)"
+                :title="$t('actions.delete')"
+              />
             </template>
           </ds-list-item>
         </ds-list>
@@ -54,12 +52,12 @@
           :placeholder="$t('settings.social-media.placeholder')"
         />
         <ds-space margin-top="base">
-          <ds-button primary :disabled="disabled">
+          <base-button primary :disabled="disabled" type="submit">
             {{ editingLink.id ? $t('actions.save') : $t('settings.social-media.submit') }}
-          </ds-button>
-          <ds-button v-if="editingLink.id" id="cancel" ghost @click="handleCancel()">
+          </base-button>
+          <base-button v-if="editingLink.id" id="cancel" ghost @click="handleCancel()">
             {{ $t('actions.cancel') }}
-          </ds-button>
+          </base-button>
         </ds-space>
       </ds-space>
     </ds-card>
@@ -226,5 +224,10 @@ export default {
   .ds-list-item-prefix {
     align-self: center;
   }
+
+  .ds-list-item-content {
+    display: flex;
+    align-items: center;
+  }
 }
 </style>

webapp/pages/settings/privacy.vue

@@ -4,7 +4,7 @@
       <input id="allow-shouts" type="checkbox" v-model="shoutsAllowed" />
       <label for="allow-shouts">{{ $t('settings.privacy.make-shouts-public') }}</label>
     </ds-space>
-    <ds-button primary @click="submit" :disabled="disabled">{{ $t('actions.save') }}</ds-button>
+    <base-button primary @click="submit" :disabled="disabled">{{ $t('actions.save') }}</base-button>
   </ds-card>
 </template>
 

webapp/pages/terms-and-conditions-confirm.vue

@@ -2,11 +2,11 @@
   <ds-container width="medium">
     <ds-card icon="balance-scale" :header="$t(`termsAndConditions.newTermsAndConditions`)" centered>
       <p>
-        <ds-button>
+        <base-button>
           <nuxt-link class="post-link" :to="{ name: 'terms-and-conditions' }" target="_blank">
             {{ $t(`termsAndConditions.termsAndConditionsNewConfirmText`) }}
           </nuxt-link>
-        </ds-button>
+        </base-button>
       </p>
       <ds-text>
         <input id="checkbox" type="checkbox" v-model="checked" :checked="checked" />
@@ -17,7 +17,7 @@
       </ds-text>
 
       <template slot="footer">
-        <ds-button primary @click="submit" :disabled="!checked">{{ $t(`actions.save`) }}</ds-button>
+        <base-button primary @click="submit" :disabled="!checked">{{ $t(`actions.save`) }}</base-button>
       </template>
     </ds-card>
   </ds-container>