replace even more ds-buttons with base-buttons (wip)

webapp/components/LoginForm/LoginForm.vue

@@ -50,16 +50,15 @@
             <ds-space margin-bottom="large">
               <nuxt-link to="/password-reset/request">{{ $t('login.forgotPassword') }}</nuxt-link>
             </ds-space>
-            <ds-button
+            <base-button
               :loading="pending"
               primary
-              fullwidth
               name="submit"
               type="submit"
               icon="sign-in"
             >
               {{ $t('login.login') }}
-            </ds-button>
+            </base-button>
             <ds-space margin-top="large" margin-bottom="x-small">
               {{ $t('login.no-account') }}
               <nuxt-link to="/registration/signup">{{ $t('login.register') }}</nuxt-link>
@@ -113,6 +112,11 @@ export default {
 }
 .login-card {
   position: relative;
+
+  .base-button {
+    display: block;
+    width: 100%;
+  }
 }
 .login-locale-switch {
   position: absolute;

webapp/components/Modal/ConfirmModal.vue

@@ -10,11 +10,11 @@
     <p v-html="message" />
 
     <template slot="footer">
-      <ds-button class="cancel" :icon="modalData.buttons.cancel.icon" @click="cancel">
+      <base-button class="cancel" :icon="modalData.buttons.cancel.icon" @click="cancel">
         {{ $t(modalData.buttons.cancel.textIdent) }}
-      </ds-button>
+      </base-button>
 
-      <ds-button
+      <base-button
         :danger="modalData.buttons.confirm.danger"
         class="confirm"
         :icon="modalData.buttons.confirm.icon"
@@ -22,7 +22,7 @@
         @click="confirm"
       >
         {{ $t(modalData.buttons.confirm.textIdent) }}
-      </ds-button>
+      </base-button>
     </template>
   </ds-modal>
 </template>

webapp/components/Modal/DisableModal.vue

@@ -4,11 +4,10 @@
     <p v-html="message" />
 
     <template slot="footer">
-      <ds-button class="cancel" @click="cancel">{{ $t('disable.cancel') }}</ds-button>
+      <base-button class="cancel" @click="cancel">{{ $t('disable.cancel') }}</base-button>
-
+      <base-button danger class="confirm" icon="exclamation-circle" @click="confirm">
-      <ds-button danger class="confirm" icon="exclamation-circle" @click="confirm">
         {{ $t('disable.submit') }}
-      </ds-button>
+      </base-button>
     </template>
   </ds-modal>
 </template>

webapp/components/Modal/ReportModal.vue

@@ -29,11 +29,11 @@
     </small>
     <ds-space />
     <template #footer>
-      <ds-button class="cancel" icon="close" @click="cancel">
+      <base-button class="cancel" icon="close" @click="cancel">
         {{ $t('report.cancel') }}
-      </ds-button>
+      </base-button>
 
-      <ds-button
+      <base-button
         danger
         class="confirm"
         icon="exclamation-circle"
@@ -42,7 +42,7 @@
         @click="confirm"
       >
         {{ $t('report.submit') }}
-      </ds-button>
+      </base-button>
     </template>
   </ds-modal>
 </template>
@@ -161,7 +161,7 @@ export default {
 .ds-modal {
   max-width: 600px !important;
 }
-.ds-radio-option:not(.ds-button) {
+.ds-radio-option {
   width: 100% !important;
 }
 .ds-radio-option-label {

webapp/components/NotificationMenu/NotificationMenu.spec.js

@@ -33,7 +33,7 @@ describe('NotificationMenu.vue', () => {
 
     it('counter displays 0', () => {
       wrapper = Wrapper()
-      expect(wrapper.find('ds-button-stub').text()).toEqual('0')
+      expect(wrapper.find('base-button-stub').text()).toEqual('0')
     })
 
     it('no dropdown is rendered', () => {
@@ -67,12 +67,12 @@ describe('NotificationMenu.vue', () => {
 
       it('counter displays 0', () => {
         wrapper = Wrapper()
-        expect(wrapper.find('ds-button-stub').text()).toEqual('0')
+        expect(wrapper.find('base-button-stub').text()).toEqual('0')
       })
 
       it('button is not primary', () => {
         wrapper = Wrapper()
-        expect(wrapper.find('ds-button-stub').props('primary')).toBe(false)
+        expect(wrapper.find('base-button-stub').props('primary')).toBe(false)
       })
     })
 
@@ -130,12 +130,12 @@ describe('NotificationMenu.vue', () => {
 
       it('displays the number of unread notifications', () => {
         wrapper = Wrapper()
-        expect(wrapper.find('ds-button-stub').text()).toEqual('2')
+        expect(wrapper.find('base-button-stub').text()).toEqual('2')
       })
 
       it('renders primary button', () => {
         wrapper = Wrapper()
-        expect(wrapper.find('ds-button-stub').props('primary')).toBe(true)
+        expect(wrapper.find('base-button-stub').props('primary')).toBe(true)
       })
     })
   })

webapp/components/NotificationMenu/NotificationMenu.vue

@@ -1,12 +1,12 @@
 <template>
-  <ds-button v-if="!notifications.length" class="notifications-menu" disabled icon="bell">
+  <base-button v-if="!notifications.length" class="notifications-menu" disabled ghost circle>
-    {{ unreadNotificationsCount }}
+    <counter-icon icon="bell" :count="unreadNotificationsCount" danger />
-  </ds-button>
+  </base-button>
   <dropdown v-else class="notifications-menu" offset="8" :placement="placement">
     <template slot="default" slot-scope="{ toggleMenu }">
-      <ds-button :primary="!!unreadNotificationsCount" icon="bell" @click.prevent="toggleMenu">
+      <base-button @click="toggleMenu" ghost circle>
-        {{ unreadNotificationsCount }}
+        <counter-icon icon="bell" :count="unreadNotificationsCount" danger />
-      </ds-button>
+      </base-button>
     </template>
     <template slot="popover">
       <div class="notifications-menu-popover">
@@ -22,17 +22,20 @@
 </template>
 
 <script>
-import Dropdown from '~/components/Dropdown'
 import { NOTIFICATIONS_POLL_INTERVAL } from '~/constants/notifications'
 import { notificationQuery, markAsReadMutation } from '~/graphql/User'
-import NotificationList from '../NotificationList/NotificationList'
 import unionBy from 'lodash/unionBy'
 
+import CounterIcon from '~/components/_new/generic/CounterIcon/CounterIcon'
+import Dropdown from '~/components/Dropdown'
+import NotificationList from '../NotificationList/NotificationList'
+
 export default {
   name: 'NotificationMenu',
   components: {
-    NotificationList,
+    CounterIcon,
     Dropdown,
+    NotificationList,
   },
   data() {
     return {
@@ -90,6 +93,7 @@ export default {
 
 <style lang="scss">
 .notifications-menu {
+  flex-shrink: 0;
   display: flex;
   align-items: center;
 }

webapp/components/Password/Change.vue

@@ -24,9 +24,9 @@
       />
       <password-strength :password="formData.password" />
       <ds-space margin-top="base">
-        <ds-button :loading="loading" :disabled="errors" primary>
+        <base-button :loading="loading" :disabled="errors" primary type="submit">
           {{ $t('settings.security.change-password.button') }}
-        </ds-button>
+        </base-button>
       </ds-space>
     </template>
   </ds-form>

webapp/components/PasswordReset/ChangePassword.vue

@@ -24,9 +24,9 @@
         />
         <password-strength :password="formData.password" />
         <ds-space margin-top="base" margin-bottom="xxx-small">
-          <ds-button :loading="$apollo.loading" :disabled="errors" primary>
+          <base-button :loading="$apollo.loading" :disabled="errors" primary type="submit">
             {{ $t('settings.security.change-password.button') }}
-          </ds-button>
+          </base-button>
         </ds-space>
       </template>
     </ds-form>

webapp/components/PasswordReset/Request.vue

@@ -20,17 +20,16 @@
     <ds-space margin-botton="large">
       <ds-text align="left">{{ $t('components.password-reset.request.form.description') }}</ds-text>
     </ds-space>
-    <ds-button
+    <base-button
       :disabled="disabled"
       :loading="$apollo.loading"
       primary
-      fullwidth
       name="submit"
       type="submit"
       icon="envelope"
     >
       {{ $t('components.password-reset.request.form.submit') }}
-    </ds-button>
+    </base-button>
     <slot></slot>
   </ds-form>
   <div v-else>

webapp/components/Registration/CreateUserAccount.vue

@@ -102,7 +102,7 @@
             v-html="$t('components.registration.signup.form.no-political')"
           ></label>
         </ds-text>
-        <ds-button
+        <base-button
           style="float: right;"
           icon="check"
           type="submit"
@@ -118,7 +118,7 @@
           primary
         >
           {{ $t('actions.save') }}
-        </ds-button>
+        </base-button>
       </template>
     </ds-form>
   </div>

webapp/components/Registration/Signup.vue

@@ -30,17 +30,16 @@
         name="email"
         icon="envelope"
       />
-      <ds-button
+      <base-button
         :disabled="disabled"
         :loading="$apollo.loading"
         primary
-        fullwidth
         name="submit"
         type="submit"
         icon="envelope"
       >
         {{ $t('components.registration.signup.form.submit') }}
-      </ds-button>
+      </base-button>
       <slot></slot>
     </ds-form>
   </ds-space>

webapp/components/ReleaseModal/ReleaseModal.vue

@@ -4,11 +4,10 @@
     <p v-html="message" />
 
     <template slot="footer">
-      <ds-button class="cancel" @click="cancel">{{ $t('release.cancel') }}</ds-button>
+      <base-button class="cancel" @click="cancel">{{ $t('release.cancel') }}</base-button>
-
+      <base-button danger class="confirm" icon="exclamation-circle" @click="confirm">
-      <ds-button danger class="confirm" icon="exclamation-circle" @click="confirm">
         {{ $t('release.submit') }}
-      </ds-button>
+      </base-button>
     </template>
   </ds-modal>
 </template>

webapp/components/ShoutButton.vue

@@ -1,12 +1,11 @@
 <template>
   <ds-space margin="xx-small" class="text-align-center">
-    <ds-button
+    <base-button
       :loading="loading"
       :disabled="disabled"
-      :ghost="!shouted"
       :primary="shouted"
-      size="x-large"
       icon="bullhorn"
+      circle
       @click="toggle"
     />
     <ds-space margin-bottom="xx-small" />

webapp/components/TeaserImage/TeaserImage.vue

@@ -9,10 +9,17 @@
     @vdropzone-thumbnail="transformImage"
   >
     <div class="crop-overlay" ref="cropperOverlay" v-show="showCropper">
-      <ds-button @click.stop.prevent="cropImage" class="crop-confirm" primary>
+      <base-button @click="cropImage" class="crop-confirm" primary>
         {{ $t('contribution.teaserImage.cropperConfirm') }}
-      </ds-button>
+      </base-button>
-      <ds-button @click="cancelCrop" class="crop-cancel" icon="close"></ds-button>
+      <base-button
+        class="crop-cancel"
+        icon="close"
+        size="small"
+        circle
+        danger
+        @click="cancelCrop"
+      />
     </div>
     <div
       :class="{