front: show action button only for onHover elemnt

webapp/src/GameProposal.css

@@ -19,6 +19,14 @@
     color: gray;
 }
 
+.GameProposal .li button.action {
+    display: none;
+}
+
+.GameProposal .li:hover button.action {
+    display: initial;
+}
+
 .separator {
     width: 20%; 
     /* height: 20px;  */

webapp/src/GameProposal.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import {Accept, Reject, Cancel} from './GameProposalAction';
 import './GameProposal.css';
 
 const State = {
@@ -22,6 +23,9 @@ const GameProposal = ({games}) => {
           from {game.opponentName}, opponentColor {game.opponentColor}
           <br/>
           <q>{game.message}</q>
+          <br/>
+          <Accept uuid={game.uuid}/>
+          <Reject uuid={game.uuid}/>
         </p>
         </div>
     });
@@ -34,6 +38,8 @@ const GameProposal = ({games}) => {
           to {game.opponentName}, opponentColor ⛀ ⛂{game.opponentColor}
           <br/>
           <q>{game.message}</q>
+          <br/>
+          <Cancel uuid={game.uuid}/>
         </p>
         </div>
     });

webapp/src/GameProposalAction.js

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export function Accept({uuid}) {
+    return <button className="action" id={uuid} type="submit">
+        Accept
+        </button>
+}
+
+export function Reject({uuid}) {
+    return <button className="action" id={uuid} type="submit">
+        Reject
+        </button>
+}
+
+export function Cancel({uuid}) {
+    return <button className="action" id={uuid} type="submit">
+        Cancel
+        </button>
+}