src/App.js

@@ -32,7 +32,7 @@ function App() {
   return (
     <div className='app is-full-screen'>
       
-      <header className="card">
+      <header>
         <UserControls />
       </header>
       

src/components/Sidebar copy.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import '../css/components/Sidebar.css';
+import NavLink from '../structures/NavLink';
+
+const Sidebar = ({children}) => {
+
+    return <div className='sidebar'>
+        {children}
+    </div>;
+
+};
+ 
+// Nav menu
+const SidebarMenu = ({menuItems, children}) => {
+
+    let key = 0;
+    return <div className='sidebar-menu'>
+        {menuItems.map(link => {
+            const { label, ...rest } = link;
+            return <NavLink activeClassName='active' className='sidebar-menu-item' key={key++} {...rest}>{ label}</NavLink>;
+        })}
+
+        {children}
+    </div>;
+    
+};
+
+export {SidebarMenu, Sidebar};
+export default Sidebar;

src/components/Sidebar.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import '../css/components/Sidebar.css';
 import NavLink from '../structures/NavLink';
-import logoImg from '../img/logo.png';
 
 const Sidebar = ({children}) => {
 
@@ -16,8 +15,6 @@ const SidebarMenu = ({menuItems, children}) => {
 
     let key = 0;
     return <div className='sidebar-menu'>
-        <img className="sidebar-logo" src={logoImg}/>
-        <hr/>
         {menuItems.map(link => {
             const { label, ...rest } = link;
             return <NavLink activeClassName='active' className='sidebar-menu-item' key={key++} {...rest}>{ label}</NavLink>;

src/components/UserControls.js

@@ -8,17 +8,11 @@ const UserControls = () => {
 
     if (!user) return;
 
-    return <details className='dropdown user-controls'>
+    return <div className='user-controls'>
-        <summary className="is-vertical-align">
+        <div>
             Hello {user.displayName}
-            <img className="profile-picture" src="https://cdn.discordapp.com/avatars/187613017733726210/ee764860975d78bfd52652c6ddaed47b.webp?size=64"></img>
+        </div> 
-        </summary>
+    </div>;
-        <div className="card">
-            <p><a href="#">Profile</a></p>
-            <hr/>
-            <p><a href="#" className="text-error">Logout</a></p>
-        </div>
-    </details>;
 
 };
 

src/css/App.css

@@ -1,26 +1,26 @@
 .app {
-  background-color: var(--background-primary);
+    background-color: var(--background-primary);
-}
+  }
-
+  
-header {
+  header {
-  position: absolute;
+    position: absolute;
-  right: 15px;
+    right: 0;
-  display: flex;
+    display: flex;
-  flex-direction: row;
+    flex-direction: row;
-  text-align: center;
+    text-align: center;
-  height: 50px;
+    height: 50px;
-  border-radius: 0px 0px 4px 4px !important;
+    background-color: var(--background-tertiary);
-}
+  }
-
+  
-.background {
+  .background {
-  display: flex;
+    display: flex;
-  height: 100%;
+    height: 100%;
-  width: 100%;
+    width: 100%;
-}
+  }
-
+  
-.main-content {
+  .main-content {
-  width: 100%;
+    width: 100%;
-  height: 100%;
+    height: 100%;
-  padding: 0 15px;
+    padding-right: 30px;
-  background-color: var(--background-secondary);
+    background-color: var(--background-secondary);
-}
+  }

src/css/components/Sidebar.css

@@ -1,6 +1,7 @@
 .sidebar {
     min-width: 200px;
     height: 100%;
+    margin-right: 10px;
 }
 
 .sidebar-menu {
@@ -8,11 +9,6 @@
     flex-direction: column;
 }
 
-.sidebar-logo{
-    margin: 1rem;
-    max-width: 170px;
-}
-
 .sidebar-menu-item {
     margin: 5px;
     margin-right: 10px;
@@ -23,12 +19,7 @@
     text-decoration: none;
     font-weight: bold;
 }
-.sidebar-menu-item.active {
+
-    opacity: .75;
-    border-right: solid 3px var(--color-primary);
-    width: calc(100% + 15px);
-    border-radius: 0;
-}
 .active {
     background-color: var(--light-blue);
 }

src/css/components/UserControls.css

@@ -1,38 +1,3 @@
 .user-controls {
     display: flex;
-    cursor: pointer;
-    -webkit-user-select: none; /* Safari */
-    -ms-user-select: none; /* IE 10 and IE 11 */
-    user-select: none; /* Standard syntax */
-}
-
-.user-controls summary::marker{
-    display: none;
-    font-size: 0px;
-}
-
-.user-controls .profile-picture {
-    height: 30px;
-    width: 30px;
-    margin-left: 10px;
-    border-radius: 50%;
-}
-
-.user-controls.dropdown>:last-child {
-    right: 0;
-    margin-top: 15px;
-    box-shadow: unset;
-    filter: drop-shadow(0px 0px 4px #00000085);
-    transition: .25s transform ease;
-}
-
-.user-controls.dropdown>:last-child:before {
-    content: ' ';
-    border-left: 10px solid transparent;
-    border-right: 10px solid transparent;
-    border-bottom: 15px solid #343434;
-    position: absolute;
-    display: block;
-    right: 5px;
-    top: -10px;
 }

src/css/index.css

@@ -3,7 +3,6 @@
 :root {
   --bg-color: #232323;
   --bg-secondary-color: #343434;
-  --bg-tertiary-color: #45454545;
   --color-primary: #2760aa;
   --color-lightGrey: #d2d6dd;
   --color-grey: #ccc;
@@ -18,59 +17,6 @@
   --font-family-mono: monaco, "Consolas", "Lucida Console", monospace;
 }
 
-details[open] summary ~ * {
-  animation: sweep .15s ease-in-out;
-}
-
-@keyframes sweep {
-  0%    {opacity: 0;}
-  100%  {opacity: 1;}
-}
-
-.main-content .card{
-  padding: 1rem 2rem 2rem 2rem;
-}
-
-table.hover tbody tr{
-  cursor: pointer;
-}
-
-table.striped tr:nth-of-type(2n) {
-  background-color: var(--bg-tertiary-color);
-}
-
-.button, [type=button], [type=reset], [type=submit], button {
-  padding: 1rem;
-}
-
-.page-controls button{
-  min-width: 120px;
-}
-
-.page-controls p{
-  margin: 0;
-}
-
-.page-controls{
-  margin-top: 2rem;
-}
-
-td, th {
-  padding: 1.2rem;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  margin: 0.35em 0 0.35em;
-}
-
-body{
-  line-height: 1.95;
-}
-
-.pageTitle{
-  margin: 0.7em 0 0.7em;
-}
-
 .flex {
   display: flex;
   gap: 10px;
@@ -82,6 +28,7 @@ html {
 
 ul {
   list-style-type: none;
+  /* padding: 0; */
 }
 
 tbody tr:hover {
@@ -119,6 +66,10 @@ tbody tr:hover {
   flex-direction: row;
 }
 
+button{
+  margin: 0.35em 0 0.7em;
+}
+
 .flex-wrap{
   flex-wrap: wrap;
 }

src/css/pages/Users.css

@@ -1,52 +1,11 @@
+.user-page {
+    height: 100%;
+}
+
+.user-list {
+    height: 95%;
+}
+
 li input {
     margin: 0;
-}
-.tree li {
-    list-style-type: none;
-    margin: 2px 0 2px 2px;
-    position: relative;
-}
-.tree span *:hover{
-    cursor: pointer
-}
-.tree li:before {
-    content: "";
-    position: absolute;
-    top: 4px;
-    left: -20px;
-    border-left: 1px solid #ddd;
-    border-bottom: 1px solid #ddd;
-    width: 18px;
-    height: 15px;
-}
-.tree ul li:before{
-    top: -8px;
-    left: -20px;
-    width: 17px;
-    height: 28px;
-}
-.tree ul li:after{
-    top: 19px;
-    left: -20px;
-    width: 18px;
-    height: 100%;
-}
-.tree .groupName{
-    padding-top: 3px;
-}
-.tree li:after {
-    position: absolute;
-    content: "";
-    top: 18px;
-    left: -20px;
-    border-left: 1px solid #ddd;
-    border-top: 1px solid #ddd;
-    width: 18px;
-    height: 100%;
-}
-.tree li:last-child:after {
-    display: none;
-}
-.tree > li:first-child:before {
-    display: none;
 }

src/pages/Admin.js

@@ -1,13 +1,11 @@
 import React from "react";
-import '../css/pages/Admin.css';
 
 const Admin = () => {
 
-    return <div className="user-page">
+    return <div>
-    <h4 className="pageTitle">Admin</h4>
+        ADMIN
-        <div className='card'>
-        </div>
     </div>;
+
 };
 
 export default Admin;

src/pages/Empty.js

@@ -1,13 +0,0 @@
-import React from "react";
-import '../css/pages/Empty.css';
-
-const Empty = () => {
-
-    return <div className="user-page">
-        <h4 className="pageTitle">Empty</h4>
-        <div className='card'>
-        </div>
-    </div>;
-};
-
-export default Empty;

src/pages/Home.js

@@ -3,11 +3,10 @@ import '../css/pages/Home.css';
 
 const Home = () => {
 
-    return <div className="user-page">
+    return <div className='home'>
-        <h4 className="pageTitle">Home</h4>
+        HOME
-        <div className='card'>
-        </div>
     </div>;
+
 };
 
 export default Home;

src/pages/Users.js

@@ -20,9 +20,7 @@ const PermissionGroup = ({ name, value }) => {
         else elements.push(<Permission {...props} />);
     }
     return <li>
-        <div className="groupName">
+        <b>Group: {name}</b>
-            <b>Group: {name}</b>
-        </div>
         <ul>
             {elements}
         </ul>
@@ -55,7 +53,7 @@ const Permissions = ({ perms }) => {
 
     return <div>
         <h4>Permissions </h4>
-        <ul className="tree">
+        <ul>
             {elements}
         </ul>
     </div>;
@@ -88,7 +86,7 @@ const User = ({ user }) => {
 
         <div className="row">
             <div className="col-6">
-                <div className="flex is-vertical-align">
+                <div className="flex">
                     <button className="button primary" onClick={() => {
                         navigate(-1);
                     }}>Back</button>
@@ -133,7 +131,7 @@ const UserListEntry = ({ user }) => {
         navigate(`/users/${user._id}`);
     };
     
-    return <tr onClick={onClick}>
+    return <tr onClick={onClick} style={{cursor: 'pointer'}}>
         <td>{user.username}</td>
         <td>{user._id}</td>
     </tr>;
@@ -143,7 +141,7 @@ const UserListEntry = ({ user }) => {
 // TODO: Make table list generic component
 const UserList = ({ users }) => {
     
-    return <table className="striped hover" style={{maxWidth: '30em', marginBottom: '10px'}}>
+    return <table className="striped" style={{maxWidth: '30em', marginBottom: '10px'}}>
         <thead>
             <tr>
                 <th>Username</th>
@@ -184,9 +182,9 @@ const Users = () => {
         return <div className="user-list-wrapper">
             <UserList users={users} />
             <div className='flex is-vertical-align page-controls'>
-                <button className="button dark" onClick={() => setPage(page - 1 || 1)}>Previous</button>
+                <button className="col-1 button dark" onClick={() => setPage(page - 1 || 1)}>Previous</button>
                 <p>Page: {page}</p>
-                <button className="button dark" onClick={() => {
+                <button className="col-1 button dark" onClick={() => {
                     if (users.length === 10) setPage(page + 1);
                 }}>Next</button>
             </div>
@@ -194,7 +192,7 @@ const Users = () => {
     };
 
     return <div className="user-page">
-        <h4 className="pageTitle">Users</h4>
+        <p>USERS</p>
         {error && <p>{error}</p>}
 
         <div className='user-list card'>