[frontend/components] Update settings menu and styling

Iceshrimp.Frontend/Components/SettingsMenu.razor

@@ -10,18 +10,18 @@
             <span class="text">@Loc["Profile"]</span>
         </div>
     </NavLink>
-    <NavLink href="/settings/about">
-        <div class="sidebar-btn">
-            <Icon Name="Icons.Info"/>
-            <span class="text">@Loc["About"]</span>
-        </div>
-    </NavLink>
     <NavLink href="/settings/filters">
         <div class="sidebar-btn">
             <Icon Name="Icons.SpeakerX"/>
             <span class="text">@Loc["Filters"]</span>
         </div>
     </NavLink>
+    <NavLink href="/settings/about">
+        <div class="sidebar-btn">
+            <Icon Name="Icons.Info"/>
+            <span class="text">@Loc["About"]</span>
+        </div>
+    </NavLink>
 </div>
 
 @code {

Iceshrimp.Frontend/Components/SettingsMenu.razor.css

@@ -4,17 +4,24 @@
     align-items: center;
     justify-content: start;
     border-radius: 1.25rem;
-    padding-inline: 0.5rem;
+    padding-inline: 1rem;
     margin-bottom: 0.5rem;
     margin-inline: 1rem;
     color: white;
     font-size: 0.9em;
     background: var(--foreground-color);
+    
+    > i {
+        padding-right: 0.5rem;
+    }
+}
+.sidebar-btn:hover {
+    background-color: var(--hover-color);
 }
 
 .nav {
     padding-top: 1rem;
-    min-width: 10rem;
+    width: 15rem;
 }
 
 ::deep {

Iceshrimp.Frontend/Layout/SettingsLayout.razor.css

@@ -1,3 +1,17 @@
+::deep {
+    .input {
+        display: block;
+        background-color: var(--foreground-color);
+        border: none;
+        outline: none;
+        width: 100%;
+        border-radius: 0.5rem;
+        padding: 0.5rem;
+        padding-inline: 1rem;
+        margin: 0.5rem;
+    }
+}
+
 .layout {
     display: flex;
     flex-direction: row;
@@ -8,6 +22,10 @@
     width: 100%;
     height: 100%;
     padding: 2rem;
+    
+    > .body {
+        max-width: 50rem;
+    }
 }
 
 @media(max-width: 1000px){