Various UI improvements (#74)

client/src/components/About/index.js

@@ -66,8 +66,17 @@ class About extends Component {
           <form onSubmit={this.handleReportAbuse.bind(this)}>
             {this.state.abuseReported && <div>Thank you!</div>}
             <div>
-              <input placeholder='Room ID' onChange={this.handleUpdateRoomId.bind(this)} value={this.state.roomId} type="text"/>
+              <div className="input-group">
-              <button>Submit</button>
+                <input className='form-control' placeholder='Room ID' onChange={this.handleUpdateRoomId.bind(this)} value={this.state.roomId} type="text"/>
+                <div className="input-group-append">
+                  <button
+                    className="btn btn-secondary"
+                    type="button"
+                  >
+                    Submit
+                  </button>
+                </div>
+              </div>
             </div>
           </form>
           <br />

client/src/components/RoomLink/index.js

@@ -39,7 +39,7 @@ class RoomLink extends Component {
         <div className="form-group">
           <div className="input-group">
             <input id="room-url" className="form-control" type="text" readOnly value={this.state.roomUrl} />
-            <span className="input-group-btn">
+            <div className="input-group-append">
               <button
                 className="copy-room btn btn-secondary"
                 type="button"
@@ -48,9 +48,9 @@ class RoomLink extends Component {
                 data-clipboard-text={this.state.roomUrl}
                 title="Copied!"
               >
-                <Copy className="mt-1" />
+                <Copy />
               </button>
-            </span>
+            </div>
           </div>
         </div>
       </form>

client/src/components/Settings/index.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import RoomLink from 'components/RoomLink'
+import {styles} from './styles.module.scss'
 
 class Settings extends Component {
   handleSoundToggle() {
@@ -9,9 +10,9 @@ class Settings extends Component {
 
   render() {
     return (
-      <div>
+      <div className={styles}>
-        <div>
+        <section>
-          <h5>Sound</h5>
+          <h4>Sound</h4>
           <form>
             <div className="form-check">
               <label className="form-check-label" htmlFor="sound-control">
@@ -20,28 +21,24 @@ class Settings extends Component {
               </label>
             </div>
           </form>
-        </div>
+        </section>
-        <br />
+        <section>
-        <div>
+          <h4 className='mb-3'>This room</h4>
-          <h5>This room</h5>
           <RoomLink roomId={this.props.roomId} />
-        </div>
+        </section>
-        <br />
+        <section>
-        <div>
+          <h4>Room Ownership</h4>
-          <h5>Room Ownership</h5>
           <p>The person who created the room is the room owner and has special privileges, like the ability to lock and unlock the room.
           If the owner leaves the room, the second person to join assumes ownership. If they leave, the third person becomes owner, and so on.
           The room owner has a star icon next to their username in the participants dropdown.
           </p>
-        </div>
+        </section>
-        <br />
+        <section>
-        <div>
+          <h4>Lock Room</h4>
-          <h5>Lock Room</h5>
           <p>If you are the room owner, you can lock and unlock the room by clicking the lock icon in the nav bar. When a room is locked, no other participants will be able to join.</p>
-        </div>
+        </section>
-        <br />
+        <section>
-        <div>
+          <h4>Slash Commands</h4>
-          <h5>Slash Commands</h5>
           <p>The following slash commands are available:</p>
           <ul>
             <li>/nick [username] <span className="text-muted">changes username</span></li>
@@ -49,7 +46,7 @@ class Settings extends Component {
             <li>/clear <span className="text-muted">clears your message history</span></li>
             <li>/help <span className="text-muted">lists all commands</span></li>
           </ul>
-        </div>
+        </section>
       </div>
     )
   }

client/src/components/Settings/styles.module.scss

@@ -0,0 +1,5 @@
+.styles {
+  section {
+    margin-bottom: 40px;
+  }
+}

client/src/components/Welcome/index.js

@@ -27,7 +27,7 @@ class Welcome extends Component {
           </div>
         </div>
         <br />
-        <p>Others can join this room using the following URL:</p>
+        <p className='mb-2'>Others can join this room using the following URL:</p>
         <RoomLink roomId={this.props.roomId} />
         <div className="react-modal-footer">
           <button className="btn btn-primary btn-lg" onClick={this.props.close}>Ok</button>

client/src/stylesheets/app.sass

@@ -182,9 +182,14 @@ textarea
     width: calc(100% - 30px)
     margin: 20px auto 0px auto
     max-height: 75%
+    position: relative
     .close-modal
-      float: right
+      padding: 7px
-      padding: 0px
+      position: absolute
+      right: 15px
+      top: 15px
+      &:hover
+        background-color: #333
   .react-modal-header
     overflow: auto
     margin-bottom: 20px
@@ -232,3 +237,13 @@ img.zoom-img
 
 img.zoomable
   cursor: zoom-in
+
+.react-modal-content
+  opacity: 0
+  transition: opacity 150ms ease-in-out
+
+.react-modal-content_after-open
+  opacity: 1
+
+.react-modal-content_before-close
+  opacity: 0

client/src/stylesheets/nav.sass

@@ -78,8 +78,6 @@ button.lock-room
 .members-dropdown
   margin-left: 10px
   .dropdown__trigger
-    position: relative
-    top: 3px
     .members-action
       margin-right: 5px
   .dropdown__content 
@@ -88,7 +86,8 @@ button.lock-room
     border: 1px solid $inactive
     padding: 15px
     width: 175px
-    left: -110px
+    left: -10px
+    top: 35px
   ul
     li
       overflow: auto