diff --git a/js/component/file-actions.js b/js/component/file-actions.js index 0ad8ba04d..569efabf1 100644 --- a/js/component/file-actions.js +++ b/js/component/file-actions.js @@ -185,7 +185,7 @@ let FileActionsRow = React.createClass({ ); } else { - linkBlock = ; + linkBlock = ; } return ( diff --git a/js/component/link.js b/js/component/link.js index d19e0b46c..497409e38 100644 --- a/js/component/link.js +++ b/js/component/link.js @@ -28,7 +28,8 @@ export let Link = React.createClass({ /* The way the class name is generated here is a mess -- refactor */ const className = (this.props.className || '') + - (this.props.button ? ' button-block button-' + this.props.button : '') + + (!this.props.className && !this.props.button ? 'button-block button-text' : '') + // Non-button links get the same look as text buttons + (this.props.button ? 'button-block button-' + this.props.button : '') + (this.props.disabled ? ' disabled' : ''); let content; @@ -45,9 +46,9 @@ export let Link = React.createClass({ return ( - {('button' in this.props) && this.props.button != 'text' - ? {content} - : content} + {'button' in this.props + ? {content} + : content} ); } diff --git a/scss/_global.scss b/scss/_global.scss index 4fc770831..5997470d7 100644 --- a/scss/_global.scss +++ b/scss/_global.scss @@ -3,6 +3,7 @@ $spacing-vertical: 24px; $padding-button: 12px; +$padding-text-link: 4px; $color-primary: #155B4A; $color-light-alt: hsl(hue($color-primary), 15, 85); diff --git a/scss/_gui.scss b/scss/_gui.scss index 5d7685037..be4fefcbf 100644 --- a/scss/_gui.scss +++ b/scss/_gui.scss @@ -198,6 +198,10 @@ input[type="text"], input[type="search"] { @include text-link(); display: inline-block; + + .button__content { + margin: 0 $padding-text-link; + } } .button-text-help { diff --git a/scss/component/_file-actions.scss b/scss/component/_file-actions.scss index 6b3e934ee..4eda16b51 100644 --- a/scss/component/_file-actions.scss +++ b/scss/component/_file-actions.scss @@ -8,6 +8,12 @@ $color-download: #444; min-height: $height-button; } +.file-actions__download-status-bar, .file-actions__download-status-bar-overlay { + .button__content { + margin: 0 $padding-text-link; + } +} + .file-actions__download-status-bar { position: relative;