Kutt/client/components/Extensions.tsx

import React from 'react';
import styled from 'styled-components';
import { Flex } from 'reflexbox/styled-components';
import SVG from 'react-inlinesvg'; // TODO: another solution

const Section = styled(Flex).attrs({
  width: 1,
  flex: '0 0 auto',
  flexWrap: ['wrap', 'wrap', 'nowrap'],
  flexDirection: 'column',
  alignItems: 'center',
  m: 0,
  p: ['48px 0 16px', '48px 0 16px', '90px 0 100px'],
})`
  background-color: #282828;
`;

const Title = styled.h3`
  font-size: 28px;
  font-weight: 300;
  margin: 0 0 60px;
  color: #f5f5f5;

  @media only screen and (max-width: 768px) {
    font-size: 24px;
    margin-bottom: 56px;
  }

  @media only screen and (max-width: 448px) {
    font-size: 20px;
    margin-bottom: 40px;
  }
`;

const Button = styled.button`
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 16px;
  padding: 12px 28px;
  font-family: 'Nunito', sans-serif;
  background-color: #eee;
  border: 1px solid #aaa;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 4px;
  outline: none;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease-out;
  cursor: pointer;

  @media only screen and (max-width: 768px) {
    margin-bottom: 16px;
    padding: 8px 16px;
    font-size: 12px;
  }

  > * {
    text-decoration: none;
  }

  :hover {
    transform: translateY(-2px);
  }
`;

const FirefoxButton = styled(Button)`
  color: #e0890f;
`;

const ChromeButton = styled(Button)`
  color: #4285f4;
`;

const Link = styled.a`
  text-decoration: none;

  :visited,
  :hover,
  :active,
  :focus {
    text-decoration: none;
  }
`;

const Icon = styled(SVG)`
  svg {
    width: 18px;
    height: 18px;
    margin-right: 16px;
    fill: ${props => props.color || '#333'};

    @media only screen and (max-width: 768px) {
      width: 13px;
      height: 13px;
      margin-right: 10px;
    }
  }
`;

const Extensions = () => (
  <Section>
    <Title>Browser extensions.</Title>
    <Flex
      width={1200}
      maxWidth="100%"
      flex="1 1 auto"
      justifyContent="center"
      flexWrap={['wrap', 'wrap', 'nowrap']}
    >
      <Link
        href="https://chrome.google.com/webstore/detail/kutt/pklakpjfiegjacoppcodencchehlfnpd"
        target="_blank"
        rel="noopener noreferrer"
      >
        <ChromeButton>
          <Icon src="/images/googlechrome.svg" color="#4285f4" />
          <span>Download for Chrome</span>
        </ChromeButton>
      </Link>
      <Link
        href="https://addons.mozilla.org/en-US/firefox/addon/kutt/"
        target="_blank"
        rel="noopener noreferrer"
      >
        <FirefoxButton>
          <Icon src="/images/mozillafirefox.svg" color="#e0890f" />
          <span>Download for Firefox</span>
        </FirefoxButton>
      </Link>
    </Flex>
  </Section>
);

export default Extensions;