Fix style bug in ticket viewer (#947)

* fix style bug in ticket viewer

* Fix style in invite staff modal

Co-authored-by: Ivan Diaz <ivan@opensupports.com>

client/src/app-components/ticket-viewer.js

@@ -74,11 +74,7 @@ class TicketViewer extends React.Component {
     };
 
     componentDidMount() {
-        const {
-            staffMembersLoaded,
-            userStaff,
-            dispatch
-        } = this.props;
+        const { staffMembersLoaded, userStaff, dispatch } = this.props;
 
         if(!staffMembersLoaded && userStaff) {
             dispatch(AdminDataActions.retrieveStaffMembers());
@@ -86,14 +82,7 @@ class TicketViewer extends React.Component {
     }
 
     render() {
-        const {
-            ticket,
-            userStaff,
-            userId,
-            editable,
-            allowAttachments,
-            assignmentAllowed
-        } = this.props;
+        const { ticket, userStaff, userId, editable, allowAttachments, assignmentAllowed } = this.props;
 
         return (
             <div className="ticket-viewer">
@@ -239,10 +228,7 @@ class TicketViewer extends React.Component {
     }
 
     renderEditTags() {
-        const {
-            tags,
-            ticket
-        } = this.props;
+        const { tags, ticket } = this.props;
 
         return (
             <div className="ticket-viewer__edit-tags">
@@ -310,10 +296,7 @@ class TicketViewer extends React.Component {
     }
 
     renderTags() {
-        const {
-            ticket,
-            tags
-        } = this.props;
+        const { ticket, tags } = this.props;
         const TAGS = (
             ticket.tags.length ?
                 ticket.tags.map((tagName, index) => {
@@ -327,10 +310,7 @@ class TicketViewer extends React.Component {
     }
 
     renderOwnerNode() {
-        const {
-            assignmentAllowed,
-            ticket
-        } = this.props;
+        const { assignmentAllowed, ticket } = this.props;
         const filtersOnlyWithOwner = ticket.owner && {owners: [ticket.owner.id*1]};
         let ownerNode = null;
 
@@ -408,16 +388,11 @@ class TicketViewer extends React.Component {
     }
 
     renderCancelButton(option) {
-        return <Button type='link' size="medium" onClick={() => this.setState({["edit"+option]: false})}>{i18n('CANCEL')}</Button>
+        return <Button type='link' size="medium" onClick={() => this.setState({["edit"+option]: false})}>{i18n('CLOSE')}</Button>
     }
 
     renderTicketEvent(options, index) {
-        const {
-            userStaff,
-            ticket,
-            userId,
-            allowAttachments
-        } = this.props;
+        const { userStaff, ticket, userId, allowAttachments } = this.props;
 
         if(userStaff && typeof options.content === 'string') {
             options.content = MentionsParser.parse(options.content);
@@ -581,6 +556,10 @@ class TicketViewer extends React.Component {
             }));
         }
 
+        this.setState({
+            editOwner: false
+        });
+
         return APICallPromise.then(this.onTicketModification.bind(this));
     }
 
@@ -662,11 +641,11 @@ class TicketViewer extends React.Component {
     }
 
     changeDepartment(departmentId) {
-        const {
-            userId,
-            userDepartments,
-            ticket
-        } = this.props;
+        const { userId, userDepartments, ticket } = this.props;
+
+        this.setState({
+            editDepartment: false
+        });
 
         return API.call({
             path: '/ticket/change-department',
@@ -816,17 +795,12 @@ class TicketViewer extends React.Component {
 
     onTicketModification() {
         const { onChange } = this.props;
-        if(onChange) {
-            onChange();
-        }
+
+        onChange && onChange();
     }
 
     getStaffAssignmentItems() {
-        const {
-            userDepartments,
-            userId,
-            ticket
-        } = this.props;
+        const { userDepartments, userId, ticket } = this.props;
         let staffAssignmentItems = [
             {content: i18n('NONE'), contentOnSelected: i18n('NONE'), id: 0}
         ];
@@ -850,11 +824,7 @@ class TicketViewer extends React.Component {
     }
 
     getStaffList() {
-        const {
-            userId,
-            staffMembers,
-            ticket
-        } = this.props;
+        const { userId, staffMembers, ticket } = this.props;
 
         return _.filter(staffMembers, ({id, departments}) => {
             return (id != userId) && _.some(departments, {id: ticket.department.id});
@@ -862,11 +832,7 @@ class TicketViewer extends React.Component {
     }
 
     getCurrentStaff() {
-        const {
-            userId,
-            staffMembers,
-            ticket
-        } = this.props;
+        const { userId, staffMembers, ticket } = this.props;
 
         return _.find(staffMembers, ({id}) => {return id == userId});
     }
@@ -876,12 +842,7 @@ class TicketViewer extends React.Component {
     }
 
     showDeleteButton() {
-        const {
-            ticket,
-            userLevel,
-            userId,
-            userStaff
-        } = this.props;
+        const { ticket, userLevel, userId, userStaff } = this.props;
 
         if(!ticket.owner) {
             if(userLevel === 3) return true;

client/src/app/admin/panel/staff/invite-staff-modal.js

@@ -51,12 +51,14 @@ class InviteStaffModal extends React.Component {
                             </div>
                         </div>
                     </div>
-                    <SubmitButton type="secondary" size="small">
-                        {i18n('SAVE')}
-                    </SubmitButton>
-                    <Button type="clean" onClick={this.onCancelClick.bind(this)}>
-                        {i18n('CANCEL')}
-                    </Button>
+                    <div className="invite-staff-modal__buttons-container">
+                        <Button type="clean" onClick={this.onCancelClick.bind(this)}>
+                            {i18n('CANCEL')}
+                        </Button>
+                        <SubmitButton type="secondary" size="small">
+                            {i18n('SAVE')}
+                        </SubmitButton>
+                    </div>
                 </Form>
             </div>
         );

client/src/app/admin/panel/staff/invite-staff-modal.scss

@@ -20,4 +20,12 @@
         font-size: $font-size--md;
         text-align: center;
     }
-}
+
+    &__buttons-container {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-around;
+        align-items: center;
+        width: 50%;
+    }
+}