Merge pull request #1084 from mozilla/profile-view-upd

Projects/ Favs Style Updates

components/hint-message/hint-message.jsx

@@ -11,9 +11,8 @@ class HintMessage extends React.Component {
 
   render() {
     return (
-      <div className="hint-message text-center">
-        <h2 className="icon mb-3">{ this.props.iconComponent }</h2>
-        <h2>{ this.props.header }</h2>
+      <div className="pt-4 pt-lg-5 text-center">
+        <h2 className="h2-heading">{ this.props.header }</h2>
         { this.props.children }
         { this.renderLink() }
       </div>
@@ -23,7 +22,6 @@ class HintMessage extends React.Component {
 
 HintMessage.propTypes = {
   header: PropTypes.string.isRequired,
-  iconComponent: PropTypes.element,
   linkComponent: PropTypes.oneOfType([
     PropTypes.bool,
     PropTypes.element

components/hint-message/hint-message.scss

@@ -1,13 +0,0 @@
-.hint-message {
-  margin-top: 2rem;
-
-  h2 {
-    color: $bikeshed-magenta;
-    font-size: 1.25rem;
-    font-weight: 500;
-  }
-
-  @media screen and (min-width: $bp-md) {
-    margin-top: 5rem;
-  }
-}

components/profile-project-tab/profile-project-tab.jsx

@@ -76,9 +76,9 @@ class ProfileProjectTab extends React.Component {
     return <div className="row mb-5">
       { headerText &&
       <div className="col-12">
-        <h2 className="h6 text-uppercase">
+        <h5>
           {headerText}
-        </h2>
+        </h5>
       </div>
       }
       <div className="col-12">
@@ -96,7 +96,7 @@ class ProfileProjectTab extends React.Component {
         header="Do you have something to share?"
         linkComponent={<Link to={`/add`}>Add entry</Link>}
       >
-        <p>If it might be useful to someone in our network, share it here.</p>
+        <p className="h4-heading mb-4">If it might be useful to someone in our network, share it here.</p>
       </HintMessage>;
     }
 
@@ -118,7 +118,7 @@ class ProfileProjectTab extends React.Component {
         header="Save your Favs"
         linkComponent={<Link to={`/featured`}>Explore featured</Link>}
       >
-        <p>Tap the heart on any project to save it here.</p>
+        <p className="h4-heading mb-4">Tap the heart on any project to save it here.</p>
       </HintMessage>;
     }
 

scss/main.scss

@@ -211,8 +211,7 @@ textarea {
 
 .add-page,
 .profile-edit-page {
-  h1,
-  h2 {
+  h1 {
     color: $bikeshed-magenta;
     margin-bottom: 0.5rem;
   }
@@ -220,12 +219,6 @@ textarea {
   h1 {
     font-size: 2.25rem;
   }
-
-  h2 {
-    font-size: 1.5rem;
-    font-weight: 400;
-    margin-top: $form-field-vertical-margin;
-  }
 }
 
 // New Pulse Styles
@@ -267,7 +260,6 @@ textarea {
 @import '../components/profile-card/profile-card';
 @import '../components/footer/footer';
 @import '../components/issue-selector/issue-selector';
-@import '../components/hint-message/hint-message';
 @import '../components/bio/bio';
 @import '../components/notification-bar/notification-bar';
 @import '../components/profile-tab-group/profile-tab-group';