Scroll box

client/components/LeftNav.jsx

@@ -2,25 +2,34 @@ import React from 'react';
 import { Nav } from 'react-bootstrap';
 
 const LeftNav = props => (
-  <Nav defaultActiveKey="/feed" className="flex-column">
+  <Nav defaultActiveKey="/feed" className="flex-column" id="leftNav">
     <Nav.Link>
       <img
         src="logo2.png"
         width="200px"
         height="60px"
         className="d-inline-block align-top mx-auto"
-        alt="Snap Desk Logo">
-      </img>
+        alt="Snap Desk Logo"
+      ></img>
+    </Nav.Link>
+    <Nav.Link eventKey="profile-link">
+      {' '}
+      <img
+        src={props.url}
+        width="115px"
+        height="115px"
+        className="d-inline-block align-top rounded-circle mx-auto"
+        alt="Snap Desk Logo"
+      ></img>
+      <h4 id="user-Name">{props.userName}</h4>
+    </Nav.Link>
+    <Nav.Link
+      className="btn btn-success btn-sm"
+      eventKey="logout-link"
+      id="logout"
+    >
+      Logout
     </Nav.Link>
-    <Nav.Link eventKey="profile-link">  <img
-      src={props.url}
-      width="115px"
-      height="115px"
-      className="d-inline-block align-top rounded-circle mx-auto"
-      alt="Snap Desk Logo">
-    </img>
-      <h4 id="user-Name">{props.userName}</h4></Nav.Link>
-    <Nav.Link className="btn btn-success btn-sm" eventKey="logout-link">Logout</Nav.Link>
   </Nav>
 );
 

client/components/MenteeTicketBox.jsx

@@ -28,15 +28,15 @@ class MenteeTicketBox extends Component {
     if (this.props.ticket.status === 'active') {
       buttons = (
         <span>
-          <Button disabled={true} type="button" className="btn btn-success">Resolve</Button>
-          <Button onClick={() => this.props.deleteTicket(this.props.ticket.messageId)} type="button" className="btn btn-warning">Delete</Button>
+          <Button disabled={true} type="button" className="btn btn-secondary">Resolve</Button>
+          <Button onClick={() => this.props.deleteTicket(this.props.ticket.messageId)} type="button" className="btn btn-success">Delete</Button>
         </span>
       )
     } else {
       buttons = (
         <span>
-          <Button onClick={() => this.props.resolveTicket(this.props.ticket.messageId)}type="button" className="btn btn-success">Resolve</Button>
-          <Button disabled={true} type="button" className="btn btn-warning">Delete</Button>
+          <Button onClick={() => this.props.resolveTicket(this.props.ticket.messageId)}type="button" className="btn btn-secondary">Resolve</Button>
+          <Button disabled={true} type="button" className="btn btn-success">Delete</Button>
         </span>
       )
     }

client/containers/FeedContainer.jsx

@@ -54,7 +54,7 @@ class FeedContainer extends Component {
     let activeTickets;
     console.log('ACTIVE TICKETS: ', this.props.activeTickets);
     if (!this.props.activeTickets || this.props.activeTickets.length === 0) {
-      activeTickets = (<p>No active tickets</p>)
+      activeTickets = <p>No active tickets</p>;
     } else {
       activeTickets = [];
       for (let i = 0; i < this.props.activeTickets.length; i++) {
@@ -84,20 +84,20 @@ class FeedContainer extends Component {
               )
           }
 
-
           activeTickets.push(ticketBox);
         }
       }
-
+    }
+
     return (
       <div>
-        <div className="ticketDisplay">
+        <div className="ticketDisplay overflow-auto">
           {/* map buildFeed to tickets array */}
           {/* <BystanderTicketBox /> */}
           {activeTickets}
         </div>
         <div className="ticketCreator">
-          <TicketCreator {...this.props} key={this.props.userId}/>
+          <TicketCreator {...this.props} key={this.props.userId} />
         </div>
       </div>
     );

client/styles/app.css

@@ -45,42 +45,52 @@ html {
 .btn-outline-primary:hover {
   /* color: #42ffc1 !important; */
   color: #6c757d !important;
-  background-color: #3beeb2  !important;
+  background-color: #3beeb2 !important;
   background-image: none !important;
-  border-color: #3beeb2   !important;
+  border-color: #3beeb2 !important;
 }
 .btn-secondary {
-  color:#f5f7f6 !important;
+  color: #f5f7f6 !important;
   background-color: #3beeb2 !important;
   background-image: none !important;
-  border-color: #3beeb2!important;
+  border-color: #3beeb2 !important;
 }
 .btn-secondary:hover {
   /* color: #42ffc1 !important; */
   color: #3beeb2 !important;
-  background-color: #6c757d  !important;
+  background-color: #6c757d !important;
   background-image: none !important;
-  border-color:  #6c757d  !important;
+  border-color: #6c757d !important;
 }
 .btn-success {
-  color:#f5f7f6 !important;
+  color: #f5f7f6 !important;
   background-color: #6c757d !important;
   background-image: none !important;
-  border-color:#6c757d!important;
+  border-color: #6c757d !important;
 }
 .btn-success:hover {
   /* color: #42ffc1 !important; */
-  color: #f5f7f6  !important;
-  background-color:#3beeb2  !important;
+  color: #f5f7f6 !important;
+  background-color: #3beeb2 !important;
   background-image: none !important;
-  border-color:  #3beeb2  !important;
+  border-color: #3beeb2 !important;
 }
-#mainBackground{
+#mainBackground {
   background-color: #eeeeee;
 }
-#user-Name{
+#user-Name {
   color: #6c757d;
 }
 .btn-outline-primary:focus {
- box-shadow: none !important;
-}
+  box-shadow: none !important;
+}
+
+.ticketDisplay {
+  max-height: 700px;
+  min-height: 700px;
+}
+
+#leftNav {
+  max-height: 700px;
+  min-height: 700px;
+}