Same UI fix as last, but to authors. And added favicon

BookStoreApp.Blazor.Server.UI/Pages/Authors/Create.razor

@@ -4,50 +4,62 @@
 @attribute [Authorize(Roles = "Administrator")]
 
 <PageTitle>New Author</PageTitle>
+<BackButton backLink="/authors/"></BackButton>
 
-<div class="container">
-    <div class="row row-cols-auto">
-        <BackButton backLink="/authors/"></BackButton>
+<div class="container mt-4">
+    <div class="row mb-4 text-center">
         <h3>Create New Author</h3>
     </div>
 
-    <div>
-        <EditForm Model="AuthorModel" OnValidSubmit="HandleCreateAuthor">
-            <DataAnnotationsValidator />
-            <ValidationSummary />
+    <EditForm Model="AuthorModel" OnValidSubmit="HandleCreateAuthor" class="needs-validation">
+        <DataAnnotationsValidator />
+        <ValidationSummary class="mb-3" />
 
-            <div class="form-group">
+        <div class="row g-3">
+            <!-- First Name -->
+            <div class="col-md-6">
                 <label class="form-label" for="firstName">First Name</label>
-                <InputText class="form-control" @bind-Value="AuthorModel.FirstName" id="lastName" />
+                <InputText class="form-control" @bind-Value="AuthorModel.FirstName" id="firstName" />
                 <ValidationMessage For="@(() => AuthorModel.FirstName)" />
             </div>
 
-            <div class="form-group">
+            <!-- Last Name -->
+            <div class="col-md-6">
                 <label class="form-label" for="lastName">Last Name</label>
                 <InputText class="form-control" @bind-Value="AuthorModel.LastName" id="lastName" />
                 <ValidationMessage For="@(() => AuthorModel.LastName)" />
             </div>
+        </div>
 
-            <div class="form-group">
+        <div class="row g-3 mt-3">
+            <!-- Alias -->
+            <div class="col-12">
                 <label class="form-label" for="alias">Alias (AKA)</label>
                 <InputText class="form-control" @bind-Value="AuthorModel.Alias" id="alias" />
                 <ValidationMessage For="@(() => AuthorModel.Alias)" />
             </div>
+        </div>
 
-            <div class="form-group">
+        <div class="row g-3 mt-3">
+            <!-- Bio -->
+            <div class="col-12">
                 <label class="form-label" for="bio">Bio</label>
-                <InputTextArea class="form-control" @bind-Value="AuthorModel.Bio" id="bio" />
+                <InputTextArea class="form-control" @bind-Value="AuthorModel.Bio" id="bio" rows="4" />
                 <ValidationMessage For="@(() => AuthorModel.Bio)" />
             </div>
+        </div>
 
-            <button type="submit" class="mt-2 btn btn-primary">
-                <span class="oi oi-pencil" aria-hidden="true"></span> Create
-            </button>
-
-        </EditForm>
-    </div>
+        <div class="row mt-4">
+            <div class="col text-center">
+                <button type="submit" class="btn btn-primary">
+                    <span class="oi oi-pencil me-1" aria-hidden="true"></span> Create
+                </button>
+            </div>
+        </div>
+    </EditForm>
 </div>
 
+
 @code {
     private AuthorCreateDto AuthorModel = new();
 

BookStoreApp.Blazor.Server.UI/Pages/Authors/Index.razor

@@ -45,8 +45,8 @@ else
                 <thead class="table-dark">
                     <tr>
                         <th scope="col">First Name</th>
-                        <th scope="col">Last Name</th>
-                        <th scope="col">Alias</th>
+                        <th scope="col" class="text-center">Last Name</th>
+                        <th scope="col" class="text-center">Alias</th>
                         <th scope="col"></th>
                     </tr>
                 </thead>
@@ -55,23 +55,27 @@ else
                     {
                         <tr>
                             <td class="align-middle">@author.FirstName</td>
-                            <td class="align-middle">@author.LastName</td>
-                            <td class="align-middle">@author.Alias</td>
+                            <td class="align-middle text-center">@author.LastName</td>
+                            <td class="align-middle text-center">@author.Alias</td>
                             <td class="text-end">
                                 <a class="btn btn-primary m-1" href="/authors/details/@author.Id">
                                     <span class="oi oi-book" aria-hidden="true"></span> Details
                                 </a>
 
                                 <AuthorizeView Roles="Administrator">
-                                    <a class="btn btn-warning m-1" href="/authors/edit/@author.Id">
-                                        <span class="oi oi- oi-pencil" aria-hidden="true"></span> Edit
-                                    </a>
-
-                                    <button class="btn btn-danger m-1" @onclick=@(() => Delete(author.Id)) href="/authors/delete/@author.Id">
-                                        <span class="oi oi-delete" aria-hidden="true"></span> Delete
-                                    </button>
-
-
+                                    <MudMenu Class="pe-1">
+                                        <ActivatorContent>
+                                            <a>
+                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-three-dots-vertical" viewBox="0 0 16 16">
+                                                    <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0" />
+                                                </svg>
+                                            </a>
+                                        </ActivatorContent>
+                                        <ChildContent>
+                                            <MudMenuItem><a href="authors/edit/@author.Id">Edit</a></MudMenuItem>
+                                            <MudMenuItem OnClick="@(() => Delete(author.Id))" Class="text-danger">Delete</MudMenuItem>
+                                        </ChildContent>
+                                    </MudMenu>
                                 </AuthorizeView>
                             </td>
                         </tr>

BookStoreApp.Blazor.Server.UI/Pages/Authors/Index.razor.css

@@ -1,2 +1,7 @@
 body {
 }
+
+tr {
+    font-size: 1.2em;
+    font-weight: 500;
+}

BookStoreApp.Blazor.Server.UI/Pages/Books/Create.razor

@@ -2,7 +2,6 @@
 @attribute [Authorize(Roles = "Administrator")]
 
 <PageTitle>New Book</PageTitle>
-
 <BackButton backLink="/books/"></BackButton>
 
 <div class="container mt-4">

BookStoreApp.Blazor.Server.UI/Pages/Books/Index.razor

@@ -4,7 +4,6 @@
 
 <PageTitle>Books</PageTitle>
 
-
 @if (!response.Success)
 {
     <div class="alert alert-info">
@@ -41,8 +40,8 @@ else
                 <thead class="table-dark">
                     <tr>
                         <th scope="col">Image</th>
-                        <th scope="col">Title</th>
-                        <th scope="col">Price</th>
+                        <th scope="col" class="text-center">Title</th>
+                        <th scope="col" class="text-center">Price</th>
                         <th scope="col" class="text-center">Author</th>
                         <th scope="col"></th>
                     </tr>
@@ -51,11 +50,16 @@ else
                     @foreach (var book in BooksList)
                     {
                         <tr>
+                            @* Image *@
                             <td><img src="@book.Image" width="120" height="170" alt="@book.Title" /></td>
-                            <td>@book.Title</td>
-                            <td>@book.Price.ToString("C")</td>
-                            <td class="text-center"><a class="btn btn-link" href="/authors/details/@book.AuthorId">@book.AuthorName</a></td>
-                            <td class="text-end">
+                            @* Title *@
+                            <td class="text-center align-middle">@book.Title</td>
+                            @* Price *@
+                            <td class="text-center align-middle">@book.Price.ToString("C")</td>
+                            @* Author *@
+                            <td class="text-center align-middle"><a href="/authors/details/@book.AuthorId">@book.AuthorName</a></td>
+                            @* Actions *@
+                            <td class="text-end align-middle">
                                 <a class="btn btn-primary m-1" href="/books/details/@book.Id">
                                     <span class="oi oi-book" aria-hidden="true"></span> Details
                                 </a>
@@ -83,6 +87,8 @@ else
         </div>
     }
 }
+
+
 @code {
     private List<BookReadOnlyDto> BooksList;
     private Response<List<BookReadOnlyDto>> response = new Response<List<BookReadOnlyDto>> { Success = true };

BookStoreApp.Blazor.Server.UI/Pages/Books/Index.razor.css

@@ -20,3 +20,8 @@
     position: absolute;
 }
 
+tr {
+    font-size: 1.2em;
+    font-weight: 500;
+}
+

BookStoreApp.Blazor.Server.UI/Pages/Users/Login.razor

@@ -24,7 +24,7 @@
 
     <div class="d-flex gap-3 align-items-center">
         <div>
-            <SubmitButton loadingVar="_loading"></SubmitButton>
+            <SubmitButton IsLoading="_loading"></SubmitButton>
         </div>
         <div>
             <a class="btn btn-link" href="/users/register">Sign Up</a>

BookStoreApp.Blazor.Server.UI/Pages/_Layout.cshtml

@@ -8,6 +8,14 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <base href="~/" />
+
+    <link rel="icon" type="image/png" href="/favicon/favicon-96x96.png" sizes="96x96" />
+    <link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg" />
+    <link rel="shortcut icon" href="/favicon/favicon.ico" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
+    <meta name="apple-mobile-web-app-title" content="ReadReserve" />
+    <link rel="manifest" href="/favicon/site.webmanifest" />
+
     <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
     <link href="css/site.css" rel="stylesheet" />
     <link href="BookStoreApp.Blazor.Server.UI.styles.css" rel="stylesheet" />

BookStoreApp.Blazor.Server.UI/Shared/MainLayout.razor

@@ -30,7 +30,7 @@
             <Authorized>
 
                 @* Account *@
-                <MudMenu Class="pe-1">
+                <MudMenu Class="pe-1" ActivationEvent="@MouseEvent.MouseOver">
                     <ActivatorContent>
                         <MudAvatar T="string" Size="Size.Medium" Color="Color.Secondary">@context.User.Identity.Name.Substring(0,1).ToUpper()</MudAvatar>
                     </ActivatorContent>
@@ -47,13 +47,13 @@
     </MudAppBar>
 
     @* Side Nav *@
-    <MudDrawer @bind-Open="@_drawerOpen" Elevation="1"> 
+    <MudDrawer @bind-Open="@_drawerOpen" Elevation="1" Variant="DrawerVariant.Persistent"> 
         <NavMenu/>
     </MudDrawer>
 
     @* Main Content *@
     <MudMainContent>
-        <MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="body">
+        <MudContainer MaxWidth="MaxWidth.Large" Class="body">
             @Body
         </MudContainer>
     </MudMainContent>

BookStoreApp.Blazor.Server.UI/wwwroot/favicon/site.webmanifest

@@ -0,0 +1,21 @@
+{
+  "name": "MyWebSite",
+  "short_name": "MySite",
+  "icons": [
+    {
+      "src": "/favicon/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/favicon/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}