feat: improve design of add product dialog

Author: manuel-rw

GrocyScanner.Core/GrocyScanner.Core.csproj

@@ -7,6 +7,7 @@
     </PropertyGroup>
 
     <ItemGroup>
+      <PackageReference Include="Humanizer" Version="2.14.1" />
       <PackageReference Include="Microsoft.AspNetCore.SignalR.Client" Version="7.0.15" />
       <PackageReference Include="Microsoft.Extensions.Http" Version="8.0.0" />
       <PackageReference Include="Microsoft.Extensions.Logging" Version="8.0.0" />

GrocyScanner.Service/GrocyScanner.Service.csproj

@@ -8,6 +8,7 @@
     </PropertyGroup>
 
     <ItemGroup>
+      <PackageReference Include="Humanizer" Version="2.14.1" />
       <PackageReference Include="Microsoft.AspNetCore.SignalR.Client" Version="7.0.15" />
       <PackageReference Include="Microsoft.Extensions.Http" Version="8.0.0" />
       <PackageReference Include="MudBlazor" Version="6.13.0" />

GrocyScanner.Service/Pages/Scanner.razor

@@ -121,8 +121,7 @@
         {
             CloseOnEscapeKey = false,
             DisableBackdropClick = true,
-            CloseButton = false,
-            FullScreen = true
+            CloseButton = false
         });
 
         Barcode = string.Empty;

GrocyScanner.Service/Shared/Components/AddProductDialog.razor

@@ -1,6 +1,7 @@
 @using GrocyScanner.Core.Models
 @using GrocyScanner.Core.Providers
 @using GrocyScanner.Core.GrocyClient
+@using Humanizer
 
 @inject IProductProvider ProductProvider
 @inject IGrocyClient GrocyClient
@@ -12,14 +13,14 @@
             <MudCard Outlined="true">
                 @if (!string.IsNullOrEmpty(Product.ImageUrl))
                 {
-                    <div class="py-2">
-                        <MudCardMedia Image="@Product.ImageUrl" Height="150" Style="background-size: contain;"></MudCardMedia>
+                    <div class="py-2 d-flex align-items-center justify-content-center">
+                        <img class="rounded" src="@Product.ImageUrl" height="150" alt="product image"/>
                     </div>
                 }
 
                 <MudCardContent>
-                    <MudText Typo="Typo.subtitle1" Color="Color.Info">@Product.Gtin</MudText>
-                    <MudText Typo="Typo.h4" Class="fw-bold">@Product.Name</MudText>
+                    <MudText Typo="Typo.h5" Class="fw-bold">@Product.Gtin</MudText>
+                    <MudText Typo="Typo.h4" Class="fw-bold">@Product.Name.Humanize()</MudText>
 
                     <MudDatePicker
                         Variant="Variant.Filled"
@@ -35,20 +36,17 @@
                         Label="Price"
                         Margin="Margin.Dense"
                         Variant="Variant.Filled"
-                        Min="0.0"/>
+                        Min="0.0"
+                        Max="int.MaxValue"/>
                     <MudNumericField
                         @bind-Value="FormAmount"
                         Format="N0"
                         Label="Amount"
                         Margin="Margin.Dense"
                         Variant="Variant.Filled"
-                        Min="0"
+                        Min="1"
                         Max="999"/>
                 </MudCardContent>
-
-                <MudCardActions>
-
-                </MudCardActions>
             </MudCard>
         }
         @if (IsLoading)