Make list groups more MD3E

Author: danielchalmers

JournalApp/Pages/Calendar/CalendarMonth.razor

@@ -2,7 +2,7 @@
 @using JournalApp
 
 <section class="calendar-month" id="calendar-month-@(Month.Month)">
-    <MudText>@(Month.Name)</MudText>
+    <MudText Class="list-group-title">@(Month.Name)</MudText>
 
     <MudPaper Class="calendar-month-grid">
         <CalendarWeekHeader DaysOfWeek="Month.DaysOfWeek" />

JournalApp/Pages/Index.razor

@@ -62,7 +62,7 @@
             <div>
                 @if (!string.IsNullOrEmpty(group.Key))
                 {
-                    <MudText Class="data-point-group-header">
+                    <MudText Class="list-group-title">
                         @if (group.Key == "Medications")
                         {
                             @("Medications taken")

JournalApp/Pages/Worksheets/WorksheetsPage.razor.css

@@ -12,7 +12,7 @@
 .worksheet-group-items {
   display: flex;
   flex-direction: column;
-  gap: 32px;
+  gap: 8px;
 }
 
 .worksheet-group-toc {

JournalApp/wwwroot/app.css

@@ -158,6 +158,16 @@ body {
   min-width: unset;
 }
 
+.list-group-title {
+  font-size: var(--mud-typography-subtitle2-size);
+  font-family: var(--mud-typography-subtitle2-family);
+  font-weight: var(--mud-typography-subtitle2-weight);
+  line-height: var(--mud-typography-subtitle2-lineheight);
+  letter-spacing: var(--mud-typography-subtitle2-letterspacing);
+  text-transform: var(--mud-typography-subtitle2-text-transform);
+  margin-bottom: 8px;
+}
+
 #blazor-error-ui {
   background: darkorange;
   bottom: 0;