[frontend/components] Rework bottom bar

Iceshrimp.Frontend/Components/Compose.razor.css

@@ -54,6 +54,7 @@
 }
 
 .cw-field {
+    padding: unset;
     margin-bottom: 0.5rem;
     width: 100%;
 }

Iceshrimp.Frontend/Layout/Sidebar.razor

@@ -56,21 +56,21 @@
 <div class="bottom-bar">
     <div class="bottom-nav">
         <button @onclick="ToggleSidebar" class="bottom-bar-btn">
-            <Icon Name="Icons.List"/>
+            <Icon Name="Icons.List" class="bottom-bar-icon"/>
         </button>
-        <NavLink href="/">
+        <NavLink href="/" Match="NavLinkMatch.All">
             <div class="bottom-bar-btn">
-                <Icon Name="Icons.House"/>
+                <Icon Name="Icons.House" class="bottom-bar-icon"/>
             </div>
         </NavLink>
         <NavLink href="/notifications">
             <div class="bottom-bar-btn">
-                <Icon Name="Icons.Bell"/>
+                <Icon Name="Icons.Bell" class="bottom-bar-icon"/>
             </div>
         </NavLink>
         <div>
-            <button @onclick="Open" class="bottom-bar-btn">
-                <Icon Name="Icons.Pencil"/>
+            <button @onclick="Open" class="bottom-bar-btn post-btn">
+                <Icon Name="Icons.Pencil" class="bottom-bar-icon"/>
             </button>
         </div>
     </div>

Iceshrimp.Frontend/Layout/Sidebar.razor.css

@@ -10,22 +10,32 @@
         > .sidebar-btn {
             background: var(--highlight-color);
         }
+
+        > .bottom-bar-btn {
+            background: var(--highlight-color);
+        }
+    }
+}
+
+::deep {
+    .bottom-bar-icon {
+        font-size: 20px !important; 
     }
 }
 
 .bottom-bar-btn {
     display: inline-flex;
     height: 3rem;
-    width: 4rem;
-    min-width: 4rem;
-    max-width: 4rem;
+    width: 5rem;
+    min-width: 5rem;
+    max-width: 5rem;
     align-items: center;
     justify-content: center;
-    border-radius: 1.25rem;
+    border-radius: 0.5rem;
     margin-bottom: 0.5rem;
     margin-top: 0.5rem;
-    color: black;
-    background: var(--accent-color);
+    color: white;
+    background: var(--background-color);
 
     .text {
         display: none;
@@ -33,7 +43,7 @@
 }
 
 .btn:hover {
-    background-color: var(--hover-color);
+    background: var(--hover-color);
 }
 
 .icon {
@@ -49,6 +59,8 @@
 
 .sidebar-btn {
     display: flex;
+    /* This is possibly the jankiest parameter i have ever written (it should be percents but this works), it looks okay anyway */
+    width: 13rem;
     height: 2.5rem;
     align-items: center;
     justify-content: start;
@@ -71,8 +83,6 @@
 
 .post-btn {
     background: var(--accent-color);
-    justify-self: start;
-    width: auto;
 }
 
 .rule {
@@ -92,7 +102,7 @@
     position: fixed;
     width: 15rem;
     height: 100vh;
-    z-index: +23;
+    z-index: +25;
     background-color: var(--foreground-color);
 }
 
@@ -101,8 +111,7 @@
         display: flex;
         flex-direction: column;
         height: 100vh;
-        max-width: 15rem;
-        min-width: 15rem;
+        width: 15rem;
         position: sticky;
         top: 0;
         background-color: var(--foreground-color);
@@ -123,7 +132,8 @@
         position: fixed;
         bottom: 0;
         left: 0;
-        background-color: var(--foreground-color);
+        background-color: var(--background-color);
         z-index: +24;
+        border-top: 0.1rem var(--highlight-color) solid;
     }
 }