Merge pull request #41 from edx/rir/header

Add super simple header

src/components/Gradebook/gradebook.scss

@@ -1,7 +1,8 @@
 .spinner-overlay {
-    position: absolute;
+    position: fixed;
     height: 100%;
     width: 100%;
+    top: 0;
     background-color: #999;
     opacity: 0.5;
     z-index: 99999;
@@ -28,9 +29,6 @@
     }
 }
 
-.back-link{
-    float:right;
-}
 .student-filters{
     display: flex;
     .label{

src/components/Gradebook/index.jsx

@@ -223,13 +223,13 @@ export default class Gradebook extends React.Component {
     return (
       <div className="d-flex justify-content-center">
         { this.props.showSpinner && <div className="spinner-overlay"><Icon className={['fa', 'fa-spinner', 'fa-spin', 'fa-5x', 'color-black']} /></div>}
-        <div className="card gradebook-container">
-          <div className="card-body">
+        <div className="gradebook-container">
+          <div>
             <a
               href={this.lmsInstructorDashboardUrl(this.props.match.params.courseId)}
-              className="back-link"
+              className="mb-3"
             >
-              Back to Dashboard
+              {'<< Back to Dashboard'}
             </a>
             <h1>Gradebook</h1>
             <h3> {this.props.match.params.courseId}</h3>

src/components/Header/index.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Hyperlink } from '@edx/paragon';
+
+export default class Header extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      mobileNavOpen: false,
+    };
+  }
+
+  render() {
+    return (
+      <div className="mb-3">
+        <header className="d-flex justify-content-center align-items-center p-3 border-bottom-blue">
+          <Hyperlink content={<img src="./assets/edx-sm.png" alt="The edX logo" height="30" width="60" />} destination="https://www.edx.org" />
+          <div />
+        </header>
+      </div>
+    );
+  }
+}

src/index.jsx

@@ -6,17 +6,21 @@ import { Provider } from 'react-redux';
 
 import apiClient from './data/apiClient';
 import GradebookPage from './containers/GradebookPage';
+import Header from './components/Header';
 import store from './data/store';
 import './App.scss';
 
 const App = () => (
   <Provider store={store}>
     <Router>
-      <main>
-        <Switch>
-          <Route exact path="/:courseId" component={GradebookPage} />
-        </Switch>
-      </main>
+      <div>
+        <Header />
+        <main>
+          <Switch>
+            <Route exact path="/:courseId" component={GradebookPage} />
+          </Switch>
+        </main>
+      </div>
     </Router>
   </Provider>
 );