From ca6edb507fd9efcc9e446a90135849ed908c01ab Mon Sep 17 00:00:00 2001
From: raccoon254 <tomsteve187@gmail.com>
Date: Sun, 19 May 2024 17:02:33 +0300
Subject: [PATCH] Fixed send message and attachments creation input

---
 app/Models/User.php                           |  3 --
 resources/css/app.css                         |  2 +-
 .../livewire/send-message-input.blade.php     | 52 ++++++++++---------
 resources/views/messages.blade.php            | 32 ++++++++----
 4 files changed, 51 insertions(+), 38 deletions(-)

diff --git a/app/Models/User.php b/app/Models/User.php
index 94c4cd3..c9a3ae8 100644
--- a/app/Models/User.php
+++ b/app/Models/User.php
@@ -44,9 +44,6 @@ public function referrals(): HasMany
         return $this->hasMany(Referral::class, 'referrer_id');
     }
 
-    //https://api.dicebear.com/8.x/pixel-art/svg?seed={{md5($this->email)}}
-    // https://mighty.tools/mockmind-api/content/cartoon/' . $this->id. '.jpg
-
     public function getAvatarAttribute(): string
     {
         return 'https://api.dicebear.com/8.x/avataaars/svg?seed=' . $this->name;
diff --git a/resources/css/app.css b/resources/css/app.css
index 2937141..ff6b1a2 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -57,5 +57,5 @@ input:-webkit-autofill {
 }
 
 .message-input{
-    @apply w-full rounded-md px-12 border-2 border-gray-300 p-3 ring-1 ring-gray-300 ring-offset-1 transition-all duration-300 ease-in-out focus:border-blue-300 focus:outline-none bg-gray-200 text-gray-800;
+    @apply w-full rounded-md px-4 border border-gray-300 p-3 transition-all duration-300 ease-in-out text-gray-800;
 }
diff --git a/resources/views/livewire/send-message-input.blade.php b/resources/views/livewire/send-message-input.blade.php
index e9bdfea..8f476c9 100644
--- a/resources/views/livewire/send-message-input.blade.php
+++ b/resources/views/livewire/send-message-input.blade.php
@@ -1,26 +1,29 @@
-<div class="flex flex-col">
+<div class="flex relative flex-col">
     @if (count($attachments) > 0)
-        <div class="flex w-full p-2 pt-3">
+        <div class="flex w-full mb-2 absolute -top-20">
             @foreach($attachments as $attachment)
-                <div
-                    class="flex relative flex-col items-center justify-center w-16 h-16 bg-blue-200 rounded-md mr-2">
-                    @if (in_array($attachment->getMimeType(), ['image/jpeg', 'image/png']))
-                        <img src="{{ $attachment->temporaryUrl() }}" alt="Attachment"
-                             class="w-16 h-16 object-cover rounded-md">
-                    @elseif ($attachment->getMimeType() == 'image/svg+xml')
-                        <i class="fas fa-file-image text-4xl text-gray-500"></i>
-                    @elseif ($attachment->getMimeType() == 'application/zip')
-                        <i class="fas fa-file-archive text-4xl text-gray-500"></i>
-                    @else
-                        <i class="fas fa-file text-4xl text-gray-500"></i>
-                    @endif
-                    <!-- Displaying the first five characters of the file name -->
-                    <span class="text-xs mt-1">
-                                    {{ substr($attachment->getClientOriginalName(), 0, 5) }}{{ strlen($attachment->getClientOriginalName()) > 5 ? '...' : '' }}
-                                </span>
+                <div class="bg-white relative p-1 mr-2 flex flex-col items-center justify-center w-16 h-16 rounded-md">
+                    <div
+                        class="flex relative overflow-clip flex-col items-center justify-center w-full h-12 bg-blue-200 rounded-[4px]">
+                        @if (in_array($attachment->getMimeType(), ['image/jpeg', 'image/png']))
+                            <img src="{{ $attachment->temporaryUrl() }}" alt="Attachment"
+                                 class="w-full h-12 object-cover rounded-md">
+                        @elseif ($attachment->getMimeType() == 'image/svg+xml')
+                            <i class="fas fa-file-image text-2xl text-gray-500"></i>
+                        @elseif ($attachment->getMimeType() == 'application/zip')
+                            <i class="fas fa-file-archive text-2xl text-gray-500"></i>
+                        @else
+                            <i class="fas fa-file text-2xl text-gray-500"></i>
+                        @endif
+                    </div>
+                    <!-- Displaying the first 6 characters of the file name -->
+                    <span class="text-[10px] mt-1">
+                        {{ substr($attachment->getClientOriginalName(), 0, 6) }}{{ strlen($attachment->getClientOriginalName()) > 5 ? '...' : '' }}
+                    </span>
+
                     <button wire:click="removeAttachment('{{ $attachment->getClientOriginalName() }}')"
-                            class="absolute btn-warning btn btn-xs btn-circle top-0 right-1 text-red-500 hover:text-red-700 -mt-2 -mr-3">
-                        <i class="fas fa-times"></i>
+                            class="absolute top-0 right-1 -mt-2 -mr-3 bg-amber-500 text-white center rounded-full p-2 h-5 w-5">
+                        <i class="fas text-sm fa-times"></i>
                     </button>
                 </div>
             @endforeach
@@ -31,25 +34,26 @@ class="absolute btn-warning btn btn-xs btn-circle top-0 right-1 text-red-500 hov
         @error('attachments.*') <span class="error m-1">{{ $message }}</span> @enderror
         @error('newMessage') <span class="error m-1">{{ $message }}</span> @enderror
     </div>
-    <div class="px-2 relative flex items-center">
+    <div class="relative flex gap-2 items-center">
         <label class="w-full">
             <input id="messageInput" wire:model="newMessage" wire:keydown.enter="sendMessage"
                    class="message-input"
                    type="text" placeholder="Type your message...">
         </label>
         <!-- Hidden file input -->
-        <input wire:model.live="attachments" type="file" id="fileInput" multiple style="display: none;">
+        <input wire:model.live="attachments" type="file" id="fileInput" multiple style="display: none;" accept="image/*, application/pdf, application/zip, application/x-rar-compressed application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document">
         <!-- Clip icon for opening file dialog -->
         <button
-            class="btn absolute left-3 btn-ghost ring-1 ring-primary text-primary top[50%] transform[-50%] btn-sm btn-circle ml-2"
+            class="btn absolute right-16 btn-sm mr-2 btn-ghost btn-circle bg-gray-100 text-primary bottom-2 transform[-50%] ml-2"
             onclick="document.getElementById('fileInput').click();">
             <i class="fas fa-paperclip"></i>
         </button>
+
         <!-- Send message button -->
         <button wire:click="sendMessage"
                 wire:loading.class.remove="btn-primary"
                 wire:loading.class="btn-ghost"
-                class="btn absolute right-3 btn-primary top[50%] transform[-50%] btn-sm btn-circle mr-2">
+                class="btn right-3 btn-primary ring-1 ring-offset-2 border rounded-md btn-square mr-2">
             <i wire:target="sendMessage" wire:loading.class="hidden" class="fas fa-paper-plane"></i>
             <span wire:loading wire:target="sendMessage"
                   class="loading loading-spinner text-primary loading-sm"></span>
diff --git a/resources/views/messages.blade.php b/resources/views/messages.blade.php
index 0a2024b..16558d4 100644
--- a/resources/views/messages.blade.php
+++ b/resources/views/messages.blade.php
@@ -9,17 +9,30 @@
     <div class="max-w-7xl relative h-full mx-auto">
         <div class="flex sm:mx-3 gap-4 lg:mx-4 h-full flex-row">
             <div class="flex gap-2 bg-white w-full rounded-lg">
-                <div class="w-2/3 h-[87vh] bg-gray-300 m-2 rounded-md">
+                <div class="w-2/3 h-[87vh] bg-gray-100 m-2 rounded-md">
                     @if($selectedUser)
                         <div class="flex flex-col gap-3 p-3 h-full">
-                            <div class="flex gap-3 items-center">
-                                <div class="flex-shrink-0">
-                                    <img src="{{ $selectedUser->profile_photo }}" alt="{{ $selectedUser->name }}"
-                                         class="w-12 h-12 rounded-full">
-                                </div>
-                                <div class="flex-grow">
-                                    <h1 class="text-gray-800 font-semibold">{{ $selectedUser->name }}</h1>
-                                </div>
+                            <div class="flex gap-3 border-b pb-3 items-center">
+                                @if($selectedUser->role == 'client')
+                                    <div class="flex-shrink-0">
+                                        <img src="{{ $selectedUser->profile_photo }}" alt="{{ $selectedUser->name }}"
+                                             class="w-10 h-10 bg-white rounded-full">
+                                    </div>
+                                    <div class="flex-grow">
+                                        <h1 class="text-gray-800 font-semibold">{{ $selectedUser->name }}</h1>
+                                    </div>
+                                @else
+                                    <div class="flex-shrink-0">
+                                        <div class="div w-10 h-10 bg-white center rounded-full">
+                                            <x-application-logo class="w-4 h-4"/>
+                                        </div>
+                                    </div>
+                                    <div class="flex-grow">
+                                        <h1 class="text-gray-800 font-semibold">
+                                            ScholarSpace Support
+                                        </h1>
+                                    </div>
+                                @endif
                             </div>
                             <div class="h-full flex flex-col overflow-y-auto">
                                 @if ($messages->count() == 0)
@@ -60,7 +73,6 @@ class="absolute text-black/80 right-5 top-[50%] transform translate-x-1/2 -trans
                             </div>
                         </div>
                         <div class="h-[76vh] flex overflow-y-auto flex-col gap-3 rounded-lg">
-
                             <!-- All users -->
                             @foreach($clients as $user)
                                 <div class="flex gap-3 cursor-pointer p-2 bg-gray-100 rounded-lg"