A couple more appearance tweaks.

public/gear.svg

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg version="1.1" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
- <path d="m24.04 0.14285c-1.376 0-2.7263 0.12375-4.0386 0.34741l-0.64 6.7853c-1.3572 0.37831-2.6417 0.90728-3.8432 1.585l-5.244-4.3317c-2.2152 1.5679-4.1541 3.4955-5.7217 5.7101l4.3426 5.2437c-0.67695 1.2001-1.2177 2.4878-1.5959 3.8432l-6.7745 0.64053c-0.22379 1.3127-0.34741 2.6622-0.34741 4.0386 0 1.3788 0.12285 2.7238 0.34741 4.0386l6.7745 0.64056c0.37825 1.3554 0.91896 2.6431 1.5959 3.8432l-4.3317 5.2437c1.5648 2.2089 3.4908 4.1457 5.6997 5.7105l5.2545-4.3426c1.2023 0.67835 2.485 1.2174 3.8432 1.5959l0.64053 6.7853c1.3123 0.22368 2.6626 0.33658 4.0386 0.33658s2.7155-0.11289 4.0278-0.33658l0.64053-6.7853c1.3582-0.37847 2.6409-0.91755 3.8432-1.5959l5.2545 4.3426c2.2088-1.5649 4.1348-3.5017 5.6997-5.7105l-4.3317-5.2437c0.67695-1.2001 1.2177-2.4878 1.5959-3.8432l6.7744-0.64056c0.22456-1.3148 0.34741-2.6598 0.34741-4.0386 0-1.3765-0.12361-2.726-0.34741-4.0386l-6.7744-0.64053c-0.37825-1.3554-0.91896-2.6431-1.5959-3.8432l4.3426-5.2437c-1.568-2.2146-3.507-4.1422-5.722-5.7101l-5.2437 4.3317c-1.2015-0.67776-2.486-1.2067-3.8432-1.585l-0.641-6.7853c-1.3123-0.22366-2.6518-0.34741-4.0278-0.34741zm0 14.776c5.0178 0 9.076 4.0691 9.076 9.0869s-4.0582 9.0869-9.076 9.0869-9.0869-4.0691-9.0869-9.0869 4.0691-9.0869 9.0869-9.0869z"/>
+ <path d="m24.04 0.14285c-1.376 0-2.7263 0.12375-4.0386 0.34741l-0.64 6.7853c-1.3572 0.37831-2.6417 0.90728-3.8432 1.585l-5.244-4.3317c-2.2152 1.5679-4.1541 3.4955-5.7217 5.7101l4.3426 5.2437c-0.67695 1.2001-1.2177 2.4878-1.5959 3.8432l-6.7745 0.64053c-0.22379 1.3127-0.34741 2.6622-0.34741 4.0386 0 1.3788 0.12285 2.7238 0.34741 4.0386l6.7745 0.64056c0.37825 1.3554 0.91896 2.6431 1.5959 3.8432l-4.3317 5.2437c1.5648 2.2089 3.4908 4.1457 5.6997 5.7105l5.2545-4.3426c1.2023 0.67835 2.485 1.2174 3.8432 1.5959l0.64053 6.7853c1.3123 0.22368 2.6626 0.33658 4.0386 0.33658s2.7155-0.11289 4.0278-0.33658l0.64053-6.7853c1.3582-0.37847 2.6409-0.91755 3.8432-1.5959l5.2545 4.3426c2.2088-1.5649 4.1348-3.5017 5.6997-5.7105l-4.3317-5.2437c0.67695-1.2001 1.2177-2.4878 1.5959-3.8432l6.7744-0.64056c0.22456-1.3148 0.34741-2.6598 0.34741-4.0386 0-1.3765-0.12361-2.726-0.34741-4.0386l-6.7744-0.64053c-0.37825-1.3554-0.91896-2.6431-1.5959-3.8432l4.3426-5.2437c-1.568-2.2146-3.507-4.1422-5.722-5.7101l-5.2437 4.3317c-1.2015-0.67776-2.486-1.2067-3.8432-1.585l-0.641-6.7853c-1.3123-0.22366-2.6518-0.34741-4.0278-0.34741zm0 14.776c5.0178 0 9.076 4.0691 9.076 9.0869s-4.0582 9.0869-9.076 9.0869-9.0869-4.0691-9.0869-9.0869 4.0691-9.0869 9.0869-9.0869z" fill="#fff"/>
  <metadata>
   <rdf:RDF>
    <cc:Work>

src/board.js

@@ -731,8 +731,8 @@ class Board extends React.Component {
     return (
       <div>
         <div className="status">
-          <h2 style={{display: "inline-block", margin: "0"}}>{status}</h2>
+          <h2 className="white-on-light" style={{display: "inline-block", margin: "0"}}>{status}</h2>
-          <h1 style={{display: "inline-block", margin: "0"}}>{this.lobbyName}</h1>
+          <h2 className="white-on-light" style={{display: "inline-block", margin: "0"}}>{this.lobbyName}</h2>
           <img
             className="icon"
             alt="Settings icon: a gear"

src/components/style.css

@@ -11,8 +11,7 @@
 }
 
 .popup-inner p, .popup-inner ul {
-  margin: 0;
+  margin: 0 0 0.5em;
-  margin-bottom: 0.5em;
 }
 
 .popup-inner li {
@@ -44,8 +43,8 @@
     right: 30%;
     top: 15%;
     bottom: 15%;
-    padding-left: 2%;
+    padding-left: 3%;
-    padding-right: 2%;
+    padding-right: 3%;
     font-size: 1.5em;
     line-height: 150%;
   }
@@ -55,7 +54,7 @@
   position: absolute;
   margin: auto;
   border-radius: 2px;
-  background: white;
+  background: #d5d5d5;
   overflow-x: hidden;
   overflow-y: auto;
   text-align: justify;
@@ -64,3 +63,8 @@
 .popup h1 {
   text-align: center;
 }
+
+.white-on-light {
+  color: white;
+  text-shadow: 2px 2px 2px #0003;
+}

src/index.css

@@ -61,8 +61,6 @@ ol, ul {
   font-size: 24px;
   font-weight: bold;
   line-height: 30px;
-  margin-right: -1px;
-  margin-top: -1px;
   padding: 0;
   text-align: center;
   outline: none;
@@ -100,21 +98,30 @@ ol, ul {
   align-items: center;
 }
 
-.icon {
-  opacity: 0.4;
-}
-
 .settings-buttons {
   margin-bottom: 1.5em;
 }
 
+.icon {
+  opacity: 0.95;
+  transition: 50ms linear;
+  transition-property: opacity, margin-top;
+}
+
 .icon:hover {
-  opacity: 0.6;
+  opacity: 1;
+  margin-top: -0.35em;
 }
 
 .big-input {
   font-size: 150%;
   padding: 0.5em;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-style: solid;
+  border-width: 1px;
+  border-color: rgba(255, 255, 255, 0.15);
+  color: white;
+  font-weight: bold;
 }
 
 .big-input[type="submit"] {

src/index.js

@@ -31,7 +31,7 @@ class NameForm extends React.Component {
     return (
       <form onSubmit={this.handleSubmit} style={{ marginBottom: '15em', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
         <label htmlFor='lobby-name'>
-          <h1 style={{ fontSize: '5rem' }}>Lobby Name:</h1>
+          <h1 className='white-on-light' style={{ fontSize: '5rem' }}>Lobby Name:</h1>
         </label>
         <div>
           <input className='big-input' name='lobby-name' type="text" value={this.state.value} onChange={this.handleChange} />