material style

client/src/box.js

@@ -8,11 +8,10 @@ const Box = ({ boxData, boxHandler, itemHandler }) => {
                 onDragStart={(event) => boxHandler.handleDragStart(boxData, event)}
                 onDragOver={boxHandler.handleDragOver}
                 onDrop={(event) => boxHandler.handleDrop(boxData, event)}>
-                <span>{boxData.sort}</span>
+                {false && <span>{boxData.sort}</span>}
                 <h2 className="box-title">{boxData.name}</h2>
-                <div className="box-subtitle">
-                    <h3>{boxData.description}</h3>
-                </div>
+                <h3 className='box-subtitle'>{boxData.description}</h3>
+                <div className='head-divider'></div>
                 <ul className="list-box-item">
                     {boxData.item.map(((item, index) => {
                         return <Item

client/src/item.js

@@ -1,13 +1,37 @@
-import React from 'react';
-
+import React, { useState, setState, useRef, useEffect } from 'react';
 const Item = ({ data, itemHandler, boxID }) => {
-    return (<li className="item">
-        <p className="item-name">{data.name}</p>
-        <div className="item-menu">
-            <button className="item-function" onClick={() => itemHandler.handleEdit(boxID, data._id)}>edit</button>
-            <button className="item-function" onClick={() => itemHandler.handleRemove(boxID, data._id)}>remove</button>
-        </div>
-    </li>);
+    const menu = useRef(null);
+    const handleClick = (event) => {
+        if (menu.current.contains(event.target)) return;
+        setShowMenu(false);
+    }
+    useEffect(() => {
+        document.addEventListener('mousedown', handleClick);
+        return () => {
+          document.removeEventListener('mousedown', handleClick);
+        };
+      }, []);
+    const [showMenu, setShowMenu] = useState(false);
+    const handleItemMenuClick = () => {
+        setShowMenu(true);
+    }
+    const moreMenu = () => {
+        return (
+            <div className='item-menu-more'>
+                <button className='item-function' onClick={() => itemHandler.handleEdit(boxID, data._id)}>edit</button>
+                <button className='item-function' onClick={() => itemHandler.handleRemove(boxID, data._id)}>remove</button>
+            </div>
+        )
+    }
+    return (
+        <li className='item'>
+            <div ref={menu} className='item-menu-more-container'>{showMenu && moreMenu()}</div>
+            <span className='item-name'>{data.name}</span>
+            <span className='item-menu material-icons' onClick={handleItemMenuClick}>
+                more_vert 
+        </span>
+        </li>
+    );
 };
 
 export default Item;

client/src/styles/app.css

@@ -1,5 +1,16 @@
- 
- form > fieldset > label {
+@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
+
+
+html, body {
+    margin: 0;
+}
+
+html {
+    background-color: #FAFAFA;
+    color: #212121;
+}
+
+form > fieldset > label {
     display: flex;
 }
 
@@ -7,20 +18,6 @@ form > fieldset {
     border: none;
 }
 
-li {
-    list-style: none;
-    font-size: 11px;
-}
-li.box:hover {  
-    cursor: move;  
-}
-li.item {
-    display: grid;
-    grid-template-columns: 1fr auto auto;
-    column-gap: 0.1em;
-    margin: 0.4em 0 0 0;
-    padding: 0;
-}
 h1, h2, h3, h4 {
     font-weight:normal;
     margin: 0;
@@ -36,16 +33,14 @@ button.box-function, button.item-function {
 button:hover {
     cursor: pointer;
 }
-.box {
-    box-sizing: content-box;
-    outline: 1px solid black;
-    box-shadow: 4px 4px black;
+.box-title {
+    font-size: 1.25rem;
+    line-height: 2rem;
 }
 .box-subtitle {
-    margin: 0;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    font-size: 12px;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    opacity: 0.6;
     text-transform: lowercase;
 }
 ul.list-box {
@@ -55,14 +50,81 @@ ul.list-box {
     margin: 0;
     gap: 1em;
 }
-ul.list-box-item {
-    padding: 0 0 0 1em;
-    display: grid;
+
+.box {
+    height: min-content;
+    width: 344px;
+    padding: 16px;
+    background-color: white;
+    border-radius: 4px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #e0e0e0;
+    box-shadow: 
+        0px 0px 0px 0px rgba(0, 0, 0, 0.2), 
+        0px 0px 0px 0px rgba(0, 0, 0, 0.14),
+        0px 0px 0px 0px rgba(0,0,0,.12);
+    list-style: none;
+
 }
-p {
-    margin: 0;
+.list-box-item {
+    margin: 1rem 0;
+    max-height: 200px;
+    overflow-y: scroll;
 }
-.drop-zone {
-    width: 100px;
+.list-box-item::-webkit-scrollbar {
+    width: 5px;
+}
+.list-box-item::-webkit-scrollbar-track {
+    background: #ddd;
+}
+.list-box-item::-webkit-scrollbar-thumb {
+    background: #666;
+}
+.item {
+    font-size: 0.75rem;
+    display: flex;
+    position: relative;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 0.75rem;
+    list-style: none;
+}
+
+.head-divider {
+    margin: 1rem 0;
+    width: 100%;
+    height: 1px;
+    background-color: #e0e0e0;
+}
+
+.item-menu {
+    font-size: 1rem;
+    margin-right: 0;
+    margin-left: auto;
+}
+.item-menu:hover {
+    cursor: pointer;
+}
+.item-menu-more {
+    position: absolute;
+    margin: 0 10px 0 0;
+    top: 2rem;
+    right: 0;
     height: 100px;
-}
+    width: 75px;
+    z-index: 1;
+    background-color: white;
+    border-radius: 4px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #e0e0e0;
+    box-shadow: 
+        0px 0px 0px 0px rgba(0, 0, 0, 0.2), 
+        0px 0px 0px 0px rgba(0, 0, 0, 0.14),
+        0px 0px 0px 0px rgba(0,0,0,.12);
+
+}
+  .scroll1::-webkit-scrollbar-thumb {
+    background: #666; 
+  }

client/src/styles/modal.css

@@ -1,4 +1,5 @@
 .modal-container {
+    z-index: 1;
     top: 0;
     left: 0;
     position: absolute;