fix: more noticeable invite link on first run

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/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/scss/component/_animation.scss

@@ -45,3 +45,24 @@
     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,14 @@
       width: 0.5rem;
     }
   }
+
+  &.navigation__link--guide:not(:hover) {
+    color: rgba($lbry-white, 0.75);
+
+    &::before {
+      animation: bounce 1.75s infinite;
+    }
+  }
 }
 
 .navigation__link--title {

src/renderer/scss/component/_tooltip.scss

@@ -22,11 +22,13 @@
     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'] & {
-      border: 1px solid #2f2f2f;
-      background-color: $lbry-gray-1;
+    &.tooltip__body--short {
+      width: 130px;
     }
 
     &::after {
@@ -38,9 +40,39 @@
       content: ' ';
       position: absolute;
     }
+  }
 
-    &.tooltip__body--short {
-      width: 130px;
+  $tooltip-border: $lbry-gray-5;
+  &.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 +83,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,12 +93,29 @@
   }
 }
 
-.tooltip--on-component {
+.tooltip--on-component,
+.tooltip--icon {
   .tooltip__body {
     margin-top: 10px;
   }
 }
 
+.tooltip--bottom .tooltip__body {
+  top: 90%;
+  left: 50%;
+  margin-left: -100px;
+
+  &.tooltip__body--short {
+    margin-left: -65px;
+  }
+
+  &::after {
+    bottom: 101%;
+    left: 50%;
+    margin-left: -5px;
+  }
+}
+
 .tooltip--left .tooltip__body {
   top: -5px;
   right: 105%;
@@ -92,8 +123,6 @@
   &::after {
     top: 17px;
     left: 100%;
-
-    border-color: transparent transparent transparent $lbry-gray-5;
     margin-top: -5px;
   }
 }
@@ -105,14 +134,12 @@
   &::after {
     top: 17px;
     right: 100%; // To the left of the tooltip
-
-    border-color: transparent $lbry-gray-5 transparent transparent;
     margin-top: -5px;
   }
 }
 
 .tooltip--top .tooltip__body {
-  bottom: 100%;
+  bottom: 120%;
   left: 50%;
   margin-left: -100px;
 
@@ -123,8 +150,6 @@
   &::after {
     top: 100%;
     left: 50%;
-
-    border-color: $lbry-gray-5 transparent transparent transparent;
     margin-left: -5px;
   }
 }