From 3a2c9e93e2022f10f0a3889eb1125107320bced6 Mon Sep 17 00:00:00 2001
From: djmil <andriy@djmil.dev>
Date: Wed, 1 Nov 2023 11:30:03 +0100
Subject: [PATCH] Better GemeAction Panel (#22)

Reviewed-on: http://192.168.8.55:3000/HQLAx/CordaCheckers/pulls/22
---
 webapp/src/components/Game/GameAction.css     | 25 +++++++++----------
 webapp/src/components/Game/GameAction.jsx     |  2 +-
 .../src/components/Game/GameAction/Accept.jsx |  2 +-
 .../components/Game/GameAction/Backward.jsx   |  2 +-
 .../src/components/Game/GameAction/Cancel.jsx |  2 +-
 .../src/components/Game/GameAction/Create.jsx |  2 +-
 .../components/Game/GameAction/DrawAcq.jsx    |  2 +-
 .../components/Game/GameAction/DrawReq.jsx    |  2 +-
 .../components/Game/GameAction/Forward.jsx    |  2 +-
 .../src/components/Game/GameAction/Reject.jsx |  2 +-
 .../components/Game/GameAction/Surrender.jsx  |  2 +-
 11 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/webapp/src/components/Game/GameAction.css b/webapp/src/components/Game/GameAction.css
index 69f5a28..4ef551e 100644
--- a/webapp/src/components/Game/GameAction.css
+++ b/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.busy 
+.game-action > .create:hover,  /* OR */
+.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.reject:hover {
+.game-action > .cancel:hover,
+.game-action > .reject:hover {
     background-color:#ff000030
 }
 
-.game-action.cancel:active,
-.game-action.reject:active {
+.game-action > .cancel: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;
 }
diff --git a/webapp/src/components/Game/GameAction.jsx b/webapp/src/components/Game/GameAction.jsx
index 8cdbcf9..da9102e 100644
--- a/webapp/src/components/Game/GameAction.jsx
+++ b/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 />}
diff --git a/webapp/src/components/Game/GameAction/Accept.jsx b/webapp/src/components/Game/GameAction/Accept.jsx
index 17c7249..426ae3a 100644
--- a/webapp/src/components/Game/GameAction/Accept.jsx
+++ b/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>
 }
diff --git a/webapp/src/components/Game/GameAction/Backward.jsx b/webapp/src/components/Game/GameAction/Backward.jsx
index 2cebb00..61a3d8a 100644
--- a/webapp/src/components/Game/GameAction/Backward.jsx
+++ b/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>
 }
diff --git a/webapp/src/components/Game/GameAction/Cancel.jsx b/webapp/src/components/Game/GameAction/Cancel.jsx
index 9470172..db706e3 100644
--- a/webapp/src/components/Game/GameAction/Cancel.jsx
+++ b/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>
 }
diff --git a/webapp/src/components/Game/GameAction/Create.jsx b/webapp/src/components/Game/GameAction/Create.jsx
index 5627077..f513f17 100644
--- a/webapp/src/components/Game/GameAction/Create.jsx
+++ b/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' : '')
             }
diff --git a/webapp/src/components/Game/GameAction/DrawAcq.jsx b/webapp/src/components/Game/GameAction/DrawAcq.jsx
index 5d1a5af..fd074bd 100644
--- a/webapp/src/components/Game/GameAction/DrawAcq.jsx
+++ b/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>
 }
diff --git a/webapp/src/components/Game/GameAction/DrawReq.jsx b/webapp/src/components/Game/GameAction/DrawReq.jsx
index 33f147e..0569162 100644
--- a/webapp/src/components/Game/GameAction/DrawReq.jsx
+++ b/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>
 }
diff --git a/webapp/src/components/Game/GameAction/Forward.jsx b/webapp/src/components/Game/GameAction/Forward.jsx
index a9f5380..ace8794 100644
--- a/webapp/src/components/Game/GameAction/Forward.jsx
+++ b/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>
 }
diff --git a/webapp/src/components/Game/GameAction/Reject.jsx b/webapp/src/components/Game/GameAction/Reject.jsx
index 9797197..b03fa6a 100644
--- a/webapp/src/components/Game/GameAction/Reject.jsx
+++ b/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>
 }
diff --git a/webapp/src/components/Game/GameAction/Surrender.jsx b/webapp/src/components/Game/GameAction/Surrender.jsx
index fb53cb4..ddde524 100644
--- a/webapp/src/components/Game/GameAction/Surrender.jsx
+++ b/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>
 }