update sponsor styling

src/components/public/news/index.js

@@ -18,7 +18,6 @@ class News extends React.Component {
   componentDidMount () {
     Feed.load('https://cors-anywhere.herokuapp.com/https://medium.com/feed/@camerakit', (err, rss) => {
       if (err) return console.log(err);
-      console.log(rss.items);
       this.setState({ items: rss.items });
     });
   }

src/components/public/news/news-item.js

@@ -1,10 +1,10 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import moment from 'moment';
 
 import styles from './news-item.scss';
 
 function formatDate(date){
-  console.log(Number(date));
   return moment(Number(date)).format('MMMM D YYYY');
 }
 
@@ -16,4 +16,10 @@ const NewsItem = props => (
   </li>
 );
 
+NewsItem.propTypes = {
+  date: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  link: PropTypes.string.isRequired,
+};
+
 export default NewsItem;

src/components/public/sponsor/index.js

@@ -5,19 +5,16 @@ import styles from './sponsor.scss';
 
 const Sponsor = props => (
   <li className={styles.sponsor}>
-    <img className={styles.logo} src={props.logo} alt={props.name} />
-    <blockquote className={styles.quote}>
-      {props.quote}
-      <footer className={styles.source}>{props.source}</footer>
-    </blockquote>
+    <a className={styles.link} href={props.link}>
+      <img className={styles.logo} src={props.logo} alt={props.name} />
+    </a>
   </li>
 );
 
 Sponsor.propTypes = {
   logo: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
-  quote: PropTypes.string.isRequired,
-  source: PropTypes.string.isRequired,
+  link: PropTypes.string.isRequired,
 };
 
 export default Sponsor;

src/components/public/sponsor/sponsor.scss

@@ -5,31 +5,18 @@
 
 .logo {
   display: block;
-  margin-bottom: 2rem;;
+  margin: 0 auto 2rem;
   max-width: 20rem;
 }
 
-.quote {
-  margin: 0;
-}
-
-.source {
-  margin-top: 1rem;
-  text-align: right;
+.link {
+  display: flex;
 }
 
 @media (min-width: 62em) {
-
   .sponsor {
-    display: flex;
-  }
-
-  .logo {
-    flex: 1 1 15rem;
-    margin-right: 4rem;
-  }
-
-  .quote {
-    flex: 0 1 37.5rem;
+    &:not(:first-child) {
+      margin-left: 3rem;
+    }
   }
-}
+}

src/pages/public/home/home.scss

@@ -4,11 +4,6 @@
   padding: 2.5rem 0;
 }
 
-.heading {
-  font-size: 1.5rem;
-  color: $dark-grey;
-}
-
 .flexWrapper {
   lost-flex-container: row;
 }
@@ -19,10 +14,21 @@
   list-style: none;
 }
 
+.sponsors {
+  text-align: center;
+}
+
 @media (min-width: 62em) {
 
   .section {
     padding: 5rem 0;
   }
 
+  .sponsorsList {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+  }
+
 }

src/pages/public/home/index.js

@@ -62,10 +62,10 @@ const Home = () => (
       </div>
     </section>
     <News />
-    <section className={styles.section}>
+    <section className={`${styles.section} ${styles.sponsors}`}>
       <div className="container">
-        <h2 className={styles.heading}>Sponsors</h2>
-        <ul className={styles.list}>
+        <h2 className='heading--small'>Sponsors</h2>
+        <ul className={`${styles.list} ${styles.sponsorsList}`}>
           {sponsors.map(sponsor => (
             <Sponsor
               key={sponsor.name}

src/pages/public/home/sponsors.js

@@ -1,10 +1,15 @@
-import logoExpensifiy from 'static/brand_expensify_logo.svg';
+import logoBuddy from 'static/sp_buddy.svg';
+import logoExpensify from 'static/sp_expensify.svg';
 
 export default [
+  {
+    name: 'Buddy',
+    logo: logoBuddy,
+    link: 'https://buddy.works/',
+  },
   {
     name: 'Expensify',
-    logo: logoExpensifiy,
-    quote: '',
-    source: '',
+    logo: logoExpensify,
+    link: 'https://www.expensify.com/',
   },
 ];