Use new base-button, rename CSS class

webapp/assets/_new/icons/svgs/level-down.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>level-down</title>
+<path d="M5 5h17v19.063l4.281-4.281 1.438 1.438-6 6-0.719 0.688-0.719-0.688-6-6 1.438-1.438 4.281 4.281v-17.063h-15v-2z"></path>
+</svg>

webapp/components/Comment/Comment.vue

@@ -54,14 +54,15 @@
         </button>
       </div>
       <ds-space margin-bottom="small" />
-      <ds-button
+      <base-button
         :title="this.$t('post.comment.answer')"
         icon="level-down"
         @click.prevent="reply"
         v-scroll-to="'.editor'"
-        class="answerbutton"
+        circle
+        class="reply-button"
         size="small"
-      ></ds-button>
+      ></base-button>
     </ds-card>
   </div>
 </template>
@@ -75,6 +76,7 @@ import ContentViewer from '~/components/Editor/ContentViewer'
 import HcCommentForm from '~/components/CommentForm/CommentForm'
 import CommentMutations from '~/graphql/CommentMutations'
 import scrollToAnchor from '~/mixins/scrollToAnchor.js'
+import BaseButton from '~/components/_new/generic/BaseButton/BaseButton'
 
 export default {
   mixins: [scrollToAnchor],
@@ -94,6 +96,7 @@ export default {
     ContentMenu,
     ContentViewer,
     HcCommentForm,
+    BaseButton,
   },
   props: {
     routeHash: { type: String, default: () => '' },
@@ -204,11 +207,11 @@ export default {
   float: right;
 }
 
-.answerbutton {
+.reply-button {
   float: right;
   top: 0px;
 }
-.answerbutton:after {
+.reply-button:after {
   clear: both;
 }