Ivan - Frontend - Add comments icon [skip ci]

client/src/app/main/dashboard/dashboard-ticket/ticket-viewer.js

@@ -1,4 +1,6 @@
 import React from 'react';
+import classNames from 'classnames';
+
 import Icon from 'core-components/icon';
 
 class TicketViewer extends React.Component {
@@ -31,10 +33,10 @@ class TicketViewer extends React.Component {
                     <div className="ticket-viewer__author col-md-4">{this.props.ticket.author.name}</div>
                     <div className="ticket-viewer__date col-md-4">{this.props.ticket.date}</div>
                 </div>
-                <div className="ticket-viewer__content row">{this.props.ticket.content}</div>
-                {this.renderFileRow(this.props.ticket.file)}
+                <div className="ticket-viewer__content">
+                    {this.renderComment(this.props.ticket)}
+                </div>
                 <div className="ticket-viewer__comments">
-                    <div className="ticket-viewer__comments-title row">Responses</div>
                     {this.props.ticket.comments.map(this.renderComment.bind(this))}
                 </div>
                 <div className="ticket-viewer__response">
@@ -45,11 +47,19 @@ class TicketViewer extends React.Component {
         );
     }
 
-    renderComment(comment, index) {
+    renderComment(comment) {
         return (
-            <div className="ticket-viewer__comment" key={index}>
+            <div className={this.getCommentClass(comment)}>
                 <div className="row">
-                    <div className="ticket-viewer__comment-author">{comment.author.name}</div>
+                    <div className="ticket-viewer__comment-icon"></div>
+                    <div className="ticket-viewer__comment-author">
+                        <span className="ticket-viewer__comment-author-icon">
+                            <Icon name="comment-o" size="2x" />
+                        </span>
+                        <span className="ticket-viewer__comment-author-name">
+                            {comment.author.name}
+                        </span>
+                    </div>
                     <div className="ticket-viewer__comment-date">{comment.date}</div>
                 </div>
                 <div className="ticket-viewer__comment-content row">{comment.content}</div>
@@ -73,6 +83,15 @@ class TicketViewer extends React.Component {
             </div>
         )
     }
+    
+    getCommentClass(comment) {
+        let classes = {
+            'ticket-viewer__comment': true,
+            'ticket-viewer__comment_staff': comment.author.staff
+        };
+        
+        return classNames(classes);
+    }
 
     getFileLink(filePath = '') {
         const fileName = filePath.replace(/^.*[\\\/]/, '');

client/src/app/main/dashboard/dashboard-ticket/ticket-viewer.scss

@@ -43,10 +43,6 @@
     }
 
     &__content {
-        background-color: white;
-        border: 2px solid $light-grey;
-        padding: 20px 10px;
-        text-align: left;
         margin-top: 10px;
     }
 
@@ -57,10 +53,6 @@
         font-size: 12px;
     }
 
-    &__comments {
-        margin-top: 10px;
-    }
-
     &__comments-title {
         text-align: left;
         background-color: $dark-grey;
@@ -69,19 +61,35 @@
     }
 
     &__comment {
-        margin-top: 5px;
+        margin-top: 20px;
 
         &-author {
             text-align: left;
             float: left;
-            padding: 10px;
+            position: relative;
+            padding-top: 22px;
+            padding-left: 70px;
+
+            &-icon {
+                background-color: $secondary-blue;
+                color: white;
+                border-radius: 100%;
+                display: inline-block;
+                width: 42px;
+                height: 42px;
+                padding-left: 8px;
+                padding-top: 4px;
+                position: absolute;
+                top: 10px;
+                left: 10px;
+            }
         }
 
         &-date {
             text-align: right;
             border: 2px solid $light-grey;
             border-bottom: none;
-            padding: 10px;
+            padding: 22px;
             background-color: $light-grey;
 
         }
@@ -93,5 +101,9 @@
             padding: 20px 10px;
             text-align: left;
         }
+
+        &_staff {
+
+        }
     }
 }

client/src/index.html

@@ -6,7 +6,7 @@
       <meta name="description" content="">
       <meta name="viewport" content="width=device-width">
 
-      <title>App Name</title>
+      <title>OS4</title>
 
       <link rel="stylesheet" href="/css/main.css">
   </head>