Merge pull request 'Hello sir, I have some fresh CSS for you' (#2) from D3vision/webserver-framework-frontend:master into master

Reviewed-on: #2

src/App.js

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

src/components/Sidebar copy.js

@@ -1,29 +0,0 @@
-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,6 +1,7 @@
 import React from 'react';
 import '../css/components/Sidebar.css';
 import NavLink from '../structures/NavLink';
+import logoImg from '../img/logo.png';
 
 const Sidebar = ({children}) => {
 
@@ -15,6 +16,8 @@ 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,11 +8,17 @@ const UserControls = () => {
 
     if (!user) return;
 
-    return <div className='user-controls'>
-        <div>
+    return <details className='dropdown user-controls'>
+        <summary className="is-vertical-align">
             Hello {user.displayName}
-        </div> 
-    </div>;
+            <img className="profile-picture" src="https://cdn.discordapp.com/avatars/187613017733726210/ee764860975d78bfd52652c6ddaed47b.webp?size=64"></img>
+        </summary>
+        <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);
-  }
-  
-  header {
-    position: absolute;
-    right: 0;
-    display: flex;
-    flex-direction: row;
-    text-align: center;
-    height: 50px;
-    background-color: var(--background-tertiary);
-  }
-  
-  .background {
-    display: flex;
-    height: 100%;
-    width: 100%;
-  }
-  
-  .main-content {
-    width: 100%;
-    height: 100%;
-    padding-right: 30px;
-    background-color: var(--background-secondary);
-  }
+  background-color: var(--background-primary);
+}
+
+header {
+  position: absolute;
+  right: 15px;
+  display: flex;
+  flex-direction: row;
+  text-align: center;
+  height: 50px;
+  border-radius: 0px 0px 4px 4px !important;
+}
+
+.background {
+  display: flex;
+  height: 100%;
+  width: 100%;
+}
+
+.main-content {
+  width: 100%;
+  height: 100%;
+  padding: 0 15px;
+  background-color: var(--background-secondary);
+}

src/css/components/Sidebar.css

@@ -1,7 +1,6 @@
 .sidebar {
     min-width: 200px;
     height: 100%;
-    margin-right: 10px;
 }
 
 .sidebar-menu {
@@ -9,6 +8,11 @@
     flex-direction: column;
 }
 
+.sidebar-logo{
+    margin: 1rem;
+    max-width: 170px;
+}
+
 .sidebar-menu-item {
     margin: 5px;
     margin-right: 10px;
@@ -19,7 +23,12 @@
     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,3 +1,38 @@
 .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,6 +3,7 @@
 :root {
   --bg-color: #232323;
   --bg-secondary-color: #343434;
+  --bg-tertiary-color: #45454545;
   --color-primary: #2760aa;
   --color-lightGrey: #d2d6dd;
   --color-grey: #ccc;
@@ -17,6 +18,59 @@
   --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;
@@ -28,7 +82,6 @@ html {
 
 ul {
   list-style-type: none;
-  /* padding: 0; */
 }
 
 tbody tr:hover {
@@ -66,10 +119,6 @@ tbody tr:hover {
   flex-direction: row;
 }
 
-button{
-  margin: 0.35em 0 0.7em;
-}
-
 .flex-wrap{
   flex-wrap: wrap;
 }

src/css/pages/Users.css

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

src/pages/Empty.js

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

src/pages/Users.js

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