Updating Mudblazor Version

IGP/Pages/Database/Parts/EntityFilterComponent.razor

@@ -9,6 +9,7 @@
                     {
                         styleClass = "selected";
                     }
+
                     <button @onclick="@(e => OnChangeFaction(choice))"
                             class="choiceButton @styleClass">
                         @(choice == DataType.Any
@@ -30,7 +31,9 @@
                         {
                             styleClass = "selected";
                         }
-                        <button class="choiceButton @styleClass" @onclick="@(e => OnChangeImmortal(choice))">@name</button>
+
+                        <button class="choiceButton @styleClass"
+                                @onclick="@(e => OnChangeImmortal(choice))">@name</button>
                     }
                 </div>
             }
@@ -44,10 +47,12 @@
                     styleClass = "selected";
                 }
 
-                <button class="choiceButton @styleClass" @onclick="@(e => OnChangeEntity(choice))">@choice.Replace("_", " ")</button>
+                <button class="choiceButton @styleClass"
+                        @onclick="@(e => OnChangeEntity(choice))">@choice.Replace("_", " ")</button>
             }
         </div>
-        <FormTextComponent Id="filterName" Label="Filter Name" Placeholder="Throne..." OnChange="@(e => EntityFilterService.EnterSearchText(e.Value!.ToString()!))"/>
+        <FormTextComponent Id="filterName" Label="Filter Name" Placeholder="Throne..."
+                           OnChange="@(e => EntityFilterService.EnterSearchText(e.Value!.ToString()!))"/>
     </div>
 </div>
 
@@ -99,118 +104,117 @@
 
 <style>
 
-.desktopFilters {
-    display: flex;
-    gap: 12px;
-    flex-direction: column;
-    justify-content: flex-start;
-    justify-items: flex-start;
-    top: 50px;
-    padding: 12px;
-    width: 100%;
-    left: 0px;
-}
-
-.desktopFiltersContainer {
-    width: 75%;
-    min-width: 1000px;
-    margin: auto;
-    display: flex;
-    gap: 16px;
-    flex-direction: column;
-    justify-content: flex-start;
-    justify-items: flex-start;
-}
-
-.filtersContainer {
-    display: flex;
-    gap: 16px;
-}
-
-.filterContainer {
-    display: flex;
-    background-color: var(--background);
-    gap: 2px;
-    margin-right: auto;
-    border-radius: 8px;
-}
-
-.choiceButton {
-    background-color: var(--primary);
-    color: white;
-    padding: 12px;
-    border: 1px solid var(--primary);
-}
-
-.choiceButton:hover {
-    background-color: var(--primary-hover);
-    border-color: var(--primary-border-hover);
-}
-
-.selected {
-    background-color: var(--secondary);
-    color: white;
-    font-style: normal;
-    font-weight: bold;
-}
-
-.selected:hover {
-    background-color: var(--secondary-hover);
-    border-color: var(--secondary-border-hover);
-}
-
-
-.filterContainer .choiceButton:first-child {
-    border-top-left-radius: 8px;
-    border-bottom-left-radius: 8px;
-}
-
-
-.filterContainer .choiceButton:last-child {
-    border-top-right-radius: 8px;
-    border-bottom-right-radius: 8px;
-}
-
-@@media only screen and (max-width: 1025px) {
-    .desktopNavContainer {
-        display: none;
-    }
-}
-
-@@media only screen and (max-width: 480px) {
-    .filtersContainer {
+    .desktopFilters {
+        display: flex;
+        gap: 12px;
         flex-direction: column;
+        justify-content: flex-start;
+        justify-items: flex-start;
+        top: 50px;
+        padding: 12px;
+        width: 100%;
+        left: 0px;
+    }
+
+    .desktopFiltersContainer {
+        width: 75%;
+        min-width: 1000px;
+        margin: auto;
+        display: flex;
+        gap: 16px;
+        flex-direction: column;
+        justify-content: flex-start;
+        justify-items: flex-start;
+    }
+
+    .filtersContainer {
+        display: flex;
+        gap: 16px;
     }
 
     .filterContainer {
-        flex-direction: column;
+        display: flex;
+        background-color: var(--background);
+        gap: 2px;
+        margin-right: auto;
+        border-radius: 8px;
     }
-}
 
-.mobileFilters {
-    display: none;
-}
+    .choiceButton {
+        background-color: var(--primary);
+        color: white;
+        padding: 12px;
+        border: 1px solid var(--primary);
+    }
+
+    .choiceButton:hover {
+        background-color: var(--primary-hover);
+        border-color: var(--primary-border-hover);
+    }
+
+    .selected {
+        background-color: var(--secondary);
+        color: white;
+        font-style: normal;
+        font-weight: bold;
+    }
+
+    .selected:hover {
+        background-color: var(--secondary-hover);
+        border-color: var(--secondary-border-hover);
+    }
+
+
+    .filterContainer .choiceButton:first-child {
+        border-top-left-radius: 8px;
+        border-bottom-left-radius: 8px;
+    }
+
+
+    .filterContainer .choiceButton:last-child {
+        border-top-right-radius: 8px;
+        border-bottom-right-radius: 8px;
+    }
+
+    @@media only screen and (max-width: 1025px) {
+        .desktopNavContainer {
+            display: none;
+        }
+    }
+
+    @@media only screen and (max-width: 480px) {
+        .filtersContainer {
+            flex-direction: column;
+        }
+
+        .filterContainer {
+            flex-direction: column;
+        }
+    }
 
-@@media only screen and (max-width: 1024px) {
     .mobileFilters {
-        display: block;
-    }
-
-    .desktopFilters {
         display: none;
     }
 
-    .desktopSpacer {
-        display: none;
+    @@media only screen and (max-width: 1024px) {
+        .mobileFilters {
+            display: block;
+        }
+
+        .desktopFilters {
+            display: none;
+        }
+
+        .desktopSpacer {
+            display: none;
+        }
     }
-}
 </style>
 
 
 @code {
 
-    [Inject]
-    public IEntityFilterService EntityFilterService { get; set; } = default!;
+    [Inject] public IEntityFilterService EntityFilterService { get; set; } = default!;
 
     protected override void OnInitialized()
     {