Merge pull request #2407 from specklesystems/mike/web-450-improve-design-when-attaching-a-file

Fix: Improve comment/reply attachment styling

packages/frontend-2/components/form/file-upload/Progress.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col space-y-1">
+  <div class="flex flex-col space-y-2">
     <FormFileUploadProgressRow
       v-for="item in items"
       :key="item.id"

packages/frontend-2/components/form/file-upload/ProgressRow.vue

@@ -1,21 +1,18 @@
 <template>
-  <div class="bg-foundation rounded-4xl px-4 py-3 w-full max-w-full relative">
+  <div
+    class="bg-foundation rounded-lg p-2 pr-1 w-full max-w-full relative dark:bg-foundation-2"
+  >
     <div class="flex space-x-1 items-center">
-      <span class="truncate text-sm flex-shrink">{{ item.file.name }}</span>
-      <span class="text-tiny flex-grow text-foreground-2">
+      <span class="truncate text-xs pr-4 flex-1">{{ item.file.name }}</span>
+      <span class="text-tiny text-foreground-2">
         {{ prettyFileSize(item.file.size) }}
       </span>
-      <FormButton
-        color="danger"
-        size="xs"
-        rounded
-        hide-text
-        :icon-left="XMarkIcon"
-        @click="onDelete"
-      ></FormButton>
+      <button class="p-0.5 text-foreground hover:text-primary" @click="onDelete">
+        <XMarkIcon class="h-4 w-4" alt="delete" />
+      </button>
     </div>
     <div
-      v-if="item.progress > 0"
+      v-if="item.progress > 0 && item.progress < 100"
       :class="[' w-full mt-2', progressBarClasses]"
       :style="progressBarStyle"
     />

packages/frontend-2/components/viewer/anchored-point/NewThread.vue

@@ -48,24 +48,22 @@
               @submit="() => onSubmit()"
               @keydown="onKeyDownHandler"
             />
-            <div class="w-full flex justify-end p-2 space-x-2">
-              <div class="space-x-2">
-                <FormButton
-                  v-tippy="'Attach'"
-                  :icon-left="PaperClipIcon"
-                  hide-text
-                  text
-                  :disabled="isPostingNewThread"
-                  @click="trackAttachAndOpenFilePicker()"
-                />
-
-                <FormButton
-                  :icon-left="PaperAirplaneIcon"
-                  hide-text
-                  :loading="isPostingNewThread"
-                  @click="() => onSubmit()"
-                />
-              </div>
+            <div class="w-full flex p-2 justify-between">
+              <FormButton
+                v-tippy="'Attach'"
+                :icon-left="PaperClipIcon"
+                hide-text
+                text
+                class="sm:px-1"
+                :disabled="isPostingNewThread"
+                @click="trackAttachAndOpenFilePicker()"
+              />
+              <FormButton
+                :icon-left="PaperAirplaneIcon"
+                hide-text
+                :loading="isPostingNewThread"
+                @click="() => onSubmit()"
+              />
             </div>
           </div>
         </div>

packages/frontend-2/components/viewer/anchored-point/thread/Comment.vue

@@ -4,7 +4,7 @@
       <span>{{ absoluteDate }}</span>
       <span>{{ timeFromNow }}</span>
     </div> -->
-    <div class="xxx-bg-foundation sm:rounded-xl py-2 px-3 sm:p-4 w-full relative">
+    <div class="xxx-bg-foundation sm:rounded-xl p-4 sm:pb-2 w-full relative">
       <div class="flex items-center space-x-1">
         <UserAvatar :user="comment.author" class="mr-1" />
         <span class="grow truncate text-xs sm:text-sm font-bold">

packages/frontend-2/components/viewer/anchored-point/thread/CommentAttachments.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col w-full items-start">
+  <div class="flex flex-col w-full items-start pt-2">
     <CommonTextLink
       v-for="attachment in attachments.text.attachments || []"
       :key="attachment.id"
@@ -7,7 +7,7 @@
       size="sm"
       @click="() => onAttachmentClick(attachment)"
     >
-      <span class="truncate relative text-xs">
+      <span class="truncate relative text-xs pl-1">
         {{ attachment.fileName }}
       </span>
     </CommonTextLink>

packages/frontend-2/components/viewer/anchored-point/thread/NewReply.vue

@@ -1,17 +1,8 @@
 <!-- eslint-disable vuejs-accessibility/no-autofocus -->
 <template>
   <div
-    class="hidden sm:flex bg-foundation pl-4 pr-3 py-2 sm:py-1.5 rounded-b items-center w-full"
+    class="hidden sm:flex bg-foundation pl-4 pr-3 py-2 sm:p-1 sm:pb-3 rounded-b w-full relative flex flex-col"
   >
-    <FormButton
-      :icon-left="PaperClipIcon"
-      hide-text
-      text
-      :disabled="loading"
-      size="sm"
-      class="-ml-2 sm:mr-2"
-      @click="trackAttachAndOpenFilePicker()"
-    />
     <ViewerCommentsEditor
       ref="editor"
       v-model="commentValue"
@@ -21,15 +12,25 @@
       @keydown="onKeyDownHandler"
       @submit="onSubmit"
     />
-    <FormButton
-      :icon-left="PaperAirplaneIcon"
-      hide-text
-      size="sm"
-      color="invert"
-      :disabled="loading"
-      class="absolute right-6 sm:right-6"
-      @click="onSubmit"
-    />
+    <div class="flex justify-between items-center p-3 pb-0">
+      <FormButton
+        v-tippy="'Attach'"
+        :icon-left="PaperClipIcon"
+        hide-text
+        text
+        :disabled="loading"
+        color="card"
+        class="sm:px-0"
+        @click="trackAttachAndOpenFilePicker()"
+      />
+      <FormButton
+        :icon-left="PaperAirplaneIcon"
+        hide-text
+        color="default"
+        :disabled="loading"
+        @click="onSubmit"
+      />
+    </div>
   </div>
 </template>
 <script setup lang="ts">

packages/frontend-2/components/viewer/comments/Editor.vue

@@ -1,6 +1,8 @@
 <!-- eslint-disable vuejs-accessibility/no-autofocus -->
 <template>
-  <div class="flex flex-col w-full max-h-28 overflow-y-auto simple-scrollbar">
+  <div
+    class="flex flex-col w-full max-h-28 overflow-y-auto simple-scrollbar p-2 sm:pb-0"
+  >
     <FormFileUploadZone
       ref="uploadZone"
       v-slot="{ isDraggingFiles }"
@@ -13,7 +15,7 @@
       <CommonTiptapTextEditor
         v-model="doc"
         :class="[
-          'dark:bg-foundation-2 bg-neutral-100 sm:rounded-lg p-2 pr-12 border text-sm min-h-[60px]',
+          'dark:bg-foundation-2 bg-neutral-100 sm:rounded-lg p-2 pr-12 border text-sm min-h-[56px]',
           isDraggingFiles ? 'border-success' : 'border-transparent'
         ]"
         :autofocus="autofocus"