styled import page

cms/static/js/base.js

@@ -51,8 +51,22 @@ $(document).ready(function() {
     $('.remove-policy-data').bind('click', removePolicyMetadata);
 
     $('.sync-date').bind('click', syncReleaseDate);
+
+    // import form setup
+    $('.import .file-input').bind('change', showImportSubmit);
+    $('.import .choose-file-button, .import .choose-file-button-inline').bind('click', function(e) {
+        e.preventDefault();
+        $('.import .file-input').click();
+    });
 });
 
+function showImportSubmit(e) {
+    $('.file-name').html($(this).val())
+    $('.file-name-block').show();
+    $('.import .choose-file-button').hide();
+    $('.submit-button').show();
+}
+
 function syncReleaseDate(e) {
     e.preventDefault();
     $("#start_date").val("");

cms/static/sass/_base.scss

@@ -119,6 +119,13 @@ label {
     font-size: 12px;
 }
 
+code {
+    padding: 0 4px;
+    border-radius: 3px;
+    background: #eee;
+    font-family: Monaco, monospace;
+}
+
 .text-editor {
     width: 100%;
     min-height: 80px;

cms/static/sass/_import.scss

@@ -0,0 +1,70 @@
+.import {
+  .import-overview {
+    @extend .window;
+    @include clearfix;
+    padding: 30px 40px;
+  }
+
+  .description {
+    float: left;
+    width: 62%;
+    margin-right: 3%;
+    font-size: 14px;
+
+    h3 {
+      margin-bottom: 20px;
+      font-size: 18px;
+      font-weight: 700;
+      color: $error-red;
+    }
+
+    p + p {
+      margin-top: 20px;
+    }
+  }
+
+  .import-form {
+    float: left;
+    width: 35%;
+    padding: 25px 30px 35px;
+    @include box-sizing(border-box);
+    border: 1px solid $mediumGrey;
+    border-radius: 3px;
+    background: $lightGrey;
+    text-align: center;
+
+    h2 {
+      margin-bottom: 30px;
+      font-size: 26px;
+      font-weight: 300;
+    }
+
+    .file-name-block {
+      display: none;
+      margin-bottom: 15px;
+      font-size: 13px;
+    }
+
+    .choose-file-button {
+      @include blue-button;
+      padding: 10px 50px 11px;
+      font-size: 17px;
+    }
+
+    .choose-file-button-inline {
+      display: block;
+    }
+
+    .file-input {
+      display: none;
+    }
+
+    .submit-button {
+      @include orange-button;
+      display: none;
+      max-width: 100%;
+      padding: 8px 20px 10px;
+      white-space: normal;
+    }
+  }
+}

cms/static/sass/base-style.scss

@@ -16,6 +16,7 @@
 @import "assets";
 @import "static-pages";
 @import "users";
+@import "import";
 @import "course-info";
 @import "landing";
 @import "graphics";

cms/templates/import.html

@@ -7,15 +7,22 @@
 <div class="main-wrapper">
   <div class="inner-wrapper">
     <h1>Import</h1>
-    <form>
-      <p>Importing a new course will delete all course content currently associated with your course
-      and replace it with the contents of the uploaded file.</p>
-      <p>File uploads must be zip files containing, at a minimum, a <pre>course.xml</pre> file.</p>
-      <p><strong>Please note that if your course has any problems with auto-generated <pre>url_name</pre>s,
-      re-importing your course could cause the loss of student data associated with those problems.</p>
-      <p>Course to import: <input type="file" name="course-data"></p>
-      <input type="submit" value="Delete my course and re-import!">
-    </form>
+    <article class="import-overview">
+      <div class="description">
+        <h3>Importing a new course will delete all course content currently associated with your course
+        and replace it with the contents of the uploaded file.</h3>
+        <p>File uploads must be zip files containing, at a minimum, a <code>course.xml</code> file.</p>
+        <p>Please note that if your course has any problems with auto-generated <code>url_name</code> nodes,
+        re-importing your course could cause the loss of student data associated with those problems.</p>
+      </div>
+      <form class="import-form">
+        <h2>Course to import:</h2>
+        <a href="#" class="choose-file-button">Choose File</a>
+        <p class="file-name-block"><span class="file-name"></span><a href="#" class="choose-file-button-inline">change</a></p>
+        <input type="file" name="course-data" class="file-input">
+        <input type="submit" value="Replace my course with the one above" class="submit-button">
+      </form>
+    </article>
   </div>
 </div>
 </%block>