Style the file send view main page

src/components/Chat.vue

@@ -237,6 +237,7 @@
       v-on:add-files="(files) => addAttachments(files)"
       :batch="uploadBatch"
       v-on:close="() => { uploadBatch = undefined }"
+      :title="room.name"
     />
 
     <MessageOperationsBottomSheet ref="messageOperationsSheet">

src/components/file_mode/SendAttachmentsLayout.vue

@@ -6,11 +6,13 @@
       icon="arrow_back"
       size="default"
       elevation="0"
-      color="black"
       @click.stop="close"
       :disabled="backButtonDisabled"
+      variant="flat"
     ></v-btn>
 
+    <div class="title">{{ title }}</div>
+
     <!-- ATTACHMENT SELECTION MODE -->
     <template v-if="status == mainStatuses.SELECTING">
       <div
@@ -28,14 +30,6 @@
           </div>
         </div>
         <ThumbnailView v-else :file="currentAttachment" />
-        <v-btn
-          class="info-button clickable"
-          icon="information"
-          size="default"
-          elevation="0"
-          color="black"
-          @click.stop="showInformation"
-        ></v-btn>
       </div>
       <div class="file-drop-thumbnail-container">
         <v-tooltip location="top" v-for="(attachment, index) in batch.attachments" :key="index">
@@ -44,7 +38,11 @@
               <template v-slot:badge><span v-bind="props">&nbsp;</span></template>
               <div
                 :class="{ 'file-drop-thumbnail': true, clickable: true, current: index == currentItemIndex }"
-                @click="() => { currentItemIndex = index }"
+                @click="
+                  () => {
+                    currentItemIndex = index;
+                  }
+                "
               >
                 <v-img v-if="attachment && attachment.src" :src="attachment.src" />
                 <div
@@ -64,33 +62,38 @@
         </div>
       </div>
       <div class="file-drop-input-container">
-        <v-textarea
-          ref="input"
-          full-width
-          variant="solo"
-          flat
-          auto-grow
-          v-model="messageInput"
-          no-resize
-          class="input-area-text"
-          rows="1"
-          :placeholder="$t('file_mode.add_a_message')"
-          hide-details
-          background-color="transparent"
-          v-on:keydown.enter.prevent="
-            () => {
-              sendAll();
-            }
-          "
-        />
+        <div class="file-drop-input-container__input">
+          <v-text-field
+            ref="input"
+            full-width
+            variant="solo"
+            flat
+            v-model="messageInput"
+            no-resize
+            class="input-area-text"
+            rows="1"
+            :placeholder="$t('file_mode.add_a_message')"
+            hide-details
+            color="white"
+            background-color="transparent"
+          />
+          <v-btn
+            class="send-button clickable"
+            icon="arrow_upward"
+            size="default"
+            elevation="0"
+            color="black"
+            @click.stop="sendAll"
+            :disabled="sendButtonDisabled"
+          ></v-btn>
+        </div>
         <v-btn
-          class="send-button clickable"
-          icon="arrow_upward"
+          class="info-button clickable"
+          icon="$vuetify.icons.ic_share_settings"
           size="default"
           elevation="0"
           color="black"
-          @click.stop="sendAll"
-          :disabled="sendButtonDisabled"
+          @click.stop="showInformation"
         ></v-btn>
       </div>
     </template>
@@ -142,7 +145,6 @@
             full-width
             variant="solo"
             flat
-            auto-grow
             v-model="messageInput"
             no-resize
             class="input-area-text"
@@ -206,8 +208,8 @@ export default defineComponent({
     defaultRootMessageText: {
       type: String,
       default: function () {
-        return ""
-      }
+        return "";
+      },
     },
 
     showBackButton: {
@@ -217,6 +219,13 @@ export default defineComponent({
       },
     },
 
+    title: {
+      type: String,
+      default: function () {
+        return "";
+      },
+    },
+
     batch: {
       type: Object,
       default: function () {
@@ -254,13 +263,6 @@ export default defineComponent({
       }
       return undefined;
     },
-    currentItemHasImagePreview() {
-      return (
-        this.currentItemIndex >= 0 &&
-        this.currentItemIndex < this.batch.attachments.length &&
-        this.batch.attachments[this.currentItemIndex].src
-      );
-    },
   },
   watch: {
     "batch.attachments": {