Multiple UI Improvements (#2802)

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>
                 );
             }

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
+                    <Modal.Title>
-                        id='team_member_modal.members'
+                        <FormattedMessage
-                        defaultMessage='{team} Members'
+                            id='team_member_modal.members'
-                        values={{
+                            defaultMessage='{team} Members'
-                            team: teamDisplayName
+                            values={{
-                        }}
+                                team: teamDisplayName
-                    />
+                            }}
+                        />
+                    </Modal.Title>
                 </Modal.Header>
                 <Modal.Body>
                     <MemberListTeam style={{maxHeight}}/>

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 {

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;
 

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 {

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;