clean up of users page

cms/static/coffee/src/views/tabs.coffee

@@ -33,6 +33,10 @@ class CMS.Views.TabsEdit extends Backbone.View
     )
 
     $('.new-component-item').before(editor.$el)
+    editor.$el.addClass('new')
+    setTimeout(=>
+      editor.$el.removeClass('new')
+    , 500)
 
     editor.cloneTemplate(
       @model.get('id'),

cms/static/sass/_base.scss

@@ -196,7 +196,7 @@ code {
     h4 {
         padding: 6px 14px;
         border-bottom: 1px solid $mediumGrey;
-        border-radius: 3px 3px 0 0;
+        border-radius: 2px 2px 0 0;
         @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
         background-color: $lightBluishGrey;
         @include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset);

cms/static/sass/_static-pages.scss

@@ -73,11 +73,16 @@
     }
   }
 
+  .new .xmodule_display {
+    background: $yellow;
+  }
+
   .xmodule_display {
     padding: 20px 20px 22px;
     font-size: 24px;
     font-weight: 300;
     background: #fff;
+    @include transition(background-color 3s);
   }
 
   .static-page-item {

cms/static/sass/_users.scss

 .users {
-  .user-overview {
-    @extend .window;
-    padding: 30px 40px;
-  }
-
   .new-user-form {
     display: none;
     padding: 15px 20px;
@@ -48,11 +43,11 @@
 
   .user-list {
     border: 1px solid $mediumGrey;
-    background: $lightGrey;
+    background: #fff;
 
     li {
       position: relative;
-      padding: 10px 20px;
+      padding: 20px;
       border-bottom: 1px solid $mediumGrey;
 
       &:last-child {
@@ -64,12 +59,19 @@
       }
 
       .user-name {
-        width: 30%;
-        font-weight: 700;
+        margin-right: 10px;
+        font-size: 24px;
+        font-weight: 300;
+      }
+
+      .user-email {
+        font-size: 14px;
+        font-style: italic;
+        color: $mediumGrey;
       }
 
       .item-actions {
-        top: 9px;
+        top: 24px;
       }
     }
   }

cms/static/sass/_variables.scss

@@ -24,6 +24,7 @@ $mediumGrey: #b0b6c2;
 $darkGrey: #8891a1;
 $extraDarkGrey: #3d4043;
 $paleYellow: #fffcf1;
+$yellow: rgb(255, 254, 223);
 $green: rgb(37, 184, 90);
 $brightGreen: rgb(22, 202, 87);
 $disabledGreen: rgb(124, 206, 153);

cms/templates/edit-tabs.html

@@ -19,7 +19,7 @@
   <div class="inner-wrapper">
     <div class="page-actions">
       <a href="#" class="new-button new-tab">
-        <span class="plus-icon white"></span>New Tab
+        <span class="plus-icon white"></span>New Page
       </a>
     </div>
     <article class="unit-body">

cms/templates/import.html

@@ -8,7 +8,6 @@
 <%block name="content">
 <div class="main-wrapper">
   <div class="inner-wrapper">
-    <h1>Import</h1>
     <article class="import-overview">
       <div class="description">
         <h2>Please <a href="https://edge.edx.org/courses/edX/edx101/edX_Studio_Reference/about" target="_blank">read the documentation</a> before attempting an import!</h2>

cms/templates/manage_users.html

@@ -13,10 +13,11 @@
       %endif
     </div>
 
-    <article class="user-overview">
-      <div class="details">
-        <p>The following list of users have been designated as course staff. This means that these users will have permissions to modify course content. You may add additional course staff below, if you are the course instructor. Please note that they must have already registered and verified their account.</p>
-      </div>      
+    <div class="details">
+      <p>The following list of users have been designated as course staff. This means that these users will have permissions to modify course content. You may add additional course staff below, if you are the course instructor. Please note that they must have already registered and verified their account.</p>
+    </div>
+
+    <article class="user-overview">           
       %if allow_actions:
       <form class="new-user-form">
         <div id="result"></div>

cms/templates/widgets/header.html

@@ -27,7 +27,7 @@
     <% ctx_loc = context_course.location %>
     <ul class="class-nav inner-wrapper">
       <li><a href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='courseware-tab'>Courseware</a></li>
-      <li><a href="${reverse('edit_tabs', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, coursename=ctx_loc.name))}" id='pages-tab'>Tabs</a></li>
+      <li><a href="${reverse('edit_tabs', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, coursename=ctx_loc.name))}" id='pages-tab'>Pages</a></li>
       <li><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='assets-tab'>Assets</a></li>
       <li><a href="${reverse('course_settings', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='settings-tab'>Settings</a></li>
       <li><a href="${reverse('import_course', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='import-tab'>Import</a></li>