Polish MD3E: icon, splash, colors, layout

JournalApp/Components/DataPointView.razor

@@ -25,7 +25,7 @@ else if (Point.Type == PointType.Scale)
 }
 else if (Point.Type == PointType.LowToHigh)
 {
-    <MudToggleGroup T="int?" Value="Point.ScaleIndex" ValueChanged="ScaleIndexChanged" SelectionMode="SelectionMode.ToggleSelection" Size="Size.Small" CheckMark>
+    <MudToggleGroup T="int?" Value="Point.ScaleIndex" ValueChanged="ScaleIndexChanged" SelectionMode="SelectionMode.ToggleSelection" Size="Size.Small" Delimiters="false">
         <MudToggleItem T="int?" Value="0">None</MudToggleItem>
         <MudToggleItem T="int?" Value="1">Low</MudToggleItem>
         <MudToggleItem T="int?" Value="3">Medium</MudToggleItem>
@@ -34,7 +34,7 @@ else if (Point.Type == PointType.LowToHigh)
 }
 else if (Point.Type == PointType.MildToSevere)
 {
-    <MudToggleGroup T="int?" Value="Point.ScaleIndex" ValueChanged="ScaleIndexChanged" SelectionMode="SelectionMode.ToggleSelection" Size="Size.Small" CheckMark>
+    <MudToggleGroup T="int?" Value="Point.ScaleIndex" ValueChanged="ScaleIndexChanged" SelectionMode="SelectionMode.ToggleSelection" Size="Size.Small" Delimiters="false">
         <MudToggleItem T="int?" Value="0">None</MudToggleItem>
         <MudToggleItem T="int?" Value="1">Mild</MudToggleItem>
         <MudToggleItem T="int?" Value="3">Moderate</MudToggleItem>
@@ -43,18 +43,18 @@ else if (Point.Type == PointType.MildToSevere)
 }
 else if (Point.Type == PointType.Bool)
 {
-    <MudToggleGroup T="bool?" Value="Point.Bool" ValueChanged="OnBoolChanged" SelectionMode="SelectionMode.ToggleSelection" Size="Size.Small" CheckMark>
+    <MudToggleGroup T="bool?" Value="Point.Bool" ValueChanged="OnBoolChanged" SelectionMode="SelectionMode.ToggleSelection" Size="Size.Small" Delimiters="false">
         <MudToggleItem T="bool?" Value="false">No</MudToggleItem>
         <MudToggleItem T="bool?" Value="true">Yes</MudToggleItem>
     </MudToggleGroup>
 }
 else if (Point.Type == PointType.Number)
 {
-    <MudNumericField @bind-Value="Point.Number" Immediate MaxLength="9" />
+    <MudNumericField @bind-Value="Point.Number" Immediate MaxLength="9" HideSpinButtons Underline="false" />
 }
 else if (Point.Type == PointType.Text)
 {
-    <MudTextField @bind-Value="Point.Text" Immediate />
+    <MudTextField @bind-Value="Point.Text" Immediate Underline="false" />
 }
 else if (Point.Type == PointType.Note)
 {
@@ -75,7 +75,7 @@ else if (Point.Type == PointType.Note)
 else if (Point.Type == PointType.Medication)
 {
     <div class="medication-controls">
-        <MudToggleGroup T="bool?" Value="Point.Bool" ValueChanged="OnMedicationTakenChanged" SelectionMode="SelectionMode.ToggleSelection" Size="Size.Small" CheckMark>
+        <MudToggleGroup T="bool?" Value="Point.Bool" ValueChanged="OnMedicationTakenChanged" SelectionMode="SelectionMode.ToggleSelection" Size="Size.Small" Delimiters="false">
             <MudToggleItem T="bool?" Value="false">No</MudToggleItem>
             <MudToggleItem T="bool?" Value="true">Yes</MudToggleItem>
         </MudToggleGroup>

JournalApp/Components/DataPointView.razor.css

@@ -5,6 +5,13 @@
   gap: 8px;
 }
 
+/* Fixed-width tabular readout so 9.5 -> 10.0 doesn't shift the slider. */
+::deep .sleep-hours {
+  min-width: 4ch;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+
 .note-container {
   display: flex;
   flex-direction: column;

JournalApp/Data/PreferenceService.cs

@@ -15,14 +15,15 @@ public sealed partial class PreferenceService : IPreferences, IDisposable
     private MudTheme _mudTheme;
     private uint _mudThemeSeed;
 
-    // Mood colors are HCT values generated with material-color-utilities on a "coral reef" hue sweep: turquoise water (210°, great) through sand to coral (20°, awful).
+    // Mood colors are HCT values generated with material-color-utilities on a "coral reef" hue sweep: turquoise water (210°, great) through coral (20°, awful).
     // The light ramp stays in bright tones (62-86) so the theme's dark text-primary reads on every cell, and the dark ramp uses deep jewel tones (42-50) so the light text-primary does the same. 🤔 (unset) intentionally has no color.
+    // 😐 sits at the middle of the ramp as a true neutral grey so it reads as no signal either way.
     private static readonly Dictionary<string, string> _lightMoodColors = new()
     {
         ["🤩"] = "#2ACADF",
         ["😀"] = "#50DBD0",
         ["🙂"] = "#8BE3C0",
-        ["😐"] = "#EED687",
+        ["😐"] = "#D9D9D9",
         ["😕"] = "#FFB783",
         ["😢"] = "#FF9474",
         ["😭"] = "#F26B6B",
@@ -33,7 +34,7 @@ public sealed partial class PreferenceService : IPreferences, IDisposable
         ["🤩"] = "#007E8C",
         ["😀"] = "#00857E",
         ["🙂"] = "#2A8668",
-        ["😐"] = "#916C24",
+        ["😐"] = "#737373",
         ["😕"] = "#A65911",
         ["😢"] = "#A94C2F",
         ["😭"] = "#A94041",

JournalApp/MainPage.xaml

@@ -1,14 +1,15 @@
-<?xml version="1.0" encoding="utf-8" ?>
+<?xml version="1.0" encoding="utf-8" ?>
 <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              xmlns:local="clr-namespace:JournalApp"
              x:Class="JournalApp.MainPage"
-             SafeAreaEdges="All">
+             SafeAreaEdges="All"
+             BackgroundColor="{AppThemeBinding Light=#FFF8F9, Dark=#181215}">
 
-    <BlazorWebView HostPage="wwwroot/index.html">
+    <BlazorWebView HostPage="wwwroot/index.html" BlazorWebViewInitialized="OnBlazorWebViewInitialized">
         <BlazorWebView.RootComponents>
             <RootComponent Selector="#app" ComponentType="{x:Type local:Routes}" />
         </BlazorWebView.RootComponents>
     </BlazorWebView>
 
-</ContentPage>
+</ContentPage>

JournalApp/MainPage.xaml.cs

@@ -1,9 +1,21 @@
-namespace JournalApp;
+using Microsoft.AspNetCore.Components.WebView;
+
+namespace JournalApp;
 
 public partial class MainPage : ContentPage
 {
     public MainPage()
     {
         InitializeComponent();
     }
+
+    // The native WebView paints white before Blazor's first frame, which flashes hard against a dark splash, so let the themed page background show through instead.
+    private void OnBlazorWebViewInitialized(object sender, BlazorWebViewInitializedEventArgs e)
+    {
+#if ANDROID
+        e.WebView.SetBackgroundColor(Android.Graphics.Color.Transparent);
+#elif WINDOWS
+        e.WebView.DefaultBackgroundColor = Microsoft.UI.Colors.Transparent;
+#endif
+    }
 }

JournalApp/Pages/SettingsPage.razor

@@ -33,7 +33,7 @@ else
                     <div class="settings-item">
                         <MudText Class="settings-item-title">Theme</MudText>
 
-                        <MudToggleGroup T="AppTheme" Value="PreferenceService.SelectedAppTheme" ValueChanged="SelectedAppThemeChanged" SelectionMode="SelectionMode.SingleSelection" Size="Size.Small" CheckMark aria-label="Theme for entire app">
+                        <MudToggleGroup T="AppTheme" Value="PreferenceService.SelectedAppTheme" ValueChanged="SelectedAppThemeChanged" SelectionMode="SelectionMode.SingleSelection" Size="Size.Small" Delimiters="false" aria-label="Theme for entire app">
                             <MudToggleItem T="AppTheme" Value="@(AppTheme.Light)">Light</MudToggleItem>
                             <MudToggleItem T="AppTheme" Value="@(AppTheme.Dark)">Dark</MudToggleItem>
                             <MudToggleItem T="AppTheme" Value="@(AppTheme.Unspecified)">System</MudToggleItem>

JournalApp/Pages/Trends/TrendCategoryView.razor

@@ -146,7 +146,8 @@ else
             },
             Xaxis = new XAxis
             {
-                TickAmount = 15,
+                // Few enough ticks that M/d labels never collide on a phone-width chart.
+                TickAmount = 6,
                 Labels = new XAxisLabels
                 {
                     HideOverlappingLabels = true,

JournalApp/Platforms/Android/Resources/drawable/appicon_monochrome.xml

@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- Themed-icon layer: the foreground smiley shrunk to sit in the plate like stock Google glyphs, since the full-bleed foreground renders oversized when the launcher tints it. -->
+<!-- Themed-icon layer: a small extra inset keeps the glyph at stock Google size now that the foreground SVG itself carries keyline padding. -->
 <inset xmlns:android="http://schemas.android.com/apk/res/android"
     android:drawable="@mipmap/appicon_foreground"
-    android:insetLeft="18%"
-    android:insetTop="18%"
-    android:insetRight="18%"
-    android:insetBottom="18%" />
+    android:insetLeft="7%"
+    android:insetTop="7%"
+    android:insetRight="7%"
+    android:insetBottom="7%" />

JournalApp/Platforms/Android/Resources/drawable/splash_screen.xml

@@ -1,6 +1,15 @@
 <?xml version="1.0" encoding="utf-8"?>
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:drawable="@color/splash_background" />
+    <!-- Pre-12 gets the same icon-on-plate look that windowSplashScreenIconBackgroundColor provides on API 31+. -->
+    <item
+        android:gravity="center"
+        android:width="180dp"
+        android:height="180dp">
+        <shape android:shape="oval">
+            <solid android:color="@color/splash_icon_background" />
+        </shape>
+    </item>
     <item
         android:drawable="@drawable/maui_splash"
         android:gravity="center" />

JournalApp/Platforms/Android/Resources/values-night/colors.xml

@@ -1,4 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <color name="splash_background">#FFD8EE</color>
+    <!-- Matches the Orchid theme's dark background (neutral 6) so the splash flows straight into the Blazor loading screen. -->
+    <color name="splash_background">#181215</color>
 </resources>

JournalApp/Platforms/Android/Resources/values-v31/styles.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
+    <!-- No windowSplashScreenAnimatedIcon: the system then shows the real launcher icon, plate and all, which is the standard Android 12+ splash look. -->
     <style name="Maui.SplashTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
         <item name="android:windowSplashScreenBackground">@color/splash_background</item>
-        <item name="android:windowSplashScreenAnimatedIcon">@drawable/maui_splash</item>
     </style>
 </resources>

JournalApp/Platforms/Android/Resources/values/colors.xml

@@ -2,5 +2,8 @@
 <resources>
     <color name="colorPrimary">#844C72</color>
     <color name="colorPrimaryDark">#844C72</color>
-    <color name="splash_background">#FFD8EE</color>
+    <!-- Matches the Orchid theme's light background (neutral 98) so the splash flows straight into the Blazor loading screen. -->
+    <color name="splash_background">#FFF8F9</color>
+    <!-- The launcher icon's pink plate, drawn behind the pre-Android-12 splash glyph so it reads as the app icon; 12+ shows the real launcher icon instead. -->
+    <color name="splash_icon_background">#FFD8EE</color>
 </resources>

JournalApp/wwwroot/app.css

@@ -12,11 +12,11 @@ body {
     display: none;
   }
 
+/* Background colors come from the theme-matched media queries at the bottom so the native splash, this loading screen, and the app all share one tone. */
 #splash-screen {
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: Canvas;
   color: CanvasText;
   position: fixed;
   width: 100%;
@@ -83,6 +83,22 @@ body {
   color: var(--mud-palette-text-primary);
 }
 
+/* On-scroll separation for the sticky header: a soft M3 level-1 shadow fades in once content passes underneath. */
+/* MD3 proper would retone the container instead, but that desyncs the natively colored status bar, so elevation stands in until edge-to-edge lands. */
+@supports (animation-timeline: scroll()) {
+  .page-header {
+    animation: header-on-scroll linear both;
+    animation-timeline: scroll();
+    animation-range: 0 56px;
+  }
+}
+
+@keyframes header-on-scroll {
+  to {
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
+  }
+}
+
 .page-body {
   width: 100%;
   max-width: 960px;
@@ -126,23 +142,38 @@ body {
   gap: 8px;
 }
 
-/* M3 segmented buttons: outlined container, neutral unselected text, selected segment fills secondaryContainer. */
+/* M3E connected button group: tonal segments separated by 2px gaps instead of an outlined pill with dividers. */
+/* The row of segments keeps fully rounded outer corners, and the selected segment morphs to a full pill with a secondaryContainer fill. */
 .mud-toggle-group {
   flex-grow: 1;
-  border-radius: 999px;
-  border-color: var(--mud-palette-lines-inputs) !important;
+  gap: 2px;
+  border: none !important;
+  background-color: transparent;
 }
 
 .mud-toggle-group .mud-toggle-item {
   color: var(--mud-palette-text-primary);
-  background-color: transparent;
-  border-color: var(--mud-palette-lines-inputs) !important;
+  background-color: var(--mud-palette-gray-lighter);
+  border: none !important;
+  border-radius: 8px;
   min-height: 32px;
+  transition: border-radius 0.15s ease-out, background-color 0.15s ease-out;
+}
+
+.mud-toggle-group .mud-toggle-item:first-child {
+  border-top-left-radius: 999px;
+  border-bottom-left-radius: 999px;
+}
+
+.mud-toggle-group .mud-toggle-item:last-child {
+  border-top-right-radius: 999px;
+  border-bottom-right-radius: 999px;
 }
 
 .mud-toggle-group .mud-toggle-item.mud-toggle-item-selected {
   background-color: var(--mud-palette-secondary-lighten);
   color: var(--mud-palette-secondary-darken);
+  border-radius: 999px;
 }
 
 .mud-button {
@@ -175,8 +206,13 @@ body {
   border-radius: 999px;
 }
 
+/* The inactive track carries the M3E stop indicator dot near its trailing end. */
 .mud-slider.mud-slider-primary .mud-slider-input::-webkit-slider-runnable-track {
   background-color: var(--mud-palette-secondary-lighten);
+  background-image: radial-gradient(circle, var(--mud-palette-primary) 0 2px, transparent 2.5px);
+  background-repeat: no-repeat;
+  background-position: right 5px center;
+  background-size: 5px 5px;
 }
 
 .mud-slider .mud-slider-filled,
@@ -192,7 +228,8 @@ body {
   transform: none;
   border-radius: 2px;
   margin-top: -6px;
-  box-shadow: none;
+  /* M3E carves a gap between the handle and the track; surface-colored blocks either side of the bar fake it over the row container. */
+  box-shadow: 6px 0 0 var(--mud-palette-surface), -6px 0 0 var(--mud-palette-surface);
 }
 
 /* M3 switch: 52x32 pill track with an outline, solid colors instead of translucent overlays, and a thumb that grows when checked. */
@@ -448,13 +485,13 @@ label.mud-switch.mud-disabled .mud-switch-span {
 }
 
 @media (prefers-color-scheme: dark) {
-  .status-bar-safe-area {
+  .status-bar-safe-area, #splash-screen {
     background-color: #181215;
   }
 }
 
 @media (prefers-color-scheme: light) {
-  .status-bar-safe-area {
+  .status-bar-safe-area, #splash-screen {
     background-color: #FFF8F9;
   }
 }

README.md

@@ -15,18 +15,18 @@
 - 📚 **Guided worksheets** for mental health check-ins
 - 🚨 **Safety Plan** with your coping strategies and support contacts
 - 💾 **Local backups** you can export and import as a single file
+- 🎨 **Material You colors** that match your wallpaper on Android 12+
 - 🌙 **Light and dark themes**
 
 ## Privacy
 
 Your data never leaves your device. There is no account, no sign-up, and no cloud. See the [privacy policy](PRIVACY_POLICY.md) for details.
 
-## Tech stack
+## Tech
 
 - [.NET MAUI](https://learn.microsoft.com/dotnet/maui/) with [Blazor Hybrid](https://learn.microsoft.com/aspnet/core/blazor/hybrid/) for the UI
-- [MudBlazor](https://mudblazor.com/) component library
+- [MudBlazor](https://mudblazor.com/) components with custom [Material 3 Expressive](https://m3.material.io/) theming
 - [EF Core](https://learn.microsoft.com/ef/core/) with SQLite for local storage
-- [ApexCharts](https://apexcharts.github.io/Blazor-ApexCharts/) for trends
 
 ## Contributing