Hover color on the delete buttons

WebApp/Components/Features/Events/Index.razor

@@ -30,7 +30,7 @@
                                                Href="@($"/events/edit?id={context.Item.Id}")" />
                         <IconButtonWithTooltip Icon="@Icons.Material.Outlined.Delete"
                                                TooltipText="Delete"
-                                               Color="Color.Error"
+                                               HoverColor="Color.Error"
                                                OnClick="() => DeleteEventDefinition(context.Item!)" />
                     </MudStack>
                 </MudStack>

WebApp/Components/Features/Students/Index.razor

@@ -37,7 +37,7 @@
                                                Href="@($"/students/edit?id={context.Item.Id}&returnUrl=/students")" />
                         <IconButtonWithTooltip Icon="@Icons.Material.Outlined.Delete"
                                                TooltipText="Delete"
-                                               Color="Color.Error"
+                                               HoverColor="Color.Error"
                                                OnClick="() => DeleteStudent(context.Item!)" />
                     </MudStack>
                 </MudStack>

WebApp/Components/Features/Teams/Index.razor

@@ -30,7 +30,7 @@
                                                Href="@($"/teams/edit?id={context.Item.Id}")" />
                         <IconButtonWithTooltip Icon="@Icons.Material.Outlined.Delete"
                                                TooltipText="Delete"
-                                               Color="Color.Error"
+                                               HoverColor="Color.Error"
                                                OnClick="() => DeleteTeam(context.Item!)" />
                     </MudStack>
                 </MudStack>

WebApp/Components/Shared/Components/IconButtonWithTooltip.razor

@@ -4,6 +4,7 @@
     <MudIconButton Icon="@Icon"
                    Size="@Size"
                    Color="@Color"
+                   Class="@GetCssClass()"
                    Href="@Href"
                    OnClick="@OnClick" />
 </MudTooltip>
@@ -13,6 +14,12 @@
     [Parameter] public required string TooltipText { get; set; }
     [Parameter] public Size Size { get; set; } = Size.Small;
     [Parameter] public Color Color { get; set; } = Color.Default;
+    [Parameter] public Color? HoverColor { get; set; }
     [Parameter] public string? Href { get; set; }
     [Parameter] public EventCallback<MouseEventArgs> OnClick { get; set; }
+
+    private string GetCssClass()
+    {
+        return HoverColor == MudBlazor.Color.Error ? "icon-button-hover-error" : "";
+    }
 }

WebApp/wwwroot/app.css

@@ -1,54 +1,3 @@
-/*html, body {
-    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-}
-
-a, .btn-link {
-    color: #006bb7;
-}
-
-.btn-primary {
-    color: #fff;
-    background-color: #1b6ec2;
-    border-color: #1861ac;
-}
-
-.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
-  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
-}
-
-.content {
-    padding-top: 1.1rem;
-}
-
-h1:focus {
-    outline: none;
-}
-
-.valid.modified:not([type=checkbox]) {
-    outline: 1px solid #26b050;
-}
-
-.invalid {
-    outline: 1px solid #e50000;
-}
-
-.validation-message {
-    color: #e50000;
-}
-
-.blazor-error-boundary {
-    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
-    padding: 1rem 1rem 1rem 3.7rem;
-    color: white;
-}
-
-    .blazor-error-boundary::after {
-        content: "An error has occurred."
-    }
-
-.darker-border-checkbox.form-check-input {
-    border-color: #929292;
-}*/
 
 
 @media print {
@@ -94,17 +43,6 @@ h1:focus {
 .event-rank-5 { background-color: #fff2cc; }
 .event-rank-6 { background-color: #fffaea; }
 
-.numberCircle {
-    display: flex;
-    width: fit-content;
-    /* min-width: .2rem; */
-    padding: 0;
-    align-items: center;
-    justify-content: center;
-    aspect-ratio: 10/1;
-    border-radius: 50%;
-    border: 1px solid;
-}
 
 .pre-wrap-text {
     white-space: pre-wrap;
@@ -127,3 +65,7 @@ h1:focus {
     margin-top: 1.5rem;
     margin-bottom: 1rem;
 }
+
+.icon-button-hover-error:hover {
+    color: var(--mud-palette-error) !important;
+}