From f4eb1ae4b03f59e4e2073d5aa01ec8de35f6498f Mon Sep 17 00:00:00 2001
From: Alan Friedman <d.alan.friedman@gmail.com>
Date: Fri, 24 May 2019 08:03:06 -0400
Subject: [PATCH] Various UI improvements (#74)

---
 client/src/components/About/index.js          | 13 ++++++-
 client/src/components/RoomLink/index.js       |  6 +--
 client/src/components/Settings/index.js       | 37 +++++++++----------
 .../components/Settings/styles.module.scss    |  5 +++
 client/src/components/Welcome/index.js        |  2 +-
 client/src/stylesheets/app.sass               | 21 +++++++++--
 client/src/stylesheets/nav.sass               |  5 +--
 7 files changed, 57 insertions(+), 32 deletions(-)
 create mode 100644 client/src/components/Settings/styles.module.scss

diff --git a/client/src/components/About/index.js b/client/src/components/About/index.js
index 854a517..71885c6 100644
--- a/client/src/components/About/index.js
+++ b/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"/>
-              <button>Submit</button>
+              <div className="input-group">
+                <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 />
diff --git a/client/src/components/RoomLink/index.js b/client/src/components/RoomLink/index.js
index 4d8b78e..b5cd2b0 100644
--- a/client/src/components/RoomLink/index.js
+++ b/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>
diff --git a/client/src/components/Settings/index.js b/client/src/components/Settings/index.js
index 16c9e3c..0c7dc75 100644
--- a/client/src/components/Settings/index.js
+++ b/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>
-          <h5>Sound</h5>
+      <div className={styles}>
+        <section>
+          <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>
-        <br />
-        <div>
-          <h5>This room</h5>
+        </section>
+        <section>
+          <h4 className='mb-3'>This room</h4>
           <RoomLink roomId={this.props.roomId} />
-        </div>
-        <br />
-        <div>
-          <h5>Room Ownership</h5>
+        </section>
+        <section>
+          <h4>Room Ownership</h4>
           <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>
-        <br />
-        <div>
-          <h5>Lock Room</h5>
+        </section>
+        <section>
+          <h4>Lock Room</h4>
           <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>
-        <br />
-        <div>
-          <h5>Slash Commands</h5>
+        </section>
+        <section>
+          <h4>Slash Commands</h4>
           <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>
     )
   }
diff --git a/client/src/components/Settings/styles.module.scss b/client/src/components/Settings/styles.module.scss
new file mode 100644
index 0000000..53a6e91
--- /dev/null
+++ b/client/src/components/Settings/styles.module.scss
@@ -0,0 +1,5 @@
+.styles {
+  section {
+    margin-bottom: 40px;
+  }
+}
diff --git a/client/src/components/Welcome/index.js b/client/src/components/Welcome/index.js
index 5465484..131c149 100644
--- a/client/src/components/Welcome/index.js
+++ b/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>
diff --git a/client/src/stylesheets/app.sass b/client/src/stylesheets/app.sass
index 0c882f1..114c73b 100644
--- a/client/src/stylesheets/app.sass
+++ b/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: 0px
+      padding: 7px
+      position: absolute
+      right: 15px
+      top: 15px
+      &:hover
+        background-color: #333
   .react-modal-header
     overflow: auto
     margin-bottom: 20px
@@ -231,4 +236,14 @@ img.zoom-img
   cursor: zoom-out
 
 img.zoomable
-  cursor: zoom-in
\ No newline at end of file
+  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
\ No newline at end of file
diff --git a/client/src/stylesheets/nav.sass b/client/src/stylesheets/nav.sass
index 97ee052..a37c52e 100644
--- a/client/src/stylesheets/nav.sass
+++ b/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