fix: yrbl style on subscriptions page

src/renderer/component/common/yrbl.jsx

@@ -1,10 +1,10 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import Native from 'native';
 
 type Props = {
   title: string,
-  subtitle: string,
+  subtitle: string | React.Node,
   type: string,
 };
 

src/renderer/component/firstRun/view.jsx

@@ -101,7 +101,7 @@ export default class FirstRun extends PureComponent<Props> {
                 <h1 className="card__title">{__('You Are Awesome!')}</h1>
               </header>
               <div className="card__content">
-                <p>{__("Check out some of the neat files below me. I'll see you around!")}</p>
+                <p>{__("Check out some of the neat content below me. I'll see you around!")}</p>
                 <div className="card__actions">
                   <Button button="primary" onClick={completeFirstRun} label={__('See You Later')} />
                 </div>

src/renderer/page/subscriptions/internal/first-run.jsx

@@ -1,8 +1,8 @@
 // @flow
 import React, { Fragment } from 'react';
-import Native from 'native';
 import Button from 'component/button';
 import SuggestedSubscriptions from 'component/subscribeSuggested';
+import Yrbl from 'component/common/yrbl';
 
 type Props = {
   showSuggested: boolean,
@@ -23,40 +23,37 @@ export default (props: Props) => {
 
   return (
     <Fragment>
-      <div className="yrbl-wrap">
-        <img
-          alt="Friendly gerbil"
-          className="subscriptions__gerbil"
-          src={Native.imagePath('gerbil-happy.png')}
-        />
-        <div className="card__content">
-          <h2 className="card__title">
-            {numberOfSubscriptions > 0 ? __('Woohoo!') : __('No subscriptions... yet.')}
-          </h2>
-          <p className="card__subtitle">
-            {showSuggested
-              ? __('I hear these channels are pretty good.')
-              : __("I'll tell you where the good channels are if you find me a wheel.")}
-          </p>
-          {!showSuggested && (
-            <div className="card__actions">
-              <Button button="primary" label={__('Explore')} onClick={doShowSuggestedSubs} />
-            </div>
-          )}
-          {showSuggested &&
-            numberOfSubscriptions > 0 && (
+      <Yrbl
+        title={numberOfSubscriptions > 0 ? __('Woohoo!') : __('No subscriptions... yet.')}
+        subtitle={
+          <React.Fragment>
+            <p>
+              {showSuggested
+                ? __('I hear these channels are pretty good.')
+                : __("I'll tell you where the good channels are if you find me a wheel.")}
+            </p>
+            {!showSuggested && (
               <div className="card__actions">
-                <Button
-                  button="primary"
-                  onClick={onFinish}
-                  label={`${__('View your')} ${numberOfSubscriptions} ${
-                    numberOfSubscriptions > 1 ? __('subscribed channels') : __('subscribed channel')
-                  }`}
-                />
+                <Button button="primary" label={__('Explore')} onClick={doShowSuggestedSubs} />
               </div>
             )}
-        </div>
-      </div>
+            {showSuggested &&
+              numberOfSubscriptions > 0 && (
+                <div className="card__actions">
+                  <Button
+                    button="primary"
+                    onClick={onFinish}
+                    label={`${__('View your')} ${numberOfSubscriptions} ${
+                      numberOfSubscriptions > 1
+                        ? __('subscribed channels')
+                        : __('subscribed channel')
+                    }`}
+                  />
+                </div>
+              )}
+          </React.Fragment>
+        }
+      />
       {showSuggested && !loadingSuggested && <SuggestedSubscriptions />}
     </Fragment>
   );