Pad buttons using margin on content instead of padding on container

Allows button-style progress bars to set width without having to
account for padding

js/component/file-actions.js

@@ -178,7 +178,7 @@ export let FileActions = React.createClass({
       const
         progress = this.state.fileInfo ? this.state.fileInfo.written_bytes / this.state.fileInfo.total_bytes * 100 : 0,
         label = this.state.fileInfo ? progress.toFixed(0) + '% complete' : 'Connecting...',
-        labelWithIcon = <span><Icon icon="icon-download" />{label}</span>;
+        labelWithIcon = <span className="button__content"><Icon icon="icon-download" />{label}</span>;
 
       linkBlock =
         <div className="faux-button-block file-actions__download-status-bar">

js/component/link.js

@@ -34,23 +34,19 @@ export let Link = React.createClass({
     if (this.props.children) { // Custom content
       content = this.props.children;
     } else {
-      content = (
-        <span>
-          {'icon' in this.props
-            ? <Icon icon={this.props.icon} fixed={true} />
-            : null}
-           <span className="link-label">{this.props.label}</span>
-          {'badge' in this.props
-            ? <span className="badge">{this.props.badge}</span>
-            : null}
-        </span>
-      );
+      content = [
+        'icon' in this.props ? <Icon icon={this.props.icon} fixed={true} /> : null,
+         <span className="link-label">{this.props.label}</span>,
+        'badge' in this.props ? <span className="badge">{this.props.badge}</span> : null,
+      ];
     }
 
     return (
       <a className={className} href={this.props.href || 'javascript:;'} title={this.props.title}
          onClick={this.handleClick} {... 'style' in this.props ? {style: this.props.style} : {}}>
-         {content}
+         {this.props.button
+           ? <span className="button__content">{content}</span>
+           : content}
       </a>
     );
   }

scss/_gui.scss

@@ -177,27 +177,26 @@ input[type="text"], input[type="search"]
   cursor: pointer;
 }
 
+.button__content {
+  margin: 0 $padding-button;
+}
+
 .button-primary
 {
   color: white;
   background-color: $color-primary;
   box-shadow: $default-box-shadow;
-  padding: 0 $padding-button;
 }
 .button-alt
 {
   background-color: $color-bg-alt;
   box-shadow: $default-box-shadow;
-  padding: 0 $padding-button;
 }
 
-.button-cancel
-{
-  padding: 0 $padding-button;
-}
 .button-text
 {
   @include text-link();
+  display: inline-block;
 }
 .button-text-help
 {

scss/component/_file-actions.scss

@@ -9,15 +9,11 @@ $color-download: #444;
 
 .file-actions__download-status-bar
 {
-  padding-right: $padding-button;
-  padding-left: $padding-button;
   position: relative;
   color: $color-download;
 }
 .file-actions__download-status-bar-overlay
 {
-  padding-right: $padding-button;
-  padding-left: $padding-button;
   background: $color-download;
   color: white;
   position: absolute;