diff --git a/.all-contributorsrc b/.all-contributorsrc index 0ef8e7f..06f0dbb 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -1,6 +1,6 @@ { "projectName": "favycon", - "projectOwner": "ruisaraiva19", + "projectOwner": "toolslab", "repoType": "github", "repoHost": "https://github.com", "files": [ diff --git a/.editorconfig b/.editorconfig index 538ba2b..108a3b1 100644 --- a/.editorconfig +++ b/.editorconfig @@ -3,3 +3,7 @@ root = true [*] indent_style = tab indent_size = 2 + +[*.yml] +indent_style = space +indent_size = 2 diff --git a/components/button/index.module.scss b/components/button/index.module.scss index a49752e..4ce4c5f 100644 --- a/components/button/index.module.scss +++ b/components/button/index.module.scss @@ -44,12 +44,6 @@ padding: 5px 0; background: transparent; border: 1px solid transparent; - - &:hover, - &:focus, - &:active { - text-decoration: underline; - } } .regularTransparent { @@ -57,7 +51,7 @@ padding: 0; font-size: $font-size-regular-body; line-height: $line-height-regular-body; - text-decoration: underline; + text-decoration: none; border: 0; } @@ -85,30 +79,66 @@ color: $grey; } +:global(.dark-mode) .gray { + color: $grey-dark; +} + .white { color: $white; } .link { - color: $link; + color: $black; + + &:hover { + color: $link; + } +} + +:global(.dark-mode) .link { + color: $white; + + &:hover { + color: $link-dark; + } } .bgLink { background: $link; border-color: $link; + + &:hover { + background: $link-hover; + border-color: $link-hover; + } } :global(.dark-mode) .bgLink { - background: $link; - border-color: $link; + background: $link-dark; + border-color: $link-dark; + + &:hover { + background: $link-hover; + border-color: $link-hover; + } } .bgGreen { background: $green; border-color: $green; + + &:hover { + background: $green-hover; + border-color: $green-hover; + } } :global(.dark-mode) .bgGreen { background: $green; border-color: $green; + + &:hover { + background: $green-hover; + border-color: $green-hover; + } } diff --git a/components/dark-mode-toggle/index.module.scss b/components/dark-mode-toggle/index.module.scss index 74b6e51..549d29e 100644 --- a/components/dark-mode-toggle/index.module.scss +++ b/components/dark-mode-toggle/index.module.scss @@ -72,7 +72,19 @@ .sun, .moon { path { - fill: #5a5b66; + fill: #657584; } } } + +:global(.light-mode) .label { + &:hover path { + fill: $link; + } +} + +:global(.dark-mode) .label { + &:hover path { + fill: $link-dark; + } +} diff --git a/components/drag-and-drop/index.module.scss b/components/drag-and-drop/index.module.scss index ecde94a..0c0953b 100644 --- a/components/drag-and-drop/index.module.scss +++ b/components/drag-and-drop/index.module.scss @@ -27,20 +27,6 @@ } } -.dropZoneWrapper { - position: relative; - height: 244px; - margin-bottom: 16px; - text-align: center; - background: $off-white; - border-radius: 6px; - transition: background 0.2s ease; -} - -:global(.dark-mode) .dropZoneWrapper { - background: $dark-grey; -} - .dashed { position: absolute; top: 0; @@ -58,13 +44,46 @@ &.dragActive rect { stroke: $link; - stroke-width: 4px; animation-play-state: running; } } -:global(.dark-mode) .dashed.dragActive rect { - stroke: $link-dark; +:global(.dark-mode) .dashed { + rect { + stroke: #495c70; + } + + &.dragActive rect { + stroke: $off-white-dark; + } +} + +.dropZoneWrapper { + position: relative; + height: 244px; + margin-bottom: 16px; + text-align: center; + background: $off-white; + border-radius: 6px; + transition: background 0.2s ease; + + &:hover { + cursor: pointer; + + .dashed rect { + stroke: $link; + } + } +} + +:global(.dark-mode) .dropZoneWrapper { + background: $dark-grey; + + &:hover { + .dashed rect { + stroke: $off-white-dark; + } + } } @keyframes dash { @@ -96,26 +115,28 @@ } .imageUploadText { - u { - font-weight: 700; - color: $link; - cursor: pointer; - transition: color 0.2s ease; + height: 48px; + + span { + display: inline-block; + overflow: hidden; + white-space: nowrap; } - &.dark u { - color: $link-dark; + &.dragActive { + height: 48px; } } -:global(.dark-mode) .imageUploadText u { - color: $link-dark; +:global(.dark-mode) .imageUploadText { + color: $white-dark; } .info { display: flex; align-items: center; margin-top: 8px; + letter-spacing: 0.2px; svg { flex: 0 0 20px; @@ -128,6 +149,10 @@ } } +:global(.dark-mode) .info { + color: $off-white-dark; +} + .imagePreviewWrapper { display: flex; align-items: center; @@ -269,6 +294,10 @@ } } +:global(.dark-mode) .preview { + background: $off-white-dark; +} + .imagePreviewTitle { margin-bottom: 4px; text-align: center; @@ -279,14 +308,24 @@ margin: 0 auto; margin-bottom: 42px; text-align: center; + letter-spacing: 0.2px; } .imageInfoItemSvg { margin-right: 8px; + letter-spacing: 0.2px; } .showCode { margin-left: 12px; + + &:hover { + color: $link; + } +} + +:global(.dark-mode) .showCode:hover { + color: $off-white-dark; } .imageFooter { @@ -310,6 +349,32 @@ justify-content: space-between; } +.makeNewOne { + &:hover { + color: $link; + text-decoration: none; + } +} + +:global(.dark-mode) .makeNewOne { + &:hover { + color: $off-white-dark; + } +} + +.reUpload { + &:hover { + color: $link; + text-decoration: none; + } +} + +:global(.dark-mode) .reUpload { + &:hover { + color: $off-white-dark; + } +} + .imageGenerate { margin-left: 24px; } @@ -380,6 +445,7 @@ font-weight: 700; line-height: $line-height-title; color: $link; + letter-spacing: 0.2px; content: 'Copied!'; opacity: 0; transition: all 0.2s ease; @@ -392,5 +458,5 @@ } :global(.dark-mode) .copyWrapper::before { - color: $link-dark; + color: $off-white-dark; } diff --git a/components/drag-and-drop/index.tsx b/components/drag-and-drop/index.tsx index 941d01d..6d8f0df 100644 --- a/components/drag-and-drop/index.tsx +++ b/components/drag-and-drop/index.tsx @@ -1,7 +1,8 @@ import dynamic from 'next/dynamic' import React, { useState, useEffect, useCallback } from 'react' import classnames from 'classnames' -import { useDropzone } from 'react-dropzone' +import { useDropzone, FileRejection } from 'react-dropzone' +import { CSSTransition } from 'react-transition-group' import { headTemplate } from 'utils/favicon' import { Typography } from 'components/typography' import { CodeHighlight } from 'components/code-highlight' @@ -124,7 +125,7 @@ const DragAndDrop = ({ onFile, onGenerate, onError }: DragAndDropProps) => { setZipData(undefined) } - const onDrop = async (acceptedFiles: File[], rejectedFiles: File[]) => { + const onDrop = async (acceptedFiles: File[], fileRejections: FileRejection[]) => { if (acceptedFiles.length) { const file = acceptedFiles[0] const sizes = await getImageFileSizes(file) @@ -137,12 +138,12 @@ const DragAndDrop = ({ onFile, onGenerate, onError }: DragAndDropProps) => { onError('') onFile(true) setImage(file) - } else if (rejectedFiles.length) { - const file = rejectedFiles[0] - if (file.size > ONE_MB) { - onError(`The ${ACCEPT_MIME_TYPES[file.type]} file needs to be lower than 1 MB`) - } else if (!Object.keys(ACCEPT_MIME_TYPES).includes(file.type)) { + } else if (fileRejections.length) { + const file = fileRejections[0].file + if (!Object.keys(ACCEPT_MIME_TYPES).includes(file.type)) { onError(`The image file should be a ${Object.values(ACCEPT_MIME_TYPES).join(' or ')}`) + } else if (file.size > ONE_MB) { + onError(`The ${ACCEPT_MIME_TYPES[file.type]} file needs to be lower than 1 MB`) } else { onError('idk') } @@ -163,25 +164,49 @@ const DragAndDrop = ({ onFile, onGenerate, onError }: DragAndDropProps) => { }, 3000) } + const [isHover, setIsHover] = useState(false) + return (
{!image && !zipData && ( <> -
+
setIsHover(true)} + onMouseLeave={() => setIsHover(false)}>
- +
- - Drag & drop an image file or + + + Drag &  + + {isDragActive ? 'Drop' : 'drop'} + +  an + +  image file here + + ... + + + , +
- click here to upload it. + + or click to select a file. +
+ {/* */} We recommend a square PNG or SVG with at least 310px @@ -266,7 +291,7 @@ const DragAndDrop = ({ onFile, onGenerate, onError }: DragAndDropProps) => {
-
-
void +} + +const FavyconError = ({ error, clearError }: FavyconErrorProps) => { + const [showError, setShowError] = useState(false) + + useEffect(() => { + if (error) { + let endTimeout: number + setShowError(true) + const errorTimeout = setTimeout(() => { + setShowError(false) + endTimeout = setTimeout(() => { + clearError() + }, 300) as any + }, 5300) as any + return () => { + clearTimeout(errorTimeout) + clearTimeout(endTimeout) + } + } + }, [error, clearError]) + + return ( + +
+ + {error} + + + + +
+ + ) +} + +export { FavyconError } diff --git a/components/favycon-info/index.module.scss b/components/favycon-info/index.module.scss index 130c081..2b1904d 100644 --- a/components/favycon-info/index.module.scss +++ b/components/favycon-info/index.module.scss @@ -7,11 +7,18 @@ .firstParagraph { margin-top: 8px; + letter-spacing: 0.2px; } .secondParagraph { margin-top: 16px; margin-bottom: 60px; + letter-spacing: 0.2px; +} + +:global(.dark-mode) .firstParagraph, +:global(.dark-mode) .secondParagraph { + color: $white-dark; } .peopleButton { @@ -27,6 +34,32 @@ outline: none; } +.footer { + letter-spacing: 0.2px; + + button, + a { + color: #424347; + text-decoration: none; + transition: all 0.2s ease; + + &:hover { + color: $link; + } + } +} + +:global(.dark-mode) .footer { + button, + a { + color: $white-dark; + + &:hover { + color: $off-white-dark; + } + } +} + .overlay { position: fixed; top: 0; @@ -34,11 +67,11 @@ bottom: 0; left: 0; z-index: 10; - background-color: rgba(255, 255, 255, 0.64); + background-color: rgba($light-grey, 0.64); } :global(.dark-mode) .overlay { - background-color: rgba(0, 0, 0, 0.8); + background-color: rgba($black, 0.8); } .content { @@ -48,7 +81,7 @@ width: 100%; max-width: 730px; height: 100%; - max-height: 497px; + max-height: 568px; padding: 0; overflow: auto; background: $white; @@ -64,12 +97,19 @@ background: $dark-black; } +.modalContainer { + max-width: 572px; + padding: 0 16px; + margin: 0 auto; +} + .modalHeader { padding-top: 48px; text-align: center; } .logo { + width: 96px; height: 96px; margin-bottom: 16px; } @@ -84,20 +124,20 @@ .hr { padding: 0; + margin: 0; } .people { display: flex; flex-wrap: wrap; - max-width: 572px; - margin: 32px auto 0; + justify-content: space-between; + margin: 8px auto 32px; } .person { display: flex; - flex: 0 0 50%; - padding: 0 16px; - margin-bottom: 24px; + width: calc(50% - 15px); + margin-top: 24px; } .personAvatar { @@ -107,11 +147,20 @@ .personTwitter { color: #55acee; + text-decoration: none; + + &:hover { + color: $link; + } p { display: flex; align-items: center; color: #55acee; + + &:hover { + color: darken(#55acee, 15); + } } svg { @@ -121,4 +170,14 @@ :global(.dark-mode) .personTwitter p { color: #55acee; + + &:hover { + color: $off-white-dark; + } +} + +.modalFooter { + padding-bottom: 48px; + margin-top: 12px; + text-align: center; } diff --git a/components/favycon-info/index.tsx b/components/favycon-info/index.tsx index 32082bc..81e082f 100644 --- a/components/favycon-info/index.tsx +++ b/components/favycon-info/index.tsx @@ -1,24 +1,16 @@ import dynamic from 'next/dynamic' import React, { useState } from 'react' +import classnames from 'classnames' import { Typography } from 'components/typography' import { ToolTitle } from 'components/tool-title' import { LazyImage } from 'components/lazy-image' import { SvgTwitter } from 'components/svgs/svg-twitter' import styles from './index.module.scss' +import { SvgFavycon } from 'components/svgs/svg-favycon' const Modal = dynamic(() => import('react-modal')) -type FavyconInfoProps = { - imageIndex: number -} - -const unsplashImagesUrls = [ - 'https://unsplash.com/photos/zKnQnyARggY', - 'https://unsplash.com/photos/UQAQm_EpWR8', - 'https://unsplash.com/photos/IXUM4cJynP0', -] - const people = [ { screenName: 'aboutaugusto', @@ -42,11 +34,11 @@ const people = [ }, ] -const FavyconInfo = ({ imageIndex }: FavyconInfoProps) => { +const FavyconInfo = () => { const [isModalOpen, setIsModalOpen] = useState(false) return (
- Favycon + A small online tool to help you generate your favicon in all the sizes and formats you need. @@ -55,13 +47,13 @@ const FavyconInfo = ({ imageIndex }: FavyconInfoProps) => { add the favicons.
- + Created by{' '} {' '} on their 2020’s worldwide quarantine. Background image from{' '} - + Unsplash . @@ -76,7 +68,8 @@ const FavyconInfo = ({ imageIndex }: FavyconInfoProps) => { contentLabel="About Us">
- Favycon logo + {/* Favycon logo */} + Behind the curtains @@ -116,6 +109,23 @@ const FavyconInfo = ({ imageIndex }: FavyconInfoProps) => {
))}
+
+
+ + Project on{' '} + + GitHub + + . Have feedback? Send it to{' '} + + hello@favycon.app + + +
diff --git a/components/favycon-wizard/index.module.scss b/components/favycon-wizard/index.module.scss index b57eada..ab53668 100644 --- a/components/favycon-wizard/index.module.scss +++ b/components/favycon-wizard/index.module.scss @@ -10,31 +10,6 @@ padding: 41px 0 0; } -.error { - position: absolute; - top: -5px; - left: 6px; - display: flex; - align-items: center; - padding: 6px 8px 6px 16px; - background: $red; - border-radius: 18px; - box-shadow: 0 2px 4px rgba($black, 0.12); - opacity: 1; - transition: opacity 0.2s ease-in-out; - transform: translateY(-100%) rotate(2deg); - - &.hide { - pointer-events: none; - opacity: 0; - } -} - -.errorIcon { - margin-left: 24px; - cursor: pointer; -} - .background { position: absolute; top: 10px; @@ -64,8 +39,8 @@ top: 57px; right: 15px; z-index: -1; - width: 184px; - height: 108px; + width: 185px; + height: 109px; opacity: 1; transition: opacity 0.2s ease-in-out; transform: translate(100%, -100%); diff --git a/components/favycon-wizard/index.tsx b/components/favycon-wizard/index.tsx index 6fa91ab..ffbc66d 100644 --- a/components/favycon-wizard/index.tsx +++ b/components/favycon-wizard/index.tsx @@ -2,33 +2,22 @@ import React from 'react' import PropTypes from 'prop-types' import classnames from 'classnames' import { LazyImage } from 'components/lazy-image' -import { Typography } from 'components/typography' -import { SvgError } from 'components/svgs/svg-error' import styles from './index.module.scss' type FavyconWizardProps = { children: PropTypes.ReactNodeLike - backgroundId: number - error: string - clearError: () => void showDndImage: boolean } -const FavyconWizardComponent = ({ children, backgroundId, error, clearError, showDndImage }: FavyconWizardProps) => { +const FavyconWizardComponent = ({ children, showDndImage }: FavyconWizardProps) => { return (
-
- - {error} - - -
@@ -39,14 +28,14 @@ const FavyconWizardComponent = ({ children, backgroundId, error, clearError, sho src={`/images/dnd-light@1x.png`} srcRetina={`/images/dnd-light@2x.png`} alt="Drag and drop here!" - aspectRatio="184/108" + aspectRatio="185/109" className={styles.imageLight} />
diff --git a/components/header/index.module.scss b/components/header/index.module.scss index 7cae8be..cd83895 100644 --- a/components/header/index.module.scss +++ b/components/header/index.module.scss @@ -5,7 +5,6 @@ } .container { - max-width: 1440px; height: 68px; padding: 20px 20px 0 20px; margin: 0 auto; @@ -14,7 +13,7 @@ .header { display: flex; align-items: center; - justify-content: space-between; + justify-content: flex-end; height: 100%; } diff --git a/components/header/index.tsx b/components/header/index.tsx index b7f4673..755056b 100644 --- a/components/header/index.tsx +++ b/components/header/index.tsx @@ -1,8 +1,6 @@ import React from 'react' -import Link from 'next/link' import { DarkModeToggle } from 'components/dark-mode-toggle' import { Sticky } from 'components/sticky' -import { SvgFavycon } from 'components/svgs/svg-favycon' import styles from './index.module.scss' @@ -12,13 +10,6 @@ const Header = () => {
-
- - - - - -
diff --git a/components/seo/index.tsx b/components/seo/index.tsx index 0758a84..7dba2f4 100644 --- a/components/seo/index.tsx +++ b/components/seo/index.tsx @@ -24,8 +24,6 @@ const SEO = ({ title, description }: SEOProps) => ( - - diff --git a/components/svgs/svg-drop-zone.module.scss b/components/svgs/svg-drop-zone.module.scss index c86c498..25f7102 100644 --- a/components/svgs/svg-drop-zone.module.scss +++ b/components/svgs/svg-drop-zone.module.scss @@ -6,5 +6,5 @@ } :global(.dark-mode) .rect { - stroke: #5a5b66; + stroke: $off-white-dark; } diff --git a/components/svgs/svg-favycon.module.scss b/components/svgs/svg-favycon.module.scss new file mode 100644 index 0000000..220f90d --- /dev/null +++ b/components/svgs/svg-favycon.module.scss @@ -0,0 +1,55 @@ +@import '../../styles/variables.scss'; + +.background { + fill: #2e3a47; + transition: fill 0.2s ease; +} + +:global(.dark-mode) .background { + fill: #495c70; +} + +.foreground { + fill: #fff; + transition: fill 0.2s ease; +} + +:global(.dark-mode) .foreground { + fill: #1e262f; +} + +.top { + fill: #f6a044; + transition: fill 0.2s ease; +} + +:global(.dark-mode) .top { + fill: #f6a044; +} + +.corner { + fill: #493b39; + transition: fill 0.2s ease; +} + +:global(.dark-mode) .corner { + fill: #f9cdff; +} + +.left { + fill: #4c5ed5; + transition: fill 0.2s ease; +} + +:global(.dark-mode) .left { + fill: #728dff; +} + +.star { + fill: #4c5ed5; + transition: fill 0.2s ease; +} + +:global(.dark-mode) .star { + fill: #728dff; +} diff --git a/components/svgs/svg-favycon.tsx b/components/svgs/svg-favycon.tsx index 7924b57..aba6990 100644 --- a/components/svgs/svg-favycon.tsx +++ b/components/svgs/svg-favycon.tsx @@ -1,88 +1,49 @@ import React from 'react' import { uniqueId } from 'utils/ids' +import styles from './svg-favycon.module.scss' + const SvgFavycon: React.FC> = (props) => { const idPrefix = uniqueId('svg-') return ( - + Favycon logo - - - - - - - - - - - - - - - - - - - - - ) } diff --git a/components/svgs/svg-image-upload.module.scss b/components/svgs/svg-image-upload.module.scss index 696b08b..f72ce77 100644 --- a/components/svgs/svg-image-upload.module.scss +++ b/components/svgs/svg-image-upload.module.scss @@ -1,18 +1,18 @@ @import '../../styles/variables.scss'; -.path { +.rect { fill: #ccc; - transition: fill 0.2s ease; + transition: all 0.2s ease; &.active { fill: $link; } } -:global(.dark-mode) .path { - fill: #5a5b66; +:global(.dark-mode) .rect { + fill: #495c70; &.active { - fill: $link-dark; + fill: $off-white-dark; } } diff --git a/components/svgs/svg-image-upload.tsx b/components/svgs/svg-image-upload.tsx index e1d38c0..7d534d6 100644 --- a/components/svgs/svg-image-upload.tsx +++ b/components/svgs/svg-image-upload.tsx @@ -16,8 +16,20 @@ const SvgImageUpload: React.FC Image Upload - - + + ) } diff --git a/components/svgs/svg-info.module.scss b/components/svgs/svg-info.module.scss index 0da30bd..40280c1 100644 --- a/components/svgs/svg-info.module.scss +++ b/components/svgs/svg-info.module.scss @@ -10,7 +10,7 @@ } :global(.dark-mode) .background { - fill: #41424b; + fill: $dark-grey; &.active { fill: $link-dark; @@ -27,7 +27,7 @@ } :global(.dark-mode) .text { - fill: #7185ff; + fill: $off-white-dark; &.active { fill: $link-dark; diff --git a/components/svgs/svg-sun.tsx b/components/svgs/svg-sun.tsx index 2b175d1..dd5731a 100644 --- a/components/svgs/svg-sun.tsx +++ b/components/svgs/svg-sun.tsx @@ -10,7 +10,7 @@ const SvgSun: React.FC> fillRule="evenodd" clipRule="evenodd" d="M16 25a1 1 0 011 1v3a1 1 0 11-2 0v-3a1 1 0 011-1zm-7.78-2.63a1 1 0 011.41 1.41L7.51 25.9a1 1 0 11-1.41-1.41l2.12-2.13v.01zm14.202.042a1 1 0 011.358-.052l2.12 2.12a1 1 0 01-1.41 1.41l-2.12-2.12a1 1 0 01.052-1.358zM16 9a7 7 0 110 14 7 7 0 010-14zM6 15a1 1 0 110 2H3a1 1 0 110-2h3zm23 0a1 1 0 110 2h-3a1 1 0 110-2h3zM6.152 6.152A1 1 0 017.51 6.1l2.13 2.12a1.004 1.004 0 01-1.42 1.42L6.1 7.51a1 1 0 01.052-1.358zM24.49 6.1a1 1 0 011.41 1.41l-2.12 2.13a1 1 0 01-.71.29 1 1 0 01-.71-1.71l2.13-2.12zM16 2a1 1 0 011 1v3a1 1 0 11-2 0V3a1 1 0 011-1z" - fill="#5A5B66" + fill="#657584" /> ) diff --git a/components/tool-title/index.module.scss b/components/tool-title/index.module.scss index a8dc65b..19d4537 100644 --- a/components/tool-title/index.module.scss +++ b/components/tool-title/index.module.scss @@ -3,4 +3,25 @@ .root { display: flex; align-items: flex-start; + + h1 { + color: $black; + } + + svg { + max-height: 54px; + margin-top: 5px; + margin-right: 3px; + filter: drop-shadow(0 2px 4px rgba($black, 0.12)); + } +} + +:global(.dark-mode) .root { + h1 { + color: #e4ebf2; + } + + span { + color: $grey-dark; + } } diff --git a/components/tool-title/index.stories.tsx b/components/tool-title/index.stories.tsx index e5ccd3d..fb5ccfd 100644 --- a/components/tool-title/index.stories.tsx +++ b/components/tool-title/index.stories.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { withKnobs, text } from '@storybook/addon-knobs' +import { withKnobs } from '@storybook/addon-knobs' import useDarkMode from 'use-dark-mode' import { Button } from 'components/button' import { ToolTitle } from '.' @@ -11,10 +11,9 @@ export default { export const ToolTitleDesktop = () => { const { toggle } = useDarkMode(false) - const body = text('body', 'Favycon') return (
- {body} +
diff --git a/components/tool-title/index.tsx b/components/tool-title/index.tsx index 2e1e13b..eb6794e 100644 --- a/components/tool-title/index.tsx +++ b/components/tool-title/index.tsx @@ -1,19 +1,17 @@ import React from 'react' import { Typography } from 'components/typography' +import { SvgFavycon } from 'components/svgs/svg-favycon' import styles from './index.module.scss' -type ToolTitleProps = { - children: string -} - -const ToolTitle = ({ children }: ToolTitleProps) => ( +const ToolTitle = () => (
- - {children} + + + Favycon - - TOOL + + APP
) diff --git a/components/typography/index.module.scss b/components/typography/index.module.scss index 5cf9b18..36acc38 100644 --- a/components/typography/index.module.scss +++ b/components/typography/index.module.scss @@ -81,13 +81,17 @@ } :global(.dark-mode) .black { - color: $white; + color: $off-white; } .gray { color: $grey; } +:global(.dark-mode) .gray { + color: $grey-dark; +} + .white { color: $white; transition: color 0.2s ease; diff --git a/package.json b/package.json index c530b14..c3aca50 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,8 @@ "lint:css": "stylelint './**/*.css' './**/*.scss'", "storybook": "start-storybook -s ./public -p 6006", "storybook:build": "build-storybook -s ./public", - "commit": "git-cz" + "commit": "git-cz", + "chromatic": "chromatic --build-script-name=storybook:build" }, "dependencies": { "@fiahfy/ico-convert": "0.0.7", @@ -56,9 +57,10 @@ "react": "16.13.1", "react-clipboard.js": "2.0.16", "react-dom": "16.13.1", - "react-dropzone": "10.2.2", + "react-dropzone": "11.0.1", "react-lazy-images": "1.1.0", "react-modal": "3.11.2", + "react-transition-group": "4.4.1", "sharp": "0.25.2", "use-dark-mode": "2.3.1" }, @@ -85,6 +87,7 @@ "@types/prismjs": "1.16.0", "@types/react": "16.9.34", "@types/react-modal": "3.10.5", + "@types/react-transition-group": "4.2.4", "@types/sharp": "0.25.0", "@typescript-eslint/eslint-plugin": "2.31.0", "@typescript-eslint/parser": "2.31.0", diff --git a/pages/index.module.scss b/pages/index.module.scss index 410f7d4..0685a68 100644 --- a/pages/index.module.scss +++ b/pages/index.module.scss @@ -1,5 +1,10 @@ @import '../styles/variables.scss'; +.main { + max-width: 1440px; + margin: 0 auto; +} + .container { display: flex; align-items: center; diff --git a/pages/index.tsx b/pages/index.tsx index 81cb6aa..f55e3d3 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,31 +1,34 @@ -import React, { useMemo, useState, useEffect } from 'react' +import React, { useState, useEffect } from 'react' import { NextPage } from 'next' import NProgress from 'nprogress' import { BaseLayout } from 'components/base-layout' import { FavyconWizard } from 'components/favycon-wizard' import { FavyconInfo } from 'components/favycon-info' import { DragAndDrop } from 'components/drag-and-drop' +import { FavyconError } from 'components/favycon-error' import { SEO } from 'components/seo' import styles from './index.module.scss' NProgress.configure({ minimum: 0.15, speed: 300, trickleSpeed: 150, showSpinner: false }) -const getRandomNumber = (min = 1, max = 3) => Math.floor(Math.random() * max) + min - const Home: NextPage = () => { - const backgroundId = useMemo(() => getRandomNumber(), []) - const [error, setError] = useState('') const [file, setFile] = useState(false) - const [counter, setCounter] = useState(0) + const [fileCounter, setFileCounter] = useState(0) + const [errorCounter, setErrorCounter] = useState(0) useEffect(() => { if (!file) { - setCounter((c) => c + 1) + setFileCounter((c) => c + 1) } }, [file]) + const onError = (error: string) => { + setErrorCounter((c) => c + 1) + setError(error) + } + const onGenerate = async (file: File, pwa: boolean) => { try { NProgress.start() @@ -50,11 +53,14 @@ const Home: NextPage = () => { title="Favycon - A favicon generator tool" description="A small online tool to help you generate your favicon in all the sizes and formats you need." /> -
- - setError('')} showDndImage={!file}> - - +
+
+ + + + +
+ onError('')} />
) diff --git a/public/favicon-114x114.png b/public/favicon-114x114.png index c900e17..812cc33 100644 Binary files a/public/favicon-114x114.png and b/public/favicon-114x114.png differ diff --git a/public/favicon-120x120.png b/public/favicon-120x120.png index 86864ff..0e5ad10 100644 Binary files a/public/favicon-120x120.png and b/public/favicon-120x120.png differ diff --git a/public/favicon-144x144.png b/public/favicon-144x144.png index 47e63d1..981d601 100644 Binary files a/public/favicon-144x144.png and b/public/favicon-144x144.png differ diff --git a/public/favicon-150x150.png b/public/favicon-150x150.png index 9a3ae2b..e461351 100644 Binary files a/public/favicon-150x150.png and b/public/favicon-150x150.png differ diff --git a/public/favicon-152x152.png b/public/favicon-152x152.png index 742fcc1..18e91d0 100644 Binary files a/public/favicon-152x152.png and b/public/favicon-152x152.png differ diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png index cfacb89..2ffe939 100644 Binary files a/public/favicon-16x16.png and b/public/favicon-16x16.png differ diff --git a/public/favicon-180x180.png b/public/favicon-180x180.png index 08d53a6..2c6bbc0 100644 Binary files a/public/favicon-180x180.png and b/public/favicon-180x180.png differ diff --git a/public/favicon-192x192.png b/public/favicon-192x192.png index 21d6568..12d4864 100644 Binary files a/public/favicon-192x192.png and b/public/favicon-192x192.png differ diff --git a/public/favicon-310x310.png b/public/favicon-310x310.png index 67655e8..7edd8cb 100644 Binary files a/public/favicon-310x310.png and b/public/favicon-310x310.png differ diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png index 18e1bfa..4479811 100644 Binary files a/public/favicon-32x32.png and b/public/favicon-32x32.png differ diff --git a/public/favicon-57x57.png b/public/favicon-57x57.png index c230b8d..da713ca 100644 Binary files a/public/favicon-57x57.png and b/public/favicon-57x57.png differ diff --git a/public/favicon-60x60.png b/public/favicon-60x60.png index 9642e7c..6d590ac 100644 Binary files a/public/favicon-60x60.png and b/public/favicon-60x60.png differ diff --git a/public/favicon-70x70.png b/public/favicon-70x70.png index ffd4eec..26d47c4 100644 Binary files a/public/favicon-70x70.png and b/public/favicon-70x70.png differ diff --git a/public/favicon-72x72.png b/public/favicon-72x72.png index cd0cd74..1bb41d1 100644 Binary files a/public/favicon-72x72.png and b/public/favicon-72x72.png differ diff --git a/public/favicon-76x76.png b/public/favicon-76x76.png index 4abef50..a9b1a06 100644 Binary files a/public/favicon-76x76.png and b/public/favicon-76x76.png differ diff --git a/public/favicon-96x96.png b/public/favicon-96x96.png index c8161f4..2793ca4 100644 Binary files a/public/favicon-96x96.png and b/public/favicon-96x96.png differ diff --git a/public/favicon.ico b/public/favicon.ico index 636379b..6e970dd 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/favicon.png b/public/favicon.png index 21d6568..12d4864 100644 Binary files a/public/favicon.png and b/public/favicon.png differ diff --git a/public/favicon.svg b/public/favicon.svg index 547b9b7..610bdf9 100644 --- a/public/favicon.svg +++ b/public/favicon.svg @@ -1,33 +1,30 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/public/images/dnd-dark@1x.png b/public/images/dnd-dark@1x.png index 36d9402..997dc61 100644 Binary files a/public/images/dnd-dark@1x.png and b/public/images/dnd-dark@1x.png differ diff --git a/public/images/dnd-dark@2x.png b/public/images/dnd-dark@2x.png index b5ca27e..0c96e41 100644 Binary files a/public/images/dnd-dark@2x.png and b/public/images/dnd-dark@2x.png differ diff --git a/public/images/dnd-light@1x.png b/public/images/dnd-light@1x.png index 89934ec..0c958be 100644 Binary files a/public/images/dnd-light@1x.png and b/public/images/dnd-light@1x.png differ diff --git a/public/images/dnd-light@2x.png b/public/images/dnd-light@2x.png index 3dc4b02..c7f9c56 100644 Binary files a/public/images/dnd-light@2x.png and b/public/images/dnd-light@2x.png differ diff --git a/public/images/unsplash-1@1x.jpg b/public/images/unsplash-1@1x.jpg deleted file mode 100644 index 68f6855..0000000 Binary files a/public/images/unsplash-1@1x.jpg and /dev/null differ diff --git a/public/images/unsplash-1@2x.jpg b/public/images/unsplash-1@2x.jpg deleted file mode 100644 index 5f4d68a..0000000 Binary files a/public/images/unsplash-1@2x.jpg and /dev/null differ diff --git a/public/images/unsplash-1@placeholder.jpg b/public/images/unsplash-1@placeholder.jpg deleted file mode 100644 index 74fa5c9..0000000 Binary files a/public/images/unsplash-1@placeholder.jpg and /dev/null differ diff --git a/public/images/unsplash-2@1x.jpg b/public/images/unsplash-2@1x.jpg deleted file mode 100644 index 906bd5f..0000000 Binary files a/public/images/unsplash-2@1x.jpg and /dev/null differ diff --git a/public/images/unsplash-2@2x.jpg b/public/images/unsplash-2@2x.jpg deleted file mode 100644 index 993c78c..0000000 Binary files a/public/images/unsplash-2@2x.jpg and /dev/null differ diff --git a/public/images/unsplash-2@placeholder.jpg b/public/images/unsplash-2@placeholder.jpg deleted file mode 100644 index cfb2d4b..0000000 Binary files a/public/images/unsplash-2@placeholder.jpg and /dev/null differ diff --git a/public/images/unsplash-3@1x.jpg b/public/images/unsplash-3@1x.jpg deleted file mode 100644 index afdd2e3..0000000 Binary files a/public/images/unsplash-3@1x.jpg and /dev/null differ diff --git a/public/images/unsplash-3@2x.jpg b/public/images/unsplash-3@2x.jpg deleted file mode 100644 index b80cc54..0000000 Binary files a/public/images/unsplash-3@2x.jpg and /dev/null differ diff --git a/public/images/unsplash-3@placeholder.jpg b/public/images/unsplash-3@placeholder.jpg deleted file mode 100644 index e830d82..0000000 Binary files a/public/images/unsplash-3@placeholder.jpg and /dev/null differ diff --git a/public/images/unsplash@1x.jpg b/public/images/unsplash@1x.jpg new file mode 100644 index 0000000..4f519cc Binary files /dev/null and b/public/images/unsplash@1x.jpg differ diff --git a/public/images/unsplash@2x.jpg b/public/images/unsplash@2x.jpg new file mode 100644 index 0000000..19ba2f2 Binary files /dev/null and b/public/images/unsplash@2x.jpg differ diff --git a/styles/main.scss b/styles/main.scss index bed193c..955c18f 100644 --- a/styles/main.scss +++ b/styles/main.scss @@ -48,15 +48,18 @@ hr { .ReactModal__Overlay { opacity: 0; - transition: opacity 0.2s ease; + transition: all 0.2s ease; + transform: translate3d(0, 24px, 0); } .ReactModal__Overlay--after-open { opacity: 1; + transform: translate3d(0, 0, 0); } .ReactModal__Overlay--before-close { opacity: 0; + transform: translate3d(0, 24px, 0); } .preload, @@ -66,3 +69,55 @@ hr { -ms-transition: none !important; -o-transition: none !important; } + +.collapse-enter { + max-width: 0; + opacity: 0; +} +.collapse-enter-active { + max-width: 50px; + opacity: 1; + transition: all 0.2s linear; +} +.collapse-exit { + max-width: 50px; + opacity: 1; +} +.collapse-exit-active { + max-width: 0; + opacity: 0; + transition: all 0.2s linear; +} + +.fade-enter { + opacity: 0; +} +.fade-enter-active { + opacity: 1; + transition: opacity 0.2s linear; +} +.fade-exit { + opacity: 1; +} +.fade-exit-active { + opacity: 0; + transition: opacity 0.2s linear; +} + +.error-enter { + opacity: 0; + transform: translate3d(0, -8px, 0); +} +.error-enter-active { + opacity: 1; + transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; + transform: translate3d(0, 0, 0); +} +.error-exit { + opacity: 1; +} +.error-exit-active { + opacity: 0; + transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; + transform: translate3d(0, 4px, 0); +} diff --git a/styles/nprogress.scss b/styles/nprogress.scss index fc995db..984097f 100644 --- a/styles/nprogress.scss +++ b/styles/nprogress.scss @@ -5,12 +5,13 @@ #nprogress .bar { position: fixed; - top: 0; + top: 2px; left: 0; z-index: 1031; width: 100%; height: 2px; background: $link; + border-radius: 2px; } /* Fancy blur effect */ @@ -20,9 +21,7 @@ display: block; width: 100px; height: 100%; - box-shadow: 0 0 10px $link, 0 0 5px $link; opacity: 1; - transform: rotate(3deg) translate(0, -4px); } /* Remove these to get rid of the spinner */ diff --git a/styles/variables.scss b/styles/variables.scss index 0ce6f13..8452925 100644 --- a/styles/variables.scss +++ b/styles/variables.scss @@ -1,20 +1,25 @@ $white: #fff; +$white-dark: #a8b7c4; $off-white: #fafafa; +$off-white-dark: #e4ebf2; $grey: #9698a3; +$grey-dark: #657584; $light-grey: #ebebeb; -$dark-grey: #3d3f47; +$dark-grey: #2e3a47; $darker-grey: #33353d; $black: #000; -$dark-black: #222329; -$darker-black: #101114; +$dark-black: #1e262f; +$darker-black: #0e141a; -$link: #4c66d5; +$link: #4c5ed5; $link-dark: #7083ff; +$link-hover: #7683e2; $red: #e15151; $green: #3ea161; +$green-hover: #69b985; $font-size-h1: 52px; $line-height-h1: 64px; diff --git a/yarn.lock b/yarn.lock index e2828c5..efa3fdf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2597,6 +2597,13 @@ dependencies: "@types/react" "*" +"@types/react-transition-group@4.2.4": + version "4.2.4" + resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.2.4.tgz#c7416225987ccdb719262766c1483da8f826838d" + integrity sha512-8DMUaDqh0S70TjkqU0DxOu80tFUiiaS9rxkWip/nb7gtvAsbqOXm02UCmR8zdcjWujgeYPiPNTVpVpKzUDotwA== + dependencies: + "@types/react" "*" + "@types/react@*", "@types/react@16.9.34": version "16.9.34" resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.34.tgz#f7d5e331c468f53affed17a8a4d488cd44ea9349" @@ -12006,10 +12013,10 @@ react-draggable@^4.0.3: classnames "^2.2.5" prop-types "^15.6.0" -react-dropzone@10.2.2: - version "10.2.2" - resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-10.2.2.tgz#67b4db7459589a42c3b891a82eaf9ade7650b815" - integrity sha512-U5EKckXVt6IrEyhMMsgmHQiWTGLudhajPPG77KFSvgsMqNEHSyGpqWvOMc5+DhEah/vH4E1n+J5weBNLd5VtyA== +react-dropzone@11.0.1: + version "11.0.1" + resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-11.0.1.tgz#c8b6a6ed02576e5365af2e2a3f3b31df31feb213" + integrity sha512-x/6wqRHaR8jsrNiu/boVMIPYuoxb83Vyfv77hO7/3ZRn8Pr+KH5onsCsB8MLBa3zdJl410C5FXPUINbu16XIzw== dependencies: attr-accept "^2.0.0" file-selector "^0.1.12" @@ -12181,6 +12188,16 @@ react-textarea-autosize@^7.1.0: "@babel/runtime" "^7.1.2" prop-types "^15.6.0" +react-transition-group@4.4.1: + version "4.4.1" + resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9" + integrity sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw== + dependencies: + "@babel/runtime" "^7.5.5" + dom-helpers "^5.0.1" + loose-envify "^1.4.0" + prop-types "^15.6.2" + react-transition-group@^4.3.0: version "4.3.0" resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.3.0.tgz#fea832e386cf8796c58b61874a3319704f5ce683"