Cosmetic changes to give search more affordance

src/components/Gradebook/gradebook.scss

@@ -81,3 +81,6 @@
     }
 }
 
+.mb-85 {
+    margin-bottom: 85px;
+}

src/components/Gradebook/index.jsx

@@ -326,7 +326,7 @@ export default class Gradebook extends React.Component {
               </div>
               <div>
                 <div style={{ marginLeft: '10px', marginBottom: '10px' }}>
-                  <a href={`${this.lmsInstructorDashboardUrl(this.props.match.params.courseId)}#view-data_download`}>Generate Grade Report</a>
+                  <a className="btn btn-outline-primary mb-85" href={`${this.lmsInstructorDashboardUrl(this.props.match.params.courseId)}#view-data_download`}>Generate Grade Report</a>
                 </div>
                 <SearchField
                   onSubmit={value =>
@@ -337,6 +337,7 @@ export default class Gradebook extends React.Component {
                       this.props.selectedTrack,
                     )
                   }
+                  inputLabel="Search Username:"
                   onChange={filterValue => this.setState({ filterValue })}
                   onClear={() =>
                       this.props.getUserGrades(

src/components/PageButtons/__snapshots__/PageButtons.test.jsx.snap

@@ -10,7 +10,7 @@ exports[`PageButtons prev not null, next not null 1`] = `
   }
 >
   <button
-    className="btn btn-primary"
+    className="btn btn-outline-primary"
     disabled={false}
     onBlur={[Function]}
     onClick={[Function]}
@@ -25,7 +25,7 @@ exports[`PageButtons prev not null, next not null 1`] = `
     Previous Page
   </button>
   <button
-    className="btn btn-primary"
+    className="btn btn-outline-primary"
     disabled={false}
     onBlur={[Function]}
     onClick={[Function]}
@@ -52,7 +52,7 @@ exports[`PageButtons prev not null, next null 1`] = `
   }
 >
   <button
-    className="btn btn-primary"
+    className="btn btn-outline-primary"
     disabled={false}
     onBlur={[Function]}
     onClick={[Function]}
@@ -67,7 +67,7 @@ exports[`PageButtons prev not null, next null 1`] = `
     Previous Page
   </button>
   <button
-    className="btn btn-primary"
+    className="btn btn-outline-primary"
     disabled={true}
     onBlur={[Function]}
     onClick={[Function]}
@@ -94,7 +94,7 @@ exports[`PageButtons prev null, next not null 1`] = `
   }
 >
   <button
-    className="btn btn-primary"
+    className="btn btn-outline-primary"
     disabled={true}
     onBlur={[Function]}
     onClick={[Function]}
@@ -109,7 +109,7 @@ exports[`PageButtons prev null, next not null 1`] = `
     Previous Page
   </button>
   <button
-    className="btn btn-primary"
+    className="btn btn-outline-primary"
     disabled={false}
     onBlur={[Function]}
     onClick={[Function]}
@@ -136,7 +136,7 @@ exports[`PageButtons prev null, next null 1`] = `
   }
 >
   <button
-    className="btn btn-primary"
+    className="btn btn-outline-primary"
     disabled={true}
     onBlur={[Function]}
     onClick={[Function]}
@@ -151,7 +151,7 @@ exports[`PageButtons prev null, next null 1`] = `
     Previous Page
   </button>
   <button
-    className="btn btn-primary"
+    className="btn btn-outline-primary"
     disabled={true}
     onBlur={[Function]}
     onClick={[Function]}

src/components/PageButtons/index.jsx

@@ -14,7 +14,7 @@ export default function PageButtons({
       <Button
         label="Previous Page"
         style={{ margin: '20px' }}
-        buttonType="primary"
+        buttonType="outline-primary"
         disabled={!prevPage}
         onClick={() =>
           getPrevNextGrades(
@@ -27,7 +27,7 @@ export default function PageButtons({
       <Button
         label="Next Page"
         style={{ margin: '20px' }}
-        buttonType="primary"
+        buttonType="outline-primary"
         disabled={!nextPage}
         onClick={() =>
           getPrevNextGrades(