replace ButtonDiv with VueButton and last icons

Signed-off-by: dartcafe <github@dartcafe.de>

20 files changed, 313 insertions, 468 deletions

diff --git a/src/js/App.vue b/src/js/App.vue
index 45c95267..d84e5e9d 100644
--- a/src/js/App.vue
+++ b/src/js/App.vue
@@ -288,6 +288,7 @@ export default {
 
 .modal__buttons {
 	display: flex;
+	gap: 8px;
 	justify-content: flex-end;
 	align-items: center;
 	margin-top: 14px;
diff --git a/src/js/adminSettings.js b/src/js/adminSettings.js
index cf49c0f3..5b705a58 100644
--- a/src/js/adminSettings.js
+++ b/src/js/adminSettings.js
@@ -27,7 +27,6 @@ import appSettings from './store/modules/appSettings'
 import { translate, translatePlural } from '@nextcloud/l10n'
 
 import AdminSettingsPage from './views/AdminSettingsPage'
-import ButtonDiv from './components/Base/ButtonDiv'
 
 // /* eslint-disable-next-line camelcase, no-undef */
 // __webpack_nonce__ = btoa(getRequestToken())
@@ -40,7 +39,6 @@ Vue.prototype.n = translatePlural
 Vue.config.debug = process.env.NODE_ENV !== 'production'
 Vue.config.devTools = process.env.NODE_ENV !== 'production'
 // eslint-disable-next-line vue/match-component-file-name
-Vue.component('ButtonDiv', ButtonDiv)
 
 Vue.use(Vuex)
 
diff --git a/src/js/assets/scss/icons-md.scss b/src/js/assets/scss/icons-md.scss
index ee8f8fe0..b53496c1 100644
--- a/src/js/assets/scss/icons-md.scss
+++ b/src/js/assets/scss/icons-md.scss
@@ -1,4 +1,18 @@
 // material design icons
+@mixin svg-icon($url) {
+    background-image: $url;
+}
+
+// masked svg background icon
+@mixin masked-icon($url, $color: var(--icon-md-color-default)) {
+    -webkit-mask-image: $url;
+    mask-image: $url;
+	mask-repeat: no-repeat;
+	mask-position: center;
+	mask-size: var(--icon-size);
+	background-color: $color;
+}
+
 :root {
 	--icon-md-account-check: url('../icons/material-design/account-check.svg');
 	--icon-md-account-group: url('../icons/material-design/account-group.svg');
@@ -59,13 +73,6 @@
 	background-color: #000;
 }
 
-// .material-design-icon {
-// 	display: flex;
-// 	align-self: center;
-// 	align-items: center;
-// 	justify-content: center;
-// }
-
 .theme--dark {
 	&[class*='icon-mask-md-'] {
 		background-color: #000 !important;
@@ -75,76 +82,63 @@
 	}
 }
 
-@mixin svg-icon($url) {
-    background-image: $url;
-}
-
-// masked svg background icon
-@mixin masked-icon($url, $color: var(--icon-md-color-default)) {
-    -webkit-mask-image: $url;
-    mask-image: $url;
-	mask-repeat: no-repeat;
-	mask-position: center;
-	mask-size: var(--icon-size);
-	background-color: $color;
-}
-
-
 // material design icons
 // just svg background icon
 .icon-svg-md-email { @include svg-icon(var(--icon-md-email)); }
 .icon-svg-md-share { @include svg-icon(var(--icon-md-share-variant)); }
 .icon-svg-md-link { @include svg-icon(var(--icon-md-link-variant)); }
 
-.icon-mask-md-navigation-relevant { @include masked-icon(var(--icon-md-exclamation-thick)); }
-.icon-mask-md-navigation-my { @include masked-icon(var(--icon-md-crown)); }
-.icon-mask-md-owner { @include masked-icon(var(--icon-md-crown)); }
-.icon-mask-md-navigation-private { @include masked-icon(var(--icon-md-key)); }
-.icon-mask-md-private-poll { @include masked-icon(var(--icon-md-key)); }
-.icon-mask-md-navigation-open { @include masked-icon(var(--icon-md-earth)); }
-.icon-mask-md-open-poll { @include masked-icon(var(--icon-md-earth)); }
-.icon-mask-md-navigation-participated { @include masked-icon(var(--icon-md-account-check)); }
-.icon-mask-md-navigation-all { @include masked-icon(var(--icon-md-poll)); }
-.icon-mask-md-navigation-closed, .icon-mask-md-closed-poll { @include masked-icon(var(--icon-md-lock)); }
-.icon-mask-md-navigation-archived { @include masked-icon(var(--icon-md-archive)); }
-.icon-mask-md-archived-poll { @include masked-icon(var(--icon-md-archive)); }
-.icon-mask-md-archive-poll { @include masked-icon(var(--icon-md-archive)); }
-.icon-mask-md-navigation-combo { @include masked-icon(var(--icon-md-vector-combine)); }
-.icon-mask-md-navigation-administration { @include masked-icon(var(--icon-md-cog)); }
-.icon-mask-md-navigation-personal-settings { @include masked-icon(var(--icon-md-account-cog)); }
-.icon-mask-md-sidebar-options { @include masked-icon(var(--icon-md-format-list-checks)); }
-.icon-mask-md-email { @include masked-icon(var(--icon-md-email)); }
+// mask icons
 .icon-mask-md-admin { @include masked-icon(var(--icon-md-shield-crown-outline)); }
 .icon-mask-md-admin-remove { @include masked-icon(var(--icon-md-shield-crown-outline-strike-thru)); }
-.icon-mask-md-sidebar-configuration { @include masked-icon(var(--icon-md-wrench)); }
-.icon-mask-md-sidebar-comments { @include masked-icon(var(--icon-md-comment-processing)); }
-.icon-mask-md-sidebar-share { @include masked-icon(var(--icon-md-share-variant)); }
-.icon-mask-md-date-options { @include masked-icon(var(--icon-md-calendar-month)); }
-.icon-mask-md-date-poll { @include masked-icon(var(--icon-md-calendar-blank)); }
 .icon-mask-md-anonymous-poll { @include masked-icon(var(--icon-md-incognito)); }
-.icon-mask-md-text-poll { @include masked-icon(var(--icon-md-format-list-bulleted-square)); }
+.icon-mask-md-archive-poll { @include masked-icon(var(--icon-md-archive)); }
+.icon-mask-md-archived-poll { @include masked-icon(var(--icon-md-archive)); }
+.icon-mask-md-clippy { @include masked-icon(var(--icon-md-clipboard-arrow-left-outline)); }
 .icon-mask-md-clone-poll { @include masked-icon(var(--icon-md-content-copy)); }
-.icon-mask-md-restore-poll { @include masked-icon(var(--icon-md-recycle)); }
+.icon-mask-md-closed-poll { @include masked-icon(var(--icon-md-lock)); }
+.icon-mask-md-creation { @include masked-icon(var(--icon-md-clock-outline)); }
+.icon-mask-md-date-options { @include masked-icon(var(--icon-md-calendar-month)); }
+.icon-mask-md-date-poll { @include masked-icon(var(--icon-md-calendar-blank)); }
 .icon-mask-md-delete-poll { @include masked-icon(var(--icon-md-delete)); }
+.icon-mask-md-edit-email-address { @include masked-icon(var(--icon-md-email-edit)); }
+.icon-mask-md-email { @include masked-icon(var(--icon-md-email)); }
 .icon-mask-md-expiration { @include masked-icon(var(--icon-md-calendar-end)); }
-.icon-mask-md-creation { @include masked-icon(var(--icon-md-clock-outline)); }
-.icon-mask-md-clippy { @include masked-icon(var(--icon-md-clipboard-arrow-left-outline)); }
-.icon-mask-md-reset-votes { @include masked-icon(var(--icon-md-undo)); }
-.icon-mask-md-subscribed { @include masked-icon(var(--icon-md-bell)); }
-.icon-mask-md-unsubscribed { @include masked-icon(var(--icon-md-bell-off)); }
-.icon-mask-md-participants { @include masked-icon(var(--icon-md-account-group)); }
-.icon-mask-md-show-results { @include masked-icon(var(--icon-md-monitor)); }
 .icon-mask-md-hide-results-until-closed { @include masked-icon(var(--icon-md-monitor-lock)); }
-.icon-mask-md-show-results-never { @include masked-icon(var(--icon-md-monitor-off)); }
+.icon-mask-md-navigation-administration { @include masked-icon(var(--icon-md-cog)); }
+.icon-mask-md-navigation-all { @include masked-icon(var(--icon-md-poll)); }
+.icon-mask-md-navigation-archived { @include masked-icon(var(--icon-md-archive)); }
+.icon-mask-md-navigation-closed { @include masked-icon(var(--icon-md-lock)); }
+.icon-mask-md-navigation-combo { @include masked-icon(var(--icon-md-vector-combine)); }
+.icon-mask-md-navigation-my { @include masked-icon(var(--icon-md-crown)); }
+.icon-mask-md-navigation-open { @include masked-icon(var(--icon-md-earth)); }
+.icon-mask-md-navigation-participated { @include masked-icon(var(--icon-md-account-check)); }
+.icon-mask-md-navigation-personal-settings { @include masked-icon(var(--icon-md-account-cog)); }
+.icon-mask-md-navigation-private { @include masked-icon(var(--icon-md-key)); }
+.icon-mask-md-navigation-relevant { @include masked-icon(var(--icon-md-exclamation-thick)); }
+.icon-mask-md-open-poll { @include masked-icon(var(--icon-md-earth)); }
 .icon-mask-md-options { @include masked-icon(var(--icon-md-format-list-checkbox)); }
-.icon-mask-md-timezone { @include masked-icon(var(--icon-md-map-clock-outline)); }
+.icon-mask-md-options-order-date { @include masked-icon(var(--icon-md-sort-clock-ascending-outline)); }
+.icon-mask-md-options-order-original { @include masked-icon(var(--icon-md-format-list-bulleted-square)); }
+.icon-mask-md-options-order-ranked { @include masked-icon(var(--icon-md-format-list-numbered)); }
+.icon-mask-md-owner { @include masked-icon(var(--icon-md-crown)); }
+.icon-mask-md-participants { @include masked-icon(var(--icon-md-account-group)); }
+.icon-mask-md-private-poll { @include masked-icon(var(--icon-md-key)); }
 .icon-mask-md-proposals-allowed { @include masked-icon(var(--icon-md-offer)); }
 .icon-mask-md-proposals { @include masked-icon(var(--icon-md-offer)); }
-.icon-mask-md-edit-email-address { @include masked-icon(var(--icon-md-email-edit)); }
 .icon-mask-md-send-link-per-email { @include masked-icon(var(--icon-md-link-variant)); }
-.icon-mask-md-options-order-ranked { @include masked-icon(var(--icon-md-format-list-numbered)); }
-.icon-mask-md-options-order-original { @include masked-icon(var(--icon-md-format-list-bulleted-square)); }
-.icon-mask-md-options-order-date { @include masked-icon(var(--icon-md-sort-clock-ascending-outline)); }
+.icon-mask-md-show-results { @include masked-icon(var(--icon-md-monitor)); }
+.icon-mask-md-show-results-never { @include masked-icon(var(--icon-md-monitor-off)); }
+.icon-mask-md-sidebar-comments { @include masked-icon(var(--icon-md-comment-processing)); }
+.icon-mask-md-sidebar-configuration { @include masked-icon(var(--icon-md-wrench)); }
+.icon-mask-md-sidebar-options { @include masked-icon(var(--icon-md-format-list-checks)); }
+.icon-mask-md-sidebar-share { @include masked-icon(var(--icon-md-share-variant)); }
+.icon-mask-md-subscribed { @include masked-icon(var(--icon-md-bell)); }
+.icon-mask-md-reset-votes { @include masked-icon(var(--icon-md-undo)); }
+.icon-mask-md-restore-poll { @include masked-icon(var(--icon-md-recycle)); }
+.icon-mask-md-text-poll { @include masked-icon(var(--icon-md-format-list-bulleted-square)); }
+.icon-mask-md-timezone { @include masked-icon(var(--icon-md-map-clock-outline)); }
+.icon-mask-md-unsubscribed { @include masked-icon(var(--icon-md-bell-off)); }
 
 .icon-mask-md-yes-vote,
 .icon-mask-md-yes-votes {
diff --git a/src/js/assets/scss/icons.scss b/src/js/assets/scss/icons.scss
index a7e8be80..512a9073 100644
--- a/src/js/assets/scss/icons.scss
+++ b/src/js/assets/scss/icons.scss
@@ -3,49 +3,49 @@
 	--polls-vote-columns: 1;
 	--icon-circles: url('../icons/circles.svg');
 	--icon-circles--fff: url('../icons/circles-fff.svg');
-	--icon-clock: url('../icons/clock.svg');
-	--icon-clock--fff: url('../icons/clock-fff.svg');
 	--icon-polls: url('../icons/polls.svg');
 	--icon-polls--fff: url('../icons/polls-fff.svg');
-	--icon-polls-anonymous: url('../icons/anonymous.svg');
-	--icon-polls-anonymous--fff: url('../icons/anonymous-fff.svg');
-	--icon-polls-back: url('../icons/back.svg');
-	--icon-polls-back--fff: url('../icons/back-fff.svg');
-	--icon-polls-clone: url('../icons/clone.svg');
-	--icon-polls-clone--fff: url('../icons/clone-fff.svg');
-	--icon-polls-closed: url('../icons/closed.svg');
-	--icon-polls-closed--fff: url('../icons/closed-fff.svg');
-	--icon-polls-confirmed: url('../icons/confirmed.svg');
-	--icon-polls-confirmed--fff: url('../icons/confirmed-fff.svg');
-	--icon-polls-handle: url('../icons/handle.svg');
-	--icon-polls-handle--fff: url('../icons/handle-fff.svg');
-	--icon-polls-private-poll: url('../icons/invisible.svg');
-	--icon-polls-private-poll--fff: url('../icons/invisible-fff.svg');
-	--icon-polls-private: url('../icons/invisible.svg');
-	--icon-polls-private--fff: url('../icons/invisible-fff.svg');
-	--icon-polls-list-view: url('../icons/list-view.svg');
-	--icon-polls-list-view-fff: url('../icons/list-view-fff.svg');
-	--icon-polls-loading: url('../icons/loading-small.gif');
-	--icon-polls-mail: url('../icons/mail.svg');
-	--icon-polls-mail--fff: url('../icons/mail-fff.svg');
 	--icon-polls-maybe: url('../icons/maybe-vote.svg');
-	--icon-polls-move: url('../icons/move.svg');
-	--icon-polls-move--fff: url('../icons/move-fff.svg');
-	--icon-polls-minus: url('../icons/minus.svg');
 	--icon-polls-no: url('../icons/no-vote.svg');
-	--icon-polls-open: url('../icons/open.svg');
-	--icon-polls-open--fff: url('../icons/open-fff.svg');
-	--icon-polls-open-poll: url('../icons/visible.svg');
-	--icon-polls-open-poll--fff: url('../icons/visible-fff.svg');
-	--icon-polls-sidebar-toggle: url('../icons/sidebar-toggle.svg');
-	--icon-polls-sidebar-toggle--fff: url('../icons/sidebar-toggle-fff.svg');
-	--icon-polls-table-view: url('../icons/table-view.svg');
-	--icon-polls-table-view-fff: url('../icons/table-view-fff.svg');
-	--icon-polls-visible: url('../icons/visible.svg');
-	--icon-polls-visible--fff: url('../icons/visible-fff.svg');
-	--icon-polls-unconfirmed: url('../icons/unconfirmed.svg');
-	--icon-polls-unconfirmed--fff: url('../icons/unconfirmed-fff.svg');
 	--icon-polls-yes: url('../icons/yes-vote.svg');
+	// --icon-clock: url('../icons/clock.svg');
+	// --icon-clock--fff: url('../icons/clock-fff.svg');
+	// --icon-polls-anonymous: url('../icons/anonymous.svg');
+	// --icon-polls-anonymous--fff: url('../icons/anonymous-fff.svg');
+	// --icon-polls-back: url('../icons/back.svg');
+	// --icon-polls-back--fff: url('../icons/back-fff.svg');
+	// --icon-polls-clone: url('../icons/clone.svg');
+	// --icon-polls-clone--fff: url('../icons/clone-fff.svg');
+	// --icon-polls-closed: url('../icons/closed.svg');
+	// --icon-polls-closed--fff: url('../icons/closed-fff.svg');
+	// --icon-polls-confirmed: url('../icons/confirmed.svg');
+	// --icon-polls-confirmed--fff: url('../icons/confirmed-fff.svg');
+	// --icon-polls-handle: url('../icons/handle.svg');
+	// --icon-polls-handle--fff: url('../icons/handle-fff.svg');
+	// --icon-polls-private-poll: url('../icons/invisible.svg');
+	// --icon-polls-private-poll--fff: url('../icons/invisible-fff.svg');
+	// --icon-polls-private: url('../icons/invisible.svg');
+	// --icon-polls-private--fff: url('../icons/invisible-fff.svg');
+	// --icon-polls-list-view: url('../icons/list-view.svg');
+	// --icon-polls-list-view-fff: url('../icons/list-view-fff.svg');
+	// --icon-polls-loading: url('../icons/loading-small.gif');
+	// --icon-polls-mail: url('../icons/mail.svg');
+	// --icon-polls-mail--fff: url('../icons/mail-fff.svg');
+	// --icon-polls-move: url('../icons/move.svg');
+	// --icon-polls-move--fff: url('../icons/move-fff.svg');
+	// --icon-polls-minus: url('../icons/minus.svg');
+	// --icon-polls-open: url('../icons/open.svg');
+	// --icon-polls-open--fff: url('../icons/open-fff.svg');
+	// --icon-polls-open-poll: url('../icons/visible.svg');
+	// --icon-polls-open-poll--fff: url('../icons/visible-fff.svg');
+	// --icon-polls-sidebar-toggle: url('../icons/sidebar-toggle.svg');
+	// --icon-polls-sidebar-toggle--fff: url('../icons/sidebar-toggle-fff.svg');
+	// --icon-polls-table-view: url('../icons/table-view.svg');
+	// --icon-polls-table-view-fff: url('../icons/table-view-fff.svg');
+	// --icon-polls-visible: url('../icons/visible.svg');
+	// --icon-polls-visible--fff: url('../icons/visible-fff.svg');
+	// --icon-polls-unconfirmed: url('../icons/unconfirmed.svg');
+	// --icon-polls-unconfirmed--fff: url('../icons/unconfirmed-fff.svg');
 
 	// filters to colorize background svg from black
 	// generated with https://codepen.io/jsm91/embed/ZEEawyZ?height=600&default-tab=result&embed-version=2
@@ -55,58 +55,50 @@
 }
 
 .icon-circles { background-image: var(--icon-circles); }
-.icon-clock { background-image: var(--icon-clock); }
-.icon-clock-fff { background-image: var(--icon-clock--fff); }
-.icon-handle { background-image: var(--icon-polls-handle); }
-.icon-list-view { background-image: var(--icon-polls-list-view); }
 .icon-polls { background-image: var(--icon-polls); }
-.icon-polls-anonymous { background-image: var(--icon-polls-anonymous); }
-.icon-polls-back { background-image: var(--icon-polls-back); }
-.icon-polls-clone { background-image: var(--icon-polls-clone); }
-.icon-polls-closed { background-image: var(--icon-polls-closed); }
-.icon-polls-closed-fff { background-image: var(--icon-polls-closed--fff); }
-.icon-polls-confirmed { background-image: var(--icon-polls-confirmed); }
-.icon-polls-private-poll { background-image: var(--icon-polls-private-poll); }
-.icon-polls-private { background-image: var(--icon-polls-private-poll); }
-.icon-polls-mail { background-image: var(--icon-polls-mail); }
 .icon-polls-maybe { background-image: var(--icon-polls-maybe); }
-.icon-polls-minus { background-image: var(--icon-polls-minus); }
-.icon-polls-move { background-image: var(--icon-polls-move); }
 .icon-polls-no { background-image: var(--icon-polls-no); }
-.icon-polls-open { background-image: var(--icon-polls-open); }
-.icon-polls-open-poll { background-image: var(--icon-polls-open-poll); }
-.icon-polls-sidebar-toggle { background-image: var(--icon-polls-sidebar-toggle); }
-.icon-polls-unconfirmed { background-image: var(--icon-polls-unconfirmed); }
-.icon-table-view { background-image: var(--icon-polls-table-view); }
-.icon-polls-visible { background-image: var(--icon-polls-open-poll); }
 .icon-polls-yes { background-image: var(--icon-polls-yes); }
+// .icon-clock { background-image: var(--icon-clock); }
+// .icon-clock-fff { background-image: var(--icon-clock--fff); }
+// .icon-handle { background-image: var(--icon-polls-handle); }
+// .icon-list-view { background-image: var(--icon-polls-list-view); }
+// .icon-polls-anonymous { background-image: var(--icon-polls-anonymous); }
+// .icon-polls-back { background-image: var(--icon-polls-back); }
+// .icon-polls-clone { background-image: var(--icon-polls-clone); }
+// .icon-polls-closed { background-image: var(--icon-polls-closed); }
+// .icon-polls-closed-fff { background-image: var(--icon-polls-closed--fff); }
+// .icon-polls-confirmed { background-image: var(--icon-polls-confirmed); }
+// .icon-polls-private-poll { background-image: var(--icon-polls-private-poll); }
+// .icon-polls-private { background-image: var(--icon-polls-private-poll); }
+// .icon-polls-mail { background-image: var(--icon-polls-mail); }
+// .icon-polls-minus { background-image: var(--icon-polls-minus); }
+// .icon-polls-move { background-image: var(--icon-polls-move); }
+// .icon-polls-open { background-image: var(--icon-polls-open); }
+// .icon-polls-open-poll { background-image: var(--icon-polls-open-poll); }
+// .icon-polls-sidebar-toggle { background-image: var(--icon-polls-sidebar-toggle); }
+// .icon-polls-unconfirmed { background-image: var(--icon-polls-unconfirmed); }
+// .icon-table-view { background-image: var(--icon-polls-table-view); }
+// .icon-polls-visible { background-image: var(--icon-polls-open-poll); }
 
 .theme--dark {
-	.icon-clock { background-image: var(--icon-clock--fff); }
 	.icon-circles { background-image: var(--icon-circles--fff); }
-	.icon-handle { background-image: var(--icon-polls-handle--fff); }
-	.icon-list-view { background-image: var(--icon-polls-list-view-fff); }
 	.icon-polls { background-image: var(--icon-polls--fff); }
-	.icon-polls-anonymous { background-image: var(--icon-polls-anonymous--fff); }
-	.icon-polls-back { background-image: var(--icon-polls-back--fff); }
-	.icon-polls-clone { background-image: var(--icon-polls-clone--fff); }
-	.icon-polls-closed { background-image: var(--icon-polls-closed--fff); }
-	.icon-polls-confirmed { background-image: var(--icon-polls-confirmed--fff); }
-	.icon-polls-private { background-image: var(--icon-polls-private-poll--fff); }
-	.icon-polls-private-poll { background-image: var(--icon-polls-private-poll--fff); }
-	.icon-polls-mail { background-image: var(--icon-polls-mail--fff); }
-	.icon-polls-move { background-image: var(--icon-polls-move--fff); }
-	.icon-polls-open { background-image: var(--icon-polls-open--fff); }
-	.icon-polls-open-poll { background-image: var(--icon-polls-open-poll--fff); }
-	.icon-polls-sidebar-toggle { background-image: var(--icon-polls-sidebar-toggle--fff); }
-	.icon-polls-unconfirmed { background-image: var(--icon-polls-unconfirmed--fff); }
-	.icon-table-view { background-image: var(--icon-polls-table-view-fff); }
-
-	[class^='icon-md'] {
-		background-color: #fff;
-		&.light {
-			background-color: #000;
-		}
-	}
-
+	// .icon-clock { background-image: var(--icon-clock--fff); }
+	// .icon-handle { background-image: var(--icon-polls-handle--fff); }
+	// .icon-list-view { background-image: var(--icon-polls-list-view-fff); }
+	// .icon-polls-anonymous { background-image: var(--icon-polls-anonymous--fff); }
+	// .icon-polls-back { background-image: var(--icon-polls-back--fff); }
+	// .icon-polls-clone { background-image: var(--icon-polls-clone--fff); }
+	// .icon-polls-closed { background-image: var(--icon-polls-closed--fff); }
+	// .icon-polls-confirmed { background-image: var(--icon-polls-confirmed--fff); }
+	// .icon-polls-private { background-image: var(--icon-polls-private-poll--fff); }
+	// .icon-polls-private-poll { background-image: var(--icon-polls-private-poll--fff); }
+	// .icon-polls-mail { background-image: var(--icon-polls-mail--fff); }
+	// .icon-polls-move { background-image: var(--icon-polls-move--fff); }
+	// .icon-polls-open { background-image: var(--icon-polls-open--fff); }
+	// .icon-polls-open-poll { background-image: var(--icon-polls-open-poll--fff); }
+	// .icon-polls-sidebar-toggle { background-image: var(--icon-polls-sidebar-toggle--fff); }
+	// .icon-polls-unconfirmed { background-image: var(--icon-polls-unconfirmed--fff); }
+	// .icon-table-view { background-image: var(--icon-polls-table-view-fff); }
 }
diff --git a/src/js/components/Actions/ActionToggleSidebar.vue b/src/js/components/Actions/ActionToggleSidebar.vue
index 806a33fd..766754f5 100644
--- a/src/js/components/Actions/ActionToggleSidebar.vue
+++ b/src/js/components/Actions/ActionToggleSidebar.vue
@@ -21,50 +21,35 @@
   -->
 
 <template>
-	<div class="action change-view">
-		<ButtonDiv v-if="buttonMode"
-			:title="caption"
-			simple
-			:icon="icon"
-			@click="clickAction()" />
-		<Actions v-else>
-			<ActionButton :icon="icon" @click="clickAction()">
-				{{ caption }}
-			</ActionButton>
-		</Actions>
+	<div class="action toggle-sidebar">
+		<VueButton v-tooltip="caption"
+			type="tertiary"
+			@click="clickAction()">
+			<SidebarIcon />
+		</VueButton>
 	</div>
 </template>
 
 <script>
-import { Actions, ActionButton } from '@nextcloud/vue'
-import ButtonDiv from '../Base/ButtonDiv'
+import { Button as VueButton } from '@nextcloud/vue'
 import { emit } from '@nextcloud/event-bus'
+import SidebarIcon from 'vue-material-design-icons/TextAccount.vue' // view-comfy-outline
 
 export default {
 	name: 'ActionToggleSidebar',
 
 	components: {
-		Actions,
-		ActionButton,
-		ButtonDiv,
-	},
-
-	props: {
-		buttonMode: {
-			type: Boolean,
-			default: false,
-		},
+		SidebarIcon,
+		VueButton,
 	},
 
 	data() {
 		return {
 			caption: t('polls', 'Toggle Sidebar'),
-			icon: 'icon-menu-sidebar',
 		}
 	},
 
 	methods: {
-
 		clickAction() {
 			emit('polls:sidebar:toggle')
 		},
diff --git a/src/js/components/Base/ButtonDiv.vue b/src/js/components/Base/ButtonDiv.vue
deleted file mode 100644
index 72e6d032..00000000
--- a/src/js/components/Base/ButtonDiv.vue
+++ /dev/null
@@ -1,126 +0,0 @@
-<!--
-  - @copyright Copyright (c) 2018 René Gieling <github@dartcafe.de>
-  -
-  - @author René Gieling <github@dartcafe.de>
-  -
-  - @license GNU AGPL version 3 or any later version
-  -
-  - This program is free software: you can redistribute it and/or modify
-  - it under the terms of the GNU Affero General Public License as
-  - published by the Free Software Foundation, either version 3 of the
-  - License, or (at your option) any later version.
-  -
-  - This program is distributed in the hope that it will be useful,
-  - but WITHOUT ANY WARRANTY; without even the implied warranty of
-  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-  - GNU Affero General Public License for more details.
-  -
-  - You should have received a copy of the GNU Affero General Public License
-  - along with this program.  If not, see <http://www.gnu.org/licenses/>.
-  -
-  -->
-
-<template lang="html">
-	<Component :is="tag" :class="buttonClass" @click="$emit('click')">
-		{{ title }}
-	</Component>
-</template>
-
-<script>
-export default {
-	name: 'ButtonDiv',
-	props: {
-		title: {
-			type: String,
-			default: '',
-		},
-		icon: {
-			type: String,
-			default: '',
-		},
-		primary: {
-			type: Boolean,
-			default: false,
-		},
-		simple: {
-			type: Boolean,
-			default: false,
-		},
-		tag: {
-			type: String,
-			default: 'button',
-		},
-		submit: {
-			type: Boolean,
-			default: false,
-		},
-	},
-
-	computed: {
-		buttonStyle() {
-			if (this.submit) {
-				return 'submit'
-			}
-
-			if (this.simple) {
-				return 'simple'
-			}
-
-			return 'button'
-		},
-
-		buttonClass() {
-			return [
-				this.buttonStyle,
-				this.submit ? 'icon-confirm' : this.icon,
-				{
-					withIcon: (this.icon && !this.submit),
-					primary: this.primary,
-				},
-			]
-		},
-
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-	.withIcon {
-		padding-left: 34px;
-		background-position: 12px center;
-	}
-
-	.button {
-		display: inline-block;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	.simple {
-		border: none;
-		background-color: transparent;
-		border-radius: 0;
-		opacity: 0.7;
-		text-align: left;
-		cursor: pointer;
-		&.withIcon {
-			padding-left: 32px;
-			background-position: 0 center;
-		}
-		&:hover {
-			background-color: var(--color-background-dark)
-		}
-	}
-
-	.submit {
-		flex: 0;
-		width: 30px;
-		max-width: 30px;
-		min-width: 30px;
-		background-color: transparent;
-		border: none;
-		opacity: 0.3;
-		cursor: pointer;
-	}
-
-</style>
diff --git a/src/js/components/Configuration/ConfigClosing.vue b/src/js/components/Configuration/ConfigClosing.vue
index 1edf5224..925fbbeb 100644
--- a/src/js/components/Configuration/ConfigClosing.vue
+++ b/src/js/components/Configuration/ConfigClosing.vue
@@ -22,9 +22,13 @@
 
 <template>
 	<div>
-		<ButtonDiv :icon="closed ? 'icon-polls-open' : 'icon-polls-closed'"
-			:title="closed ? t('polls', 'Reopen poll'): t('polls', 'Close poll')"
-			@click="toggleClosed()" />
+		<VueButton @click="toggleClosed()">
+			<template #icon>
+				<OpenPollIcon v-if="closed" />
+				<ClosePollIcon v-else />
+			</template>
+			{{ closed ? t('polls', 'Reopen poll'): t('polls', 'Close poll') }}
+		</VueButton>
 		<CheckboxRadioSwitch v-show="!closed" :checked.sync="useExpire" type="switch">
 			{{ t('polls', 'Poll closing date') }}
 		</CheckboxRadioSwitch>
@@ -35,14 +39,19 @@
 <script>
 import { mapState, mapGetters } from 'vuex'
 import moment from '@nextcloud/moment'
-import { DatetimePicker, CheckboxRadioSwitch } from '@nextcloud/vue'
+import { Button as VueButton, DatetimePicker, CheckboxRadioSwitch } from '@nextcloud/vue'
+import OpenPollIcon from 'vue-material-design-icons/LockOpenVariant.vue'
+import ClosePollIcon from 'vue-material-design-icons/Lock.vue'
 
 export default {
 	name: 'ConfigClosing',
 
 	components: {
+		OpenPollIcon,
+		ClosePollIcon,
 		CheckboxRadioSwitch,
 		DatetimePicker,
+		VueButton,
 	},
 
 	data() {
diff --git a/src/js/components/Options/Confirmation.vue b/src/js/components/Options/Confirmation.vue
deleted file mode 100644
index 971a6573..00000000
--- a/src/js/components/Options/Confirmation.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<!--
-  - @copyright Copyright (c) 2018 René Gieling <github@dartcafe.de>
-  -
-  - @author René Gieling <github@dartcafe.de>
-  -
-  - @license GNU AGPL version 3 or any later version
-  -
-  - This program is free software: you can redistribute it and/or modify
-  - it under the terms of the GNU Affero General Public License as
-  - published by the Free Software Foundation, either version 3 of the
-  - License, or (at your option) any later version.
-  -
-  - This program is distributed in the hope that it will be useful,
-  - but WITHOUT ANY WARRANTY; without even the implied warranty of
-  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-  - GNU Affero General Public License for more details.
-  -
-  - You should have received a copy of the GNU Affero General Public License
-  - along with this program.  If not, see <http://www.gnu.org/licenses/>.
-  -
-  -->
-
-<template>
-	<div class="confirmation" :class=" { 'icon-polls-confirmed': isConfirmed }">
-		<div class="confirmation--text">
-			{{ confirmations }}
-		</div>
-	</div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-
-export default {
-	name: 'Confirmation',
-
-	props: {
-		option: {
-			type: Object,
-			default: undefined,
-		},
-	},
-
-	computed: {
-		...mapGetters({
-			isClosed: 'poll/isClosed',
-		}),
-
-		isConfirmed() {
-			return this.option.confirmed && this.isClosed
-		},
-
-		confirmations() {
-			if (this.isConfirmed) {
-				return t('polls', 'Confirmed')
-			}
-			return ' '
-
-		},
-	},
-}
-
-</script>
-
-<style lang="scss">
-
-.confirmation {
-	align-items: center;
-	justify-content: center;
-	background-repeat: no-repeat;
-	background-position: center;
-	background-size: 21px;
-	font-size: 0;
-	align-self: stretch;
-	min-width: 24px;
-}
-
-.confirmation--text {
-	text-align: center;
-}
-
-</style>
diff --git a/src/js/components/Options/OptionCloneDate.vue b/src/js/components/Options/OptionCloneDate.vue
index 795d2295..36311627 100644
--- a/src/js/components/Options/OptionCloneDate.vue
+++ b/src/js/components/Options/OptionCloneDate.vue
@@ -38,8 +38,13 @@
 		</div>
 
 		<div class="modal__buttons">
-			<ButtonDiv :title="t('polls', 'Cancel')" @click="$emit('close')" />
-			<ButtonDiv :primary="true" :title="t('polls', 'OK')" @click="createSequence" />
+			<VueButton @click="$emit('close')">
+				{{ t('polls', 'Cancel') }}
+			</VueButton>
+
+			<VueButton type="primary" @click="createSequence()">
+				{{ t('polls', 'OK') }}
+			</VueButton>
 		</div>
 	</div>
 </template>
@@ -47,7 +52,7 @@
 <script>
 
 import moment from '@nextcloud/moment'
-import { Multiselect } from '@nextcloud/vue'
+import { Button as VueButton, Multiselect } from '@nextcloud/vue'
 import { dateUnits } from '../../mixins/dateMixins'
 
 export default {
@@ -55,6 +60,7 @@ export default {
 
 	components: {
 		Multiselect,
+		VueButton,
 	},
 
 	mixins: [dateUnits],
diff --git a/src/js/components/Options/OptionsDate.vue b/src/js/components/Options/OptionsDate.vue
index 37aec4f7..4a213813 100644
--- a/src/js/components/Options/OptionsDate.vue
+++ b/src/js/components/Options/OptionsDate.vue
@@ -36,23 +36,28 @@
 						:option="option"
 						class="owner" />
 				</template>
-				<template #actions>
-					<ActionDelete v-if="acl.allowEdit"
+				<template v-if="acl.allowEdit" #actions>
+					<ActionDelete v-if="!closed"
 						:title="t('polls', 'Delete option')"
 						@delete="removeOption(option)" />
-					<Actions v-if="acl.allowEdit" class="action">
+
+					<Actions v-if="!closed" class="action">
 						<ActionButton v-if="!closed" @click="cloneOptionModal(option)">
 							<template #icon>
 								<CloneDateIcon />
 							</template>
 							{{ t('polls', 'Clone option') }}
 						</ActionButton>
-						<ActionButton v-if="closed"
-							:icon="option.confirmed ? 'icon-polls-confirmed' : 'icon-polls-unconfirmed'"
-							@click="confirmOption(option)">
-							{{ option.confirmed ? t('polls', 'Unconfirm option') : t('polls', 'Confirm option') }}
-						</ActionButton>
 					</Actions>
+					<VueButton v-if="closed"
+						v-tooltip="option.confirmed ? t('polls', 'Unconfirm option') : t('polls', 'Confirm option')"
+						type="tertiary"
+						@click="confirmOption(option)">
+						<template #icon>
+							<UnconfirmIcon v-if="option.confirmed" />
+							<ConfirmIcon v-else />
+						</template>
+					</VueButton>
 				</template>
 			</OptionItem>
 		</transition-group>
@@ -72,19 +77,23 @@
 
 <script>
 import { mapGetters, mapState } from 'vuex'
-import { Actions, ActionButton, EmptyContent, Modal } from '@nextcloud/vue'
+import { Actions, ActionButton, Button as VueButton, EmptyContent, Modal } from '@nextcloud/vue'
 import ActionDelete from '../Actions/ActionDelete'
 import OptionCloneDate from './OptionCloneDate'
 import OptionItem from './OptionItem'
 import { confirmOption, removeOption } from '../../mixins/optionMixins'
 import { dateUnits } from '../../mixins/dateMixins'
 import CloneDateIcon from 'vue-material-design-icons/CalendarMultiple.vue'
+import UnconfirmIcon from 'vue-material-design-icons/CheckboxMarkedOutline.vue'
+import ConfirmIcon from 'vue-material-design-icons/CheckboxBlankOutline.vue'
 
 export default {
 	name: 'OptionsDate',
 
 	components: {
 		CloneDateIcon,
+		ConfirmIcon,
+		UnconfirmIcon,
 		Actions,
 		ActionButton,
 		ActionDelete,
@@ -92,6 +101,7 @@ export default {
 		Modal,
 		OptionCloneDate,
 		OptionItem,
+		VueButton,
 		OptionItemOwner: () => import('./OptionItemOwner'),
 	},
 
diff --git a/src/js/components/Options/OptionsDateShift.vue b/src/js/components/Options/OptionsDateShift.vue
index 6bf6ccf9..58270686 100644
--- a/src/js/components/Options/OptionsDateShift.vue
+++ b/src/js/components/Options/OptionsDateShift.vue
@@ -25,7 +25,7 @@
 		<div v-if="proposalsExist">
 			{{ t('polls', 'Shifting dates is disabled to prevent shifting of other user\'s proposals.') }}
 		</div>
-		<div v-else class="selectUnit">
+		<div v-else class="select-unit">
 			<InputDiv v-model="shift.step"
 				use-num-modifiers
 				@add="shift.step += 1"
@@ -34,8 +34,11 @@
 				:options="dateUnits"
 				label="name"
 				track-by="value" />
-			<ButtonDiv submit
-				@click="shiftDates(shift)" />
+			<VueButton class="submit"
+				type="tertiary"
+				@click="shiftDates(shift)">
+				<SubmitIcon />
+			</VueButton>
 		</div>
 	</div>
 </template>
@@ -44,15 +47,18 @@
 
 import { mapState, mapGetters } from 'vuex'
 import InputDiv from '../Base/InputDiv'
-import { Multiselect } from '@nextcloud/vue'
+import { Button as VueButton, Multiselect } from '@nextcloud/vue'
 import { dateUnits } from '../../mixins/dateMixins'
+import SubmitIcon from 'vue-material-design-icons/ArrowRight.vue'
 
 export default {
 	name: 'OptionsDateShift',
 
 	components: {
+		SubmitIcon,
 		InputDiv,
 		Multiselect,
+		VueButton,
 	},
 
 	mixins: [dateUnits],
@@ -86,7 +92,7 @@ export default {
 </script>
 
 <style lang="scss">
-.selectUnit {
+.select-unit {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
@@ -96,6 +102,15 @@ export default {
 		min-width: 75px;
 		flex: 1;
 	}
-}
 
+	.button-vue.button-vue--vue-tertiary {
+		padding: 0;
+		min-width: 0;
+	}
+
+	.button-vue__text,
+	.button-vue--text-only .button-vue__text {
+		margin: 0;
+	}
+}
 </style>
diff --git a/src/js/components/Options/OptionsText.vue b/src/js/components/Options/OptionsText.vue
index d0b62647..b9763392 100644
--- a/src/js/components/Options/OptionsText.vue
+++ b/src/js/components/Options/OptionsText.vue
@@ -36,17 +36,19 @@
 							:option="option"
 							class="owner" />
 					</template>
-					<template #actions>
-						<ActionDelete v-if="acl.allowEdit"
+					<template v-if="acl.allowEdit" #actions>
+						<ActionDelete v-if="!closed"
 							:title="t('polls', 'Delete option')"
 							@delete="removeOption(option)" />
-						<Actions v-if="acl.allowEdit" class="action">
-							<ActionButton v-if="closed"
-								:icon="option.confirmed ? 'icon-polls-yes' : 'icon-checkmark'"
-								@click="confirmOption(option)">
-								{{ option.confirmed ? t('polls', 'Unconfirm option') : t('polls', 'Confirm option') }}
-							</ActionButton>
-						</Actions>
+						<VueButton v-if="closed"
+							v-tooltip="option.confirmed ? t('polls', 'Unconfirm option') : t('polls', 'Confirm option')"
+							type="tertiary"
+							@click="confirmOption(option)">
+							<template #icon>
+								<UnconfirmIcon v-if="option.confirmed" />
+								<ConfirmIcon v-else />
+							</template>
+						</VueButton>
 					</template>
 				</OptionItem>
 			</transition-group>
@@ -63,24 +65,27 @@
 
 <script>
 import { mapGetters, mapState } from 'vuex'
-import { Actions, ActionButton, EmptyContent } from '@nextcloud/vue'
+import { Button as VueButton, EmptyContent } from '@nextcloud/vue'
 import draggable from 'vuedraggable'
 import ActionDelete from '../Actions/ActionDelete'
 import OptionItem from './OptionItem'
 import OptionItemOwner from '../Options/OptionItemOwner'
 import { confirmOption, removeOption } from '../../mixins/optionMixins'
+import UnconfirmIcon from 'vue-material-design-icons/CheckboxMarkedOutline.vue'
+import ConfirmIcon from 'vue-material-design-icons/CheckboxBlankOutline.vue'
 
 export default {
 	name: 'OptionsText',
 
 	components: {
-		Actions,
-		ActionButton,
+		ConfirmIcon,
+		UnconfirmIcon,
 		ActionDelete,
 		EmptyContent,
 		draggable,
 		OptionItem,
 		OptionItemOwner,
+		VueButton,
 		OptionsTextAdd: () => import('./OptionsTextAdd'),
 	},
 
diff --git a/src/js/components/Options/OptionsTextAddBulk.vue b/src/js/components/Options/OptionsTextAddBulk.vue
index 4a3c3963..6d652634 100644
--- a/src/js/components/Options/OptionsTextAddBulk.vue
+++ b/src/js/components/Options/OptionsTextAddBulk.vue
@@ -42,8 +42,13 @@
 					:placeholder="placeholder" />
 
 				<div class="modal__buttons">
-					<ButtonDiv :title="t('polls', 'Close')" @click="showModal = false" />
-					<ButtonDiv :primary="true" :title="t('polls', 'Add options')" @click="addOptionsList()" />
+					<VueButton @click="showModal = false">
+						{{ t('polls', 'Close') }}
+					</VueButton>
+
+					<VueButton type="primary" @click="addOptionsList()">
+						{{ t('polls', 'OK') }}
+					</VueButton>
 				</div>
 			</div>
 		</Modal>
@@ -52,7 +57,7 @@
 
 <script>
 import { showError, showSuccess } from '@nextcloud/dialogs'
-import { Actions, ActionButton, Modal } from '@nextcloud/vue'
+import { Actions, ActionButton, Button as VueButton, Modal } from '@nextcloud/vue'
 import PasteIcon from 'vue-material-design-icons/ClipboardTextMultiple.vue'
 
 export default {
@@ -63,6 +68,7 @@ export default {
 		Actions,
 		ActionButton,
 		Modal,
+		VueButton,
 	},
 
 	props: {
diff --git a/src/js/components/Poll/PollInfoLine.vue b/src/js/components/Poll/PollInfoLine.vue
index 2e19fff4..6f4352b2 100644
--- a/src/js/components/Poll/PollInfoLine.vue
+++ b/src/js/components/Poll/PollInfoLine.vue
@@ -101,7 +101,7 @@ export default {
 				subTexts.push({
 					id: 'closed',
 					text: this.timeExpirationRelative,
-					icon: 'icon-polls-closed',
+					icon: 'icon-mask-md-closed-poll',
 					class: 'closed',
 				})
 				return subTexts
diff --git a/src/js/components/Poll/PublicRegisterModal.vue b/src/js/components/Poll/PublicRegisterModal.vue
index 87d84ad4..17663d4d 100644
--- a/src/js/components/Poll/PublicRegisterModal.vue
+++ b/src/js/components/Poll/PublicRegisterModal.vue
@@ -61,18 +61,21 @@
 						<RichText :text="privacyRich.subject" :arguments="privacyRich.parameters" />
 					</div>
 					<div class="modal__buttons">
-						<div class="modal__buttons__spacer" />
-						<ButtonDiv :title="t('polls', 'Cancel')" @click="closeModal" />
-						<ButtonDiv :primary="true"
-							:disabled="disableSubmit"
-							:title="t('polls', 'OK')"
-							@click="submitRegistration" />
+						<VueButton @click="closeModal">
+							{{ t('polls', 'Cancel') }}
+						</VueButton>
+
+						<VueButton type="primary" :disabled="disableSubmit" @click="submitRegistration()">
+							{{ t('polls', 'OK') }}
+						</VueButton>
 					</div>
 				</div>
 
 				<div v-if="share.showLogin" class="registration__login">
 					<h2> {{ t('polls', 'You are a registered user of this site?') }} </h2>
-					<ButtonDiv :title="t('polls', 'Login')" @click="login()" />
+					<VueButton wide @click="login()">
+						{{ t('polls', 'Login') }}
+					</VueButton>
 					<div>
 						{{ t('polls', 'As a regular user of this site, you can participate with your internal identity after logging in.') }}
 					</div>
@@ -94,24 +97,23 @@
 <script>
 import debounce from 'lodash/debounce'
 import axios from '@nextcloud/axios'
-import ButtonDiv from '../Base/ButtonDiv'
-import InputDiv from '../Base/InputDiv'
 import { showError } from '@nextcloud/dialogs'
 import { generateUrl } from '@nextcloud/router'
-import { Modal } from '@nextcloud/vue'
+import { Button as VueButton, Modal } from '@nextcloud/vue'
 import { mapState } from 'vuex'
 import RichText from '@juliushaertl/vue-richtext'
+import InputDiv from '../Base/InputDiv'
 import SimpleLink from '../../helpers/SimpleLink'
 
 export default {
 	name: 'PublicRegisterModal',
 
 	components: {
-		ButtonDiv,
 		SimpleLink,
 		InputDiv,
 		Modal,
 		RichText,
+		VueButton,
 	},
 
 	data() {
diff --git a/src/js/components/SideBar/SideBarTabConfiguration.vue b/src/js/components/SideBar/SideBarTabConfiguration.vue
index cb81fdb8..fd3ccafc 100644
--- a/src/js/components/SideBar/SideBarTabConfiguration.vue
+++ b/src/js/components/SideBar/SideBarTabConfiguration.vue
@@ -74,21 +74,29 @@
 			<ConfigShowResults @change="writePoll" />
 		</ConfigBox>
 
-		<ButtonDiv :icon="isPollArchived ? 'icon-history' : 'icon-category-app-bundles'"
-			:title="isPollArchived ? t('polls', 'Restore poll') : t('polls', 'Archive poll')"
-			@click="toggleArchive()" />
-
-		<ButtonDiv v-if="isPollArchived"
-			icon="icon-delete"
-			class="error"
-			:title="t('polls', 'Delete poll')"
-			@click="deletePoll()" />
+		<div class="delete-area">
+			<VueButton @click="toggleArchive()">
+				<template #icon>
+					<RestorePollIcon v-if="isPollArchived" />
+					<ArchivePollIcon v-else />
+				</template>
+				{{ isPollArchived ? t('polls', 'Restore poll') : t('polls', 'Archive poll') }}
+			</VueButton>
+
+			<VueButton v-if="isPollArchived" type="error" @click="deletePoll()">
+				<template #icon>
+					<DeletePollIcon />
+				</template>
+				{{ t('polls', 'Delete poll') }}
+			</VueButton>
+		</div>
 	</div>
 </template>
 
 <script>
 import { mapGetters, mapState } from 'vuex'
 import { showError } from '@nextcloud/dialogs'
+import { Button as VueButton } from '@nextcloud/vue'
 import moment from '@nextcloud/moment'
 import ConfigBox from '../Base/ConfigBox'
 import ConfigAllowComment from '../Configuration/ConfigAllowComment'
@@ -102,8 +110,11 @@ import ConfigShowResults from '../Configuration/ConfigShowResults'
 import ConfigTitle from '../Configuration/ConfigTitle'
 import ConfigUseNo from '../Configuration/ConfigUseNo'
 import ConfigVoteLimit from '../Configuration/ConfigVoteLimit'
+
 import { writePoll } from '../../mixins/writePoll'
+
 import SpeakerIcon from 'vue-material-design-icons/Bullhorn.vue'
+import DeletePollIcon from 'vue-material-design-icons/Delete.vue'
 import DescriptionIcon from 'vue-material-design-icons/TextBox.vue'
 import PollConfigIcon from 'vue-material-design-icons/Wrench.vue'
 import LockedIcon from 'vue-material-design-icons/Lock.vue'
@@ -111,19 +122,24 @@ import UnlockedIcon from 'vue-material-design-icons/LockOpenVariant.vue'
 import ShowResultsIcon from 'vue-material-design-icons/Monitor.vue'
 import HideResultsUntilClosedIcon from 'vue-material-design-icons/MonitorLock.vue'
 import ShowResultsNeverIcon from 'vue-material-design-icons/MonitorOff.vue'
+import RestorePollIcon from 'vue-material-design-icons/Recycle.vue'
+import ArchivePollIcon from 'vue-material-design-icons/Archive.vue'
 
 export default {
 	name: 'SideBarTabConfiguration',
 
 	components: {
+		ArchivePollIcon,
+		DeletePollIcon,
 		DescriptionIcon,
-		ShowResultsIcon,
-		HideResultsUntilClosedIcon,
-		ShowResultsNeverIcon,
 		LockedIcon,
-		UnlockedIcon,
+		HideResultsUntilClosedIcon,
 		PollConfigIcon,
+		RestorePollIcon,
+		ShowResultsIcon,
+		ShowResultsNeverIcon,
 		SpeakerIcon,
+		UnlockedIcon,
 		ConfigBox,
 		ConfigAllowComment,
 		ConfigAllowMayBe,
@@ -136,6 +152,7 @@ export default {
 		ConfigTitle,
 		ConfigUseNo,
 		ConfigVoteLimit,
+		VueButton,
 	},
 
 	mixins: [writePoll],
@@ -178,3 +195,11 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss">
+.delete-area {
+	display: flex;
+	gap: 8px;
+	justify-content: space-between;
+}
+</style>
diff --git a/src/js/components/VoteTable/VoteColumn.vue b/src/js/components/VoteTable/VoteColumn.vue
index b509378b..82f1bd30 100644
--- a/src/js/components/VoteTable/VoteColumn.vue
+++ b/src/js/components/VoteTable/VoteColumn.vue
@@ -24,8 +24,6 @@
 	<div :class="['vote-column', { 'confirmed' : option.confirmed && closed }]">
 		<VoteTableHeaderItem :option="option" :view-mode="viewMode" />
 
-		<!-- <Confirmation v-if="option.confirmed && closed" :option="option" /> -->
-
 		<Counter v-if="acl.allowSeeResults"
 			:show-maybe="!!poll.allowMaybe"
 			:option="option" />
@@ -42,33 +40,39 @@
 			:avatar-size="24"
 			class="owner" />
 
-		<Actions v-if="acl.allowEdit && closed" class="action confirm">
-			<ActionButton v-if="closed"
-				:icon="option.confirmed ? 'icon-polls-confirmed' : 'icon-polls-unconfirmed'"
+		<div v-if="acl.allowEdit && closed" class="action confirm">
+			<VueButton v-tooltip="option.confirmed ? t('polls', 'Unconfirm option') : t('polls', 'Confirm option')"
+				type="tertiary"
 				@click="confirmOption(option)">
-				{{ option.confirmed ? t('polls', 'Unconfirm option') : t('polls', 'Confirm option') }}
-			</ActionButton>
-		</Actions>
+				<template #icon>
+					<UnconfirmIcon v-if="option.confirmed" :size="20" />
+					<ConfirmIcon v-else :size="20" />
+				</template>
+			</VueButton>
+		</div>
 	</div>
 </template>
 
 <script>
 import { mapState, mapGetters } from 'vuex'
-import { Actions, ActionButton } from '@nextcloud/vue'
+import { Button as VueButton } from '@nextcloud/vue'
 import Counter from '../Options/Counter'
 import VoteItem from './VoteItem'
 import VoteTableHeaderItem from './VoteTableHeaderItem'
 import { confirmOption } from '../../mixins/optionMixins'
+import UnconfirmIcon from 'vue-material-design-icons/CheckboxMarkedOutline.vue'
+import ConfirmIcon from 'vue-material-design-icons/CheckboxBlankOutline.vue'
 
 export default {
 	name: 'VoteColumn',
 	components: {
-		Actions,
-		ActionButton,
-		CalendarPeek: () => import('../Calendar/CalendarPeek'),
+		ConfirmIcon,
+		UnconfirmIcon,
 		Counter,
 		VoteTableHeaderItem,
 		VoteItem,
+		VueButton,
+		CalendarPeek: () => import('../Calendar/CalendarPeek'),
 		OptionItemOwner: () => import('../Options/OptionItemOwner'),
 	},
 
diff --git a/src/js/main.js b/src/js/main.js
index b378ce9a..e5597de6 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -34,7 +34,6 @@ import { generateFilePath } from '@nextcloud/router'
 import { Tooltip } from '@nextcloud/vue'
 
 import UserItem from './components/User/UserItem'
-import ButtonDiv from './components/Base/ButtonDiv'
 
 /* eslint-disable-next-line camelcase, no-undef */
 __webpack_nonce__ = btoa(getRequestToken())
@@ -53,7 +52,6 @@ Vue.prototype.getCurrentUser = getCurrentUser
 // eslint-disable-next-line vue/match-component-file-name
 Vue.component('UserItem', UserItem)
 // eslint-disable-next-line vue/match-component-file-name
-Vue.component('ButtonDiv', ButtonDiv)
 Vue.directive('tooltip', Tooltip)
 
 Vue.use(ClickOutside)
diff --git a/src/js/userSettings.js b/src/js/userSettings.js
index 6fb73bf1..c14e64cb 100644
--- a/src/js/userSettings.js
+++ b/src/js/userSettings.js
@@ -29,7 +29,6 @@ import { getRequestToken } from '@nextcloud/auth'
 import { generateFilePath } from '@nextcloud/router'
 
 import UserSettingsPage from './views/UserSettingsPage'
-import ButtonDiv from './components/Base/ButtonDiv'
 
 /* eslint-disable-next-line camelcase, no-undef */
 __webpack_nonce__ = btoa(getRequestToken())
@@ -42,7 +41,6 @@ Vue.prototype.n = translatePlural
 // Vue.config.debug = process.env.NODE_ENV !== 'production'
 // Vue.config.devTools = process.env.NODE_ENV !== 'production'
 // eslint-disable-next-line vue/match-component-file-name
-Vue.component('ButtonDiv', ButtonDiv)
 
 Vue.use(Vuex)
 
diff --git a/src/js/views/Administration.vue b/src/js/views/Administration.vue
index cb308b1b..366d8218 100644
--- a/src/js/views/Administration.vue
+++ b/src/js/views/Administration.vue
@@ -84,11 +84,13 @@
 				<h2>{{ t('polls', 'Do you want to take over this poll?') }}</h2>
 				<div>{{ t('polls', '{username} will get notified.', {username: currentPoll.owner.displayName}) }}</div>
 				<div class="modal__buttons">
-					<ButtonDiv :title="t('polls', 'No')"
-						@click="takeOverModal = false" />
-					<ButtonDiv :primary="true"
-						:title="t('polls', 'Yes')"
-						@click="takeOverPoll()" />
+					<VueButton @click="takeOverModal = false">
+						{{ t('polls', 'No') }}
+					</VueButton>
+
+					<VueButton type="primary" @click="takeOverPoll()">
+						{{ t('polls', 'Yes') }}
+					</VueButton>
 				</div>
 			</div>
 		</Modal>
@@ -101,11 +103,13 @@
 					{{ t('polls', '{username} will get notified.', {username: currentPoll.owner.displayName}) }}
 				</div>
 				<div class="modal__buttons">
-					<ButtonDiv :title="t('polls', 'No')"
-						@click="deleteModal = false" />
-					<ButtonDiv :primary="true"
-						:title="t('polls', 'Yes')"
-						@click="deletePoll()" />
+					<VueButton @click="deleteModal = false">
+						{{ t('polls', 'No') }}
+					</VueButton>
+
+					<VueButton type="primary" @click="deletePoll()">
+						{{ t('polls', 'Yes') }}
+					</VueButton>
 				</div>
 			</div>
 		</Modal>
@@ -116,7 +120,7 @@
 import { mapGetters } from 'vuex'
 import { showError } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
-import { Actions, ActionButton, AppContent, EmptyContent, Modal } from '@nextcloud/vue'
+import { Actions, ActionButton, AppContent, Button as VueButton, EmptyContent, Modal } from '@nextcloud/vue'
 import sortBy from 'lodash/sortBy'
 import HeaderBar from '../components/Base/HeaderBar'
 
@@ -130,6 +134,7 @@ export default {
 		EmptyContent,
 		HeaderBar,
 		Modal,
+		VueButton,
 		LoadingOverlay: () => import('../components/Base/LoadingOverlay'),
 		PollItem: () => import('../components/PollList/PollItem'),
 	},