From fb75bc19b4c4ea68e34738ccae24da5ff6279fa2 Mon Sep 17 00:00:00 2001
From: Alex Liebowitz <alex@alexliebowitz.com>
Date: Tue, 21 Feb 2017 01:26:59 -0500
Subject: [PATCH] Fix several problems with margin and padding on buttons

 - Buttons on dialogs were not getting width and height
 - Tooltip buttons were getting standard button spacing when they
   should be closer to their corresponding menu button
 - Several buttons and other elements had containers just to get
   spacing in button sets; rename button-container class to
   button-set-item and apply directly to elements where possible.
---
 js/component/file-actions.js | 21 +++++++++------------
 js/component/link.js         |  2 +-
 js/component/menu.js         |  2 +-
 scss/_gui.scss               |  4 ++--
 scss/component/_menu.scss    |  4 ++++
 5 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/js/component/file-actions.js b/js/component/file-actions.js
index fd6570e7f..0e281d950 100644
--- a/js/component/file-actions.js
+++ b/js/component/file-actions.js
@@ -41,7 +41,7 @@ let WatchLink = React.createClass({
   },
   render: function() {
     return (
-      <div className="button-container">
+      <div className="button-set-item">
         <Link button="primary" disabled={this.state.loading} label="Watch" icon="icon-play" onClick={this.handleClick} />
         <Modal contentLabel="Not enough credits" isOpen={this.state.modal == 'notEnoughCredits'} onConfirmed={this.closeModal}>
           You don't have enough LBRY credits to pay for this stream.
@@ -179,7 +179,7 @@ let FileActionsRow = React.createClass({
         labelWithIcon = <span className="button__content"><Icon icon="icon-download" /><span>{label}</span></span>;
 
       linkBlock = (
-        <div className="faux-button-block file-actions__download-status-bar">
+        <div className="faux-button-block file-actions__download-status-bar button-set-item">
           <div className="faux-button-block file-actions__download-status-bar-overlay" style={{ width: progress + '%' }}>{labelWithIcon}</div>
           {labelWithIcon}
         </div>
@@ -191,8 +191,8 @@ let FileActionsRow = React.createClass({
     return (
       <div>
         {(this.props.metadata.content_type && this.props.metadata.content_type.startsWith('video/')) ? <WatchLink streamName={this.props.streamName} /> : null}
-        {this.state.fileInfo !== null || this.state.fileInfo.isMine ?
-         <div className="button-container">{linkBlock}</div>
+        {this.state.fileInfo !== null || this.state.fileInfo.isMine
+          ? linkBlock
           : null}
         { showMenu ?
           <DropDownMenu>
@@ -277,14 +277,11 @@ export let FileActions = React.createClass({
         fileInfo || this.state.available || this.state.forceShowActions
           ? <FileActionsRow sdHash={this.props.sdHash} metadata={this.props.metadata} streamName={this.props.streamName} />
           : <div>
-              <div className="button-container empty">This file is not currently available.</div>
-              <div className="button-container">
-                <ToolTip label="Why?"
-                         body="The content on LBRY is hosted by its users. It appears there are no users connected that have this file at the moment." />
-              </div>
-              <div className="button-container">
-                <Link label="Try Anyway" onClick={this.onShowFileActionsRowClicked} />
-              </div>
+              <div className="button-set-item empty">This file is not currently available.</div>
+              <ToolTip label="Why?"
+                       body="The content on LBRY is hosted by its users. It appears there are no users connected that have this file at the moment."
+                       className="button-set-item" />
+              <Link label="Try Anyway" onClick={this.onShowFileActionsRowClicked} className="button-set-item" />
             </div>
       }
     </section>);
diff --git a/js/component/link.js b/js/component/link.js
index 6b2f890bc..8a4d76f76 100644
--- a/js/component/link.js
+++ b/js/component/link.js
@@ -29,7 +29,7 @@ export let Link = React.createClass({
 
     const className = (this.props.className || '') +
       (!this.props.className && !this.props.button ? 'button-text' : '') + // Non-button links get the same look as text buttons
-      (this.props.button ? 'button-block button-' + this.props.button : '') +
+      (this.props.button ? ' button-block button-' + this.props.button + ' button-set-item' : '') +
       (this.props.disabled ? ' disabled' : '');
 
     let content;
diff --git a/js/component/menu.js b/js/component/menu.js
index cfa6b9df7..2e4321e6d 100644
--- a/js/component/menu.js
+++ b/js/component/menu.js
@@ -67,7 +67,7 @@ export let DropDownMenu = React.createClass({
       window.removeEventListener('click', this.handleWindowClick, false);
     }
     return (
-      <div className="button-container">
+      <div className="menu-container">
         <Link ref={(span) => this._menuButton = span} button="text" icon="icon-ellipsis-v" onClick={this.onMenuIconClick} />
         {this.state.menuOpen
           ? <div ref={(div) => this._menuDiv = div} className="menu">
diff --git a/scss/_gui.scss b/scss/_gui.scss
index 5757b4565..4fa3ecc45 100644
--- a/scss/_gui.scss
+++ b/scss/_gui.scss
@@ -144,11 +144,11 @@ input[type="text"], input[type="search"]
   }
 }
 
-.button-container {
+.button-set-item {
   position: relative;
   display: inline-block;
 
-  + .button-container
+  + .button-set-item
   {
     margin-left: $padding-button;
   }
diff --git a/scss/component/_menu.scss b/scss/component/_menu.scss
index 68ceb5d7d..ab871fc2e 100644
--- a/scss/component/_menu.scss
+++ b/scss/component/_menu.scss
@@ -2,6 +2,10 @@
 
 $border-radius-menu: 2px;
 
+.menu-container {
+  display: inline-block;
+}
+
 .menu {
   position: absolute;
   white-space: nowrap;