From b15ba32fe83ae30846001fee9e8ebb577f77e27c Mon Sep 17 00:00:00 2001
From: Adam Butterworth <adamjbutterworth@gmail.com>
Date: Wed, 10 Apr 2019 11:39:47 -0400
Subject: [PATCH] fix: design updates (#141)

* fix: add more spacing between sections

* fix: make empty content an inline-block button

* fix: make labels and headings have same line-height

* fix: make visibility selector and submit buttons on same line in large column

* fix: update the old blue to the new navy in the hero image

* fix: make underlines stay on hover for btn-links and not on others
---
 src/components/ProfilePage/Bio.jsx            |   4 +-
 src/components/ProfilePage/Country.jsx        |   4 +-
 src/components/ProfilePage/Education.jsx      |   4 +-
 src/components/ProfilePage/Name.jsx           |   2 +-
 .../ProfilePage/PreferredLanguage.jsx         |   4 +-
 src/components/ProfilePage/SocialLinks.jsx    |   2 +-
 .../ProfilePage/elements/Banner.jsx           |   2 +-
 .../elements/EditableItemHeader.jsx           |   2 +-
 .../ProfilePage/elements/EmptyContent.jsx     |  20 +-
 .../ProfilePage/elements/FormControls.jsx     |  10 +-
 .../__snapshots__/ProfilePage.test.jsx.snap   | 259 +++++++++---------
 src/index.scss                                |  45 ++-
 12 files changed, 175 insertions(+), 183 deletions(-)

diff --git a/src/components/ProfilePage/Bio.jsx b/src/components/ProfilePage/Bio.jsx
index 80cf8f7..bf4fb68 100644
--- a/src/components/ProfilePage/Bio.jsx
+++ b/src/components/ProfilePage/Bio.jsx
@@ -50,7 +50,7 @@ class Bio extends React.Component {
 
     return (
       <SwitchContent
-        className="mb-4"
+        className="mb-5"
         expression={editMode}
         cases={{
           editing: (
@@ -61,7 +61,7 @@ class Bio extends React.Component {
                   invalid={error !== null}
                   invalidMessage={error}
                 >
-                  <label htmlFor={formId}>
+                  <label className="edit-section-header" htmlFor={formId}>
                     {intl.formatMessage(messages['profile.bio.about.me'])}
                   </label>
                   <textarea
diff --git a/src/components/ProfilePage/Country.jsx b/src/components/ProfilePage/Country.jsx
index 25e556a..9d4068f 100644
--- a/src/components/ProfilePage/Country.jsx
+++ b/src/components/ProfilePage/Country.jsx
@@ -61,7 +61,7 @@ class Country extends React.Component {
 
     return (
       <SwitchContent
-        className="mb-4"
+        className="mb-5"
         expression={editMode}
         cases={{
           editing: (
@@ -72,7 +72,7 @@ class Country extends React.Component {
                   invalid={error !== null}
                   invalidMessage={error}
                 >
-                  <label htmlFor={formId}>
+                  <label className="edit-section-header" htmlFor={formId}>
                     {intl.formatMessage(messages['profile.country.label'])}
                   </label>
                   <select
diff --git a/src/components/ProfilePage/Education.jsx b/src/components/ProfilePage/Education.jsx
index 36009f2..853d9bc 100644
--- a/src/components/ProfilePage/Education.jsx
+++ b/src/components/ProfilePage/Education.jsx
@@ -57,7 +57,7 @@ class Education extends React.Component {
 
     return (
       <SwitchContent
-        className="mb-4"
+        className="mb-5"
         expression={editMode}
         cases={{
           editing: (
@@ -68,7 +68,7 @@ class Education extends React.Component {
                   invalid={error !== null}
                   invalidMessage={error}
                 >
-                  <label htmlFor={formId}>
+                  <label className="edit-section-header" htmlFor={formId}>
                     {intl.formatMessage(messages['profile.education.education'])}
                   </label>
                   <select
diff --git a/src/components/ProfilePage/Name.jsx b/src/components/ProfilePage/Name.jsx
index 710d34d..ba965b8 100644
--- a/src/components/ProfilePage/Name.jsx
+++ b/src/components/ProfilePage/Name.jsx
@@ -52,7 +52,7 @@ class Name extends React.Component {
 
     return (
       <SwitchContent
-        className="mb-4"
+        className="mb-5"
         expression={editMode}
         cases={{
           editing: (
diff --git a/src/components/ProfilePage/PreferredLanguage.jsx b/src/components/ProfilePage/PreferredLanguage.jsx
index 933b1a6..40227df 100644
--- a/src/components/ProfilePage/PreferredLanguage.jsx
+++ b/src/components/ProfilePage/PreferredLanguage.jsx
@@ -71,7 +71,7 @@ class PreferredLanguage extends React.Component {
 
     return (
       <SwitchContent
-        className="mb-4"
+        className="mb-5"
         expression={editMode}
         cases={{
           editing: (
@@ -82,7 +82,7 @@ class PreferredLanguage extends React.Component {
                   invalid={error !== null}
                   invalidMessage={error}
                 >
-                  <label htmlFor={formId}>
+                  <label className="edit-section-header" htmlFor={formId}>
                     {intl.formatMessage(messages['profile.preferredlanguage.label'])}
                   </label>
                   <select
diff --git a/src/components/ProfilePage/SocialLinks.jsx b/src/components/ProfilePage/SocialLinks.jsx
index 37f8af4..7428cb7 100644
--- a/src/components/ProfilePage/SocialLinks.jsx
+++ b/src/components/ProfilePage/SocialLinks.jsx
@@ -98,7 +98,7 @@ class SocialLinks extends React.Component {
 
     return (
       <SwitchContent
-        className="mb-4"
+        className="mb-5"
         expression={editMode}
         cases={{
           empty: (
diff --git a/src/components/ProfilePage/elements/Banner.jsx b/src/components/ProfilePage/elements/Banner.jsx
index 432ac8f..9436934 100644
--- a/src/components/ProfilePage/elements/Banner.jsx
+++ b/src/components/ProfilePage/elements/Banner.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 function Banner() {
-  return <div className="profile-page-bg-banner bg-program-micro-masters d-none d-md-block p-relative" />;
+  return <div className="profile-page-bg-banner bg-primary d-none d-md-block p-relative" />;
 }
 
 export default Banner;
diff --git a/src/components/ProfilePage/elements/EditableItemHeader.jsx b/src/components/ProfilePage/elements/EditableItemHeader.jsx
index 70e25c6..35f9d2b 100644
--- a/src/components/ProfilePage/elements/EditableItemHeader.jsx
+++ b/src/components/ProfilePage/elements/EditableItemHeader.jsx
@@ -16,7 +16,7 @@ function EditableItemHeader({
   return (
     <React.Fragment>
       <div className="editable-item-header mb-2">
-        <h2 className="h6 font-weight-normal mb-0" id={headingId}>
+        <h2 className="edit-section-header" id={headingId}>
           {content}
           {showEditButton ? <EditButton style={{ marginTop: '-.35rem' }} className="float-right px-0" onClick={onClickEdit} /> : null}
         </h2>
diff --git a/src/components/ProfilePage/elements/EmptyContent.jsx b/src/components/ProfilePage/elements/EmptyContent.jsx
index 7a226f0..d5a7fe6 100644
--- a/src/components/ProfilePage/elements/EmptyContent.jsx
+++ b/src/components/ProfilePage/elements/EmptyContent.jsx
@@ -4,26 +4,18 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faPlus } from '@fortawesome/free-solid-svg-icons';
 
 function EmptyContent({ children, onClick, showPlusIcon }) {
-  const onKeyDown = (e) => { if (e.key === 'Enter') onClick(); };
-
-  const interactiveProps = {
-    onClick,
-    onKeyDown,
-    role: 'button',
-    tabIndex: 0,
-  };
-
   return (
     <div>
       {onClick ? (
-        <a
-          role="button"
-          className="pl-0 text-left d-block"
-          {...interactiveProps}
+        <button
+          className="pl-0 text-left btn btn-link"
+          onClick={onClick}
+          onKeyDown={(e) => { if (e.key === 'Enter') onClick(); }}
+          tabIndex={0}
         >
           {showPlusIcon ? <FontAwesomeIcon size="xs" className="mr-2" icon={faPlus} /> : null}
           {children}
-        </a>
+        </button>
       ) : children}
     </div>
   );
diff --git a/src/components/ProfilePage/elements/FormControls.jsx b/src/components/ProfilePage/elements/FormControls.jsx
index 22e8f63..0ec127b 100644
--- a/src/components/ProfilePage/elements/FormControls.jsx
+++ b/src/components/ProfilePage/elements/FormControls.jsx
@@ -14,9 +14,9 @@ function FormControls({
   const buttonState = saveState === 'error' ? null : saveState;
 
   return (
-    <React.Fragment>
-      <div className="mb-4 form-group">
-        <label className="mb-1 col-form-label-sm" htmlFor={visibilityId}>
+    <div className="d-flex flex-row-reverse flex-wrap justify-content-end align-items-center">
+      <div className="form-group">
+        <label className="col-form-label" htmlFor={visibilityId}>
           {intl.formatMessage(messages['profile.formcontrols.who.can.see'])}
         </label>
         <VisibilitySelect
@@ -28,7 +28,7 @@ function FormControls({
           onChange={changeHandler}
         />
       </div>
-      <div className="form-group">
+      <div className="form-group flex-shrink-0 mr-auto">
         <StatefulButton
           type="submit"
           className="btn-primary"
@@ -43,7 +43,7 @@ function FormControls({
           {intl.formatMessage(messages['profile.formcontrols.button.cancel'])}
         </Button>
       </div>
-    </React.Fragment>
+    </div>
   );
 }
 
diff --git a/src/components/__snapshots__/ProfilePage.test.jsx.snap b/src/components/__snapshots__/ProfilePage.test.jsx.snap
index ad4ec46..75844de 100644
--- a/src/components/__snapshots__/ProfilePage.test.jsx.snap
+++ b/src/components/__snapshots__/ProfilePage.test.jsx.snap
@@ -3,7 +3,7 @@
 exports[`<ProfilePage /> Renders correctly in various states app loading 1`] = `
 <div>
   <div
-    className="profile-page-bg-banner bg-program-micro-masters d-none d-md-block p-relative"
+    className="profile-page-bg-banner bg-primary d-none d-md-block p-relative"
   />
   <div
     className="d-flex justify-content-center align-items-center flex-column"
@@ -26,7 +26,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
   className="profile-page"
 >
   <div
-    className="profile-page-bg-banner bg-program-micro-masters d-none d-md-block p-relative"
+    className="profile-page-bg-banner bg-primary d-none d-md-block p-relative"
   />
   <div
     className="container-fluid"
@@ -132,7 +132,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
           className="d-md-none mb-4"
         />
         <div
-          className="pgn-transition-replace-group position-relative mb-4"
+          className="pgn-transition-replace-group position-relative mb-5"
           style={
             Object {
               "height": null,
@@ -140,7 +140,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
           }
         />
         <div
-          className="pgn-transition-replace-group position-relative mb-4"
+          className="pgn-transition-replace-group position-relative mb-5"
           style={
             Object {
               "height": null,
@@ -148,7 +148,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
           }
         />
         <div
-          className="pgn-transition-replace-group position-relative mb-4"
+          className="pgn-transition-replace-group position-relative mb-5"
           style={
             Object {
               "height": null,
@@ -156,7 +156,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
           }
         />
         <div
-          className="pgn-transition-replace-group position-relative mb-4"
+          className="pgn-transition-replace-group position-relative mb-5"
           style={
             Object {
               "height": null,
@@ -164,7 +164,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
           }
         />
         <div
-          className="pgn-transition-replace-group position-relative mb-4"
+          className="pgn-transition-replace-group position-relative mb-5"
           style={
             Object {
               "height": null,
@@ -176,7 +176,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
         className="pt-md-3 col-md-8 col-lg-7 offset-lg-1"
       >
         <div
-          className="pgn-transition-replace-group position-relative mb-4"
+          className="pgn-transition-replace-group position-relative mb-5"
           style={
             Object {
               "height": null,
@@ -202,7 +202,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
   className="profile-page"
 >
   <div
-    className="profile-page-bg-banner bg-program-micro-masters d-none d-md-block p-relative"
+    className="profile-page-bg-banner bg-primary d-none d-md-block p-relative"
   />
   <div
     className="container-fluid"
@@ -402,7 +402,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
           </a>
         </div>
         <div
-          className="pgn-transition-replace-group position-relative mb-4"
+          className="pgn-transition-replace-group position-relative mb-5"
           style={
             Object {
               "height": null,
@@ -420,7 +420,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
               className="editable-item-header mb-2"
             >
               <h2
-                className="h6 font-weight-normal mb-0"
+                className="edit-section-header"
                 id={null}
               >
                 Full Name
@@ -497,7 +497,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
           </div>
         </div>
         <div
-          className="pgn-transition-replace-group position-relative mb-4"
+          className="pgn-transition-replace-group position-relative mb-5"
           style={
             Object {
               "height": null,
@@ -515,7 +515,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
               className="editable-item-header mb-2"
             >
               <h2
-                className="h6 font-weight-normal mb-0"
+                className="edit-section-header"
                 id={null}
               >
                 Location
@@ -587,7 +587,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
           </div>
         </div>
         <div
-          className="pgn-transition-replace-group position-relative mb-4"
+          className="pgn-transition-replace-group position-relative mb-5"
           style={
             Object {
               "height": null,
@@ -605,7 +605,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
               className="editable-item-header mb-2"
             >
               <h2
-                className="h6 font-weight-normal mb-0"
+                className="edit-section-header"
                 id={null}
               >
                 Primary Language Spoken
@@ -677,7 +677,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
           </div>
         </div>
         <div
-          className="pgn-transition-replace-group position-relative mb-4"
+          className="pgn-transition-replace-group position-relative mb-5"
           style={
             Object {
               "height": null,
@@ -695,7 +695,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
               className="editable-item-header mb-2"
             >
               <h2
-                className="h6 font-weight-normal mb-0"
+                className="edit-section-header"
                 id={null}
               >
                 Education
@@ -767,7 +767,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
           </div>
         </div>
         <div
-          className="pgn-transition-replace-group position-relative mb-4"
+          className="pgn-transition-replace-group position-relative mb-5"
           style={
             Object {
               "height": null,
@@ -785,7 +785,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
               className="editable-item-header mb-2"
             >
               <h2
-                className="h6 font-weight-normal mb-0"
+                className="edit-section-header"
                 id={null}
               >
                 Social Links
@@ -910,11 +910,10 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                 className="form-group"
               >
                 <div>
-                  <a
-                    className="pl-0 text-left d-block"
+                  <button
+                    className="pl-0 text-left btn btn-link"
                     onClick={[Function]}
                     onKeyDown={[Function]}
-                    role="button"
                     tabIndex={0}
                   >
                     <svg
@@ -936,7 +935,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                     </svg>
                     Add 
                     LinkedIn
-                  </a>
+                  </button>
                 </div>
               </li>
             </ul>
@@ -947,7 +946,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
         className="pt-md-3 col-md-8 col-lg-7 offset-lg-1"
       >
         <div
-          className="pgn-transition-replace-group position-relative mb-4"
+          className="pgn-transition-replace-group position-relative mb-5"
           style={
             Object {
               "height": null,
@@ -965,7 +964,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
               className="editable-item-header mb-2"
             >
               <h2
-                className="h6 font-weight-normal mb-0"
+                className="edit-section-header"
                 id={null}
               >
                 About Me
@@ -1055,7 +1054,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
               className="editable-item-header mb-2"
             >
               <h2
-                className="h6 font-weight-normal mb-0"
+                className="edit-section-header"
                 id={null}
               >
                 My Certificates
@@ -1215,7 +1214,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
   className="profile-page"
 >
   <div
-    className="profile-page-bg-banner bg-program-micro-masters d-none d-md-block p-relative"
+    className="profile-page-bg-banner bg-primary d-none d-md-block p-relative"
   />
   <div
     className="container-fluid"
@@ -1415,7 +1414,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
           </a>
         </div>
         <div
-          className="pgn-transition-replace-group position-relative mb-4"
+          className="pgn-transition-replace-group position-relative mb-5"
           style={
             Object {
               "height": null,
@@ -1433,7 +1432,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
               className="editable-item-header mb-2"
             >
               <h2
-                className="h6 font-weight-normal mb-0"
+                className="edit-section-header"
                 id={null}
               >
                 Full Name
@@ -1510,7 +1509,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
           </div>
         </div>
         <div
-          className="pgn-transition-replace-group position-relative mb-4"
+          className="pgn-transition-replace-group position-relative mb-5"
           style={
             Object {
               "height": null,
@@ -1528,7 +1527,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
               className="editable-item-header mb-2"
             >
               <h2
-                className="h6 font-weight-normal mb-0"
+                className="edit-section-header"
                 id={null}
               >
                 Location
@@ -1600,7 +1599,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
           </div>
         </div>
         <div
-          className="pgn-transition-replace-group position-relative mb-4"
+          className="pgn-transition-replace-group position-relative mb-5"
           style={
             Object {
               "height": null,
@@ -1618,7 +1617,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
               className="editable-item-header mb-2"
             >
               <h2
-                className="h6 font-weight-normal mb-0"
+                className="edit-section-header"
                 id={null}
               >
                 Primary Language Spoken
@@ -1690,7 +1689,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
           </div>
         </div>
         <div
-          className="pgn-transition-replace-group position-relative mb-4"
+          className="pgn-transition-replace-group position-relative mb-5"
           style={
             Object {
               "height": null,
@@ -1708,7 +1707,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
               className="editable-item-header mb-2"
             >
               <h2
-                className="h6 font-weight-normal mb-0"
+                className="edit-section-header"
                 id={null}
               >
                 Education
@@ -1780,7 +1779,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
           </div>
         </div>
         <div
-          className="pgn-transition-replace-group position-relative mb-4"
+          className="pgn-transition-replace-group position-relative mb-5"
           style={
             Object {
               "height": null,
@@ -1798,7 +1797,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
               className="editable-item-header mb-2"
             >
               <h2
-                className="h6 font-weight-normal mb-0"
+                className="edit-section-header"
                 id={null}
               >
                 Social Links
@@ -1923,11 +1922,10 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                 className="form-group"
               >
                 <div>
-                  <a
-                    className="pl-0 text-left d-block"
+                  <button
+                    className="pl-0 text-left btn btn-link"
                     onClick={[Function]}
                     onKeyDown={[Function]}
-                    role="button"
                     tabIndex={0}
                   >
                     <svg
@@ -1949,7 +1947,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                     </svg>
                     Add 
                     LinkedIn
-                  </a>
+                  </button>
                 </div>
               </li>
             </ul>
@@ -1960,7 +1958,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
         className="pt-md-3 col-md-8 col-lg-7 offset-lg-1"
       >
         <div
-          className="pgn-transition-replace-group position-relative mb-4"
+          className="pgn-transition-replace-group position-relative mb-5"
           style={
             Object {
               "height": null,
@@ -1985,6 +1983,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                   className="form-group"
                 >
                   <label
+                    className="edit-section-header"
                     htmlFor="bio"
                   >
                     About Me
@@ -1999,100 +1998,104 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                   />
                 </div>
                 <div
-                  className="mb-4 form-group"
+                  className="d-flex flex-row-reverse flex-wrap justify-content-end align-items-center"
                 >
-                  <label
-                    className="mb-1 col-form-label-sm"
-                    htmlFor="visibilityBio"
+                  <div
+                    className="form-group"
                   >
-                    Who can see this:
-                  </label>
-                  <span
-                    className="w-auto"
-                  >
-                    <span
-                      className="d-inline-block ml-1 mr-2"
-                      style={
-                        Object {
-                          "width": "1.5rem",
-                        }
-                      }
+                    <label
+                      className="col-form-label"
+                      htmlFor="visibilityBio"
                     >
-                      <svg
-                        aria-hidden="true"
-                        className="svg-inline--fa fa-eye fa-w-18 "
-                        data-icon="eye"
-                        data-prefix="far"
-                        focusable="false"
-                        role="img"
-                        style={Object {}}
-                        viewBox="0 0 576 512"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
-                          fill="currentColor"
-                          style={Object {}}
-                        />
-                      </svg>
-                    </span>
-                    <select
-                      className="d-inline-block w-auto form-control"
-                      id="visibilityBio"
-                      name="visibilityBio"
-                      onChange={[Function]}
-                      type="select"
-                      value="all_users"
-                    >
-                      <option
-                        value="private"
-                      >
-                        Just me
-                      </option>
-                      <option
-                        value="all_users"
-                      >
-                        Everyone on edX
-                      </option>
-                    </select>
-                  </span>
-                </div>
-                <div
-                  className="form-group"
-                >
-                  <button
-                    aria-live="assertive"
-                    className="btn pgn__stateful-btn pgn__stateful-btn-state-pending btn-primary disabled"
-                    disabled={true}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onKeyDown={[Function]}
-                    type="submit"
-                  >
+                      Who can see this:
+                    </label>
                     <span
-                      className="d-flex align-items-center justify-content-center"
+                      className="w-auto"
                     >
                       <span
-                        className="pgn__stateful-btn-icon"
+                        className="d-inline-block ml-1 mr-2"
+                        style={
+                          Object {
+                            "width": "1.5rem",
+                          }
+                        }
+                      >
+                        <svg
+                          aria-hidden="true"
+                          className="svg-inline--fa fa-eye fa-w-18 "
+                          data-icon="eye"
+                          data-prefix="far"
+                          focusable="false"
+                          role="img"
+                          style={Object {}}
+                          viewBox="0 0 576 512"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"
+                            fill="currentColor"
+                            style={Object {}}
+                          />
+                        </svg>
+                      </span>
+                      <select
+                        className="d-inline-block w-auto form-control"
+                        id="visibilityBio"
+                        name="visibilityBio"
+                        onChange={[Function]}
+                        type="select"
+                        value="all_users"
+                      >
+                        <option
+                          value="private"
+                        >
+                          Just me
+                        </option>
+                        <option
+                          value="all_users"
+                        >
+                          Everyone on edX
+                        </option>
+                      </select>
+                    </span>
+                  </div>
+                  <div
+                    className="form-group flex-shrink-0 mr-auto"
+                  >
+                    <button
+                      aria-live="assertive"
+                      className="btn pgn__stateful-btn pgn__stateful-btn-state-pending btn-primary disabled"
+                      disabled={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onKeyDown={[Function]}
+                      type="submit"
+                    >
+                      <span
+                        className="d-flex align-items-center justify-content-center"
                       >
                         <span
-                          aria-hidden={true}
-                          className="icon fa fa-spinner fa-spin"
-                          id="Icon1"
-                        />
+                          className="pgn__stateful-btn-icon"
+                        >
+                          <span
+                            aria-hidden={true}
+                            className="icon fa fa-spinner fa-spin"
+                            id="Icon1"
+                          />
+                        </span>
+                        Saving
                       </span>
-                      Saving
-                    </span>
-                  </button>
-                  <button
-                    className="btn btn-link"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onKeyDown={[Function]}
-                    type="button"
-                  >
-                    Cancel
-                  </button>
+                    </button>
+                    <button
+                      className="btn btn-link"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onKeyDown={[Function]}
+                      type="button"
+                    >
+                      Cancel
+                    </button>
+                  </div>
                 </div>
               </form>
             </div>
@@ -2117,7 +2120,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
               className="editable-item-header mb-2"
             >
               <h2
-                className="h6 font-weight-normal mb-0"
+                className="edit-section-header"
                 id={null}
               >
                 My Certificates
diff --git a/src/index.scss b/src/index.scss
index 640b072..5bcc14c 100755
--- a/src/index.scss
+++ b/src/index.scss
@@ -10,31 +10,18 @@ $fa-font-path: "~font-awesome/fonts";
 .word-break-all {
   word-break: break-all !important;
 }
-.w-auto {
-  width: auto !important;
+
+// TODO: Update edx-bootstrap theme to incorporate these edits.
+.btn, a.btn {
+  text-decoration: none;
+  &:hover {
+    text-decoration: none;  
+  }
 }
-
-.btn-async-action {
-  transition: background .2s linear;
-  min-width: 6rem;
-
-  .icon-state {
-    transition: opacity .2s ease, width .2s ease;
-    opacity: 0;
-    width: 0;
-  }
-
-  .icon {
-    font-size: 1.125rem;
-  }
-
-  &.btn-state-pending,
-  &.btn-state-complete,
-  &.btn-state-error, {
-    .icon-state {
-      width: 1.5rem;
-      opacity: 1;
-    }
+.btn-link {
+  text-decoration: underline;
+  &:hover {
+    text-decoration: underline;
   }
 }
 
@@ -46,6 +33,16 @@ $fa-font-path: "~font-awesome/fonts";
 }
 
 .profile-page {
+  .edit-section-header {
+    @extend .h6;
+    display: block;
+    font-weight: normal;
+    letter-spacing: 0;
+    margin: 0;
+  }
+  label.edit-section-header {
+    margin-bottom: $spacer * .5;
+  }
   .profile-avatar-wrap {
     @include media-breakpoint-up(md) {
       max-width: 12rem;