Went back to regular SCSS to gain an output SCSS for when Service Wor…

…kers are loaded

.babelrc

@@ -17,6 +17,7 @@
   "plugins": [
     [
       "transform-runtime",
+      "transform-async-to-generator",
       {
         "polyfill": false,
         "regenerator": true

.eslintrc

@@ -2,6 +2,9 @@
   "root": true,
   "parser": "babel-eslint",
   "plugins": ["jsx-a11y", "react"],
+  "globals": {
+    "Raven": true
+  },
   "env": {
     "browser": true,
     "commonjs": true,

client/index.js

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import Main from './scripts/Main';
 const keys = require('../config/keys');
 
-import './scripts/style';
+import './styles/main.scss';
 
 if (process.env.NODE_ENV === 'production') {
   Raven.config(keys.sentry).install();

client/scripts/Components/Button.js

@@ -1,52 +1,28 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
-
-import { BLACK, WHITE, BOX_SHADOW } from '../style';
-
-const ButtonEl = styled.button`
-  background-color: ${BLACK};
-  color: ${WHITE};
-  font-weight: 500;
-  box-shadow: ${BOX_SHADOW};
-  padding: 12px 20px;
-  cursor: pointer;
-  font-size: ${(props) => (props.large ? '26px' : '18px')};
-  width: ${(props) => (props.fullWidth ? '100%' : 'auto')};
-  border: none;
-  appearance: none;
-`;
-const ButtonLink = styled.a`
-  background-color: ${BLACK};
-  color: ${WHITE};
-  text-decoration: none;
-  font-weight: 500;
-  box-shadow: ${BOX_SHADOW};
-  padding: 12px 20px;
-  font-size: ${(props) => (props.large ? '26px' : '18px')};
-  width: ${(props) => (props.fullWidth ? '100%' : 'auto')};
-`;
+import cc from 'classcat';
 
 const Button = ({
   text = '',
   onClick = () => {},
   isLink = false,
   href = '',
+  disabled = false,
   large = false,
-  fullWidth = false,
 }) => {
+  const classes = cc(['Button', { Button__Large: large }]);
   if (isLink && href) {
     return (
-      <ButtonLink href={href} large={large} fullWidth={fullWidth}>
+      <a href={href} className={classes}>
         {text}
-      </ButtonLink>
+      </a>
     );
   }
 
   return (
-    <ButtonEl onClick={onClick} large={large} fullWidth={fullWidth}>
+    <button className={classes} onClick={onClick} disabled={disabled}>
       {text}
-    </ButtonEl>
+    </button>
   );
 };
 
@@ -55,8 +31,8 @@ Button.propTypes = {
   onClick: PropTypes.func,
   isLink: PropTypes.bool,
   href: PropTypes.string,
+  disabled: PropTypes.bool,
   large: PropTypes.bool,
-  fullWidth: PropTypes.bool,
 };
 
 export default Button;

client/scripts/Components/Checkbox.js

@@ -1,43 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { BLACK, WHITE, BOX_SHADOW } from '../style';
-import Checkmark from '../../images/checkmark.svg';
-
-const CheckboxDiv = styled.div`
-  margin: 8px 0;
-`;
-const CheckboxLabel = styled.label`
-  display: inline-block;
-  background-color: ${BLACK}; 
-  color: ${WHITE};
-  padding: 8px 12px
-  font-size: 18px;
-  margin-bottom: 13px;
-  margin-left: 50px;
-  box-shadow: ${BOX_SHADOW};
-  position: relative;
-
-  &::before {
-    position: absolute;
-    left: -50px;
-    top: 0;
-    display: inline-block;
-    border: 6px solid ${BLACK};
-    content: '';
-    width: 37px;
-    height: 37px;
-    background-color: ${WHITE};
-    color: ${BLACK};
-    padding: 2px 5px 4px 1px;
-    content: ${(props) => (props.checked ? `url(${Checkmark})` : '')}
-  }
-`;
-const CheckboxInput = styled.input`
-  height: 0;
-  width: 0;
-  position: absolute;
-`;
 
 const Checkbox = ({
   label = '',
@@ -46,18 +8,19 @@ const Checkbox = ({
   value = '',
 }) => {
   return (
-    <CheckboxDiv>
-      <CheckboxInput
+    <div className="Checkbox">
+      <input
+        className="Checkbox__Input"
         id={value}
         type="checkbox"
         checked={checked}
         onChange={onChange}
         value={value}
       />
-      <CheckboxLabel htmlFor={value} checked={checked}>
+      <label className="Checkbox__Label" htmlFor={value} checked={checked}>
         {label}
-      </CheckboxLabel>
-    </CheckboxDiv>
+      </label>
+    </div>
   );
 };
 

client/scripts/Components/Count.js

@@ -1,23 +1,33 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-
 import { formatBytes } from '../utils';
 
-const Count = ({ data }) => {
+const Count = ({ data, deletedSize }) => {
   const amount = data.length;
   const fileSize = data.reduce((count, file) => {
     return count + file.size;
   }, 0);
   return (
-    <div>
-      <p>You got {amount} files</p>
-      <p>{formatBytes(fileSize)}</p>
+    <div className="Count">
+      <p className="Count__Text">
+        There are <span className="purple">{amount} files</span> you can delete
+      </p>
+      <p className="Count__Text">
+        It could save you <span className="red">{formatBytes(fileSize)}</span>
+      </p>
+      {deletedSize > 0 && (
+        <p className="Count__Text">
+          Nice! You just saved{' '}
+          <span className="blue">{formatBytes(deletedSize)}</span>
+        </p>
+      )}
     </div>
   );
 };
 
 Count.propTypes = {
   data: PropTypes.array,
+  deletedSize: PropTypes.number,
 };
 
 export default Count;

client/scripts/Components/File.js

@@ -1,50 +1,54 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Box } from 'grid-styled';
 import moment from 'moment';
 
+import NoFileImage from '../../images/file.svg';
 import Button from '../Components/Button';
 import { formatBytes } from '../utils';
 
 function renderImage(file) {
-  let image = null;
-
   switch (file.mimetype) {
     case 'image/jpeg':
-      image = file.thumb_480;
-      break;
+      return file.thumb_480 || file.thumb_360;
+    case 'image/png':
+      return file.thumb_480 || file.thumb_360;
+    case 'image/svg+xml':
+      return file.url_private;
     case 'image/gif':
-      image = file.thumb_360_gif;
-      break;
+      return file.thumb_360_gif;
     default:
-      image = 'https://commons.wikimedia.org/wiki/File:No_image_available.svg';
-      break;
+      return NoFileImage;
   }
-
-  return image;
 }
 
 const File = ({ details, deleteFile }) => {
   const date = moment.unix(details.created).fromNow();
   return (
-    <Box width={1 / 4} px={2} py={2}>
-      <div>
-        <img src={renderImage(details)} alt={details.name} />
-
-        <h3>{details.name}</h3>
-        <p>
-          Created:
-          {date}
+    <article className="File">
+      <div className="File__Image">
+        <div className="File__ImageType">{details.filetype}</div>
+        <img
+          className="File__ImageSource"
+          src={renderImage(details)}
+          alt={details.name}
+        />
+      </div>
+      <div className="File__Details">
+        <p className="File__Meta">
+          {formatBytes(details.size)} / {date}
         </p>
-        <p>Size: {formatBytes(details.size)}</p>
+        <h3 className="File__Title">{details.name}</h3>
         <Button
           text="Delete File"
+          // I know...
+          // eslint-disable-next-line
           onClick={() => {
             deleteFile(details.id);
           }}
+          large
         />
       </div>
-    </Box>
+    </article>
   );
 };