added roll icon

src/App.js

@@ -40,6 +40,9 @@ function App() {
                                 <Gameboard />
                             </PlayerDataContext.Provider>
                         ) : null}
+                        <a href='https://www.flaticon.com/free-icons/hand' title='hand icons'>
+                            Hand icons created by berkahicon - Flaticon
+                        </a>
                     </Route>
                 </Switch>
             </Router>

src/components/Navbar.css

@@ -27,3 +27,6 @@
     width: 50px;
     height: 50px;
 }
+.roll {
+    cursor: pointer;
+}

src/components/game-board-components/Dice.jsx

@@ -6,10 +6,11 @@ import three from '../../images/dice/3.png';
 import four from '../../images/dice/4.png';
 import five from '../../images/dice/5.png';
 import six from '../../images/dice/6.png';
+import roll from '../../images/dice/roll.png';
 
 const Dice = ({ rolledNumberCallback, rolledNumber, nowMoving, color, movingPlayer }) => {
     const socket = useContext(SocketContext);
-    const [images] = useState([one, two, three, four, five, six]);
+    const [images] = useState([one, two, three, four, five, six, roll]);
     const handleRoll = () => {
         socket.emit('game:roll');
     };
@@ -24,7 +25,7 @@ const Dice = ({ rolledNumberCallback, rolledNumber, nowMoving, color, movingPlay
                 rolledNumber ? (
                     <img src={images[rolledNumber - 1]} alt={rolledNumber} width='100' height='100' />
                 ) : nowMoving ? (
-                    <button onClick={handleRoll}> Roll </button>
+                    <img src={images[6]} className='roll' alt='roll' width='100' height='100' onClick={handleRoll} />
                 ) : null
             ) : null}
         </div>