Some more design

Author: stefaluc

app/src/App.css

@@ -1,3 +1,35 @@
+#main {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+#title {
+  width: 75%;
+  color: white;
+  font-size: 4em;
+  text-shadow: 0 1px 0 #ccc,
+               0 2px 0 #c9c9c9,
+               0 3px 0 #bbb,
+               0 4px 0 #b9b9b9,
+               0 5px 0 #aaa;
+  margin-bottom: 10px;
+}
+
+#box-init {
+  display: flex;
+  height: 75%;
+  width: 75%;
+  align-items: center;
+  justify-content: center;
+  background-color: #F5F7F9;
+  border-left: 3px solid #69c;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+}
+
 #box-main {
   display: flex;
   height: 75%;

app/src/App.js

@@ -64,8 +64,8 @@ class App extends Component {
   }
 
   componentDidUpdate() {
-    // keep message box scrolled appropriately with new messages
     if (!this.state.init) {
+      // keep message box scrolled appropriately with new messages
       document.getElementById("conversation-main").scrollTop = document.getElementById("conversation-main").scrollHeight;
 
       console.log("componentDidUpdate")
@@ -96,41 +96,47 @@ class App extends Component {
   }
 
   render() {
-    console.log(this.state);
     return (
-      <div id="box-main">
-        {this.state.init &&
-          <Login participantSubmit={this.participantSubmit} />
-        }
-        {!this.state.init &&
-          <div style={{width: "100%", height: "100%"}}>
-            <div id="top">
-              <div id="participants-main">
-                <b>{`Participants (${this.state.participants.length}):`}</b>
-                {this.state.participants.map(participant =>
-                  <div>{participant}</div>
-                )}
-              </div>
-              <div id="conversation-main">
-                <a href="https://github.com/stefaluc/go-react-chat"
-                  id="source"
-                  target="_blank"
-                  rel="noopener noreferrer">View source code</a>
-                {this.state.messages.map(message =>
-                  <Message message={message} />
-                )}
-              </div>
+        <div id="main">
+          <div id="title">
+            go-react-chat
+          </div>
+          {this.state.init &&
+            <div id="box-init">
+              <Login participantSubmit={this.participantSubmit} />
             </div>
-            <div id="bottom">
-              <div id="text-entry-main">
-                <form onSubmit={this.textSubmit} id="text-entry-form">
-                  <input type="text" id="text-entry-input" />
-                </form>
+          }
+          {!this.state.init &&
+          <div id="box-main">
+            <div style={{width: "100%", height: "100%"}}>
+              <div id="top">
+                <div id="participants-main">
+                  <b>{`Participants (${this.state.participants.length}):`}</b>
+                  {this.state.participants.map(participant =>
+                    <div>{participant}</div>
+                  )}
+                </div>
+                <div id="conversation-main">
+                  <a href="https://github.com/stefaluc/go-react-chat"
+                    id="source"
+                    target="_blank"
+                    rel="noopener noreferrer">View source code</a>
+                  {this.state.messages.map(message =>
+                    <Message message={message} />
+                  )}
+                </div>
+              </div>
+              <div id="bottom">
+                <div id="text-entry-main">
+                  <form onSubmit={this.textSubmit} id="text-entry-form">
+                    <input type="text" id="text-entry-input" />
+                  </form>
+                </div>
               </div>
             </div>
           </div>
-        }
-      </div>
+          }
+        </div>
     );
   }
 }

app/src/index.css

@@ -15,9 +15,6 @@ a {
 }
 
 #root {
-  display: flex;
   height: 100%;
   width: 100%;
-  align-items: center;
-  justify-content: center;
 }

app/src/styles/Login.css

@@ -2,4 +2,10 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  width: 100%;
+}
+
+#participant-form {
+  height: 30px;
+  padding: 10px;
 }

main.go

@@ -12,7 +12,7 @@ func main() {
 	// start conn_hub
 	hub := newConnHub()
 	go hub.run()
-	// serve create-react-app-bundle
+	// serve create-react-app bundle
 	fs := http.FileServer(http.Dir("./app/build"))
 	http.Handle("/", fs)
 	// serve websocket route
@@ -21,8 +21,8 @@ func main() {
 	})
 	// start server
 	var port string
+	// let heroku set port in production
 	if os.Getenv("GO_ENV") == "PRODUCTION" {
-		// let heroku set port in production
 		port = ":" + os.Getenv("PORT")
 	} else {
 		port = ":8081"