Better GemeAction Panel (#22)

Reviewed-on: http://192.168.8.55:3000/HQLAx/CordaCheckers/pulls/22

webapp/src/components/Game/GameAction.css

@@ -1,4 +1,4 @@
-.action-panel {
+.game-action {
     margin-bottom: 10px;
     /* background-color: lightgrey; */
     width: 100%;
@@ -6,13 +6,12 @@
     padding-bottom: 8px; */
     color: black;
     padding-left: -10px;
-    /* */
 
     margin-left: 10px;
     border: 0.5px dotted lightslategray; 
 }
 
-.game-action {
+.game-action > button {
     width:fit-content;
     padding: 8px;
     padding-left: 15px;
@@ -22,34 +21,34 @@
     margin: 2px;
 }
 
-.game-action.create:hover,  /* OR */
+.game-action > .create:hover,  /* OR */
-.game-action.busy 
+.game-action > .busy 
 {
     background-color:#00b0ff60;  
 }
 
-.game-action.create.enabled:active {
+.game-action > .create.enabled:active {
     background-color:#00b0ffa0;  
 }
 
-.game-action.cancel:hover,
+.game-action > .cancel:hover,
-.game-action.reject:hover {
+.game-action > .reject:hover {
     background-color:#ff000030
 }
 
-.game-action.cancel:active,
+.game-action > .cancel:active,
-.game-action.reject:active {
+.game-action > .reject:active {
     background-color:#ff000080
 }
 
-.game-action.accept:hover {
+.game-action > .accept:hover {
     background-color: #00af0030;  
 }
 
-.game-action.accept:active {
+.game-action > .accept:active {
     background-color:#00af0080;  
 }
 
-.game-action.disabled {
+.game-action > .disabled {
     color: gray;
 }

webapp/src/components/Game/GameAction.jsx

@@ -27,7 +27,7 @@ export default function GameAction() {
   const isArchivePath = matchPath("/game/archive/*", pathname);
 
   return (
-    <div className='action-panel'>
+    <div className='game-action'>
       {isNewGamePath && <Create />}
 
       {isProposalPath && <Reject />}

webapp/src/components/Game/GameAction/Accept.jsx

@@ -2,5 +2,5 @@ import React from 'react';
 
 export default function Accept() {
 
-    return <button className='game-action accept'>Accept</button>
+    return <button className='accept'>Accept</button>
 }

webapp/src/components/Game/GameAction/Backward.jsx

@@ -2,5 +2,5 @@ import React from 'react';
 
 export default function Backward() {
 
-    return <button className='game-action backward'>Backward</button>
+    return <button className='backward'>Backward</button>
 }

webapp/src/components/Game/GameAction/Cancel.jsx

@@ -2,5 +2,5 @@ import React from 'react';
 
 export default function Cancel() {
 
-    return <button className='game-action cancel'>Cancel</button>
+    return <button className='cancel'>Cancel</button>
 }

webapp/src/components/Game/GameAction/Create.jsx

@@ -31,7 +31,7 @@ export default function Create() {
 
     return (
         <button
-            className={'game-action create'
+            className={'create'
                 + (ctx.enabled ? ' enabled' : ' disabled')
                 + (ctx.fetching ? ' busy' : '')
             }

webapp/src/components/Game/GameAction/DrawAcq.jsx

@@ -2,5 +2,5 @@ import React from 'react';
 
 export default function DrawAcq() {
 
-    return <button className='game-action draw-acq'>Draw acquire</button>
+    return <button className='draw-acq'>Draw acquire</button>
 }

webapp/src/components/Game/GameAction/DrawReq.jsx

@@ -2,5 +2,5 @@ import React from 'react';
 
 export default function DrawReq() {
 
-    return <button className='game-action drawreq'>Draw request</button>
+    return <button className='drawreq'>Draw request</button>
 }

webapp/src/components/Game/GameAction/Forward.jsx

@@ -2,5 +2,5 @@ import React from 'react';
 
 export default function Forward() {
 
-    return <button className='game-action forward'>Forward</button>
+    return <button className='forward'>Forward</button>
 }

webapp/src/components/Game/GameAction/Reject.jsx

@@ -2,5 +2,5 @@ import React from 'react';
 
 export default function Reject() {
 
-    return <button className='game-action reject'>Reject</button>
+    return <button className='reject'>Reject</button>
 }

webapp/src/components/Game/GameAction/Surrender.jsx

@@ -2,5 +2,5 @@ import React from 'react';
 
 export default function Surrender() {
 
-    return <button className='game-action surrender'>Surrender</button>
+    return <button className='surrender'>Surrender</button>
 }