in-content suggest

Author: Ethan Jon

react/components/in-content/suggest.js

@@ -11,24 +11,37 @@ const Suggest = () => (
     href={getUrlObj({type: 'page', slug: 'suggest'})}
   >
     <a
-      className='block sans-serif border border-gray p2 mx-auto bg-darken-0 bg-cover bg-no-repeat bg-right flex flex-column justify-center'
+      className='sans-serif border border-gray mx-auto bg-darken-0 flex flex-wrap'
       data-ga-event-action='Clicked Suggest'
       data-ga-event-category='In-content Units'
       data-ga-on='click'
       style={{
         height: '280px',
-        maxWidth: '336px'
+        maxWidth: '560px',
+        textDecoration: 'none'
       }}
     >
-      <div className='h2 mb2 line-height-3 bold'>
-        {'Do you know someone who would be great for Coder Intros?'}
-      </div>
+      <div className='col-12 sm-col-7 px3 self-center right-align'>
+        <div
+          className='h2 mb2 line-height-3 bold mr0 ml-auto'
+          style={{maxWidth: '270px'}}
+        >
+          {'Do you know someone who would be great for Coder Intros?'}
+        </div>
 
-      <div>
-        <span className='btn btn-primary'>
-          {'Suggest them'}
-        </span>
+        <div>
+          <span className='btn btn-primary'>
+            {'Suggest them'}
+          </span>
+        </div>
       </div>
+
+      <div
+        className='xs-hide sm-col-5 self-stretch bg-cover bg-top bg-no-repeat bg-center'
+        style={{
+          backgroundImage: 'url(/static/img/in-content/suggest-a-coder-unknown-face.jpg)'
+        }}
+      />
     </a>
   </Link>
 )

react/helpers/in-content-units.js

@@ -8,12 +8,12 @@ import Newsletter from '../components/in-content/newsletter'
 import Suggest from '../components/in-content/suggest'
 
 const createUnits = (context?: Object) => [
-  <Suggest key='Suggest' />,
   <Newsletter
     formAction={context && context.siteData && context.siteData.mailchimp_newsletter_url}
     frequencyGroup={context && context.siteData && context.siteData.mailchimp_frequency_group}
     key='Newsletter'
-  />
+  />,
+  <Suggest key='Suggest' />
 ]
 
 // after how many chars should we insert a unit?