Differentiate download button.

web/src/Button.js

@@ -6,6 +6,15 @@ export default class Button extends PureComponent {
   focus() {
     this.button.focus();
   }
+  getColorKeys() {
+    if (this.props.disabled) {
+      return ['shade3', 'shade0'];
+    } else if (this.props.small || this.props.special) {
+      return ['shade7'];
+    } else {
+      return ['accent4', 'shade6', 'shade7'];
+    }
+  }
   render() {
     return (
       <ColorState>
@@ -14,15 +23,17 @@ export default class Button extends PureComponent {
             className={ [
               styles.button,
               this.props.small && styles.small,
+              this.props.special && styles.special,
               this.props.className,
             ].filter(Boolean).join(' ') }
+            data-text="Download"
             style={{
-              color: this.props.disabled ? getColor('shade3', 'shade0') : (
-                this.props.small ? getColor('shade7') : getColor('accent4', 'shade6', 'shade7')
-              ),
+              color: getColor(...this.getColorKeys()),
               '--button-resting-background-color': getColor('shade1', 'shade0'),
               '--button-hover-background-color': getColor('shade2', 'shade0'),
               '--button-active-background-color': getColor('shade0'),
+              '--button-special-color-1': getColor('accent1', 'shade7'),
+              '--button-special-color-2': getColor('accent7', 'shade7'),
             }}
             onClick={ this.props.onClick }
             disabled={ this.props.disabled }

web/src/Button.module.css

@@ -18,6 +18,36 @@
   font-size: var(--font-size-small);
 }
 
+.special {
+  padding: var(--size-small-3) var(--size-large-1);
+  border: none;
+  font-size: var(--size-large-1);
+  background-image: linear-gradient(to right, var(--button-special-color-1), var(--button-special-color-2));
+  position: relative;
+}
+
+.special::before {
+  content: attr(data-text);
+  position: absolute;
+  top: var(--large-border-size);
+  right: var(--large-border-size);
+  bottom: var(--large-border-size);
+  left: var(--large-border-size);
+  border-radius: var(--small-border-radius-size);
+  background-color: var(--button-resting-background-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.special:hover::before {
+  background-color: var(--button-hover-background-color);
+}
+
+.special:active::before {
+  background-color: var(--button-active-background-color);
+}
+
 .button:hover {
   background-color: var(--button-hover-background-color);
 }

web/src/Download.js

@@ -229,6 +229,7 @@ export default class DownloadOptions extends PureComponent {
             <UrlStateConsumer>
               { ({ rawState }) => (
                 <Button
+                  special
                   onClick={ async () => {
                     const zip = await generateZip(
                       this.state,

web/src/index.css

@@ -37,7 +37,9 @@ body,
 
   --border-size: var(--size-small-6);
   --small-border-size: var(--size-small-8);
+  --large-border-size: var(--size-small-5);
   --border-radius-size: var(--size-small-3);
+  --small-border-radius-size: var(--size-small-4);
 
   --font-size-small: var(--size-small-1);