From 7c852b30b8313a3234394c633855d882cd0512cd Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Fri, 19 Apr 2019 17:15:41 -0400
Subject: [PATCH] add back invite guide

---
 src/ui/component/sideBar/index.js       |  2 ++
 src/ui/component/sideBar/view.jsx       | 48 ++++++++++++++++---------
 src/ui/redux/selectors/app.js           |  8 +++++
 src/ui/scss/all.scss                    |  1 -
 src/ui/scss/component/_banner.scss      |  1 +
 src/ui/scss/component/_file-render.scss |  1 -
 src/ui/scss/component/_menu.scss        | 10 ------
 src/ui/scss/component/_navigation.scss  |  4 +--
 src/ui/scss/component/_tooltip.scss     |  2 --
 9 files changed, 44 insertions(+), 33 deletions(-)
 delete mode 100644 src/ui/scss/component/_menu.scss

diff --git a/src/ui/component/sideBar/index.js b/src/ui/component/sideBar/index.js
index 1e874f605..0b3b67846 100644
--- a/src/ui/component/sideBar/index.js
+++ b/src/ui/component/sideBar/index.js
@@ -1,9 +1,11 @@
 import { connect } from 'react-redux';
 import { selectUnreadAmount } from 'redux/selectors/subscriptions';
+import { selectShouldShowInviteGuide } from 'redux/selectors/app';
 import SideBar from './view';
 
 const select = state => ({
   unreadSubscriptionTotal: selectUnreadAmount(state),
+  shouldShowInviteGuide: selectShouldShowInviteGuide(state),
 });
 
 const perform = () => ({});
diff --git a/src/ui/component/sideBar/view.jsx b/src/ui/component/sideBar/view.jsx
index af31ff32d..5a626a59d 100644
--- a/src/ui/component/sideBar/view.jsx
+++ b/src/ui/component/sideBar/view.jsx
@@ -6,37 +6,46 @@ import Button from 'component/button';
 import classnames from 'classnames';
 import Tooltip from 'component/common/tooltip';
 
-type SideBarLink = {
-  label: string,
-  path: string,
-  active: boolean,
-  icon: ?string,
-  subLinks: Array<SideBarLink>,
-  guide: ?string,
-};
-
 type Props = {
   unreadSubscriptionTotal: number,
+  shouldShowInviteGuide: string,
 };
 
 class SideBar extends React.PureComponent<Props> {
   render() {
-    const { unreadSubscriptionTotal } = this.props;
-    const buildLink = (path, label, icon) => ({
+    const { unreadSubscriptionTotal, shouldShowInviteGuide } = this.props;
+    const buildLink = (path, label, icon, guide) => ({
       navigate: path ? `$/${path}` : '/',
       label,
       icon,
+      guide,
     });
 
-    const renderLink = (linkProps, index) => (
-      <li key={index}>
+    const renderLink = (linkProps, index) => {
+      const { guide } = linkProps;
+
+      const inner = (
         <Button
           {...linkProps}
-          className="navigation__link"
+          className={classnames('navigation__link', {
+            'navigation__link--guide': guide,
+          })}
           activeClass="navigation__link--active"
         />
-      </li>
-    );
+      );
+
+      return (
+        <li key={index}>
+          {guide ? (
+            <Tooltip key={guide} alwaysVisible direction="right" body={guide}>
+              {inner}
+            </Tooltip>
+          ) : (
+            inner
+          )}
+        </li>
+      );
+    };
 
     return (
       <nav className="navigation">
@@ -70,7 +79,12 @@ class SideBar extends React.PureComponent<Props> {
               ...buildLink(PAGES.ACCOUNT, 'Overview', ICONS.ACCOUNT),
             },
             {
-              ...buildLink(PAGES.INVITE, 'Invite', ICONS.INVITE),
+              ...buildLink(
+                PAGES.INVITE,
+                'Invite',
+                ICONS.INVITE,
+                shouldShowInviteGuide && __('Check this out!')
+              ),
             },
             {
               ...buildLink(PAGES.REWARDS, 'Rewards', ICONS.FEATURED),
diff --git a/src/ui/redux/selectors/app.js b/src/ui/redux/selectors/app.js
index 69c4fdee3..85e23eac2 100644
--- a/src/ui/redux/selectors/app.js
+++ b/src/ui/redux/selectors/app.js
@@ -138,3 +138,11 @@ export const selectSearchOptionsExpanded = createSelector(
   selectState,
   state => state.searchOptionsExpanded
 );
+
+export const selectShouldShowInviteGuide = createSelector(
+  makeSelectClientSetting(SETTINGS.FIRST_RUN_COMPLETED),
+  makeSelectClientSetting(SETTINGS.INVITE_ACKNOWLEDGED),
+  (firstRunCompleted, inviteAcknowledged) => {
+    return firstRunCompleted ? !inviteAcknowledged : false;
+  }
+);
diff --git a/src/ui/scss/all.scss b/src/ui/scss/all.scss
index db0ad0fee..b117a2b2c 100644
--- a/src/ui/scss/all.scss
+++ b/src/ui/scss/all.scss
@@ -28,7 +28,6 @@
 @import 'component/markdown-editor';
 @import 'component/markdown-preview';
 @import 'component/media';
-@import 'component/menu';
 @import 'component/modal';
 @import 'component/navigation';
 @import 'component/notice';
diff --git a/src/ui/scss/component/_banner.scss b/src/ui/scss/component/_banner.scss
index 1cb809241..7b71ce173 100644
--- a/src/ui/scss/component/_banner.scss
+++ b/src/ui/scss/component/_banner.scss
@@ -7,6 +7,7 @@
 
 .banner--first-run {
   height: 310px;
+  padding-right: var(--spacing-vertical-medium);
 
   // Adjust this class inside other `.banner--xxx` styles for control over animation
   .banner__item--static-for-animation {
diff --git a/src/ui/scss/component/_file-render.scss b/src/ui/scss/component/_file-render.scss
index abd4fff00..093db5e93 100644
--- a/src/ui/scss/component/_file-render.scss
+++ b/src/ui/scss/component/_file-render.scss
@@ -6,7 +6,6 @@
 
   overflow: hidden;
   position: absolute;
-  z-index: 1;
 
   html[data-mode='dark'] & {
     border: 1px solid rgba($lbry-gray-1, 0.3);
diff --git a/src/ui/scss/component/_menu.scss b/src/ui/scss/component/_menu.scss
deleted file mode 100644
index c2bd27a94..000000000
--- a/src/ui/scss/component/_menu.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.menu-container {
-  display: inline-block;
-
-  .menu {
-    padding-top: var(--spacing-vertical-medium);
-    position: absolute;
-    white-space: nowrap;
-    z-index: 1;
-  }
-}
diff --git a/src/ui/scss/component/_navigation.scss b/src/ui/scss/component/_navigation.scss
index 805785e64..5ef13c6af 100644
--- a/src/ui/scss/component/_navigation.scss
+++ b/src/ui/scss/component/_navigation.scss
@@ -4,12 +4,13 @@
   height: calc(100vh - var(--header-height));
   display: flex;
   flex-direction: column;
-  overflow-y: overlay;
+  overflow: visible;
   background-color: $lbry-white;
   border-right: 1px solid rgba($lbry-gray-1, 0.9);
   padding-top: var(--spacing-vertical-large);
   padding-right: var(--spacing-vertical-small);
   font-size: 1.2rem;
+  z-index: 2;
 
   html[data-mode='dark'] & {
     background-color: $lbry-black;
@@ -41,7 +42,6 @@
     );
     content: '';
     position: absolute;
-    z-index: 0;
 
     html[data-mode='dark'] & {
       background-image: linear-gradient(
diff --git a/src/ui/scss/component/_tooltip.scss b/src/ui/scss/component/_tooltip.scss
index dfd460622..35e24abb1 100644
--- a/src/ui/scss/component/_tooltip.scss
+++ b/src/ui/scss/component/_tooltip.scss
@@ -3,8 +3,6 @@
   position: relative;
 
   .tooltip__body {
-    z-index: 2;
-
     visibility: hidden;
   }