From a701e8e01deec12d4349376d9effe0122ea8acf7 Mon Sep 17 00:00:00 2001
From: "np.w" <nicolaspatrickward@gmail.com>
Date: Wed, 17 Feb 2021 12:27:04 -0600
Subject: [PATCH] add item icon button for viewing item

---
 client/src/box.js         |  2 +-
 client/src/item.js        |  8 +++++++-
 client/src/styles/app.css | 13 +++++++------
 3 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/client/src/box.js b/client/src/box.js
index 24897aa..43774c9 100644
--- a/client/src/box.js
+++ b/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'>
diff --git a/client/src/item.js b/client/src/item.js
index 9e9c67d..eb04cc3 100644
--- a/client/src/item.js
+++ b/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>
     );
 };
diff --git a/client/src/styles/app.css b/client/src/styles/app.css
index 753e796..7313ecb 100644
--- a/client/src/styles/app.css
+++ b/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 {