[frontend/components] Add danger style to menu element

Iceshrimp.Frontend/Components/MenuElement.razor

@@ -1,5 +1,5 @@
 @using Iceshrimp.Assets.PhosphorIcons
-<div @onclick="OnClick" class="menu-element">
+<div @onclick="OnClick" class="menu-element @(Danger ? "danger" : "")">
     @if (Icon != null)
     {
         <Icon Name="Icon"></Icon>
@@ -11,6 +11,7 @@
     [Parameter]                  public          IconName?      Icon     { get; set; }
     [Parameter] [EditorRequired] public required RenderFragment Text     { get; set; }
     [Parameter] [EditorRequired] public required EventCallback  OnSelect { get; set; }
+    [Parameter]                  public          bool           Danger   { get; set; }
 
     private async Task OnClick()
     {

Iceshrimp.Frontend/Components/MenuElement.razor.css

@@ -15,6 +15,15 @@
     background-color: var(--hover-color);
 }
 
+.menu-element.danger {
+    color: var(--danger-color);
+}
+
+.menu-element.danger:hover {
+    background-color: var(--danger-color);
+    color: var(--foreground-color);
+}
+
 @media (max-width: 1000px) {
     .menu-element + .menu-element {
         margin-top: 1rem;

Iceshrimp.Frontend/wwwroot/css/app.css

@@ -22,6 +22,7 @@
     --accent-color: linear-gradient(to right, var(--accent-primary-color), var(--accent-secondary-color));
     --notice-color: #92c1ff;
     --warning-color: #ffdf91;
+    --danger-color: #ff9191;
     --font-color: #e7edff;
     --link: #9E9EFF;