add back invite guide

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 = () => ({});

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 { unreadSubscriptionTotal, shouldShowInviteGuide } = this.props;
-    const buildLink = (path, label, icon) => ({
+    const buildLink = (path, label, icon, guide) => ({
       navigate: path ? `$/${path}` : '/',
       label,
       icon,
+      guide,
     });
 
-    const renderLink = (linkProps, index) => (
+    const renderLink = (linkProps, index) => {
-      <li key={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),

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;
+  }
+);

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';

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 {

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);

src/ui/scss/component/_menu.scss

@@ -1,10 +0,0 @@
-.menu-container {
-  display: inline-block;
-
-  .menu {
-    padding-top: var(--spacing-vertical-medium);
-    position: absolute;
-    white-space: nowrap;
-    z-index: 1;
-  }
-}

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(

src/ui/scss/component/_tooltip.scss

@@ -3,8 +3,6 @@
   position: relative;
 
   .tooltip__body {
-    z-index: 2;
-
     visibility: hidden;
   }