From 597ca3029f9fd508bdcd2a6a7434d380155f285f Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Tue, 15 Oct 2019 15:07:30 +0300
Subject: [PATCH] improve html and css for collapse-button

---
 webapp/components/Comment/Comment.vue | 30 ++++++++++++++++++++-------
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/webapp/components/Comment/Comment.vue b/webapp/components/Comment/Comment.vue
index 35c6205ae..ca7d1f741 100644
--- a/webapp/components/Comment/Comment.vue
+++ b/webapp/components/Comment/Comment.vue
@@ -43,12 +43,15 @@
         />
       </div>
       <div v-else>
-        <content-viewer :content="commentContent" class="padding-left text-align-left" />
-        <span v-if="isLongComment" class="show-more-or-less">
-          <a class="padding-left" @click="isCollapsed = !isCollapsed">
-            {{ isCollapsed ? $t('comment.show.more') : $t('comment.show.less') }}
-          </a>
-        </span>
+        <content-viewer :content="commentContent" class="comment-content" />
+        <button
+          v-if="isLongComment"
+          type="button"
+          class="collapse-button"
+          @click="isCollapsed = !isCollapsed"
+        >
+          {{ isCollapsed ? $t('comment.show.more') : $t('comment.show.less') }}
+        </button>
       </div>
       <ds-space margin-bottom="small" />
     </ds-card>
@@ -172,11 +175,24 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.collapse-button {
+  // TODO: move this to css resets
+  font-family: inherit;
+  font-size: inherit;
+  border: none;
+  background-color: transparent;
+
+  float: right;
+  padding: 0 16px 16px 16px;
+  color: $color-primary;
+  cursor: pointer;
+}
+
 .float-right {
   float: right;
 }
 
-.padding-left {
+.comment-content {
   padding-left: 40px;
 }