Allow name change for non-players

Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>

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 || 

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 {

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}>