From a056e454fab34deaef958b08cf9736502b5f61e3 Mon Sep 17 00:00:00 2001
From: Daniel Balk <67603460+Daniel-Balk@users.noreply.github.com>
Date: Mon, 3 Apr 2023 23:52:03 +0200
Subject: [PATCH 1/3] typing indicator resize

---
 Moonlight/Shared/Views/Support.razor   | 6 +++---
 Moonlight/wwwroot/assets/css/utils.css | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/Moonlight/Shared/Views/Support.razor b/Moonlight/Shared/Views/Support.razor
index e674e422..994bc46a 100644
--- a/Moonlight/Shared/Views/Support.razor
+++ b/Moonlight/Shared/Views/Support.razor
@@ -105,9 +105,9 @@
                 {
                     <span class="mb-5 fs-5 d-flex flex-row">
                         <div class="wave me-3">
-                            <div class="dot"></div>
-                            <div class="dot"></div>
-                            <div class="dot"></div>
+                            <div class="dot h-5px w-5px" style="margin-right: 1px;"></div>
+                            <div class="dot h-5px w-5px" style="margin-right: 1px;"></div>
+                            <div class="dot h-5px w-5px"></div>
                         </div>
                         @if (typingUsers.Length > 1)
                         {
diff --git a/Moonlight/wwwroot/assets/css/utils.css b/Moonlight/wwwroot/assets/css/utils.css
index 872fe2c9..34777500 100644
--- a/Moonlight/wwwroot/assets/css/utils.css
+++ b/Moonlight/wwwroot/assets/css/utils.css
@@ -39,6 +39,6 @@ div.wave .dot:nth-child(3) {
         transform: initial;
     }
     30% {
-        transform: translateY(-15px);
+        transform: translateY(-8px);
     }
 }
\ No newline at end of file

From 7f10c7576991946f785689bae7c29e7b47e7d3a9 Mon Sep 17 00:00:00 2001
From: Daniel Balk <67603460+Daniel-Balk@users.noreply.github.com>
Date: Tue, 4 Apr 2023 00:43:26 +0200
Subject: [PATCH 2/3] new support chat layout

---
 .../Shared/Views/Admin/Support/View.razor     | 78 ++++++++++---------
 Moonlight/Shared/Views/Support.razor          | 38 +++++----
 2 files changed, 64 insertions(+), 52 deletions(-)

diff --git a/Moonlight/Shared/Views/Admin/Support/View.razor b/Moonlight/Shared/Views/Admin/Support/View.razor
index fcf77c66..3921a686 100644
--- a/Moonlight/Shared/Views/Admin/Support/View.razor
+++ b/Moonlight/Shared/Views/Admin/Support/View.razor
@@ -22,11 +22,11 @@
         {
             <div class="row">
                 <div class="d-flex flex-column flex-xl-row p-7">
-                    <div class="flex-lg-row-fluid me-xl-15 mb-20 mb-xl-0">
+                    <div class="flex-lg-row-fluid me-6 mb-20 mb-xl-0">
                         <div class="card">
                             <div class="card-body">
                                 <LazyLoader Load="LoadMessages">
-                                    <div class="scroll-y me-n5 pe-5" style="max-height: 65vh; display: flex; flex-direction: column-reverse;">
+                                    <div class="scroll-y me-n5 pe-5" style="max-height: 55vh; display: flex; flex-direction: column-reverse;">
                                         @foreach (var message in Messages)
                                         {
                                             if (message.IsSystem || message.IsSupport)
@@ -99,10 +99,10 @@
                                 @if (typingUsers.Any())
                                 {
                                     <span class="mb-5 fs-5 d-flex flex-row">
-                                        <div class="wave me-3">
-                                            <div class="dot"></div>
-                                            <div class="dot"></div>
-                                            <div class="dot"></div>
+                                        <div class="wave me-1">
+                                            <div class="dot h-5px w-5px" style="margin-right: 1px;"></div>
+                                            <div class="dot h-5px w-5px" style="margin-right: 1px;"></div>
+                                            <div class="dot h-5px w-5px"></div>
                                         </div>
                                         @if (typingUsers.Length > 1)
                                         {
@@ -118,52 +118,56 @@
                                         }
                                     </span>
                                 }
-                                <textarea @bind="Content" @oninput="OnTyping" class="form-control mb-3" rows="1" placeholder="Type a message">            
-                                </textarea>
+
                                 <div class="d-flex flex-stack">
-                                    <div class="d-flex align-items-center me-2">
-                                        <button class="btn btn-sm btn-icon btn-active-light-primary me-1" type="button">
-                                            <i class="bx bx-upload fs-3"></i>
-                                        </button>
-                                    </div>
-                                    <WButton Text="@(SmartTranslateService.Translate("Send"))"
-                                             WorkingText="@(SmartTranslateService.Translate("Sending"))"
-                                             CssClasses="btn-primary"
-                                             OnClick="Send">
-                                    </WButton>
+                                    <table class="w-100">
+                                        <tr>
+                                            <td class="align-top">
+                                                <button class="btn btn-sm btn-icon btn-active-light-primary me-1" type="button">
+                                                    <i class="bx bx-upload fs-3"></i>
+                                                </button>
+                                            </td>
+                                            <td class="w-100">
+                                                <textarea @bind="Content" @oninput="OnTyping" class="form-control mb-3 form-control-flush" rows="1" placeholder="Type a message">            
+                                                </textarea>
+                                            </td>
+                                            <td class="align-top">
+                                                <WButton Text="@(SmartTranslateService.Translate("Send"))"
+                                                         WorkingText="@(SmartTranslateService.Translate("Sending"))"
+                                                         CssClasses="btn-primary ms-2"
+                                                         OnClick="Send">
+                                                </WButton>
+                                            </td>
+                                        </tr>
+                                    </table>
                                 </div>
                             </div>
                         </div>
                     </div>
                     <div class="flex-column flex-lg-row-auto w-100 mw-lg-300px mw-xxl-350px">
-                        <div class="card p-10 mb-15">
-                            <h2 class="text-dark fw-bold mb-11">
+                        <div class="card p-10 mb-15 pb-8">
+                            <h2 class="text-dark fw-bold mb-2">
                                 <TL>User information</TL>
                             </h2>
 
-                            <div class="d-flex align-items-center mb-6">
-                                <spna class="fw-semibold text-gray-800 fs-5 m-0">
-                                    <TL>Firstname</TL>: @(User.FirstName)
-                                </spna>
+                            <div class="d-flex align-items-center mb-1">
+                                <span class="fw-semibold text-gray-800 fs-5 m-0">
+                                    <TL>Name</TL>: @(User.FirstName) @User.LastName
+                                </span>
                             </div>
-                            <div class="d-flex align-items-center mb-6">
-                                <spna class="fw-semibold text-gray-800 fs-5 m-0">
-                                    <TL>Lastname</TL>: @(User.LastName)
-                                </spna>
+                            <div class="d-flex align-items-center mb-2">
+                                <span class="fw-semibold text-gray-800 fs-5 m-0">
+                                    <TL>Email</TL>: <a href="/admin/users/view/@User.Id">@(User.Email)</a> 
+                                </span>
                             </div>
-                            <div class="d-flex align-items-center mb-6">
-                                <spna class="fw-semibold text-gray-800 fs-5 m-0">
-                                    <TL>Email</TL>: @(User.Email)
-                                </spna>
-                            </div>
-                            <div class="d-flex align-items-center mb-6">
-                                <spna class="fw-semibold text-gray-800 fs-5 m-0">
+                            <div class="align-items-center mt-3">
+                                <span class="fw-semibold text-gray-800 fs-5 m-0">
                                     <WButton Text="@(SmartTranslateService.Translate("Close ticket"))"
                                              WorkingText="@(SmartTranslateService.Translate("Closing"))"
-                                             CssClasses="btn-danger"
+                                             CssClasses="btn-danger float-end"
                                              OnClick="CloseTicket">
                                     </WButton>
-                                </spna>
+                                </span>
                             </div>
                         </div>
                     </div>
diff --git a/Moonlight/Shared/Views/Support.razor b/Moonlight/Shared/Views/Support.razor
index 994bc46a..6a573121 100644
--- a/Moonlight/Shared/Views/Support.razor
+++ b/Moonlight/Shared/Views/Support.razor
@@ -13,7 +13,7 @@
         <div class="card">
             <div class="card-body">
                 <LazyLoader Load="LoadMessages">
-                    <div class="scroll-y me-n5 pe-5" style="max-height: 65vh; display: flex; flex-direction: column-reverse;">
+                    <div class="scroll-y me-n5 pe-5" style="max-height: 55vh; display: flex; flex-direction: column-reverse;">
                         @foreach (var message in Messages)
                         {
                             if (message.IsSystem || message.IsSupport)
@@ -21,7 +21,7 @@
                                 <div class="d-flex justify-content-start mb-10 ">
                                     <div class="d-flex flex-column align-items-start">
                                         <div class="d-flex align-items-center mb-2">
-                                            <div class="symbol  symbol-35px symbol-circle ">
+                                            <div class="symbol symbol-35px symbol-circle ">
                                                 <img alt="Logo" src="@(ResourceService.Image("logo.svg"))">
                                             </div>
                                             <div class="ms-3">
@@ -104,7 +104,7 @@
                 @if (typingUsers.Any())
                 {
                     <span class="mb-5 fs-5 d-flex flex-row">
-                        <div class="wave me-3">
+                        <div class="wave me-1">
                             <div class="dot h-5px w-5px" style="margin-right: 1px;"></div>
                             <div class="dot h-5px w-5px" style="margin-right: 1px;"></div>
                             <div class="dot h-5px w-5px"></div>
@@ -120,19 +120,27 @@
                     </span>
                 }
 
-                <textarea @bind="Content" @oninput="OnTyping" class="form-control mb-3" rows="1" placeholder="Type a message">            
-                </textarea>
                 <div class="d-flex flex-stack">
-                    <div class="d-flex align-items-center me-2">
-                        <button class="btn btn-sm btn-icon btn-active-light-primary me-1" type="button">
-                            <i class="bx bx-upload fs-3"></i>
-                        </button>
-                    </div>
-                    <WButton Text="@(SmartTranslateService.Translate("Send"))"
-                             WorkingText="@(SmartTranslateService.Translate("Sending"))"
-                             CssClasses="btn-primary"
-                             OnClick="Send">
-                    </WButton>
+                    <table class="w-100">
+                        <tr>
+                            <td class="align-top">
+                                <button class="btn btn-sm btn-icon btn-active-light-primary me-1" type="button">
+                                    <i class="bx bx-upload fs-3"></i>
+                                </button>
+                            </td>
+                            <td class="w-100">
+                                <textarea @bind="Content" @oninput="OnTyping" class="form-control mb-3 form-control-flush" rows="1" placeholder="Type a message">            
+                                                                </textarea>
+                            </td>
+                            <td class="align-top">
+                                <WButton Text="@(SmartTranslateService.Translate("Send"))"
+                                         WorkingText="@(SmartTranslateService.Translate("Sending"))"
+                                         CssClasses="btn-primary ms-2"
+                                         OnClick="Send">
+                                </WButton>
+                            </td>
+                        </tr>
+                    </table>
                 </div>
             </div>
         </div>

From f5e98bf774b4a4046b07d353f38f0ca232c48890 Mon Sep 17 00:00:00 2001
From: Daniel Balk <67603460+Daniel-Balk@users.noreply.github.com>
Date: Tue, 4 Apr 2023 01:07:19 +0200
Subject: [PATCH 3/3] removed upload button | changed overview layout

---
 .../Shared/Views/Admin/Support/Index.razor    | 101 +++++++-----------
 .../Shared/Views/Admin/Support/View.razor     |   4 +-
 Moonlight/Shared/Views/Support.razor          |   4 +-
 3 files changed, 42 insertions(+), 67 deletions(-)

diff --git a/Moonlight/Shared/Views/Admin/Support/Index.razor b/Moonlight/Shared/Views/Admin/Support/Index.razor
index 7e1d8b1a..355a863a 100644
--- a/Moonlight/Shared/Views/Admin/Support/Index.razor
+++ b/Moonlight/Shared/Views/Admin/Support/Index.razor
@@ -14,45 +14,53 @@
     <LazyLoader @ref="LazyLoader" Load="Load">
         <div class="card">
             <div class="card-body">
-                <div class="d-flex flex-column flex-xl-row p-7">
+                <div class="d-flex flex-column flex-xl-row p-5 pb-0">
                     <div class="flex-lg-row-fluid me-xl-15 mb-20 mb-xl-0">
                         <div class="mb-0">
-                            <h1 class="text-dark mb-10">
+                            <h1 class="text-dark mb-6">
                                 <TL>Open tickets</TL>
                             </h1>
-                            <div class="mb-10">
+                            <div class="separator"></div>
+                            <div class="mb-5">
                                 @if (Users.Any())
                                 {
                                     foreach (var user in Users)
                                     {
-                                        <div class="d-flex mb-10">
-                                            <span class="svg-icon svg-icon-2x me-5 ms-n1 mt-2 svg-icon-success">
-                                                <i class="text-primary bx bx-md bx-message-dots"></i>
-                                            </span>
-    
-                                            <div class="d-flex flex-column">
-                                                <div class="d-flex align-items-center mb-2">
-                                                    <a href="/admin/support/view/@(user.Id)" class="text-dark text-hover-primary fs-4 me-3 fw-semibold">
-                                                        @(user.FirstName) @(user.LastName)
-                                                    </a>
-                                                </div>
-    
-                                                <span class="text-muted fw-semibold fs-6">
-                                                    @{
-                                                        var lastMessage = MessageCache.ContainsKey(user) ? MessageCache[user] : null;
-                                                    }
-    
-                                                    @if (lastMessage == null)
-                                                    {
-                                                        <TL>No message sent yet</TL>
-                                                    }
-                                                    else
-                                                    {
-                                                        @(lastMessage.Message)
-                                                    }
-                                                </span>
-                                            </div>
+                                        <div class="d-flex mt-3 mb-3 ms-2 me-2">
+                                            <table>
+                                                <tr>
+                                                    <td rowspan="2">
+                                                        <span class="svg-icon svg-icon-2x me-5 ms-n1 svg-icon-success">
+                                                            <i class="text-primary bx bx-md bx-message-dots"></i>
+                                                        </span>
+                                                    </td>
+                                                    <td>
+                                                        <a href="/admin/support/view/@(user.Id)" class="text-dark text-hover-primary fs-4 me-3 fw-semibold">
+                                                            @(user.FirstName) @(user.LastName)
+                                                        </a>
+                                                    </td>
+                                                </tr>
+                                                <tr>
+                                                    <td>
+                                                        <span class="text-muted fw-semibold fs-6">
+                                                            @{
+                                                                var lastMessage = MessageCache.ContainsKey(user) ? MessageCache[user] : null;
+                                                            }
+
+                                                            @if (lastMessage == null)
+                                                            {
+                                                                <TL>No message sent yet</TL>
+                                                            }
+                                                            else
+                                                            {
+                                                                @(lastMessage.Message)
+                                                            }
+                                                        </span>
+                                                    </td>
+                                                </tr>
+                                            </table>
                                         </div>
+                                        <div class="separator"></div>
                                     }
                                 }
                                 else
@@ -64,39 +72,6 @@
                             </div>
                         </div>
                     </div>
-    
-                    <div class="flex-column flex-lg-row-auto w-100 mw-lg-300px mw-xxl-350px">
-    
-                        <div class="card-rounded bg-primary bg-opacity-5 p-10 mb-15">
-                            <h2 class="text-dark fw-bold mb-11">
-                                <TL>Actions</TL>
-                            </h2>
-    
-                            <div class="d-flex align-items-center mb-10">
-                                <!--begin::Icon-->
-                                <i class="bi bi-file-earmark-text text-primary fs-1 me-5"></i>
-                                <!--end::SymIconbol-->
-    
-                                <!--begin::Info-->
-                                <div class="d-flex flex-column">
-                                    <h5 class="text-gray-800 fw-bold">Project Briefing</h5>
-    
-                                    <!--begin::Section-->
-                                    <div class="fw-semibold">
-                                        <!--begin::Desc-->
-                                        <span class="text-muted">Check out our</span>
-                                        <!--end::Desc-->
-    
-                                        <!--begin::Link-->
-                                        <a href="#" class="link-primary">Support Policy</a>
-                                        <!--end::Link-->
-                                    </div>
-                                    <!--end::Section-->
-                                </div>
-                                <!--end::Info-->
-                            </div>
-                        </div>
-                    </div>
                 </div>
             </div>
         </div>
diff --git a/Moonlight/Shared/Views/Admin/Support/View.razor b/Moonlight/Shared/Views/Admin/Support/View.razor
index 3921a686..d114d935 100644
--- a/Moonlight/Shared/Views/Admin/Support/View.razor
+++ b/Moonlight/Shared/Views/Admin/Support/View.razor
@@ -122,11 +122,11 @@
                                 <div class="d-flex flex-stack">
                                     <table class="w-100">
                                         <tr>
-                                            <td class="align-top">
+                                            <!--<td class="align-top">
                                                 <button class="btn btn-sm btn-icon btn-active-light-primary me-1" type="button">
                                                     <i class="bx bx-upload fs-3"></i>
                                                 </button>
-                                            </td>
+                                            </td>-->
                                             <td class="w-100">
                                                 <textarea @bind="Content" @oninput="OnTyping" class="form-control mb-3 form-control-flush" rows="1" placeholder="Type a message">            
                                                 </textarea>
diff --git a/Moonlight/Shared/Views/Support.razor b/Moonlight/Shared/Views/Support.razor
index 6a573121..9ef48cf8 100644
--- a/Moonlight/Shared/Views/Support.razor
+++ b/Moonlight/Shared/Views/Support.razor
@@ -123,11 +123,11 @@
                 <div class="d-flex flex-stack">
                     <table class="w-100">
                         <tr>
-                            <td class="align-top">
+                            <!--<td class="align-top">
                                 <button class="btn btn-sm btn-icon btn-active-light-primary me-1" type="button">
                                     <i class="bx bx-upload fs-3"></i>
                                 </button>
-                            </td>
+                            </td>-->
                             <td class="w-100">
                                 <textarea @bind="Content" @oninput="OnTyping" class="form-control mb-3 form-control-flush" rows="1" placeholder="Type a message">            
                                                                 </textarea>