From 1a08b38fdb0a8e90c53368372770369c9f82b28a Mon Sep 17 00:00:00 2001
From: N-Pex <npexdev@gmail.com>
Date: Thu, 3 Jul 2025 15:45:49 +0200
Subject: [PATCH] Style the file send view main page

---
 src/assets/css/sendattachments.scss           | 97 +++++++++++++------
 src/assets/icons/ic_share_settings.vue        | 11 +++
 src/components/Chat.vue                       |  1 +
 .../file_mode/SendAttachmentsLayout.vue       | 88 +++++++++--------
 4 files changed, 126 insertions(+), 71 deletions(-)
 create mode 100644 src/assets/icons/ic_share_settings.vue

diff --git a/src/assets/css/sendattachments.scss b/src/assets/css/sendattachments.scss
index 51a8cde..bf63e1f 100644
--- a/src/assets/css/sendattachments.scss
+++ b/src/assets/css/sendattachments.scss
@@ -1,8 +1,9 @@
 @use "@/assets/css/variables" as *;
 
 $background: #000000;
-$backgroundSection: #181719;
+$backgroundSection: #333333E5;
 $backgroundHilite: #383739;
+$backgroundDark: #242424;
 $text: #ffffff;
 $hiliteColor: #4642f1;
 
@@ -15,13 +16,29 @@ $hiliteColor: #4642f1;
   right: 0;
   bottom: 0;
   margin: 0;
+  padding: 0;
   background-color: $background;
   color: $text;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   text-align: center;
-  padding: 16px;
+
+  .title {
+    font-family: "Inter", sans-serif;
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 125%;
+    letter-spacing: 0.4px;
+    text-align: center;
+    vertical-align: bottom;
+    color: white;
+    flex: 0 0 50px;
+    background-color: $backgroundSection;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 
   .v-btn {
     font-family: "Inter", sans-serif;
@@ -45,24 +62,11 @@ $hiliteColor: #4642f1;
 
   .back-button {
     position: absolute;
-    top: 16px;
+    top: 8px;
     left: 16px;
     margin: 0;
     z-index: 1;
-  }
-
-  .info-button {
-    position: absolute;
-    top: 16px;
-    right: 16px;
-    margin: 0;
-    z-index: 1;
-  }
-
-  .send-button {
-    position: absolute;
-    top: 4px;
-    right: 4px;
+    background-color: transparent !important;
   }
 
   textarea {
@@ -73,7 +77,8 @@ $hiliteColor: #4642f1;
     color: rgba($text, 80%) !important;
   }
 
-  .send-attachments__selecting__current-item, .gallery-current-item {
+  .send-attachments__selecting__current-item,
+  .gallery-current-item {
     width: 100%;
     flex: 1 1 100%;
     background-color: $backgroundSection;
@@ -83,7 +88,7 @@ $hiliteColor: #4642f1;
       background-color: $backgroundHilite;
     }
 
-    border-radius: 19px;
+    //border-radius: 19px;
     overflow: hidden;
 
     .v-img {
@@ -102,9 +107,11 @@ $hiliteColor: #4642f1;
     }
   }
 
-  .file-drop-thumbnail-container, .gallery-thumbnail-container {
+  .file-drop-thumbnail-container,
+  .gallery-thumbnail-container {
     width: 100%;
-    padding: 13px 20px 15px 20px;
+    background-color: $backgroundSection;
+    padding: 16px 20px 24px 20px;
     flex: 0 0 74px;
     overflow-x: auto;
     overflow-y: hidden;
@@ -123,7 +130,7 @@ $hiliteColor: #4642f1;
     /* Firefox */
 
     .v-badge {
-      margin-right: 8px;
+      //margin-right: 8px;
     }
 
     .v-badge__badge {
@@ -145,7 +152,7 @@ $hiliteColor: #4642f1;
       height: 46px;
       border-radius: 9px;
       overflow: hidden;
-      background-color: #242424;
+      background-color: $backgroundDark;
       border: 2px solid white;
       display: inline-block;
       position: relative;
@@ -155,7 +162,7 @@ $hiliteColor: #4642f1;
       }
 
       &.noborder {
-        border: 2px solid transparent;
+        border: 2px solid $backgroundDark;
       }
 
       .v-img {
@@ -195,21 +202,49 @@ $hiliteColor: #4642f1;
     margin-top: 20px;
     padding: 16px 18px;
     background-color: $backgroundSection;
-    border-radius: 19px;
+    //border-radius: 19px;
   }
 
   .file-drop-input-container {
     flex: 1 1 auto;
+    width: 100%;
+    position: relative;
+    padding: 0 16px 16px 16px;
+    display: flex;
+    flex-direction: row;
+    background-color: $backgroundSection;
+
+    .file-drop-input-container__input {
+      background-color: $backgroundDark;
+      border-radius: 22px;
+      flex: 1 1 auto;
+      position: relative;
+      margin-right: 15px;
+      height: 42px;
+      overflow: hidden;
+    }
+
+    .send-button {
+      margin: 0;
+      padding: 0;
+      position: absolute;
+      top: 3px;
+      right: 3px;
+    }
+
+    .info-button {
+      background-color: $backgroundDark !important;
+      margin: 0;
+    }
+
   }
 
-  .file-drop-input-container,
   .file-drop-sending-input-container,
   .file-drop-sent-input-container {
     position: relative;
     width: 100%;
     min-height: 100px;
     background-color: $backgroundSection;
-    border-radius: 19px;
     display: flex;
     flex-direction: column;
 
@@ -229,10 +264,15 @@ $hiliteColor: #4642f1;
     flex: 0 0 auto;
     width: 100%;
     margin-bottom: 50px;
-    padding: 6px 8px;
+    //padding: 6px 8px;
     font-family: "Inter", sans-serif;
     font-weight: 300;
 
+    input {
+      color: white !important;
+      padding-right: 50px;
+    }
+
     .v-field {
       background-color: transparent !important;
     }
@@ -446,6 +486,7 @@ $hiliteColor: #4642f1;
 
   .c2pa-badge {
     overflow: hidden;
+
     .v-icon {
       width: 32px;
       height: 32px;
diff --git a/src/assets/icons/ic_share_settings.vue b/src/assets/icons/ic_share_settings.vue
new file mode 100644
index 0000000..96f2a19
--- /dev/null
+++ b/src/assets/icons/ic_share_settings.vue
@@ -0,0 +1,11 @@
+<template>
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M3 8L15 8M15 8C15 9.65686 16.3431 11 18 11C19.6569 11 21 9.65685 21 8C21 6.34315 19.6569 5 18 5C16.3431 5 15 6.34315 15 8ZM9 16L21 16M9 16C9 17.6569 7.65685 19 6 19C4.34315 19 3 17.6569 3 16C3 14.3431 4.34315 13 6 13C7.65685 13 9 14.3431 9 16Z"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>
diff --git a/src/components/Chat.vue b/src/components/Chat.vue
index f182959..7bf13fd 100644
--- a/src/components/Chat.vue
+++ b/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">
diff --git a/src/components/file_mode/SendAttachmentsLayout.vue b/src/components/file_mode/SendAttachmentsLayout.vue
index 175c857..859be62 100644
--- a/src/components/file_mode/SendAttachmentsLayout.vue
+++ b/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": {