Merge pull request #2266 from lbryio/rc-fixes

RC Fixes

src/renderer/component/common/tooltip.jsx

@@ -57,7 +57,7 @@ class ToolTip extends React.PureComponent<Props, State> {
           ref={ref => {
             this.tooltip = ref;
           }}
-          className={classnames('card tooltip__body', {
+          className={classnames('tooltip__body', {
             'tooltip__body--short': isShortDescription,
           })}
         >

src/renderer/component/inviteList/view.jsx

@@ -59,7 +59,7 @@ class InviteList extends React.PureComponent<Props> {
               showClaimable && (
                 <RewardLink
                   button
-                  label={__(`Claim Your ${40 || rewardAmount} LBC Invite Reward`)}
+                  label={__(`Claim Your ${rewardAmount} LBC Invite Reward`)}
                   reward_type={rewards.TYPE_REFERRAL}
                 />
               )}

src/renderer/component/sideBar/view.jsx

@@ -29,6 +29,7 @@ class SideBar extends React.PureComponent<Props> {
       <li
         className={classnames('navigation__link', {
           'navigation__link--active': active,
+          'navigation__link--guide': guide,
         })}
         key={label}
       >

src/renderer/component/wunderbar/index.js

@@ -9,6 +9,7 @@ import {
   doSearch,
   doToast,
 } from 'lbry-redux';
+import { Lbryio } from 'lbryinc';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
 import * as settings from 'constants/settings';
 import { doNavigate } from 'redux/actions/navigation';
@@ -34,6 +35,8 @@ const perform = dispatch => ({
   onSearch: (query, size) => {
     dispatch(doSearch(query, size));
     dispatch(doNavigate(`/search`, { query }));
+    // Ideally this would live inside doSearch, but lbry-redux does not have access to lbryinc
+    Lbryio.call('event', 'search');
   },
   onSubmit: (uri, extraParams) => dispatch(doNavigate('/show', { uri, ...extraParams })),
   updateSearchQuery: query => dispatch(doUpdateSearchQuery(query)),

src/renderer/page/file/view.jsx

@@ -170,7 +170,15 @@ class FilePage extends React.Component<Props> {
 
           <div className="media__properties media__properties--large">
             {isRewardContent && (
-              <Icon size={20} iconColor="red" tooltip="bottom" icon={icons.FEATURED} />
+              <Icon
+                size={20}
+                iconColor="red"
+                icon={icons.FEATURED}
+                // Figure out how to get the tooltip to overlap the navbar on the file page and I will love you
+                // https://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue
+                // https://spee.ch/4/overflow-issue
+                // tooltip="bottom"
+              />
             )}
             {metadata.nsfw && <div className="badge badge--nsfw">NSFW</div>}
             <FilePrice badge uri={normalizeURI(uri)} />

src/renderer/redux/actions/publish.js

@@ -6,6 +6,7 @@ import type {
   UpdatePublishFormAction,
   PublishParams,
 } from 'redux/reducers/publish';
+import { CC_LICENSES, COPYRIGHT, OTHER, NONE, PUBLIC_DOMAIN } from 'constants/licenses';
 import * as MODALS from 'constants/modal_types';
 import {
   ACTIONS,
@@ -18,12 +19,12 @@ import {
   selectMyClaimsWithoutChannels,
   doError,
 } from 'lbry-redux';
+import { Lbryio } from 'lbryinc';
 import { doOpenModal } from 'redux/actions/app';
 import { selectosNotificationsEnabled } from 'redux/selectors/settings';
 import { doNavigate } from 'redux/actions/navigation';
 import fs from 'fs';
 import path from 'path';
-import { CC_LICENSES, COPYRIGHT, OTHER, NONE, PUBLIC_DOMAIN } from 'constants/licenses';
 
 type Action = UpdatePublishFormAction | { type: ACTIONS.CLEAR_PUBLISH };
 
@@ -273,6 +274,8 @@ export const doPublish = (params: PublishParams) => (
   dispatch({ type: ACTIONS.PUBLISH_START });
 
   const success = pendingClaim => {
+    Lbryio.call('event', 'publish');
+
     const actions = [];
 
     actions.push({

src/renderer/scss/component/_animation.scss

@@ -45,3 +45,25 @@
     transform: scaleY(1);
   }
 }
+
+@keyframes bounce {
+  0% {
+    width: 0;
+  }
+
+  10% {
+    width: 0.5rem;
+  }
+
+  20% {
+    width: 0;
+  }
+
+  30% {
+    width: 0.5rem;
+  }
+
+  40% {
+    width: 0;
+  }
+}

src/renderer/scss/component/_navigation.scss

@@ -61,11 +61,12 @@
   transition: color 0.2s;
   white-space: nowrap;
   width: 100%;
+  color: $lbry-gray-5;
 
   &::before {
     top: 0;
     left: 0;
-
+    width: 0;
     background-color: $lbry-teal-3;
     content: '';
     height: 100%;
@@ -73,14 +74,6 @@
     transition: width 0.2s;
   }
 
-  &:not(.navigation__link--active):not(.navigation__link--title) {
-    color: $lbry-gray-5;
-
-    &::before {
-      width: 0;
-    }
-  }
-
   &:not(.navigation__link--title):hover,
   &.navigation__link--active {
     color: $lbry-black;
@@ -93,6 +86,18 @@
       width: 0.5rem;
     }
   }
+
+  &.navigation__link--guide:not(:hover) {
+    color: rgba($lbry-black, 0.75);
+
+    html[data-theme='dark'] {
+      color: rgba($lbry-white, 0.75);
+    }
+
+    &::before {
+      animation: bounce 1.75s infinite;
+    }
+  }
 }
 
 .navigation__link--title {

src/renderer/scss/component/_tooltip.scss

@@ -1,9 +1,10 @@
 .tooltip {
   display: inline-block;
   position: relative;
-  z-index: 2;
 
   .tooltip__body {
+    z-index: 2;
+
     visibility: hidden;
   }
 
@@ -17,16 +18,18 @@
     font-size: 1rem;
     color: $lbry-black;
     font-weight: 400;
-    padding: var(--spacing-vertical-small);
+    padding: var(--spacing-vertical-miniscule);
     position: absolute;
     text-align: center;
     white-space: pre-wrap;
     width: 200px;
+    background-color: $lbry-white;
+    border: 1px solid $lbry-gray-1;
     box-shadow: 5px 5px 5px rgba($lbry-black, 0.15);
+    border-radius: 0.5rem;
 
-    html[data-theme='dark'] & {
+    &.tooltip__body--short {
-      border: 1px solid #2f2f2f;
+      width: 110px;
-      background-color: $lbry-gray-1;
     }
 
     &::after {
@@ -38,9 +41,39 @@
       content: ' ';
       position: absolute;
     }
+  }
 
-    &.tooltip__body--short {
+  $tooltip-border: $lbry-gray-5;
-      width: 130px;
+  &.tooltip--bottom .tooltip__body::after {
+    border-color: transparent transparent $tooltip-border transparent;
+  }
+  &.tooltip--left .tooltip__body::after {
+    border-color: transparent transparent transparent $tooltip-border;
+  }
+  &.tooltip--right .tooltip__body::after {
+    border-color: transparent $tooltip-border transparent transparent;
+  }
+  &.tooltip--top .tooltip__body::after {
+    border-color: $tooltip-border transparent transparent transparent;
+  }
+
+  html[data-theme='dark'] & {
+    .tooltip__body {
+      border: none;
+    }
+    $tooltip-border: $lbry-white;
+
+    &.tooltip--bottom .tooltip__body::after {
+      border-color: transparent transparent $tooltip-border transparent;
+    }
+    &.tooltip--left .tooltip__body::after {
+      border-color: transparent transparent transparent $tooltip-border;
+    }
+    &.tooltip--right .tooltip__body::after {
+      border-color: transparent $tooltip-border transparent transparent;
+    }
+    &.tooltip--top .tooltip__body::after {
+      border-color: $tooltip-border transparent transparent transparent;
     }
   }
 }
@@ -51,24 +84,6 @@
   }
 }
 
-.tooltip--bottom .tooltip__body {
-  top: 90%;
-  left: 50%;
-  margin-left: -100px;
-
-  &.tooltip__body--short {
-    margin-left: -65px;
-  }
-
-  &::after {
-    bottom: 100%;
-    left: 50%;
-
-    border-color: transparent transparent $lbry-gray-5 transparent;
-    margin-left: -5px;
-  }
-}
-
 .tooltip--label {
   // When there is a label for the tooltip and not just using a button or icon
   font-size: 14px;
@@ -79,7 +94,8 @@
   }
 }
 
-.tooltip--on-component {
+.tooltip--on-component,
+.tooltip--icon {
   .tooltip__body {
     margin-top: 10px;
   }
@@ -92,39 +108,49 @@
   &::after {
     top: 17px;
     left: 100%;
-
-    border-color: transparent transparent transparent $lbry-gray-5;
     margin-top: -5px;
   }
 }
 
 .tooltip--right .tooltip__body {
-  margin-top: -30px;
+  margin-top: -28px;
   margin-left: 110%;
 
   &::after {
-    top: 17px;
+    top: 14px;
     right: 100%; // To the left of the tooltip
-
-    border-color: transparent $lbry-gray-5 transparent transparent;
     margin-top: -5px;
   }
 }
 
-.tooltip--top .tooltip__body {
+.tooltip--bottom .tooltip__body {
-  bottom: 100%;
+  top: 90%;
   left: 50%;
   margin-left: -100px;
 
   &.tooltip__body--short {
-    margin-left: -65px;
+    margin-left: -56px;
+  }
+
+  &::after {
+    bottom: 100%;
+    left: 50%;
+    margin-left: -5px;
+  }
+}
+
+.tooltip--top .tooltip__body {
+  bottom: 120%;
+  left: 50%;
+  margin-left: -100px;
+
+  &.tooltip__body--short {
+    margin-left: -56px;
   }
 
   &::after {
     top: 100%;
     left: 50%;
-
-    border-color: $lbry-gray-5 transparent transparent transparent;
     margin-left: -5px;
   }
 }