add item icon button for viewing item

client/src/box.js

@@ -51,7 +51,7 @@ const Box = ({ boxData, boxHandler, itemHandler }) => {
                     <h2 className='box-title'>{boxData.name}</h2>
                     <h3 className='box-subtitle'>{boxData.description}</h3>
                 </div>
-                <span className='menu-more box material-icons' onClick={handleBoxMenuClick}>more_vert</span>
+                <span className='menu-btn box material-icons' onClick={handleBoxMenuClick}>more_vert</span>
             </div>
             <div className='head-divider'></div>
             <ul className='list-box-item scroll-container'>

client/src/item.js

@@ -25,6 +25,8 @@ const Item = ({ data, itemHandler, boxID }) => {
     const handleItemMenuClick = () => {
         setShowMenu(true);
     }
+    const handleItemViewClick = () => {
+    }
     const moreMenu = () => {
         return (
             <ul className='menu-more-list item'>
@@ -43,9 +45,13 @@ const Item = ({ data, itemHandler, boxID }) => {
         <li className='item'>
             <div ref={menu} className='item-menu-more-container'>{showMenu && moreMenu()}</div>
             <span className='item-name'>{data.name}</span>
-            <span className='menu-more item material-icons' onClick={handleItemMenuClick}>
+            <span className='menu-btn item material-icons' onClick={handleItemViewClick}>
+                remove_red_eye 
+        </span>
+            <span className='menu-btn item material-icons' onClick={handleItemMenuClick}>
                 more_vert 
         </span>
+        
         </li>
     );
 };

client/src/styles/app.css

@@ -166,7 +166,8 @@ li.box {
 }
 li.item {
     font-size: 0.75rem;
-    display: flex;
+    display: grid;
+    grid-template-columns: 0 1fr auto auto ;
     position: relative;
     align-items: center;
     justify-content: flex-start;
@@ -203,7 +204,7 @@ li.item:hover {
     cursor: pointer;
     background-color: var(--white_darker);
 }
-.menu-more {
+.menu-btn {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -212,16 +213,16 @@ li.item:hover {
     margin-left: auto;
     border-radius: 50%;
 }
-.menu-more:hover {
+.menu-btn:hover {
     background-color: var(--white_darker);
 }
-.menu-more.box {
+.menu-btn.box {
     font-size: 1.25rem;
 }
-.menu-more.item {
+.menu-btn.item {
     font-size: 1rem;
 }
-.menu-more:hover {
+.menu-btn:hover {
     cursor: pointer;
 }
 .menu-more-list {