src/css/components/Sidebar.css

@@ -14,20 +14,23 @@
 }
 
 .sidebar-menu-item {
-    margin: 5px;
-    margin-right: 10px;
-    padding: 10px;
+    margin: 5px 0px 5px -20px;
+    padding: 10px 0px 10px 35px;
     background-color: var(--dark-blue);
     color: var(--text-primary);
     border-radius: 6px;
     text-decoration: none;
     font-weight: bold;
+    border-radius: 0;
+    border-color: var(--color-primary);
+    width: calc(100% + 40px);
 }
 .sidebar-menu-item.active {
-    opacity: .75;
     border-right: solid 3px var(--color-primary);
-    width: calc(100% + 15px);
     border-radius: 0;
+    box-shadow: 0px 0px 12px #00000070;
+    transition: ease-in-out 0.05s;
+    font-size: 1.61rem;
 }
 .active {
     background-color: var(--light-blue);

src/css/index.css

@@ -18,6 +18,11 @@
   --font-family-mono: monaco, "Consolas", "Lucida Console", monospace;
 }
 
+a:hover:not(.button){
+  opacity: 1 !important;
+  color: #C4C4C4;
+}
+
 details[open] summary ~ * {
   animation: sweep .15s ease-in-out;
 }
@@ -68,7 +73,7 @@ body{
 }
 
 .pageTitle{
-  margin: 0;
+  margin: 4px;
 }
 
 .flex {

src/css/pages/Users.css

@@ -49,4 +49,7 @@ li input {
 }
 .tree > li:first-child:before {
     display: none;
+}
+.tree input{
+    width: 60px;
 }

src/pages/Users.js

@@ -8,7 +8,7 @@ import { Table, TableListEntry } from "../components/Table";
 const Permission = ({name, value}) => {
     return <li className="flex is-vertical-align">
         <label>{name}</label>
-        <input max={10} min={0} type='number' style={{maxWidth: '60px'}} defaultValue={value}></input>
+        <input max={10} min={0} type='number' defaultValue={value}></input>
     </li>;
 };