From a9f7147f5be577017c975fe9aacaa939f09a965f Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Mon, 13 Jun 2022 13:36:10 +0100
Subject: [PATCH] feat(frontend): minor styling fiddles

---
 .../components/comments/CommentEditor.vue     |  4 +-
 .../comments/CommentThreadViewer.vue          | 50 ++++++++--------
 .../components/viewer/CommentAddOverlay.vue   | 57 ++++++++++---------
 3 files changed, 59 insertions(+), 52 deletions(-)

diff --git a/packages/frontend/src/main/components/comments/CommentEditor.vue b/packages/frontend/src/main/components/comments/CommentEditor.vue
index 4d0bc56b3..492ec632d 100644
--- a/packages/frontend/src/main/components/comments/CommentEditor.vue
+++ b/packages/frontend/src/main/components/comments/CommentEditor.vue
@@ -48,7 +48,9 @@ export default {
       }
     },
     placeholder() {
-      return this.addingComment ? 'Your comment...' : 'Reply...'
+      return this.addingComment
+        ? 'Your comment... (press enter to send)'
+        : 'Reply... (press enter to send)'
     }
   },
   methods: {
diff --git a/packages/frontend/src/main/components/comments/CommentThreadViewer.vue b/packages/frontend/src/main/components/comments/CommentThreadViewer.vue
index c64128255..faf036ef5 100644
--- a/packages/frontend/src/main/components/comments/CommentThreadViewer.vue
+++ b/packages/frontend/src/main/components/comments/CommentThreadViewer.vue
@@ -80,9 +80,10 @@
         <div v-if="canReply" class="d-flex">
           <comment-editor
             v-model="replyText"
+            adding-comment
             max-height="300px"
-            class="mb-2 elevation-5"
-            :style="{ width: $vuetify.breakpoint.xs ? '100%' : '300px' }"
+            class="mb-2 elevation-5 rounded-xl"
+            :style="{ width: $vuetify.breakpoint.xs ? '100%' : '290px' }"
             :disabled="loadingReply"
             @input="debTypingUpdate"
             @submit="addReply()"
@@ -96,38 +97,39 @@
         </div>
         <div ref="replyinput" class="d-flex justify-space-between align-center">
           <v-btn
-            v-tooltip="'Send comment (press enter)'"
-            :disabled="loadingReply"
-            class="mouse elevation-5 primary"
+            v-show="canArchiveThread"
+            v-tooltip="'Marks this thread as archived.'"
+            class="white--text ml-2"
+            small
             icon
-            dark
-            large
-            @click="addReply()"
+            depressed
+            color="error"
+            @click="showArchiveDialog = true"
           >
-            <v-icon dark small>mdi-send</v-icon>
+            <v-icon small>mdi-delete-outline</v-icon>
           </v-btn>
-          <div>
+          <div class="pr-5">
             <v-btn
-              v-tooltip="'Share this comment as a link!'"
-              class="rounded-xl elevation-5"
-              small
-              depressed
+              v-tooltip="'Copy comment url to clipboard'"
+              :disabled="loadingReply"
+              class="mouse elevation-5 background mr-3"
+              icon
+              large
               @click="copyCommentLinkToClip()"
             >
-              <v-icon small class="mr-2">mdi-share-variant</v-icon>
-              Share
+              <v-icon dark small>mdi-share-variant</v-icon>
             </v-btn>
+
             <v-btn
-              v-show="canArchiveThread"
-              v-tooltip="'Marks this thread as archived.'"
-              class="white--text ml-2"
-              small
+              v-tooltip="'Send comment (press enter)'"
+              :disabled="loadingReply"
+              class="mouse elevation-5 primary"
               icon
-              depressed
-              color="error"
-              @click="showArchiveDialog = true"
+              dark
+              large
+              @click="addReply()"
             >
-              <v-icon small>mdi-delete-outline</v-icon>
+              <v-icon dark small>mdi-send</v-icon>
             </v-btn>
           </div>
         </div>
diff --git a/packages/frontend/src/main/components/viewer/CommentAddOverlay.vue b/packages/frontend/src/main/components/viewer/CommentAddOverlay.vue
index f3e3afd2c..d5238f539 100644
--- a/packages/frontend/src/main/components/viewer/CommentAddOverlay.vue
+++ b/packages/frontend/src/main/components/viewer/CommentAddOverlay.vue
@@ -45,24 +45,15 @@
                   v-model="commentText"
                   adding-comment
                   style="width: 300px"
-                  class="elevation-5"
+                  class="elevation-5 rounded-xl"
                   max-height="300px"
                   @submit="addComment()"
                 />
               </div>
-              <div v-if="$loggedIn() && canComment" class="d-flex mt-2 mouse">
-                <v-btn
-                  v-tooltip="'Send comment (press enter)'"
-                  :disabled="loading"
-                  icon
-                  dark
-                  fab
-                  small
-                  class="primary mr-2 elevation-4"
-                  @click="addComment()"
-                >
-                  <v-icon dark small>mdi-send</v-icon>
-                </v-btn>
+              <div
+                v-if="$loggedIn() && canComment"
+                class="d-flex mt-2 mouse justify-end"
+              >
                 <template v-for="reaction in $store.state.commentReactions">
                   <v-btn
                     :key="reaction"
@@ -79,6 +70,18 @@
                     </span>
                   </v-btn>
                 </template>
+                <v-btn
+                  v-tooltip="'Send comment (press enter)'"
+                  :disabled="loading"
+                  icon
+                  dark
+                  fab
+                  small
+                  class="primary mr-2 elevation-10"
+                  @click="addComment()"
+                >
+                  <v-icon dark small>mdi-send</v-icon>
+                </v-btn>
               </div>
               <div
                 v-if="!canComment && $loggedIn()"
@@ -121,7 +124,7 @@
               v-model="commentText"
               adding-comment
               style="width: 100%"
-              class="elevation-5"
+              class="elevation-5 rounded-xl"
               max-height="60vh"
               :disabled="loading"
               @submit="addComment()"
@@ -132,18 +135,6 @@
             class="my-2 d-flex justify-center"
             style="position: relative"
           >
-            <v-btn
-              v-tooltip="'Send comment (press enter)'"
-              :disabled="loading"
-              icon
-              dark
-              fab
-              small
-              class="primary mr-2 elevation-4"
-              @click="addComment()"
-            >
-              <v-icon dark small>mdi-send</v-icon>
-            </v-btn>
             <v-btn
               v-if="!$loggedIn()"
               block
@@ -168,6 +159,18 @@
                 </span>
               </v-btn>
             </template>
+            <v-btn
+              v-tooltip="'Send comment (press enter)'"
+              :disabled="loading"
+              icon
+              dark
+              fab
+              small
+              class="primary mr-2 elevation-4"
+              @click="addComment()"
+            >
+              <v-icon dark small>mdi-send</v-icon>
+            </v-btn>
           </div>
         </v-dialog>
       </div>