Download button now works (thanks @sarim for the tip)

ivanseidel · Feb 3, 2017 · aee4e7a · aee4e7a
1 parent b007cc9
commit aee4e7a
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 18 deletions.
diff --git a/web/src/components/Button.js b/web/src/components/Button.js
@@ -1,9 +1,10 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
+import Link from './Link';
 import { button, radius as defaultRadius } from '../styles/variables';
 
-const Button = styled.button`
+export const style = css`
   padding: ${({ size }) => `${size / 2}px ${size}px`};
   font-family: 'Alfa Slab One', 'sans-serif', Verdana;
   font-size: ${({ size }) => `${size}px`};
@@ -21,6 +22,10 @@ const Button = styled.button`
   }
 `;
 
+const Button = styled.button`
+  ${style}
+`;
+
 Button.defaultProps = {
   color: 'transparent',
   disabled: false,
@@ -38,3 +43,10 @@ Button.propTypes = {
 };
 
 export default Button;
+
+export const ButtonLink = styled(Link)`
+  ${style}
+`;
+
+ButtonLink.defaultProps = Button.defaultProps;
+ButtonLink.propTypes = Button.propTypes;
diff --git a/web/src/pages/SharePage.js b/web/src/pages/SharePage.js
@@ -5,7 +5,7 @@ import styled from 'styled-components';
 import { withRouter } from 'react-router-dom';
 
 import firebase from '../libs/firebase';
-import Button from '../components/Button';
+import Button, { ButtonLink } from '../components/Button';
 import CenterBox from '../components/CenterBox';
 import LoadingPage, {
   defaultBackgroundColor as loadingBackgroundColor,
@@ -34,23 +34,28 @@ const Gif = styled.img`
 
 const Row = styled.div`
   display: flex;
+  flex: 1;
   flex-direction: ${({ horizontal }) => (horizontal ? 'row' : 'column')};
   align-items: center;
   margin-top: ${padding}px;
-  color: ${({ muted }) => (muted ? '#999' : '333')};
+  color: ${({ muted, invert }) => (
+    muted
+      ? (invert ? '#ddd' : '#999')
+      : (invert ? '#fff' : '#333')
+  )};
   font-size: 16px;
   text-align: left;
 
   & a {
-    color: #000;
+    color: ${({ invert }) => (invert ? '#fff' : '#000')};
   }
 `;
 
 const SocialButtons = styled.div`
   flex: 1;
 `;
 
-const DownloadButton = styled(Button)`
+const DownloadButton = styled(ButtonLink)`
   margin-left: ${padding / 2}px;
   background-color: #3d3e3d;
   color: #fff;
@@ -61,7 +66,7 @@ const Footer = styled.footer`
   align-items: center;
   margin: -${padding}px;
   margin-top: ${padding}px;
-  padding: ${padding}px 0;
+  padding-bottom: ${padding}px;
   border-bottom-left-radius: ${radius}px;
   border-bottom-right-radius: ${radius}px;
   background-color: ${colors.blue};
@@ -274,15 +279,15 @@ class SharePage extends Component {
           <H1><SubjectText>{subject}</SubjectText> is now illegal!</H1>
           <GifContainer>
             <Gif src={gifURL} loading={loading} />
-            <Row horizontal>
+            <Row horizontal invert>
               <SocialButtons>
                 <div
                   className="addthis_inline_share_toolbox"
                   data-title={`${subject} is now illegal! #IsNowIllegal`}
                   data-url={shareURL}
                 />
               </SocialButtons>
-              <DownloadButton size={14} onClick={this.download}>
+              <DownloadButton href={gifURL} size={14} download>
                 Download
               </DownloadButton>
             </Row>
@@ -293,15 +298,17 @@ class SharePage extends Component {
               </p>
             </Row>
             <Footer>
-              <ShareLink href={shareURL}>{shareURL}</ShareLink>
-              <CopyButton
-                innerRef={this.registerClipboardListener}
-                data-clipboard-text={shareURL}
-                size={12}
-                outline
-              >
-                {copied ? 'Copied!' : 'Copy'}
-              </CopyButton>
+              <Row horizontal invert>
+                <ShareLink href={shareURL}>{shareURL}</ShareLink>
+                <CopyButton
+                  innerRef={this.registerClipboardListener}
+                  data-clipboard-text={shareURL}
+                  size={12}
+                  outline
+                >
+                  {copied ? 'Copied!' : 'Copy'}
+                </CopyButton>
+              </Row>
             </Footer>
           </GifContainer>
         </CenterBox>