Material Design 3 UI Refresh (#25)

* Cards in index * Remove bottom border from switchers * Make "Edit note" link the same typo as the note text * Revert "Remove bottom border from switchers" This reverts commit aeca64f. * fix excessive text padding * fix property name * Worksheet cards * Update card paddings * adjust margins * Use shadow instead of border to distinguish header * Put text padding back * Adjust data point sizes and typos to be more consistent * Make everything even rounder for MD3 * Only apply shadow to switcher otherwise dialogs would look odd * More dialog padding to compensate for rounding * Card style dialogs for MD3 * tweaks * update packages
danielchalmers · Sep 29, 2024 · 2dd6bba · 2dd6bba
1 parent e86776b
commit 2dd6bba
Show file tree

Hide file tree

Showing 13 changed files with 150 additions and 134 deletions.
diff --git a/JournalApp.Tests/JournalApp.Tests.csproj b/JournalApp.Tests/JournalApp.Tests.csproj
@@ -6,10 +6,10 @@
 
   <ItemGroup>
     <PackageReference Include="bunit" Version="1.31.3" />
-    <PackageReference Include="FluentAssertions" Version="6.12.0" />
+    <PackageReference Include="FluentAssertions" Version="6.12.1" />
     <PackageReference Include="Microsoft.Extensions.Logging.Abstractions" Version="8.0.1" />
-    <PackageReference Include="Microsoft.NET.Test.Sdk" Version="17.11.0" />
-    <PackageReference Include="xunit" Version="2.9.0" />
+    <PackageReference Include="Microsoft.NET.Test.Sdk" Version="17.11.1" />
+    <PackageReference Include="xunit" Version="2.9.2" />
     <PackageReference Include="xunit.runner.visualstudio" Version="2.8.2" PrivateAssets="all">
       <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
     </PackageReference>

diff --git a/JournalApp/Components/DataPointView.razor b/JournalApp/Components/DataPointView.razor
@@ -27,7 +27,7 @@ else if (Point.Type == PointType.Sleep)
     <div class="d-flex align-center flex-grow-1" style="gap: 0.5em">
         <MudText Class="sleep-hours" Typo="Typo.caption">@((Point.SleepHours ?? 0).ToString("00.0"))</MudText>
         <MudIconButton Class="less-sleep" Icon="@Icons.Material.Rounded.Remove" aria-label="Less sleep" OnClick="DecrementSleep" Disabled="@(Point.SleepHours <= 0)" Size="Size.Small" />
-        <MudSlider T="decimal" @bind-NullableValue="Point.SleepHours" Variant="Variant.Filled" Min="0" Max="24" Step="0.5m" Size="Size.Large" />
+        <MudSlider T="decimal" @bind-NullableValue="Point.SleepHours" Variant="Variant.Filled" Min="0" Max="24" Step="0.5m" />
         <MudIconButton Class="more-sleep" Icon="@Icons.Material.Rounded.Add" aria-label="More sleep" OnClick="IncrementSleep" Disabled="@(Point.SleepHours >= 24)" Size="Size.Small" />
     </div>
 }
@@ -37,27 +37,27 @@ else if (Point.Type == PointType.Scale)
 }
 else if (Point.Type == PointType.LowToHigh)
 {
-    <MudToggleGroup T="int?" @bind-Value="Point.ScaleIndex" SelectionMode="SelectionMode.ToggleSelection" Color="Color.Primary" Size="Size.Small">
-        <MudToggleItem T="int?" Value="0"><MudText Typo="Typo.button">None</MudText></MudToggleItem>
-        <MudToggleItem T="int?" Value="1"><MudText Typo="Typo.button">Low</MudText></MudToggleItem>
-        <MudToggleItem T="int?" Value="3"><MudText Typo="Typo.button">Medium</MudText></MudToggleItem>
-        <MudToggleItem T="int?" Value="5"><MudText Typo="Typo.button">High</MudText></MudToggleItem>
+    <MudToggleGroup T="int?" @bind-Value="Point.ScaleIndex" SelectionMode="SelectionMode.ToggleSelection">
+        <MudToggleItem T="int?" Value="0">None</MudToggleItem>
+        <MudToggleItem T="int?" Value="1">Low</MudToggleItem>
+        <MudToggleItem T="int?" Value="3">Medium</MudToggleItem>
+        <MudToggleItem T="int?" Value="5">High</MudToggleItem>
     </MudToggleGroup>
 }
 else if (Point.Type == PointType.MildToSevere)
 {
-    <MudToggleGroup T="int?" @bind-Value="Point.ScaleIndex" SelectionMode="SelectionMode.ToggleSelection" Color="Color.Primary" Size="Size.Small">
-        <MudToggleItem T="int?" Value="0"><MudText Typo="Typo.button">None</MudText></MudToggleItem>
-        <MudToggleItem T="int?" Value="1"><MudText Typo="Typo.button">Mild</MudText></MudToggleItem>
-        <MudToggleItem T="int?" Value="3"><MudText Typo="Typo.button">Moderate</MudText></MudToggleItem>
-        <MudToggleItem T="int?" Value="5"><MudText Typo="Typo.button">Severe</MudText></MudToggleItem>
+    <MudToggleGroup T="int?" @bind-Value="Point.ScaleIndex" SelectionMode="SelectionMode.ToggleSelection">
+        <MudToggleItem T="int?" Value="0">None</MudToggleItem>
+        <MudToggleItem T="int?" Value="1">Mild</MudToggleItem>
+        <MudToggleItem T="int?" Value="3">Moderate</MudToggleItem>
+        <MudToggleItem T="int?" Value="5">Severe</MudToggleItem>
     </MudToggleGroup>
 }
 else if (Point.Type == PointType.Bool)
 {
-    <MudToggleGroup T="bool?" @bind-Value="Point.Bool" SelectionMode="SelectionMode.ToggleSelection" Color="Color.Primary" Size="Size.Small">
-        <MudToggleItem T="bool?" Value="false"><MudText Typo="Typo.button">No</MudText></MudToggleItem>
-        <MudToggleItem T="bool?" Value="true"><MudText Typo="Typo.button">Yes</MudText></MudToggleItem>
+    <MudToggleGroup T="bool?" @bind-Value="Point.Bool" SelectionMode="SelectionMode.ToggleSelection">
+        <MudToggleItem T="bool?" Value="false">No</MudToggleItem>
+        <MudToggleItem T="bool?" Value="true">Yes</MudToggleItem>
     </MudToggleGroup>
 }
 else if (Point.Type == PointType.Number)
@@ -86,9 +86,9 @@ else if (Point.Type == PointType.Note)
 else if (Point.Type == PointType.Medication)
 {
     <div class="d-flex flex-grow-1 justify-space-between align-center" style="gap: 0.5em">
-        <MudToggleGroup T="bool?" @bind-Value="Point.Bool" @bind-Value:after="OnMedicationTakenChanged" SelectionMode="SelectionMode.ToggleSelection" Color="Color.Primary" Size="Size.Small">
-            <MudToggleItem T="bool?" Value="false"><MudText Typo="Typo.button">No</MudText></MudToggleItem>
-            <MudToggleItem T="bool?" Value="true"><MudText Typo="Typo.button">Yes</MudText></MudToggleItem>
+        <MudToggleGroup T="bool?" @bind-Value="Point.Bool" @bind-Value:after="OnMedicationTakenChanged" SelectionMode="SelectionMode.ToggleSelection">
+            <MudToggleItem T="bool?" Value="false">No</MudToggleItem>
+            <MudToggleItem T="bool?" Value="true">Yes</MudToggleItem>
         </MudToggleGroup>
 
         <MudLink OnClick="EditDose" Disabled="@(string.IsNullOrWhiteSpace(Point.Category.MedicationUnit))">Edit dose</MudLink>

diff --git a/JournalApp/Components/EditCategoryDialog.razor b/JournalApp/Components/EditCategoryDialog.razor
@@ -5,20 +5,7 @@
 
 <MudDialog Class="category-dialog" DefaultFocus="DefaultFocus.FirstChild" OnBackdropClick="Submit">
     <TitleContent>
-        <div class="page-toolbar">
-            <MudIconButton Class="cancel-button" Icon="@Icons.Material.Rounded.Close" aria-label="Cancel" OnClick="Cancel" />
-
-            <MudText Typo="Typo.h6">@(Category == null ? "New" : "Edit") @(Group == "Medications" ? "medication" : "category")</MudText>
-
-            <MudSpacer />
-
-            @if (Category != null)
-            {
-                <MudIconButton Class="delete-button" Icon="@Icons.Material.Rounded.DeleteForever" aria-label="Delete forever" OnClick="Delete" />
-            }
-
-            <MudIconButton Class="submit-button" Icon="@Icons.Material.Rounded.Check" aria-label="Submit" OnClick="Submit" />
-        </div>
+        <MudText Typo="Typo.h6">@(Category == null ? "New" : "Edit") @(Group == "Medications" ? "medication" : "category")</MudText>
     </TitleContent>
 
     <DialogContent>
@@ -38,7 +25,7 @@
             }
             else if (Group == "Medications")
             {
-                <div class="d-flex flex-row flex-grow-1" style="gap: 1em">
+                <div class="d-flex flex-row flex-grow-1" style="gap: 0.75em">
                     <MudNumericField @bind-Value="MedicationDose" HideSpinButtons Label="Dose" MaxLength="6" Immediate />
 
                     <MudTextField @bind-Value="MedicationUnit" Label="Unit" MaxLength="8" Immediate />
@@ -52,6 +39,17 @@
                           Placeholder="@(Group == "Medications" ? "Start date, side effects, etc" : "Explanation, scoring criteria, etc")" />
         </MudForm>
     </DialogContent>
+
+    <DialogActions>
+        @if (Category != null)
+        {
+            <MudButton Class="delete-button" StartIcon="@Icons.Material.Rounded.DeleteForever" aria-label="Delete forever" OnClick="Delete">Delete</MudButton>
+        }
+
+        <MudButton Class="cancel-button" StartIcon="@Icons.Material.Rounded.Close" aria-label="Cancel" OnClick="Cancel">Cancel</MudButton>
+
+        <MudButton Class="submit-button" StartIcon="@Icons.Material.Rounded.Check" aria-label="Submit" OnClick="Submit">Submit</MudButton>
+    </DialogActions>
 </MudDialog>
 
 @code {

diff --git a/JournalApp/Components/EditDoseDialog.razor b/JournalApp/Components/EditDoseDialog.razor
@@ -5,15 +5,7 @@
 
 <MudDialog DefaultFocus="DefaultFocus.FirstChild" OnBackdropClick="Submit">
     <TitleContent>
-        <div class="page-toolbar">
-            <MudIconButton Class="cancel-button" Icon="@Icons.Material.Rounded.Close" aria-label="Cancel" OnClick="Cancel" />
-
-            <MudText Typo="Typo.h6">Edit day's dose</MudText>
-
-            <MudSpacer />
-
-            <MudIconButton Class="submit-button" Icon="@Icons.Material.Rounded.Check" aria-label="Submit" OnClick="Submit" />
-        </div>
+        <MudText Typo="Typo.h6">Edit day's dose</MudText>
     </TitleContent>
 
     <DialogContent>
@@ -34,6 +26,12 @@
             }
         </MudForm>
     </DialogContent>
+
+    <DialogActions>
+        <MudButton Class="cancel-button" StartIcon="@Icons.Material.Rounded.Close" aria-label="Cancel" OnClick="Cancel">Cancel</MudButton>
+
+        <MudButton Class="submit-button" StartIcon="@Icons.Material.Rounded.Check" aria-label="Submit" OnClick="Submit">Submit</MudButton>
+    </DialogActions>
 </MudDialog>
 
 @code {

diff --git a/JournalApp/Components/EditNoteDialog.razor b/JournalApp/Components/EditNoteDialog.razor
@@ -5,20 +5,18 @@
 
 <MudDialog DefaultFocus="DefaultFocus.FirstChild" OnBackdropClick="Submit">
     <TitleContent>
-        <div class="page-toolbar">
-            <MudIconButton Class="cancel-button" Icon="@Icons.Material.Rounded.Close" aria-label="Cancel" OnClick="Cancel" />
-
-            <MudText Typo="Typo.h6">@Title</MudText>
-
-            <MudSpacer />
-
-            <MudIconButton Class="submit-button" Icon="@Icons.Material.Rounded.Check" aria-label="Submit" OnClick="Submit" />
-        </div>
+        <MudText Typo="Typo.h6">@Title</MudText>
     </TitleContent>
 
     <DialogContent>
-        <MudTextField @bind-Value="Text" Typo="Typo.body2" Placeholder="@Placeholder" Lines="10" AutoGrow Underline="false" Immediate />
+        <MudTextField @bind-Value="Text" Typo="Typo.body2" Placeholder="@Placeholder" Lines="8" AutoGrow Underline="false" Immediate />
     </DialogContent>
+
+    <DialogActions>
+        <MudButton Class="cancel-button" StartIcon="@Icons.Material.Rounded.Close" aria-label="Cancel" OnClick="Cancel">Cancel</MudButton>
+
+        <MudButton Class="submit-button" StartIcon="@Icons.Material.Rounded.Check" aria-label="Submit" OnClick="Submit">Submit</MudButton>
+    </DialogActions>
 </MudDialog>
 
 @code {

diff --git a/JournalApp/JournalApp.csproj b/JournalApp/JournalApp.csproj
@@ -48,7 +48,7 @@
 
   <ItemGroup>
     <PackageReference Include="Blazor-ApexCharts" Version="3.4.0" />
-    <PackageReference Include="CommunityToolkit.Maui" Version="9.0.3" />
+    <PackageReference Include="CommunityToolkit.Maui" Version="9.1.0" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebView.Maui" Version="$(MauiVersion)" />
     <PackageReference Include="Microsoft.EntityFrameworkCore.Proxies" Version="8.0.8" />
     <PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="8.0.8" />
@@ -60,7 +60,7 @@
     <PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="8.0.0" />
     <PackageReference Include="Microsoft.Maui.Controls" Version="$(MauiVersion)" />
     <PackageReference Include="Microsoft.Maui.Controls.Compatibility" Version="$(MauiVersion)" />
-    <PackageReference Include="MudBlazor" Version="7.7.0" />
+    <PackageReference Include="MudBlazor" Version="7.8.0" />
     <PackageReference Include="Nerdbank.GitVersioning" Version="3.6.143" PrivateAssets="All" />
   </ItemGroup>
 

diff --git a/JournalApp/Pages/Calendar/ColorPickerDialog.razor b/JournalApp/Pages/Calendar/ColorPickerDialog.razor
@@ -6,9 +6,19 @@
 @inject KeyEventService KeyEventService
 
 <MudDialog Class="color-picker" DefaultFocus="DefaultFocus.Element" OnBackdropClick="Submit">
+    <TitleContent>
+        <MudText Typo="Typo.h6">Pick color</MudText>
+    </TitleContent>
+
     <DialogContent>
         <MudColorPicker Label="Primary" PickerVariant="PickerVariant.Static" @bind-Value="SelectedColor" ShowToolbar="false" ShowAlpha="false" ThrottleInterval="50" />
     </DialogContent>
+
+    <DialogActions>
+        <MudButton Class="cancel-button" StartIcon="@Icons.Material.Rounded.Close" aria-label="Cancel" OnClick="Cancel">Cancel</MudButton>
+
+        <MudButton Class="submit-button" StartIcon="@Icons.Material.Rounded.Check" aria-label="Submit" OnClick="Submit">Submit</MudButton>
+    </DialogActions>
 </MudDialog>
 
 @code {
@@ -24,6 +34,11 @@
         KeyEventService.Entered(() => Submit());
     }
 
+    void Cancel()
+    {
+        KeyEventService.CancelDialog(MudDialog);
+    }
+
     void Submit()
     {
         KeyEventService.CloseDialog(MudDialog, SelectedColor);

diff --git a/JournalApp/Pages/Index.razor b/JournalApp/Pages/Index.razor
@@ -59,64 +59,68 @@
                 continue;
             }
 
-            <div class="data-point-group">
+            <MudCard Class="data-point-group">
                 @if (!string.IsNullOrEmpty(group.Key))
                 {
-                    <MudText Class="data-point-group-header" Typo="Typo.h5">
-                        @if (group.Key == "Medications")
-                        {
-                            @("Medications taken")
-                        }
-                        else if (group.Key == "Notes")
-                        {
-                            @("Today's notes")
-                        }
-                    </MudText>
+                    <MudCardHeader>
+                        <MudText Class="data-point-group-header" Typo="Typo.h5">
+                            @if (group.Key == "Medications")
+                            {
+                                @("Medications taken")
+                            }
+                            else if (group.Key == "Notes")
+                            {
+                                @("Today's notes")
+                            }
+                        </MudText>
+                    </MudCardHeader>
                 }
 
-                <ul class="data-point-list">
-                    @foreach (var category in group.OrderBy(x => x.Index).ThenBy(x => x.Name))
-                    {
-                        @foreach (var point in _day.Points.Where(x => !x.Deleted && x.Category.Guid == category.Guid && x.Type == category.Type).OrderBy(x => x.CreatedAt))
+                <MudCardContent>
+                    <ul class="data-point-list">
+                        @foreach (var category in group.OrderBy(x => x.Index).ThenBy(x => x.Name))
                         {
-                            <li class="data-point-container" data-category-guid="@category.Guid">
-                                @if (!string.IsNullOrEmpty(category.Name))
-                                {
-                                    <div class="data-point-header">
-                                        <MudText HtmlTag="h6">
-                                            @(DataPointView.GetHeaderText(point))
-                                        </MudText>
+                            @foreach (var point in _day.Points.Where(x => !x.Deleted && x.Category.Guid == category.Guid && x.Type == category.Type).OrderBy(x => x.CreatedAt))
+                            {
+                                <li class="data-point-container" data-category-guid="@category.Guid">
+                                    @if (!string.IsNullOrEmpty(category.Name))
+                                    {
+                                        <div class="data-point-header">
+                                            <MudText HtmlTag="h6">
+                                                @(DataPointView.GetHeaderText(point))
+                                            </MudText>
+                                        </div>
+                                    }
+
+                                    @if (!category.SingleLine)
+                                    {
+                                        <MudFlexBreak />
+                                    }
+
+                                    <div class="data-point-view">
+                                        <DataPointView Point="point" StateChanged="_ => StateHasChanged()" />
                                     </div>
-                                }
-
-                                @if (!category.SingleLine)
-                                {
-                                    <MudFlexBreak />
-                                }
-
-                                <div class="data-point-view">
-                                    <DataPointView Point="point" StateChanged="_ => StateHasChanged()" />
-                                </div>
-                            </li>
+                                </li>
+                            }
                         }
-                    }
-                </ul>
+                    </ul>
+                </MudCardContent>
 
-                <footer class="data-point-group-footer">
+                <MudCardActions>
                     @if (group.Key == null)
                     {
-                        <MudButton Variant="Variant.Text" StartIcon="@Icons.Material.Rounded.Category" OnClick="ManageCategories" FullWidth>Edit categories</MudButton>
+                        <MudButton Variant="Variant.Text" StartIcon="@Icons.Material.Rounded.Category" OnClick="ManageCategories">Edit categories</MudButton>
                     }
                     else if (group.Key == "Medications")
                     {
-                        <MudButton Variant="Variant.Text" StartIcon="@Icons.Material.Rounded.Medication" OnClick="ManageMedications" FullWidth>Edit medications</MudButton>
+                        <MudButton Variant="Variant.Text" StartIcon="@Icons.Material.Rounded.Medication" OnClick="ManageMedications">Edit medications</MudButton>
                     }
                     else if (group.Key == "Notes")
                     {
-                        <MudButton Variant="Variant.Text" StartIcon="@Icons.Material.Rounded.Comment" OnClick="NewNote" FullWidth>New note</MudButton>
+                        <MudButton Variant="Variant.Text" StartIcon="@Icons.Material.Rounded.Comment" OnClick="NewNote">New note</MudButton>
                     }
-                </footer>
-            </div>
+                </MudCardActions>
+            </MudCard>
         }
     </div>
 </main>

diff --git a/JournalApp/Pages/Index.razor.css b/JournalApp/Pages/Index.razor.css
@@ -1,7 +1,7 @@
 .main-timeline {
   display: flex;
   flex-direction: column;
-  gap: 0.5em;
+  gap: 1em;
 }
 
 .data-point-group {
@@ -16,9 +16,6 @@
   gap: 1em;
 }
 
-.data-point-group-footer {
-}
-
 .data-point-container {
   display: flex;
   flex-wrap: wrap;

diff --git a/JournalApp/Pages/MainLayout.razor b/JournalApp/Pages/MainLayout.razor
@@ -53,7 +53,7 @@
             LayoutProperties = new()
             {
                 AppbarHeight = "4em",
-                DefaultBorderRadius = "1.0em",
+                DefaultBorderRadius = "2.0em",
             },
 
             Typography = new()