From c41cd44ada5f6c343e07d2ebde2a6a04a6b7a49c Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaadmahmoodspin@users.noreply.github.com>
Date: Tue, 26 Apr 2016 20:59:14 +0500
Subject: [PATCH] Multiple UI Improvements (#2802)

---
 webapp/components/backstage/backstage_header.jsx |  2 +-
 webapp/components/team_members_modal.jsx         | 16 +++++++++-------
 webapp/sass/components/_files.scss               |  2 ++
 webapp/sass/responsive/_mobile.scss              | 15 +++++++++------
 webapp/sass/routes/_admin-console.scss           |  2 +-
 webapp/sass/routes/_backstage.scss               | 12 +++++++++++-
 6 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/webapp/components/backstage/backstage_header.jsx b/webapp/components/backstage/backstage_header.jsx
index 95b35d7a94..37b4be349f 100644
--- a/webapp/components/backstage/backstage_header.jsx
+++ b/webapp/components/backstage/backstage_header.jsx
@@ -20,7 +20,7 @@ export default class BackstageHeader extends React.Component {
                         key={'divider' + index}
                         className='backstage-header__divider'
                     >
-                        {'>'}
+                        <i className='fa fa-angle-right'></i>
                     </span>
                 );
             }
diff --git a/webapp/components/team_members_modal.jsx b/webapp/components/team_members_modal.jsx
index fb6d28b546..9b8729b3ac 100644
--- a/webapp/components/team_members_modal.jsx
+++ b/webapp/components/team_members_modal.jsx
@@ -55,13 +55,15 @@ export default class TeamMembersModal extends React.Component {
                 onHide={this.props.onHide}
             >
                 <Modal.Header closeButton={true}>
-                    <FormattedMessage
-                        id='team_member_modal.members'
-                        defaultMessage='{team} Members'
-                        values={{
-                            team: teamDisplayName
-                        }}
-                    />
+                    <Modal.Title>
+                        <FormattedMessage
+                            id='team_member_modal.members'
+                            defaultMessage='{team} Members'
+                            values={{
+                                team: teamDisplayName
+                            }}
+                        />
+                    </Modal.Title>
                 </Modal.Header>
                 <Modal.Body>
                     <MemberListTeam style={{maxHeight}}/>
diff --git a/webapp/sass/components/_files.scss b/webapp/sass/components/_files.scss
index 5522c6db8e..854a5902b8 100644
--- a/webapp/sass/components/_files.scss
+++ b/webapp/sass/components/_files.scss
@@ -246,6 +246,8 @@
         .file-details__name {
             color: alpha-color($black, .9);
             font-size: 16px;
+            margin: 5px 0;
+            word-break: break-word;
         }
 
         .file-details__info {
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index 6a9a134f2e..f2a1cf8190 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -797,10 +797,11 @@
 
         &.move--left-small {
             @include translate3d(-290px, 0, 0);
+
             &:before {
-                z-index: 9999;
-                transition: background-color 0.5s ease;
                 background-color: rgba(0, 0, 0, 0.4);
+                transition: background-color 0.5s ease;
+                z-index: 9999;
             }
         }
 
@@ -810,6 +811,12 @@
         }
     }
 
+    .integration-option {
+        height: auto;
+        margin-left: 0;
+        width: 100%;
+    }
+
     .app__content {
         padding-top: 45px;
         margin: 0;
@@ -917,10 +924,6 @@
         }
     }
 
-    .add-integration {
-        width: 100%;
-    }
-
     .backstage-list__item {
         display: block;
 
diff --git a/webapp/sass/routes/_admin-console.scss b/webapp/sass/routes/_admin-console.scss
index 6987b59ae5..6416aa61c8 100644
--- a/webapp/sass/routes/_admin-console.scss
+++ b/webapp/sass/routes/_admin-console.scss
@@ -181,7 +181,7 @@
             background-color: #f1f1f1;
             min-height: 600px;
             overflow: auto;
-            padding: 0 20px 20px;
+            padding: 0 40px 20px;
         }
 
         .wrapper--fixed {
diff --git a/webapp/sass/routes/_backstage.scss b/webapp/sass/routes/_backstage.scss
index ebfe97ee4a..716d07a4c8 100644
--- a/webapp/sass/routes/_backstage.scss
+++ b/webapp/sass/routes/_backstage.scss
@@ -114,6 +114,11 @@ body {
     border-top-width: 0;
 }
 
+.backstage-header__divider {
+    margin: 0 10px;
+    color: $gray;
+}
+
 .backstage-header {
     @include clearfix;
     margin-bottom: 20px;
@@ -180,6 +185,7 @@ body {
     background-color: $white;
     border: 1px solid $light-gray;
     padding: 5px 15px;
+    min-height: 50px;
 }
 
 .backstage-list__item {
@@ -296,12 +302,16 @@ body {
     border: 1px solid $light-gray;
     display: inline-block;
     height: 210px;
-    margin: 0 30px 20px 0;
+    margin: 0 0 20px 30px;
     padding: 20px;
     text-align: center;
     vertical-align: top;
     width: 250px;
 
+    &:first-child {
+        margin-left: 0;
+    }
+
     &:hover {
         color: default;
         text-decoration: none;