New theme and branding! (#26)

* Update theme, icon, branding

* remove emoji from index logo

* replace hidden title click button with a home icon to introduce position parity with other pages

* reduce top padding reserved for headers

JournalApp/Components/EditCategoryDialog.razor

@@ -25,7 +25,7 @@
             }
             else if (Group == "Medications")
             {
-                <div class="d-flex flex-row flex-grow-1" style="gap: 0.75em">
+                <div class="d-flex flex-row flex-grow-1" style="gap: 1em">
                     <MudNumericField @bind-Value="MedicationDose" HideSpinButtons Label="Dose" MaxLength="6" Immediate />
 
                     <MudTextField @bind-Value="MedicationUnit" Label="Unit" MaxLength="8" Immediate />

JournalApp/Components/EditDoseDialog.razor

@@ -10,7 +10,7 @@
 
     <DialogContent>
         <MudForm>
-            <MudText Align="Align.Center" Typo="Typo.subtitle2">
+            <MudText Align="Align.Center" Typo="Typo.subtitle2" Class="mud-text-secondary">
                 To change this for all days, go to "Edit medications" from the home screen.
             </MudText>
 

JournalApp/JournalApp.csproj

@@ -10,7 +10,7 @@
     <ImplicitUsings>enable</ImplicitUsings>
     <EnableDefaultCssItems>false</EnableDefaultCssItems>
 
-    <ApplicationTitle>JournalApp</ApplicationTitle>
+    <ApplicationTitle>Journal App</ApplicationTitle>
     <ApplicationId>com.danielchalmers.journalapp</ApplicationId>
     <ApplicationId Condition="'$(Configuration)' == 'DEBUG'">com.danielchalmers.journalapp.debug</ApplicationId>
     <ApplicationIdGuid>2B30B066-B4D9-4C17-8A4B-C72E1ABC4BF3</ApplicationIdGuid>
@@ -22,8 +22,8 @@
     <MauiIcon Include="Resources\AppIcon\appicon.svg" ForegroundFile="Resources\AppIcon\appiconfg_debug.svg" Condition="'$(Configuration)' == 'DEBUG'" />
 
     <!-- Splash Screen -->
-    <MauiSplashScreen Include="Resources\AppIcon\appiconfg.svg" Color="#776be7" Condition="'$(Configuration)' != 'DEBUG'" />
-    <MauiSplashScreen Include="Resources\AppIcon\appiconfg_debug.svg" Color="#776be7" Condition="'$(Configuration)' == 'DEBUG'" />
+    <MauiSplashScreen Include="Resources\AppIcon\appiconfg.svg" Color="#9389e8" Condition="'$(Configuration)' != 'DEBUG'" />
+    <MauiSplashScreen Include="Resources\AppIcon\appiconfg_debug.svg" Color="#9389e8" Condition="'$(Configuration)' == 'DEBUG'" />
 
     <!-- Images -->
     <MauiImage Include="Resources\Images\*" />

JournalApp/Pages/Index.razor

@@ -11,9 +11,9 @@
 
 <header class="page-header">
     <div class="page-toolbar">
-        <MudButton OnClick="OnTitleClicked" Ripple="false" Variant="Variant.Text">
-            <MudText Typo="Typo.h6">🙂 @ThisAssembly.AssemblyTitle</MudText>
-        </MudButton>
+        <MudIconButton Icon="@Icons.Material.Rounded.Home" OnClick="GoHome" aria-label="Go to today" />
+
+        <MudText Typo="Typo.h6">@ThisAssembly.AssemblyTitle</MudText>
 
         <MudSpacer />
 
@@ -185,14 +185,11 @@
         }
     }
 
-    async Task OnTitleClicked(MouseEventArgs e)
+    async Task GoHome()
     {
-        if (e.Detail == 2)
-        {
-            logger.LogDebug("Title clicked twice so going to now");
-            await GoToDay(DateOnly.FromDateTime(DateTime.Now));
-            await ScrollToTop();
-        }
+        logger.LogDebug("Home button was clicked");
+        await GoToDay(DateOnly.FromDateTime(DateTime.Now));
+        await ScrollToTop();
     }
 
     async Task ScrollToTop()

JournalApp/Pages/MainLayout.razor

@@ -30,29 +30,31 @@
         {
             PaletteLight = new PaletteLight()
             {
-                Primary = "#776be7",
-                PrimaryLighten = "#978dec",
-                Info = "#776be7",
-                AppbarText = "#ffffffe6",
-                Background = "#f7f6fb",
-                TextDisabled = "#424242",
+                // https://material-foundation.github.io/material-theme-builder
+                Primary = "#9389e8",
+                Secondary = "#928ea6",
+                Tertiary = "#b48399",
+                Info = "#b48399",
+                AppbarText = "#ffffffff",
                 HoverOpacity = 0.1,
             },
 
             PaletteDark = new PaletteDark()
             {
-                Primary = "#776be7",
-                Info = "#776be7",
-                AppbarText = "#ffffffe6",
-                TextPrimary = "#ffffffcc",
-                TextSecondary = "#ffffff99",
-                TextDisabled = "#ffffffb2",
+                // https://material-foundation.github.io/material-theme-builder
+                Primary = "#9389e8",
+                Secondary = "#928ea6",
+                Tertiary = "#b48399",
+                Info = "#b48399",
+                AppbarText = "#ffffffff",
                 HoverOpacity = 0.1,
+
+                TextPrimary = "#ffffffde",
+                TextSecondary = "#ffffff99",
             },
 
             LayoutProperties = new()
             {
-                AppbarHeight = "4em",
                 DefaultBorderRadius = "2.0em",
             },
 

JournalApp/Pages/SafetyPlanning/SafetyPlanItem.razor

@@ -2,7 +2,9 @@
 
 <section class="@($"safety-plan-item safety-plan-item-{MarkupUtil.ToClassName(Title)}")">
     <MudText Typo="Typo.h5">@Title</MudText>
-    <MudText Typo="Typo.caption">@Subtitle</MudText>
+
+    <MudText Typo="Typo.subtitle2">@Subtitle</MudText>
+
     <MudTextField T="string" @bind-Text="Text" Placeholder="@Placeholder"
                   Typo="Typo.body2" Variant="Variant.Outlined" Immediate Underline="false"
                   AutoGrow Lines="3" MaxLines="10" />

JournalApp/Pages/SafetyPlanning/SafetyPlanPage.razor

@@ -1,6 +1,5 @@
 @namespace JournalApp
 @page "/safetyplan"
-@using ApexCharts
 @inherits JaPage
 @implements IDisposable
 @inject ILogger<SafetyPlanPage> logger
@@ -15,7 +14,7 @@
 
 <main class="page-body">
     <div class="safety-plan-items-container">
-        <MudText Align="MudBlazor.Align.Center">
+        <MudText Align="Align.Center" Class="mud-text-secondary">
             Your coping strategies and sources of support that can be used before or during a crisis to help yourself stay safe.
         </MudText>
 

JournalApp/Pages/Trends/TrendCategoryView.razor

@@ -116,7 +116,7 @@ else
                     Mode = PreferenceService.IsDarkMode ? Mode.Dark : Mode.Light,
                     Monochrome = new ThemeMonochrome
                     {
-                        Color = "#776be7",
+                        Color = "#9389e8",
                         Enabled = true,
                     },
                 },

JournalApp/Pages/Worksheets/WorksheetsPage.razor.css

@@ -13,6 +13,7 @@
   display: flex;
   flex-direction: column;
   gap: 2em;
+  padding-bottom: 1em;
 }
 
 .worksheet-group-toc {

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

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <color name="colorPrimary">#594ae2</color>
-    <color name="colorPrimaryDark">#776be7</color>
-    <color name="colorAccent">#ff4081</color>
+    <color name="colorPrimary">#9389e8</color>
+    <color name="colorPrimaryDark">#9389e8</color>
+    <color name="colorAccent">#b48399</color>
 </resources>