feat: show guided tooltip to invite page on first run

2019-01-26 19:23:47 -05:00 · 2019-01-26 19:23:47 -05:00 · 21661fce85
commit 21661fce85
parent 919bd4c934
17 changed files with 346 additions and 250 deletions
--- a/src/renderer/component/common/tooltip.jsx
+++ b/src/renderer/component/common/tooltip.jsx
@ -9,6 +9,7 @@ type Props = {
  icon?: boolean,
  direction: string,
  onComponent?: boolean, // extra padding to account for button/form field size
+  alwaysVisible?: boolean, // should tooltip stay open, guide callbacks will close it manually
 };

 type State = {
@ -18,6 +19,7 @@ type State = {
 class ToolTip extends React.PureComponent<Props, State> {
  static defaultProps = {
    direction: 'bottom',
+    alwaysVisible: false,
  };

  constructor(props: Props) {
@ -88,7 +90,7 @@ class ToolTip extends React.PureComponent<Props, State> {

  render() {
    const { direction } = this.state;
-    const { children, label, body, icon, onComponent } = this.props;
+    const { children, label, body, icon, onComponent, alwaysVisible } = this.props;

    const tooltipContent = children || label;
    const bodyLength = body.length;
@ -106,6 +108,7 @@ class ToolTip extends React.PureComponent<Props, State> {
          'tooltip--bottom': direction === 'bottom',
          'tooltip--left': direction === 'left',
          'tooltip--on-component': onComponent,
+          'tooltip--always-visible': alwaysVisible,
        })}
      >
        {tooltipContent}
@ -113,7 +116,7 @@ class ToolTip extends React.PureComponent<Props, State> {
          ref={ref => {
            this.tooltip = ref;
          }}
-          className={classnames('tooltip__body', {
+          className={classnames('card tooltip__body', {
            'tooltip__body--short': isShortDescription,
          })}
        >
--- a/src/renderer/component/common/yrbl.jsx
+++ b/src/renderer/component/common/yrbl.jsx
@ -0,0 +1,36 @@
+// @flow
+import React from 'react';
+import Native from 'native';
+
+type Props = {
+  title: string,
+  subtitle: string,
+  type: string,
+};
+
+const yrblTypes = {
+  happy: 'gerbil-happy.png',
+  sad: 'gerbil-sad.png',
+};
+
+export default class extends React.PureComponent<Props> {
+  static defaultProps = {
+    type: 'happy',
+  };
+
+  render() {
+    const { title, subtitle, type } = this.props;
+
+    const image = yrblTypes[type];
+
+    return (
+      <div className="yrbl-wrap">
+        <img alt="Friendly gerbil" className="yrbl" src={Native.imagePath(image)} />
+        <div className="card__content">
+          <h2 className="card__title">{title}</h2>
+          <p className="card__subtitle">{subtitle}</p>
+        </div>
+      </div>
+    );
+  }
+}
--- a/src/renderer/component/inviteList/view.jsx
+++ b/src/renderer/component/inviteList/view.jsx
@ -3,6 +3,7 @@ import * as ICONS from 'constants/icons';
 import React from 'react';
 import Icon from 'component/common/icon';
 import RewardLink from 'component/rewardLink';
+import Yrbl from 'component/common/yrbl';
 import { rewards } from 'lbryinc';

 type Props = {
@ -22,6 +23,18 @@ class InviteList extends React.PureComponent<Props> {
      return null;
    }

+    if (!invitees.length) {
+      return (
+        <Yrbl
+          type="happy"
+          title={__('Power To The People')}
+          subtitle={__(
+            'LBRY is powered by the users. More users, more power… and with great power comes great responsibility.'
+          )}
+        />
+      );
+    }
+
    return (
      <section className="card card--section">
        <header className="card__header">
@ -29,43 +42,37 @@ class InviteList extends React.PureComponent<Props> {
        </header>

        <div className="card__content">
-          {invitees.length === 0 && (
-            <span className="empty">{__("You haven't invited anyone.")} </span>
-          )}
-          {invitees.length > 0 && (
-            <table className="table table--stretch">
-              <thead>
-                <tr>
-                  <th>{__('Invitee Email')}</th>
-                  <th className="text-center">{__('Invite Status')}</th>
-                  <th className="text-center">{__('Reward')}</th>
+          <table className="table table--stretch">
+            <thead>
+              <tr>
+                <th>{__('Invitee Email')}</th>
+                <th className="text-center">{__('Invite Status')}</th>
+                <th className="text-center">{__('Reward')}</th>
+              </tr>
+            </thead>
+            <tbody>
+              {invitees.map(invitee => (
+                <tr key={invitee.email}>
+                  <td>{invitee.email}</td>
+                  <td className="text-center">
+                    {invitee.invite_accepted ? (
+                      <Icon icon={ICONS.COMPLETED} />
+                    ) : (
+                      <span className="empty">{__('unused')}</span>
+                    )}
+                  </td>
+                  <td className="text-center">
+                    {invitee.invite_reward_claimed && <Icon icon={ICONS.COMPLETED} />}
+                    {!invitee.invite_reward_claimed && invitee.invite_reward_claimable ? (
+                      <RewardLink label={__('claim')} reward_type={rewards.TYPE_REFERRAL} />
+                    ) : (
+                      <span className="empty">{__('unclaimable')}</span>
+                    )}
+                  </td>
                </tr>
-              </thead>
-              <tbody>
-                {invitees.map(invitee => (
-                  <tr key={invitee.email}>
-                    <td>{invitee.email}</td>
-                    <td className="text-center">
-                      {invitee.invite_accepted ? (
-                        <Icon icon={ICONS.COMPLETED} />
-                      ) : (
-                        <span className="empty">{__('unused')}</span>
-                      )}
-                    </td>
-                    <td className="text-center">
-                      {invitee.invite_reward_claimed ? (
-                        <Icon icon={ICONS.COMPLETED} />
-                      ) : invitee.invite_reward_claimable ? (
-                        <RewardLink label={__('claim')} reward_type={rewards.TYPE_REFERRAL} />
-                      ) : (
-                        <span className="empty">{__('unclaimable')}</span>
-                      )}
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          )}
+              ))}
+            </tbody>
+          </table>

          <div className="help">
            {__(
--- a/src/renderer/component/inviteNew/view.jsx
+++ b/src/renderer/component/inviteNew/view.jsx
@ -1,12 +1,20 @@
-// I'll come back to this
-/* eslint-disable */
+// @flow
+/* eslint-disable react/no-multi-comp */
 import React from 'react';
-import BusyIndicator from 'component/common/busy-indicator';
-import CreditAmount from 'component/common/credit-amount';
 import Button from 'component/button';
 import { Form, FormRow, FormField, Submit } from 'component/common/form';

-class FormInviteNew extends React.PureComponent {
+type FormProps = {
+  inviteNew: string => void,
+  errorMessage: ?string,
+  isPending: boolean,
+};
+
+type FormState = {
+  email: string,
+};
+
+class FormInviteNew extends React.PureComponent<FormProps, FormState> {
  constructor() {
    super();

@ -14,7 +22,7 @@ class FormInviteNew extends React.PureComponent {
      email: '',
    };

-    this.handleSubmit = this.handleSubmit.bind(this);
+    (this: any).handleSubmit = this.handleSubmit.bind(this);
  }

  handleEmailChanged(event) {
@ -56,16 +64,16 @@ class FormInviteNew extends React.PureComponent {
  }
 }

-class InviteNew extends React.PureComponent {
+type Props = {
+  errorMessage: ?string,
+  inviteNew: string => void,
+  isPending: boolean,
+  rewardAmount: number,
+};
+
+class InviteNew extends React.PureComponent<Props> {
  render() {
-    const {
-      errorMessage,
-      invitesRemaining,
-      inviteNew,
-      inviteStatusIsPending,
-      isPending,
-      rewardAmount,
-    } = this.props;
+    const { errorMessage, inviteNew, isPending, rewardAmount } = this.props;

    return (
      <section className="card card--section">
@ -73,18 +81,10 @@ class InviteNew extends React.PureComponent {
          <h2 className="card__title">{__('Invite a Friend')}</h2>

          <p className="card__subtitle">
-            {__("Or an enemy. Or your cousin Jerry, who you're kind of unsure about.")}
+            {__('When your friends start using LBRY, the network gets stronger!')}
          </p>
        </header>

-        {/*
-        <div className="card__content">
-          {invitesRemaining > 0 &&
-            <p>{__("You have %s invites remaining.", invitesRemaining)}</p>}
-          {invitesRemaining <= 0 &&
-            <p className="empty">{__("You have no invites.")}</p>}
-        </div> */}
-
        <div className="card__content">
          <FormInviteNew
            errorMessage={errorMessage}
@ -106,4 +106,4 @@ class InviteNew extends React.PureComponent {
 }

 export default InviteNew;
-/* eslint-enable */
+/* eslint-enable react/no-multi-comp */
--- a/src/renderer/component/router/index.js
+++ b/src/renderer/component/router/index.js
@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { selectCurrentPage, selectCurrentParams } from 'lbry-redux';
+import { selectCurrentPage, selectCurrentParams, doToast } from 'lbry-redux';
 import { doOpenModal } from 'redux/actions/app';
 import Router from './view';

@ -10,5 +10,5 @@ const select = state => ({

 export default connect(
  select,
-  { doOpenModal }
+  { doOpenModal, doToast }
 )(Router);
--- a/src/renderer/component/sideBar/view.jsx
+++ b/src/renderer/component/sideBar/view.jsx
@ -2,6 +2,7 @@
 import * as React from 'react';
 import Button from 'component/button';
 import classnames from 'classnames';
+import Tooltip from 'component/common/tooltip';

 type SideBarLink = {
  label: string,
@ -9,6 +10,7 @@ type SideBarLink = {
  active: boolean,
  icon: ?string,
  subLinks: Array<SideBarLink>,
+  guide: ?string,
 };

 type Props = {
@ -19,71 +21,86 @@ type Props = {
  unreadSubscriptionTotal: number,
 };

-const SideBar = (props: Props) => {
-  const { navLinks, unreadSubscriptionTotal } = props;
+class SideBar extends React.PureComponent<Props> {
+  renderNavLink(navLink: SideBarLink) {
+    const { label, path, active, subLinks = [], icon, guide } = navLink;

-  return (
-    <nav className="navigation">
-      <div className="navigation__links">
-        {navLinks.primary.map(({ label, path, active, icon }) => (
-          <Button
-            icon={icon}
-            className={classnames('navigation__link', {
-              'navigation__link--active': active,
-            })}
-            key={path}
-            label={
-              path === '/subscriptions' && unreadSubscriptionTotal
-                ? `${label} (${unreadSubscriptionTotal})`
-                : label
-            }
-            navigate={path}
-          />
-        ))}
+    const inner = (
+      <li
+        className={classnames('navigation__link', {
+          'navigation__link--active': active,
+        })}
+        key={label}
+      >
+        <Button icon={icon} label={label} navigate={path} />

-        <ul>
-          <li className="navigation__link navigation__link--title">Account</li>
+        {
+          // The sublinks should be animated on open close
+          // Removing it because the current implementation with CSSTransitionGroup
+          // was really slow and looked pretty bad. Possible fix is upgrading to v2
+          // Not sure if that has better performance
+        }
+        {!!subLinks.length &&
+          active && (
+            <ul key="0" className="navigation__link-items">
+              {subLinks.map(({ active: subLinkActive, label: subLabel, path: subPath }) => (
+                <li
+                  className={classnames('navigation__link-item', {
+                    'navigation__link-item--active': subLinkActive,
+                  })}
+                  key={subPath}
+                >
+                  {subPath ? (
+                    <Button label={subLabel} navigate={subPath} />
+                  ) : (
+                    <span>{subLabel}</span>
+                  )}
+                </li>
+              ))}
+            </ul>
+          )}
+      </li>
+    );

-          {navLinks.secondary.map(({ label, path, active, subLinks = [], icon }) => (
-            <li
+    return guide ? (
+      <Tooltip key={guide} alwaysVisible direction="right" body={guide}>
+        {inner}
+      </Tooltip>
+    ) : (
+      inner
+    );
+  }
+
+  render() {
+    const { navLinks, unreadSubscriptionTotal } = this.props;
+
+    return (
+      <nav className="navigation">
+        <div className="navigation__links">
+          {navLinks.primary.map(({ label, path, active, icon }) => (
+            <Button
+              icon={icon}
              className={classnames('navigation__link', {
                'navigation__link--active': active,
              })}
-              key={label}
-            >
-              <Button icon={icon} label={label} navigate={path} />
-
-              {
-                // The sublinks should be animated on open close
-                // Removing it because the current implementation with CSSTransitionGroup
-                // was really slow and looked pretty bad. Possible fix is upgrading to v2
-                // Not sure if that has better performance
+              key={path}
+              label={
+                path === '/subscriptions' && unreadSubscriptionTotal
+                  ? `${label} (${unreadSubscriptionTotal})`
+                  : label
              }
-              {!!subLinks.length &&
-                active && (
-                  <ul key="0" className="navigation__link-items">
-                    {subLinks.map(({ active: subLinkActive, label: subLabel, path: subPath }) => (
-                      <li
-                        className={classnames('navigation__link-item', {
-                          'navigation__link-item--active': subLinkActive,
-                        })}
-                        key={subPath}
-                      >
-                        {subPath ? (
-                          <Button label={subLabel} navigate={subPath} />
-                        ) : (
-                          <span>{subLabel}</span>
-                        )}
-                      </li>
-                    ))}
-                  </ul>
-                )}
-            </li>
+              navigate={path}
+            />
          ))}
-        </ul>
-      </div>
-    </nav>
-  );
-};
+
+          <ul>
+            <li className="navigation__link navigation__link--title">Account</li>
+            {navLinks.secondary.map(this.renderNavLink)}
+          </ul>
+        </div>
+      </nav>
+    );
+  }
+}

 export default SideBar;
--- a/src/renderer/constants/pages.js
+++ b/src/renderer/constants/pages.js
@ -0,0 +1,20 @@
+export const AUTH = 'auth';
+export const BACKUP = 'backup';
+export const CHANNEL = 'channel';
+export const DISCOVER = 'discover';
+export const DOWNLOADED = 'downloaded';
+export const HELP = 'help';
+export const HISTORY = 'history';
+export const INVITE = 'invite';
+export const PUBLISH = 'publish';
+export const PUBLISHED = 'published';
+export const GET_CREDITS = 'getcredits';
+export const REPORT = 'report';
+export const REWARDS = 'rewards';
+export const SEND = 'send';
+export const SETTINGS = 'settings';
+export const SHOW = 'show';
+export const WALLET = 'wallet';
+export const SUBSCRIPTIONS = 'subscriptions';
+export const SEARCH = 'search';
+export const USER_HISTORY = 'user_history';
--- a/src/renderer/constants/settings.js
+++ b/src/renderer/constants/settings.js
@ -4,6 +4,7 @@ export const CREDIT_REQUIRED_ACKNOWLEDGED = 'credit_required_acknowledged';
 export const NEW_USER_ACKNOWLEDGED = 'welcome_acknowledged';
 export const EMAIL_COLLECTION_ACKNOWLEDGED = 'email_collection_acknowledged';
 export const FIRST_RUN_COMPLETED = 'first_run_completed';
+export const INVITE_ACKNOWLEDGED = 'invite_acknowledged';
 export const LANGUAGE = 'language';
 export const SHOW_NSFW = 'showNsfw';
 export const SHOW_UNAVAILABLE = 'showUnavailable';
--- a/src/renderer/page/invite/index.js
+++ b/src/renderer/page/invite/index.js
@ -1,18 +1,23 @@
+import * as SETTINGS from 'constants/settings';
 import { connect } from 'react-redux';
 import {
  doFetchInviteStatus,
  selectUserInviteStatusFailed,
  selectUserInviteStatusIsPending,
 } from 'lbryinc';
+import { makeSelectClientSetting } from 'redux/selectors/settings';
+import { doSetClientSetting } from 'redux/actions/settings';
 import InvitePage from './view';

 const select = state => ({
  isFailed: selectUserInviteStatusFailed(state),
  isPending: selectUserInviteStatusIsPending(state),
+  inviteAcknowledged: makeSelectClientSetting(state)(SETTINGS.INVITE_ACKNOWLEDGED),
 });

 const perform = dispatch => ({
  fetchInviteStatus: () => dispatch(doFetchInviteStatus()),
+  acknowledgeInivte: () => dispatch(doSetClientSetting(SETTINGS.INVITE_ACKNOWLEDGED, true)),
 });

 export default connect(
--- a/src/renderer/page/invite/view.jsx
+++ b/src/renderer/page/invite/view.jsx
@ -1,12 +1,26 @@
+// @flow
 import React from 'react';
 import BusyIndicator from 'component/common/busy-indicator';
 import InviteNew from 'component/inviteNew';
 import InviteList from 'component/inviteList';
 import Page from 'component/page';

-class InvitePage extends React.PureComponent {
-  componentWillMount() {
-    this.props.fetchInviteStatus();
+type Props = {
+  isPending: boolean,
+  isFailed: boolean,
+  inviteAcknowledged: boolean,
+  acknowledgeInivte: () => void,
+  fetchInviteStatus: () => void,
+};
+
+class InvitePage extends React.PureComponent<Props> {
+  componentDidMount() {
+    const { fetchInviteStatus, inviteAcknowledged, acknowledgeInivte } = this.props;
+    fetchInviteStatus();
+
+    if (!inviteAcknowledged) {
+      acknowledgeInivte();
+    }
  }

  render() {
--- a/src/renderer/page/subscriptions/internal/first-run.jsx
+++ b/src/renderer/page/subscriptions/internal/first-run.jsx
@ -43,17 +43,18 @@ export default (props: Props) => {
              <Button button="primary" label={__('Explore')} onClick={doShowSuggestedSubs} />
            </div>
          )}
-          {showSuggested && numberOfSubscriptions > 0 && (
-            <div className="card__actions">
-              <Button
-                button="primary"
-                onClick={onFinish}
-                label={`${__('View your')} ${numberOfSubscriptions} ${
-                  numberOfSubscriptions > 1 ? __('subscribed channels') : __('subscribed channel')
-                }`}
-              />
-            </div>
-          )}
+          {showSuggested &&
+            numberOfSubscriptions > 0 && (
+              <div className="card__actions">
+                <Button
+                  button="primary"
+                  onClick={onFinish}
+                  label={`${__('View your')} ${numberOfSubscriptions} ${
+                    numberOfSubscriptions > 1 ? __('subscribed channels') : __('subscribed channel')
+                  }`}
+                />
+              </div>
+            )}
        </div>
      </div>
      {showSuggested && !loadingSuggested && <SuggestedSubscriptions />}
--- a/src/renderer/page/subscriptions/internal/user-subscriptions.jsx
+++ b/src/renderer/page/subscriptions/internal/user-subscriptions.jsx
@ -9,10 +9,10 @@ import FileList from 'component/fileList';
 import { FormField } from 'component/common/form';
 import FileCard from 'component/fileCard';
 import { parseURI } from 'lbry-redux';
-import Native from 'native';
 import SuggestedSubscriptions from 'component/subscribeSuggested';
 import MarkAsRead from 'component/subscribeMarkAsRead';
 import Tooltip from 'component/common/tooltip';
+import Yrbl from 'component/common/yrbl';

 type Props = {
  viewMode: ViewMode,
@ -79,17 +79,11 @@ export default (props: Props) => {

      {!hasSubscriptions && (
        <Fragment>
-          <div className="yrbl-wrap">
-            <img
-              alt="Sad gerbil"
-              className="subscriptions__gerbil"
-              src={Native.imagePath('gerbil-sad.png')}
-            />
-            <div className="card__content">
-              <h2 className="card__title">{__('Oh no! What happened to your subscriptions?')}</h2>
-              <p className="card__subtitle">{__('These channels look pretty cool.')}</p>
-            </div>
-          </div>
+          <Yrbl
+            type="sad"
+            title={__('Oh no! What happened to your subscriptions?')}
+            subtitle={__('These channels look pretty cool.')}
+          />
          <SuggestedSubscriptions />
        </Fragment>
      )}
@ -133,17 +127,10 @@ export default (props: Props) => {
                })
              ) : (
                <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">{__('All caught up!')}</h2>
-                      <p className="card__subtitle">{__('You might like the channels below.')}</p>
-                    </div>
-                  </div>
+                  <Yrbl
+                    title={__('All caught up!')}
+                    subtitle={__('You might like the channels below.')}
+                  />
                  <SuggestedSubscriptions />
                </Fragment>
              )}
--- a/src/renderer/redux/reducers/settings.js
+++ b/src/renderer/redux/reducers/settings.js
@ -25,6 +25,7 @@ const defaultState = {
      SETTINGS.EMAIL_COLLECTION_ACKNOWLEDGED,
      false
    ),
+    [SETTINGS.INVITE_ACKNOWLEDGED]: getLocalStorageSetting(SETTINGS.INVITE_ACKNOWLEDGED, false),
    [SETTINGS.FIRST_RUN_COMPLETED]: getLocalStorageSetting(SETTINGS.FIRST_RUN_COMPLETED, false),
    [SETTINGS.CREDIT_REQUIRED_ACKNOWLEDGED]: false, // this needs to be re-acknowledged every run
    [SETTINGS.LANGUAGE]: getLocalStorageSetting(SETTINGS.LANGUAGE, 'en'),
--- a/src/renderer/redux/selectors/app.js
+++ b/src/renderer/redux/selectors/app.js
@ -1,6 +1,9 @@
+import * as SETTINGS from 'constants/settings';
+import * as PAGES from 'constants/pages';
+import * as ICONS from 'constants/icons';
 import { createSelector } from 'reselect';
 import { selectCurrentPage, selectHistoryStack } from 'lbry-redux';
-import * as icons from 'constants/icons';
+import { makeSelectClientSetting } from 'redux/selectors/settings';

 export const selectState = state => state.app || {};

@ -97,15 +100,29 @@ export const selectUpgradeTimer = createSelector(selectState, state => state.che
 export const selectNavLinks = createSelector(
  selectCurrentPage,
  selectHistoryStack,
-  (currentPage, historyStack) => {
-    const isWalletPage = page =>
-      page === 'wallet' ||
-      page === 'send' ||
-      page === 'getcredits' ||
-      page === 'rewards' ||
-      page === 'history' ||
-      page === 'backup';
+  makeSelectClientSetting(SETTINGS.FIRST_RUN_COMPLETED),
+  makeSelectClientSetting(SETTINGS.INVITE_ACKNOWLEDGED),
+  (currentPage, historyStack, firstRunCompleted, inviteAcknowledged) => {
+    // Determine if any links should show a tooltip for a guided tour
+    // It will only show one at a time, in the order they are set.
+    const guidedTourItem = [
+      {
+        page: PAGES.INVITE,
+        hasBeenCompleted: inviteAcknowledged,
+        guide: 'Check this out!',
+      },
+      // Add more items below for tooltip guides that will happen after a user has completed the invite guide
+    ].filter(({ hasBeenCompleted }) => !hasBeenCompleted)[0];

+    const isWalletPage = page =>
+      page === PAGES.WALLET ||
+      page === PAGES.SEND ||
+      page === PAGES.GET_CREDITS ||
+      page === PAGES.REWARDS ||
+      page === PAGES.HISTORY ||
+      page === PAGES.BACKUP;
+
+    const isCurrentlyWalletPage = isWalletPage(currentPage);
    const previousStack = historyStack.slice().reverse();

    const getPreviousSubLinkPath = checkIfValidPage => {
@ -124,107 +141,92 @@ export const selectNavLinks = createSelector(

    // Gets the last active sublink in a section
    const getActiveSublink = category => {
-      if (category === 'wallet') {
+      if (category === PAGES.WALLET) {
        const previousPath = getPreviousSubLinkPath(isWalletPage);
-        return previousPath || '/wallet';
+        return previousPath || `/${PAGES.WALLET}`;
      }

      return undefined;
    };

-    const isCurrentlyWalletPage = isWalletPage(currentPage);
+    // Is this path the first unacknowledged item in the guided tour list
+    const getGuideIfNecessary = page => {
+      if (!firstRunCompleted) {
+        return null;
+      }
+      return guidedTourItem && guidedTourItem.page === page ? guidedTourItem.guide : null;
+    };
+
+    const buildLink = (label, page) => ({
+      label,
+      path: `/${page}`,
+      active: currentPage === page,
+      guide: getGuideIfNecessary(page),
+    });

    const walletSubLinks = [
      {
-        label: 'Overview',
-        path: '/wallet',
-        active: currentPage === 'wallet',
+        ...buildLink('Overview', PAGES.WALLET),
      },
      {
-        label: 'Send & Receive',
-        path: '/send',
-        active: currentPage === 'send',
+        ...buildLink('Send & Receive', PAGES.SEND),
      },
      {
-        label: 'Transactions',
-        path: '/history',
-        active: currentPage === 'history',
+        ...buildLink('Transactions', PAGES.HISTORY),
      },
      {
-        label: 'Get Credits',
-        path: '/getcredits',
-        active: currentPage === 'getcredits',
+        ...buildLink('Get Credits', PAGES.GET_CREDITS),
      },
      {
-        label: 'Rewards',
-        path: '/rewards',
-        active: currentPage === 'rewards',
+        ...buildLink('Rewards', PAGES.REWARDS),
      },
      {
-        label: 'Backup',
-        path: '/backup',
-        active: currentPage === 'backup',
+        ...buildLink('Backup', PAGES.BACKUP),
      },
    ];

    const navLinks = {
      primary: [
        {
-          label: 'Explore',
-          path: '/discover',
-          active: currentPage === 'discover',
-          icon: icons.HOME,
+          ...buildLink('Explore', PAGES.DISCOVER),
+          icon: ICONS.HOME,
        },
        {
-          label: 'Subscriptions',
-          path: '/subscriptions',
-          active: currentPage === 'subscriptions',
-          icon: icons.SUBSCRIPTION,
+          ...buildLink('Subscriptions', PAGES.SUBSCRIPTIONS),
+          icon: ICONS.SUBSCRIPTION,
        },
      ],
      secondary: [
        {
          label: 'Wallet',
-          icon: icons.WALLET,
+          icon: ICONS.WALLET,
          subLinks: walletSubLinks,
-          path: isCurrentlyWalletPage ? '/wallet' : getActiveSublink('wallet'),
+          path: isCurrentlyWalletPage ? `/${PAGES.WALLET}` : getActiveSublink(PAGES.WALLET),
          active: isWalletPage(currentPage),
        },
        {
-          label: 'Invite',
-          icon: icons.INVITE,
-          path: '/invite',
-          active: currentPage === 'invite',
+          ...buildLink('Invite', PAGES.INVITE),
+          icon: ICONS.INVITE,
        },
        {
-          label: 'Downloads',
-          icon: icons.LOCAL,
-          path: '/downloaded',
-          active: currentPage === 'downloaded',
+          ...buildLink('Downloads', PAGES.DOWNLOADED),
+          icon: ICONS.LOCAL,
        },
        {
-          label: 'Publishes',
-          icon: icons.PUBLISHED,
-          path: '/published',
-          active: currentPage === 'published',
+          ...buildLink('Publishes', PAGES.PUBLISHED),
+          icon: ICONS.PUBLISHED,
        },
        {
-          label: 'History',
-          icon: icons.HISTORY,
-          path: '/user_history',
-          active: currentPage === 'user_history',
+          ...buildLink('History', PAGES.USER_HISTORY),
+          icon: ICONS.HISTORY,
        },
        {
-          label: 'Settings',
-          icon: icons.SETTINGS,
-          path: '/settings',
-          active: currentPage === 'settings',
+          ...buildLink('Settings', PAGES.SETTINGS),
+          icon: ICONS.SETTINGS,
        },
        {
-          label: 'Help',
-          path: '/help',
-          icon: icons.HELP,
-          active: currentPage === 'help',
+          ...buildLink('Help', PAGES.HELP),
+          icon: ICONS.HELP,
        },
      ],
    };
--- a/src/renderer/scss/component/_subscriptions.scss
+++ b/src/renderer/scss/component/_subscriptions.scss
@ -1,23 +1,8 @@
 // The gerbil is tied to subscriptions currently, but this style should move to it's own file once
 // the gerbil is added in more places with different layouts
-.subscriptions__gerbil {
-}
-
 .subscriptions__suggested {
  animation: expand 0.2s;
  left: -2rem;
  position: relative;
  width: calc(100% + 4rem);
 }
-
-.yrbl-wrap {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  vertical-align: middle;
-  margin-bottom: var(--spacing-vertical-large);
-
-  img {
-    height: 300px;
-  }
-}
--- a/src/renderer/scss/component/_tooltip.scss
+++ b/src/renderer/scss/component/_tooltip.scss
@ -1,11 +1,10 @@
 .tooltip {
  display: inline-block;
  position: relative;
+  z-index: 2;

-  &:not(:hover) {
-    .tooltip__body {
-      visibility: hidden;
-    }
+  .tooltip__body {
+    visibility: hidden;
  }

  &:hover {
@ -15,17 +14,20 @@
  }

  .tooltip__body {
-    background-color: $lbry-gray-5;
-    border-radius: 8px;
-    color: $lbry-white;
    font-size: 1rem;
-    font-weight: 500;
+    color: $lbry-black;
+    font-weight: 400;
    padding: var(--spacing-vertical-small);
    position: absolute;
    text-align: center;
    white-space: pre-wrap;
    width: 200px;
-    z-index: 1;
+    box-shadow: 5px 5px 5px rgba($lbry-black, 0.15);
+
+    html[data-theme='dark'] & {
+      border: 1px solid #2f2f2f;
+      background-color: $lbry-gray-1;
+    }

    &::after {
      width: 0;
@ -37,12 +39,18 @@
      position: absolute;
    }

-    &--short {
+    &.tooltip__body--short {
      width: 130px;
    }
  }
 }

+.tooltip--always-visible {
+  .tooltip__body {
+    visibility: visible;
+  }
+}
+
 .tooltip--bottom .tooltip__body {
  top: 90%;
  left: 50%;
--- a/src/renderer/scss/component/_yrbl.scss
+++ b/src/renderer/scss/component/_yrbl.scss
@ -1,10 +1,19 @@
+.yrbl-wrap {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  vertical-align: middle;
+  margin-bottom: var(--spacing-vertical-large);
+}
+
 .yrbl {
  height: 300px;
+  margin-right: var(--spacing-vertical-large);
 }

 .yrbl--first-run {
  align-self: center;
-  height: 200px;
+  height: 250px;
  width: auto;
  margin: 0 var(--spacing-vertical-large);
 }