diff --git a/js/gui.js b/js/gui.js index b48d1b33e..984ad8cbd 100644 --- a/js/gui.js +++ b/js/gui.js @@ -14,9 +14,10 @@ var Link = React.createClass({ console.log(this.props); var href = this.props.href ? this.props.href : 'javascript:;', icon = this.props.icon ? : '', - className = this.props.button ? 'button-block button-' + this.props.button : 'button-text'; + className = (this.props.button ? 'button-block button-' + this.props.button : 'button-text') + + (this.props.fadeIn ? ' fade-in-link' : ''); return ( - + {this.props.icon ? icon : '' } {this.props.label} @@ -68,7 +69,13 @@ var creditAmountStyle = { }, estimateStyle = { marginLeft : '5px', color: '#aaa', -} +}, menuStyle = { + position: 'relative', + top: '3px', + marginLeft: '2px' +}, menuItemStyle = { + marginLeft: '3px' +}; var CreditAmount = React.createClass({ propTypes: { @@ -77,9 +84,14 @@ var CreditAmount = React.createClass({ render: function() { var formattedAmount = lbry.formatCredits(this.props.amount); return ( - - {formattedAmount} - { this.props.isEstimate ? (est) : null } + + + {formattedAmount} + { this.props.isEstimate ? (est) : null } + + + + ); } diff --git a/scss/_gui.scss b/scss/_gui.scss index 40c5085cb..559b8b43d 100644 --- a/scss/_gui.scss +++ b/scss/_gui.scss @@ -25,6 +25,14 @@ sup, sub { sup { top: -0.4em; } sub { top: 0.4em; } +.fade-in-link { + opacity: 0.55; + transition: opacity .225s ease; + &:hover { + opacity: 1; + } +} + input[type="search"] { border: 0 none; @@ -94,4 +102,4 @@ input[type="search"] { color: $color-primary; text-decoration: underline; -} \ No newline at end of file +}