Merge pull request #116 from Bouncey/fix/styles

Fix/styles

packages/learn/gatsby-config.js

@@ -65,7 +65,7 @@ module.exports = {
     {
       resolve: 'gatsby-plugin-google-fonts',
       options: {
-        fonts: ['Lato:400,400i,700']
+        fonts: ['Lato:400,400i,500']
       }
     },
     'gatsby-plugin-sitemap',

packages/learn/gatsby-node.js

@@ -139,11 +139,10 @@ exports.modifyWebpackConfig = ({ config, stage }) => {
     config.plugin('DefinePlugin', webpack.DefinePlugin, [
       {
         HOME_PATH: JSON.stringify(
-          process.env.HOME_PATH ||
-          'http://localhost:3000'
+          process.env.HOME_PATH || 'http://localhost:3000'
         )
       }
-]);
+    ]);
   });
 };
 /* eslint-disable prefer-object-spread/prefer-object-spread */

packages/learn/src/components/Header/components/Login.js

@@ -1,11 +1,17 @@
 /* global HOME_PATH */
 import React from 'react';
+import { Button } from 'react-bootstrap';
 
 function Login() {
   return (
-    <a href={HOME_PATH + '/signin'} target='_blank'>
-      Login
-    </a>
+    <Button
+      bsStyle='default'
+      className='btn-cta'
+      href={HOME_PATH + '/signin'}
+      target='_blank'
+      >
+      Sign In
+    </Button>
   );
 }
 

packages/learn/src/components/Header/components/SignedIn.js

@@ -1,10 +1,25 @@
 /* global HOME_PATH */
 import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { userSelector } from '../../../redux/app';
 
-function SignedIn() {
-  return <a href={HOME_PATH + '/settings'}>Settings</a>;
+const mapStateToProps = createSelector(userSelector, ({ picture }) => ({
+  picture
+}));
+
+function SignedIn({ picture }) {
+  return (
+    <a href={HOME_PATH + '/settings'}>
+      <img height='38px' src={picture} />
+    </a>
+  );
 }
 
 SignedIn.displayName = 'SignedIn';
+SignedIn.propTypes = {
+  picture: PropTypes.string
+};
 
-export default SignedIn;
+export default connect(mapStateToProps)(SignedIn);

packages/learn/src/components/Header/header.css

@@ -39,6 +39,20 @@ header {
   list-style: none;
 }
 
+#top-right-nav a, #top-right-nav img {
+  max-height: 40px;
+}
+
+#top-right-nav a.btn-cta {
+  background-color: #ffac33;
+  background-image: linear-gradient(#ffcc4d, #ffac33);
+  border-color: #f1a02a;
+  color: #292f33 !important;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+  max-height: 38px;
+  padding: 4px 12px;
+}
+
 #top-right-nav li {
   display: flex;
   align-items: center;
@@ -48,12 +62,12 @@ header {
 #top-right-nav li > a, #top-right-nav li > span {
   color:#fff;
   font-size: 17px;
-  font-weight: 700;
+  font-weight: 500;
 }
 
 #top-right-nav li > a:hover, #top-right-nav li > a:focus {
   text-decoration: none;
-  font-weight: 700;
+  font-weight: 500;
 }
 
 

packages/learn/src/components/Map/components/Block.js

@@ -94,13 +94,9 @@ export class Block extends PureComponent {
           >
           <span className='badge map-badge'>
             {challenge.isCompleted ? (
-              <GreenPass
-                style={ mapIconStyle }
-              />
+              <GreenPass style={mapIconStyle} />
             ) : (
-              <GreenNotCompleted
-                style={ mapIconStyle }
-              />
+              <GreenNotCompleted style={mapIconStyle} />
             )}
           </span>
           <Link

packages/learn/src/head/meta.js

@@ -3,7 +3,16 @@ import React from 'react';
 const meta = [
   <meta charSet='utf-8' />,
   <meta content='IE=edge' httpEquiv='X-UA-Compatible' />,
-  <meta content='width=device-width, initial-scale=1.0' name='viewport' />
+  <meta content='width=device-width, initial-scale=1.0' name='viewport' />,
+  <meta content='summary_large_image' name='twitter:card' />,
+  <meta
+    content='https://s3.amazonaws.com/freecodecamp/curriculum-diagram-full.jpg'
+    name='twitter:image:src'
+  />,
+  <meta
+    content='https://s3.amazonaws.com/freecodecamp/curriculum-diagram-full.jpg'
+    property='og:image'
+  />
 ];
 
 export default meta;

packages/learn/src/layouts/global.css

@@ -624,6 +624,10 @@ pre tt:after {
   }
 }
 
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 400;
+}
+
 .fcc-modal {
   background-color: #006400;
   color: #fff;

packages/learn/src/pages/index.js

@@ -9,6 +9,7 @@ import { Button } from 'react-bootstrap';
 
 import { ChallengeNode } from '../redux/propTypes';
 import { toggleMapModal } from '../redux/app';
+import Spacer from '../components/util/Spacer';
 
 import './index.css';
 
@@ -30,10 +31,12 @@ const IndexPage = ({
 }) => (
   <div className='index-page-wrapper'>
     <Helmet title='Welcome to learn.freeCodeCamp!' />
-    <h1>Welcome to learn.freeCodeCamp.org</h1>
+    <Spacer />
+    <Spacer />
+    <h2>Welcome to the freeCodeCamp curriculum</h2>
     <p>We have thousands of coding lessons to help you improve your skills.</p>
     <p>
-      You can earn verified certifications by completing each sections 5
+      You can earn verified certifications by completing each sections 6
       required projects.
     </p>
     <p>