From 4728299722fe2fd8da94f4b81436ef701deac89f Mon Sep 17 00:00:00 2001 From: drewminns Date: Sat, 7 Apr 2018 15:30:57 -0400 Subject: [PATCH] Went back to regular SCSS to gain an output SCSS for when Service Workers are loaded --- .babelrc | 1 + .eslintrc | 3 + client/images/arrow.svg | 10 +- client/images/checkmark.svg | 8 +- client/images/file.svg | 21 + client/index.js | 2 +- client/scripts/Components/Button.js | 40 +- client/scripts/Components/Checkbox.js | 49 +- client/scripts/Components/Count.js | 20 +- client/scripts/Components/File.js | 46 +- client/scripts/Components/Header.js | 54 +- client/scripts/Components/Label.js | 20 + client/scripts/Components/Select.js | 62 +- client/scripts/Containers/FileContainer.js | 98 +-- client/scripts/Containers/FileWrapper.js | 89 +++ client/scripts/Containers/Filters.js | 41 +- client/scripts/Containers/Form.js | 24 +- client/scripts/Main.js | 1 + client/scripts/Providers/FileProvider.js | 2 + .../__snapshots__/Button.test.js.snap | 3 +- .../__snapshots__/Header.test.js.snap | 33 +- client/scripts/style.js | 43 -- client/scripts/utils/index.js | 2 +- client/styles/Components/_Button.scss | 21 + client/styles/Components/_Checkbox.scss | 41 ++ client/styles/Components/_Count.scss | 6 + client/styles/Components/_File.scss | 49 ++ client/styles/Components/_FileWrapper.scss | 23 + client/styles/Components/_Filters.scss | 7 + client/styles/Components/_Form.scss | 7 + client/styles/Components/_Header.scss | 45 ++ client/styles/Components/_Label.scss | 14 + client/styles/Components/_Select.scss | 24 + client/styles/_normalize.scss | 3 - client/styles/main.scss | 29 +- client/styles/normalize/_import-now.scss | 11 - client/styles/normalize/_normalize-mixin.scss | 666 ------------------ client/styles/normalize/_variables.scss | 36 - client/styles/normalize/_vertical-rhythm.scss | 61 -- client/styles/partials/_typography.scss | 31 +- client/styles/partials/_variables.scss | 49 +- package-lock.json | 280 ++++---- package.json | 6 +- 43 files changed, 698 insertions(+), 1383 deletions(-) create mode 100644 client/images/file.svg create mode 100644 client/scripts/Components/Label.js create mode 100644 client/scripts/Containers/FileWrapper.js create mode 100644 client/styles/Components/_Button.scss create mode 100644 client/styles/Components/_Checkbox.scss create mode 100644 client/styles/Components/_Count.scss create mode 100644 client/styles/Components/_File.scss create mode 100644 client/styles/Components/_FileWrapper.scss create mode 100644 client/styles/Components/_Filters.scss create mode 100644 client/styles/Components/_Form.scss create mode 100644 client/styles/Components/_Header.scss create mode 100644 client/styles/Components/_Label.scss create mode 100644 client/styles/Components/_Select.scss delete mode 100644 client/styles/_normalize.scss delete mode 100644 client/styles/normalize/_import-now.scss delete mode 100644 client/styles/normalize/_normalize-mixin.scss delete mode 100644 client/styles/normalize/_variables.scss delete mode 100644 client/styles/normalize/_vertical-rhythm.scss diff --git a/.babelrc b/.babelrc index 06e13dc..f916a4e 100644 --- a/.babelrc +++ b/.babelrc @@ -17,6 +17,7 @@ "plugins": [ [ "transform-runtime", + "transform-async-to-generator", { "polyfill": false, "regenerator": true diff --git a/.eslintrc b/.eslintrc index 00c5f4f..b383f5c 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,6 +2,9 @@ "root": true, "parser": "babel-eslint", "plugins": ["jsx-a11y", "react"], + "globals": { + "Raven": true + }, "env": { "browser": true, "commonjs": true, diff --git a/client/images/arrow.svg b/client/images/arrow.svg index 300b7e8..edc58e3 100644 --- a/client/images/arrow.svg +++ b/client/images/arrow.svg @@ -1,13 +1,13 @@ - - + + Triangle Created with Sketch. - - - + + + diff --git a/client/images/checkmark.svg b/client/images/checkmark.svg index edcf3f5..0b111c3 100644 --- a/client/images/checkmark.svg +++ b/client/images/checkmark.svg @@ -1,13 +1,13 @@ - + Shape Created with Sketch. - - - + + + diff --git a/client/images/file.svg b/client/images/file.svg new file mode 100644 index 0000000..ed67592 --- /dev/null +++ b/client/images/file.svg @@ -0,0 +1,21 @@ + + + + Page-1 + Created with Sketch. + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/client/index.js b/client/index.js index 1e0d4a8..d96cf52 100644 --- a/client/index.js +++ b/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(); diff --git a/client/scripts/Components/Button.js b/client/scripts/Components/Button.js index 9910e6a..f7691b4 100644 --- a/client/scripts/Components/Button.js +++ b/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 ( - + {text} - + ); } return ( - + + ); }; @@ -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; diff --git a/client/scripts/Components/Checkbox.js b/client/scripts/Components/Checkbox.js index ef56efa..a5566d9 100644 --- a/client/scripts/Components/Checkbox.js +++ b/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 ( - - + - + - + + ); }; diff --git a/client/scripts/Components/Count.js b/client/scripts/Components/Count.js index b6028bd..05b0c0e 100644 --- a/client/scripts/Components/Count.js +++ b/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 ( -
-

You got {amount} files

-

{formatBytes(fileSize)}

+
+

+ There are {amount} files you can delete +

+

+ It could save you {formatBytes(fileSize)} +

+ {deletedSize > 0 && ( +

+ Nice! You just saved{' '} + {formatBytes(deletedSize)} +

+ )}
); }; Count.propTypes = { data: PropTypes.array, + deletedSize: PropTypes.number, }; export default Count; diff --git a/client/scripts/Components/File.js b/client/scripts/Components/File.js index d653501..ee669f6 100644 --- a/client/scripts/Components/File.js +++ b/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 ( - -
- {details.name} - -

{details.name}

-

- Created: - {date} +

+
+
{details.filetype}
+ {details.name} +
+
+

+ {formatBytes(details.size)} / {date}

-

Size: {formatBytes(details.size)}

+

{details.name}

- +
); }; diff --git a/client/scripts/Components/Header.js b/client/scripts/Components/Header.js index f96e6c8..a09477a 100644 --- a/client/scripts/Components/Header.js +++ b/client/scripts/Components/Header.js @@ -1,51 +1,15 @@ import React, { Fragment } from 'react'; import PropTypes from 'prop-types'; -import { Flex } from 'grid-styled'; -import styled from 'styled-components'; import Button from '../Components/Button'; -import { WHITE, BOX_SHADOW } from '../style'; -import Logo from '../../images/logo.svg'; - -const HeaderLogo = styled.h1` - font-size: 0; - - &:before { - background-image: url(${Logo}); - background-size: cover; - content: ''; - display: block; - height: 73px; - width: 280px; - } -`; - -const HeaderBar = styled.header` - background-color: ${WHITE}; - box-shadow: ${BOX_SHADOW}; - padding: 20px 40px; -`; - -const HeaderAvatar = styled.img` - border-radius: 50%; - width: 73px; - height: 73px; - margin-right: 30px; - box-shadow: ${BOX_SHADOW}; -`; - -const HeaderName = styled.p` - margin-right: 20px; -`; - const Header = ({ isLoggedIn = false, name = '', avatar = '' }) => { let markup = null; if (isLoggedIn && name && avatar) { markup = ( - Hey {name} - +

Hey {name}

+ {name}
); } } diff --git a/client/scripts/Main.js b/client/scripts/Main.js index 08ba55d..4083f48 100644 --- a/client/scripts/Main.js +++ b/client/scripts/Main.js @@ -81,6 +81,7 @@ export default class Main extends Component { loading={this.state.loading} /> diff --git a/client/scripts/Providers/FileProvider.js b/client/scripts/Providers/FileProvider.js index 6566e9e..ecdcae7 100644 --- a/client/scripts/Providers/FileProvider.js +++ b/client/scripts/Providers/FileProvider.js @@ -22,6 +22,7 @@ export default class FileProvider extends Component { children: PropTypes.element.isRequired, accessToken: PropTypes.string, channels: PropTypes.array, + isLoggedIn: PropTypes.bool, }; state = { ...INITIAL_STATE }; @@ -115,6 +116,7 @@ export default class FileProvider extends Component { Renders Correctly 1`] = `