Moved the Score Guide button into its own component and made it an icon button with a tooltip

Author: JohnTTeamSynergi

DartsMathsBlazorGame/Components/DartsMaths.razor

@@ -112,14 +112,7 @@
             Next
         </MudButton>
 
-        <MudButton Variant="Variant.Filled"
-                   Class="ml-4 mt-4"
-                   Color="Color.Primary"
-                   EndIcon="@Icons.Material.Filled.Help"
-                   OnClick="OnScoreGuideClickAsync"
-                   Size="Size.Small">
-            Score Guide
-        </MudButton>
+        <ScoreGuideButton />
     </MudStack>
 
 }

DartsMathsBlazorGame/Components/DartsMaths.razor.cs

@@ -11,9 +11,6 @@ public partial class DartsMaths
     [Inject]
     private IDartsMathsService DartsMathsService { get; set; } = null!;
 
-    [Inject]
-    private IDialogService DialogService { get; set; } = null!;
-
     private ScoreForMathsGuess? ScoreForMathsGuess { get; set; }
 
     private ScoreArea SelectedScoreArea { get; set; }
@@ -52,19 +49,6 @@ private void OnGuessClick()
 
     private void OnNextClick() => SetUpGuess();
 
-    public async Task OnScoreGuideClickAsync()
-    {
-        var options = new DialogOptions
-        {
-            MaxWidth = MaxWidth.Medium,
-            FullWidth = true,
-            CloseButton = true
-        };
-
-        var dialog = await DialogService.ShowAsync<ScoreGuideDialog>("Score Guide", options);
-        await dialog.Result;
-    }
-
     private void SetUpGuess()
     {
         ScoreForMathsGuess = DartsMathsService.SetUpFinisher(true);

DartsMathsBlazorGame/Components/ScoreGuideButton.razor

@@ -0,0 +1,8 @@
+<MudTooltip Text="Score Guide">
+    <MudIconButton Variant="Variant.Outlined"
+                   Class="ml-4 mt-4"
+                   Color="Color.Info"
+                   Icon="@Icons.Material.Filled.Help"
+                   OnClick="OnScoreGuideClickAsync"
+                   Size="Size.Small" />
+</MudTooltip>

DartsMathsBlazorGame/Components/ScoreGuideButton.razor.cs

@@ -0,0 +1,23 @@
+using Microsoft.AspNetCore.Components;
+using MudBlazor;
+
+namespace DartsMathsBlazorGame.Components;
+
+public partial class ScoreGuideButton
+{
+    [Inject]
+    private IDialogService DialogService { get; set; } = null!;
+
+    public async Task OnScoreGuideClickAsync()
+    {
+        var options = new DialogOptions
+        {
+            MaxWidth = MaxWidth.Medium,
+            FullWidth = true,
+            CloseButton = true
+        };
+
+        var dialog = await DialogService.ShowAsync<ScoreGuideDialog>("Score Guide", options);
+        await dialog.Result;
+    }
+}

DartsMathsBlazorGame/Components/ScoreGuideDialog.razor

@@ -2,7 +2,7 @@
     <DialogContent>
          <MudGrid Spacing="1">
             <MudItem xs="12">
-                <MudTextField T="string" Text="@ScoringRules" Lines="7"/>
+                <MudTextField T="string" Text="@ScoringRules" Lines="10"/>
             </MudItem>
             </MudGrid>
     </DialogContent>