Merge pull request #66 from edx/dsjen/a11y-body-styles

Update styles to look better in Studio.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edx/studio-frontend",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "The frontend for the Open edX platform",
   "repository": "edx/studio-frontend",
   "scripts": {

src/SFE.scss

@@ -1,2 +1,9 @@
 @import "~@edx/edx-bootstrap/sass/edx/_theme";
 @import 'bootstrap/scss/bootstrap';
+
+/* The page-header class exists in bootstrap 3.3 but not in our alpha version currently */
+.page-header {
+	padding-bottom: $spacer * 0.5;
+  margin: ($spacer * 2) 0 $spacer;
+  border-bottom: 1px solid #eee;
+}

src/components/AccessibilityBody/AccessibilityBody.scss

@@ -1,3 +1,19 @@
+.list {
+  $bottom-spacer: $spacer * 0.5;
+  margin-left: $spacer * 2;
+  margin-bottom: $bottom-spacer;
+
+  li {
+    margin-bottom: $bottom-spacer;
+  }
+}
+
+.numerical-list {
+  @extend .list;
+  list-style-type: decimal;
+}
+
 .alphabetical-list {
+  @extend .list;
   list-style-type: lower-alpha;
 }

src/components/AccessibilityBody/index.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import edxBootstrap from '../../SFE.scss';
 import styles from './AccessibilityBody.scss';
 
 const AccessibilityBody = (props) => {
@@ -13,14 +14,14 @@ const AccessibilityBody = (props) => {
   /* eslint-disable max-len */
   return (
     <div>
-      <h1>Individualized Accessibility Process for Course Creators</h1>
+      <h1 className={edxBootstrap['page-header']}>Individualized Accessibility Process for Course Creators</h1>
       <p>
         At edX, we seek to understand and respect the unique needs and perspectives of the edX global community.  We value every course team and are committed to being a leader in expanding access to all, including course team creators and authors with disabilities.  To that end, we have adopted a {communityAccessibilityElement} and this process to ensure that course team creators and authors with disabilities are able to develop and post content on our platform via Studio.
       </p>
       <p>
         Course team creators and authors who, because of their disabilities, need assistance to use Studio should take the following steps:
       </p>
-      <ol>
+      <ol className={styles['numerical-list']}>
         <li>Notify us by email addressed to {emailElement}.  In order for edX to fully and promptly assess and respond to your request, please provide the following information:</li>
         <ol className={styles['alphabetical-list']}>
           <li>Your name and email address;</li>