LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

fix: more noticeable invite link on first run

Browse source
This commit is contained in:
Sean Yesmunt 2019-02-05 09:16:24 -05:00
parent 762dc19f9f
commit eebe0defde
5 changed files with 89 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/renderer/component/common/tooltip.jsx
View file

@ -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,
})}
>

1
src/renderer/component/sideBar/view.jsx
View file

@ -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}
>

21
src/renderer/scss/component/_animation.scss
View file

@ -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;
}
}

19
src/renderer/scss/component/_navigation.scss
View file

@ -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 {

87
src/renderer/scss/component/_tooltip.scss
View file

@ -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;
}
}