Merge pull request #358 from Moonlight-Panel/v2_UiFixes

Added some ui fixes

Moonlight/Shared/Components/Forms/SmartForm.razor

@@ -15,7 +15,7 @@
         {
             if (ErrorMessages.Any())
             {
-                <div class="alert alert-danger bg-danger text-white p-10 mb-3">
+                <div class="alert alert-danger bg-danger text-white p-10 mb-3 rounded-0">
                     @foreach (var msg in ErrorMessages)
                     {
                         @(msg)

Moonlight/Shared/Components/Navigations/CommunityNavigation.razor

@@ -10,7 +10,7 @@
                 <i class="bx bx-sm bx-envelope text-gray-500"></i>
             </div>
             <div class="d-flex align-items-center flex-row-fluid flex-wrap">
-                <a href="/community" class="text-gray-800 fs-5 fw-bold text-active-primary @(Index == 0 ? "active" : "")">Announcements</a>
+                <a href="/community" class="text-gray-800 fs-5 fw-bold text-active-primary @(Index == 0 ? "active" : "")">News</a>
             </div>
         </div>
         <div class="separator separator-dashed my-4"></div>

Moonlight/Shared/Components/Partials/SoftErrorHandler.razor

@@ -33,7 +33,7 @@ else
     {
         foreach (var errorMessage in ErrorMessages)
         {
-            <div class="alert alert-danger bg-danger text-white p-3 mb-5 fw-bold">
+            <div class="alert alert-danger bg-danger text-white p-3 mb-5 fw-semibold fs-5 text-center">
                 @errorMessage
             </div>
         }
@@ -65,6 +65,10 @@ else
         {
             Exception = exception;
             Crashed = true;
+
+            var username = IdentityService.IsSignedIn ? IdentityService.CurrentUser.Username : "Guest";
+            Logger.Warn($"A crash occured in the view of the user '{username}'");
+            Logger.Warn(exception);
         }
         
         Recover();

Moonlight/Shared/Components/TicketPopup/TicketPopupMain.razor

@@ -3,7 +3,7 @@
     <CascadingValue Value="this">
         @if (ViewIndex == 0)
             {
-                <button @onclick="() => SetViewIndex(1)" class="btn btn-lg btn-icon btn-rounded-circle btn-white border border-warning" style="pointer-events: all">
+                <button @onclick="() => SetViewIndex(1)" class="btn btn-lg btn-icon btn-rounded-circle bg-secondary btn-white border border-2 border-warning" style="pointer-events: all">
                     <i class="bx bg-lg bx-chat"></i>
                 </button>
             }

Moonlight/Shared/Components/TicketPopup/TicketPopupOverview.razor

@@ -51,6 +51,11 @@
                             <span class="text-muted fs-7 mb-1">@(Formatter.FormatAgoFromDateTime(ticket.CreatedAt))</span>
                         </div>
                     </a>
+
+                    if (ticket.Id != Tickets.Last().Id)
+                    {
+                        <span class="separator"></span>
+                    }
                 }
             }
             else

Moonlight/Shared/Views/Account/Index.razor

@@ -29,12 +29,12 @@
                         </div>
                     </div>
                     <div class="col ms-n2">
-                        <h4 class="mb-1">
+                        <div class="mb-1 fs-5 fw-semibold">
                             Your avatar
-                        </h4>
+                        </div>
-                        <small class="text-body-secondary">
+                        <div class="fs-7">
-                            PNG or JPG no bigger than 1000px wide and tall.
+                            PNG or JPG no bigger than 1000px wide and tall
-                        </small>
+                        </div>
                     </div>
                 </div>
             </div>

Moonlight/Shared/Views/Account/Payments.razor

@@ -16,7 +16,7 @@
 
 <div class="row mt-5">
     <div class="col-md-6 col-12">
-        <div class="card">
+        <div class="card h-100">
             <div class="card-header">
                 <h3 class="card-title">Redeem gift code</h3>
             </div>
@@ -29,7 +29,7 @@
         </div>
     </div>
     <div class="col-md-6 col-12">
-        <div class="card card-body">
+        <div class="card card-body h-100">
             <div class="row d-flex justify-content-center">
                 <input @bind="Amount" class="form-control form-control-lg form-control-solid-bg w-50 text-center fs-2" placeholder="Enter amount to add to your account"/>
             </div>
@@ -61,7 +61,7 @@
         <LazyLoader @ref="LazyLoader" Load="Load">
             <Table TableItem="Transaction"
                    Items="Transactions"
-                   PageSize="50"
+                   PageSize="10"
                    TableClass="table table-row-bordered table-row-gray-100 align-middle gs-0 gy-3 fs-6"
                    TableHeadClass="fw-bold text-muted">
                 <Column TableItem="Transaction" Title="" Field="@(x => x.Id)" Sortable="false" Filterable="false" Width="10%">

Moonlight/Shared/Views/Account/Security.razor

@@ -1,6 +1,5 @@
 @page "/account/security"
 
-@using Moonlight.App.Models.Forms
 @using Moonlight.App.Services
 @using Moonlight.App.Services.Users
 @using OtpNet
@@ -17,6 +16,9 @@
 <div class="row mt-5">
     <div class="col-md-6 col-12">
         <div class="card">
+            <div class="card-header">
+                <span class="card-title">Change password</span>
+            </div>
             <SmartForm Model="PasswordForm" OnValidSubmit="OnPasswordSubmit">
                 <div class="card-body">
                     <div class="row">
@@ -45,20 +47,25 @@
     <div class="col-md-6 col-12">
         @if (IdentityService.Flags[UserFlag.TotpEnabled])
         {
-            <div class="card card-body fs-6">
+            <div class="card h-100">
+                <div class="card-header">
                     <span class="card-title text-success">Your account is secured with 2fa</span>
-                <div class="text-center">
+                </div>
+                <div class="card-body"></div>
+                <div class="card-footer">
+                    <div class="text-end">
                         <ConfirmButton OnClick="OnDisable2FA" Text="Disable 2fa" CssClasses="btn btn-danger" WorkingText="Disabling"/>
                     </div>
                 </div>
+            </div>
         }
         else if (!IdentityService.Flags[UserFlag.TotpEnabled] && IdentityService.CurrentUser.TotpKey != null)
         {
-            <div class="card">
+            <div class="card h-100">
-                <div class="card-body fs-6">
+                <div class="card-header">
-                    <p>
+                    <span class="card-title">Scan the qr code and enter the code generated by the app you have scanned it in</span>
-                        Scan the qr code and enter the code generated by the app you have scanned it in
+                </div>
-                    </p>
+                <div class="card-body fs-5">
                     @{
                         QRCodeGenerator qrGenerator = new QRCodeGenerator();
 
@@ -73,16 +80,16 @@
                         var base64 = Convert.ToBase64String(qrCodeAsPngByteArr);
                     }
                     <div class="text-center">
-                        <img src="data:image/png;base64,@(base64)" alt="QR Code" class="img-fluid">
+                        <img src="data:image/png;base64,@(base64)" alt="QR Code" class="img-fluid rounded" style="max-height: 25vh">
                     </div>
-                    <div class="mt-3 text-center">
+                    <div class="mt-5 text-center">
-                        <span class="h3">@(IdentityService.CurrentUser.TotpKey)</span>
+                        <span class="fs-4 fw-semibold">@(IdentityService.CurrentUser.TotpKey)</span>
                     </div>
                 </div>
                 <div class="card-footer">
                     <SmartForm Model="CodeForm" OnValidSubmit="On2FASubmit">
                         <div class="input-group">
-                            <input @bind="CodeForm.Code" type="number" class="form-control"/>
+                            <input @bind="CodeForm.Code" type="number" placeholder="Enter generated code..." class="form-control"/>
                             <button type="submit" class="btn btn-primary">Enable 2fa</button>
                         </div>
                     </SmartForm>
@@ -91,8 +98,11 @@
         }
         else
         {
-            <div class="card card-body fs-6">
+            <div class="card h-100">
+                <div class="card-header">
                     <span class="card-title">Secure your account using 2fa</span>
+                </div>
+                <div class="card-body fs-5">
                     <p>
                         Make sure you have installed one of the following apps on your smartphone and continue
                     </p>
@@ -105,10 +115,13 @@
                     <br/>
                     <a href="https://support.1password.com/one-time-passwords/" target="_blank">1Password</a>
                     <br/>
-                <div class="text-center">
+                </div>
+                <div class="card-footer">
+                    <div class="text-end">
                         <WButton OnClick="OnSeed2FA" Text="Enable 2fa" CssClasses="btn btn-primary"/>
                     </div>
                 </div>
+            </div>
         }
     </div>
 </div>

Moonlight/Shared/Views/Admin/Sys/Diagnose.razor

@@ -10,14 +10,18 @@
 
 <AdminSysNavigation Index="3" />
 
-<Tooltip Color="danger">
+<div class="row">
+    <div class="col-md-6 col-12">
+        <Tooltip Color="danger">
             Dont share this file with random people.
             We do our best to clear this file from sensitive information but it can still contain some.
             Its safe to share with official moonlight panel developers
-</Tooltip>
+        </Tooltip>
         
-<div class="card card-body mt-5">
+        <div class="card card-body mt-5">
             <WButton Text="Generate diagnose" OnClick="GenerateDiagnose" />
+        </div>
+    </div>
 </div>
 
 @code

Moonlight/Shared/Views/Admin/Sys/Settings.razor

@@ -18,7 +18,7 @@
 else
 {
     <div class="card mt-5">
-        <div class="card-header">
+        <div class="card-header border-bottom-0">
             @{
                 string title;
 

Moonlight/Shared/Views/Index.razor

@@ -11,28 +11,44 @@
 </div>
 
 <div class="mt-5 row">
-    <div class="col-md-3 col-12">
+    <div class="col-md-3 col-12 mb-3">
-        <div href="#" class="card card-body text-center fs-6">
+        <a href="/store" class="card border-hover-primary border-2 h-100">
+            <img class="card-img-top p-5" src="/svg/shopping.svg" alt="Shopping" style="max-height: 20vh"/>
+            <div class="card-body text-center fs-5">
                 <div class="mb-5">
                     Do you want to order new services? Are you searching for our service specifications and prices?
                 </div>
-            <a href="/store" class="btn btn-primary">Go to store</a>
             </div>
+        </a>
     </div>
-    <div class="col-md-3 col-12">
+    <div class="col-md-3 col-12 mb-3">
-        <div href="#" class="card card-body text-center fs-6">
+        <a href="/services" class="card border-hover-primary border-2 h-100">
+            <img class="card-img-top p-5" src="/svg/manageServices.svg" alt="Manage services" style="max-height: 20vh"/>
+            <div class="card-body text-center fs-5">
                 <div class="mb-5">
-                Do you want to order new services? Are you searching for our service specifications and prices?
+                    You want to see your services? Do you want to renew them? Or just take a quick look?
-            </div>
-            <a href="/store" class="btn btn-primary">Go to store</a>
                 </div>
             </div>
-    <div class="col-md-3 col-12">
+        </a>
-        <div href="#" class="card card-body text-center fs-6">
+    </div>
+    <div class="col-md-3 col-12 mb-3">
+        <a href="/community" class="card border-hover-primary border-2 h-100">
+            <img class="card-img-top p-5" src="/svg/news.svg" alt="News" style="max-height: 20vh"/>
+            <div class="card-body text-center fs-5">
                 <div class="mb-5">
-                Do you want to order new services? Are you searching for our service specifications and prices?
+                    You want to see the latest news? Do you want to join our events? Having a project to share with the community?
                 </div>
-            <a href="/store" class="btn btn-primary">Go to store</a>
             </div>
+        </a>
+    </div>
+    <div class="col-md-3 col-12 mb-3">
+        <a href="/account" class="card border-hover-primary border-2 h-100">
+            <img class="card-img-top p-5" src="/svg/userSettings.svg" alt="User settings" style="max-height: 20vh"/>
+            <div class="card-body text-center fs-5">
+                <div class="mb-5">
+                    Searching for you settings? Want to add balance to your account? Do you want to change your profile picture?
+                </div>
+            </div>
+        </a>
     </div>
 </div>

Moonlight/Shared/Views/Store/Order.razor

@@ -4,7 +4,6 @@
 @using Moonlight.App.Services
 @using Moonlight.App.Database.Entities.Store
 @using Moonlight.App.Repositories
-@using Moonlight.App.Services.ServiceManage
 
 @inject ConfigService ConfigService
 @inject StoreService StoreService
@@ -33,17 +32,17 @@
                 </div>
                 <div class="row mb-5">
                     <div class="col-md-4 col-12">
-                        <a @onclick="() => SetDurationMultiplier(1)" @onclick:preventDefault href="#" class="card card-body bg-hover-secondary text-center @(DurationMultiplier == 1 ? "border border-info" : "")">
+                        <a @onclick="() => SetDurationMultiplier(1)" @onclick:preventDefault href="#" class="card card-body bg-hover-secondary text-center @(DurationMultiplier == 1 ? "border border-2 border-info" : "")">
                             <h4 class="fw-bold mb-0 align-middle">@(SelectedProduct.Duration * 1) days</h4>
                         </a>
                     </div>
                     <div class="col-md-4 col-12">
-                        <a @onclick="() => SetDurationMultiplier(2)" @onclick:preventDefault href="#" class="card card-body bg-hover-secondary text-center @(DurationMultiplier == 2 ? "border border-info" : "")">
+                        <a @onclick="() => SetDurationMultiplier(2)" @onclick:preventDefault href="#" class="card card-body bg-hover-secondary text-center @(DurationMultiplier == 2 ? "border border-2 border-info" : "")">
                             <h4 class="fw-bold mb-0 align-middle">@(SelectedProduct.Duration * 2) days</h4>
                         </a>
                     </div>
                     <div class="col-md-4 col-12">
-                        <a @onclick="() => SetDurationMultiplier(3)" @onclick:preventDefault href="#" class="card card-body bg-hover-secondary text-center @( DurationMultiplier == 3 ? "border border-info" : "")">
+                        <a @onclick="() => SetDurationMultiplier(3)" @onclick:preventDefault href="#" class="card card-body bg-hover-secondary text-center @( DurationMultiplier == 3 ? "border border-2 border-info" : "")">
                             <h4 class="fw-bold mb-0 align-middle">@(SelectedProduct.Duration * 3) days</h4>
                         </a>
                     </div>