From 0421166bc969cd95c858705b092c579c58be15f2 Mon Sep 17 00:00:00 2001
From: James Ketrenos <james_eikona@ketrenos.com>
Date: Fri, 25 Mar 2022 16:32:31 -0700
Subject: [PATCH] Allow name change for non-players

Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
---
 client/src/Actions.js       |  2 +-
 client/src/MediaControl.css | 26 +++++++++-----------------
 client/src/MediaControl.js  |  2 +-
 3 files changed, 11 insertions(+), 19 deletions(-)

diff --git a/client/src/Actions.js b/client/src/Actions.js
index 88140e4..bcdf1e8 100644
--- a/client/src/Actions.js
+++ b/client/src/Actions.js
@@ -169,8 +169,8 @@ const Actions = ({tradeActive, setTradeActive, buildActive, setBuildActive}) =>
       { name && inLobby && <>
         <Button disabled={(color && active >= 2) ? false : true } onClick={startClick}>Start game</Button>
         <Button disabled={color ? false : true} onClick={newTableClick}>New table</Button>
-        <Button disabled={color ? true : false} onClick={changeNameClick}>Change name</Button>
       </> }
+      { name && !color && <Button disabled={color ? true : false} onClick={changeNameClick}>Change name</Button> }
       { name && !inLobby && <>
         <Button disabled={
             robberActions || 
diff --git a/client/src/MediaControl.css b/client/src/MediaControl.css
index d365bf7..8ee364a 100644
--- a/client/src/MediaControl.css
+++ b/client/src/MediaControl.css
@@ -8,6 +8,14 @@
   border-radius: 0.25rem;
 }
 
+.MediaControlSpacer.Medium {
+  width: 11.5em;
+  height: 8.625em;
+  min-width: 11.5em;
+  min-height: 8.625em;
+}
+
+
 .MediaControl {
   display: flex;
   position: fixed;
@@ -25,32 +33,16 @@
   position: relative;
   width: 100%;
   height: 100%;
-  /*
-  width: 5rem;
-  height: 3.75rem;
-  /*
-  max-width: 5rem;
-  max-height: 3.75rem;
-  */
   background-color: #444;
   border-radius: 0.25rem;
   border: 1px solid black;
 }
 
-.MediaControl.Medium .Video {
-  /*
-  display: flex;
+.MediaControl.Medium {
   width: 11.5em;
   height: 8.625em;
   min-width: 11.5em;
   min-height: 8.625em;
-/*  width: 9.75rem;
-  height: 7.3125rem;
-  max-width: 9.75rem;
-  max-height: 7.3125rem;*/
-  background-color: #444;
-  border-radius: 0.25rem;
-  border: 1px solid black;
 }
 
 .MediaControl > div {
diff --git a/client/src/MediaControl.js b/client/src/MediaControl.js
index fda5265..abcf12b 100644
--- a/client/src/MediaControl.js
+++ b/client/src/MediaControl.js
@@ -643,7 +643,7 @@ const MediaControl = ({isSelf, peer, className}) => {
   }
 
   return <>
-    <div className="MediaControlSpacer"/>
+    <div className={`MediaControlSpacer ${className}`}/>
     <div className={`MediaControl ${className}`} data-peer={peer.name}>
       <div className="Controls" >
       { isSelf && <div onTouchStart={toggleMute} onClick={toggleMute}>