feat(styles): update hovers and backgrounds (#60)

* improvement(styles): update hovers and backgrounds

* feat(about-us): add project link and contact email

* chore(colors): update colors

* chore(storybook): add Chromatic

* chore: update repo info

* chore(deps): upgrade dependencies

* refactor: update colors and repo info

* chore: remove chromatic

* refactor(deps): upgrade react-dropzone to v11

* feat: update app icon

* chore: update background image

* chore: dark mode favicon

.all-contributorsrc

@@ -1,6 +1,6 @@
 {
   "projectName": "favycon",
-  "projectOwner": "ruisaraiva19",
+  "projectOwner": "toolslab",
   "repoType": "github",
   "repoHost": "https://github.com",
   "files": [

.editorconfig

@@ -3,3 +3,7 @@ root = true
 [*]
 indent_style = tab
 indent_size = 2
+
+[*.yml]
+indent_style = space
+indent_size = 2

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;
+	}
 }

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;
+	}
+}

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;
 }

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 (
 		<div className={styles.root}>
 			<div className={classnames(styles.container, { [styles.loading]: isLoading })}>
 				{!image && !zipData && (
 					<>
-						<div className={styles.dropZoneWrapper}>
+						<div
+							className={styles.dropZoneWrapper}
+							onMouseEnter={() => setIsHover(true)}
+							onMouseLeave={() => setIsHover(false)}>
 							<SvgDropZone className={classnames(styles.dashed, { [styles.dragActive]: isDragActive })} />
 							<div {...getRootProps()} className={styles.dropZone}>
 								<input {...getInputProps()} />
 								<div className={styles.imageUpload}>
-									<SvgImageUpload active={isDragActive} />
+									<SvgImageUpload active={isDragActive || isHover} />
 								</div>
-								<Typography variant="regularBody" weight="medium" className={styles.imageUploadText}>
-									Drag &amp; drop an image file or
+								<Typography
+									variant="regularBody"
+									weight="medium"
+									className={classnames(styles.imageUploadText, { [styles.dragActive]: isDragActive })}>
+									<CSSTransition in={!isDragActive} timeout={200} classNames="collapse" unmountOnExit>
+										<span>Drag &amp;&nbsp;</span>
+									</CSSTransition>
+									<span>{isDragActive ? 'Drop' : 'drop'}</span>
+									<CSSTransition in={!isDragActive} timeout={200} classNames="collapse" unmountOnExit>
+										<span>&nbsp;an</span>
+									</CSSTransition>
+									<span>&nbsp;image file here</span>
+									<CSSTransition in={isDragActive} timeout={200} classNames="collapse" unmountOnExit>
+										<span>...</span>
+									</CSSTransition>
+									<CSSTransition in={!isDragActive} timeout={200} classNames="fade" unmountOnExit>
+										<span>,</span>
+									</CSSTransition>
 									<br />
-									<u>click here to upload it</u>.
+									<CSSTransition in={!isDragActive} timeout={200} classNames="fade" unmountOnExit>
+										<span>or click to select a file.</span>
+									</CSSTransition>
 								</Typography>
 							</div>
 						</div>
+						{/* <button onClick={() => setInProp(true)}>toggle</button> */}
 						<Typography variant="regularBody" weight="medium" className={styles.info}>
 							<SvgInfo /> We recommend a square <strong>PNG</strong> or <strong>SVG</strong> with at least 310px
 						</Typography>
@@ -266,7 +291,7 @@ const DragAndDrop = ({ onFile, onGenerate, onError }: DragAndDropProps) => {
 							</div>
 						</div>
 						<div className={styles.imageFooter}>
-							<Button variant="transparent" color="gray" onClick={resetImage}>
+							<Button variant="transparent" color="gray" className={styles.reUpload} onClick={resetImage}>
 								Re-upload
 							</Button>
 							<Button
@@ -315,22 +340,22 @@ const DragAndDrop = ({ onFile, onGenerate, onError }: DragAndDropProps) => {
 								<Button
 									className={styles.showCode}
 									variant="regularTransparent"
-									color="link"
+									color="gray"
 									onClick={() => setIsModalOpen(true)}>
 									Show
 								</Button>
 							</div>
 						</div>
 						<div className={classnames(styles.imageFooter, styles.spaceBetween)}>
-							<Button variant="transparent" color="link" onClick={resetImage}>
-								← Make a new one
+							<Button variant="transparent" color="gray" className={styles.makeNewOne} onClick={resetImage}>
+								Make a new one
 							</Button>
 							<Button
 								color="white"
 								background="bgGreen"
 								className={styles.imageGenerate}
 								onClick={() => onDownload(zipData)}>
-								Download Favicon ↓
+								Download Favicon
 							</Button>
 						</div>
 						<Modal

components/favycon-error/index.module.scss

@@ -0,0 +1,35 @@
+@import '../../styles/variables.scss';
+
+.error {
+	position: absolute;
+	top: 26px;
+	right: 72px;
+	display: flex;
+	align-items: center;
+	padding: 6px 13px 6px 16px;
+	background: $red;
+	border-radius: 8px;
+	box-shadow: 0 2px 4px rgba($black, 0.12);
+
+	svg {
+		margin-left: 13px;
+	}
+}
+
+.progress {
+	stroke-dasharray: 44 44;
+	stroke-dashoffset: 0;
+	stroke-width: 2px;
+	transform: rotate(-90deg);
+	transform-origin: center;
+	animation: progress 5s linear 0.3s forwards;
+}
+
+@keyframes progress {
+	0% {
+		stroke-dashoffset: 0;
+	}
+	100% {
+		stroke-dashoffset: 44;
+	}
+}

components/favycon-error/index.tsx

@@ -0,0 +1,47 @@
+import React, { useState, useEffect } from 'react'
+import { CSSTransition } from 'react-transition-group'
+import classnames from 'classnames'
+import { Typography } from 'components/typography'
+
+import styles from './index.module.scss'
+
+type FavyconErrorProps = {
+	error: string
+	clearError: () => 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 (
+		<CSSTransition in={showError} timeout={300} classNames="error" unmountOnExit>
+			<div className={classnames(styles.error)}>
+				<Typography variant="regularBody" color="white" weight="semiBold">
+					{error}
+				</Typography>
+				<svg height={20} width={20}>
+					<circle className={classnames(styles.progress)} fill="transparent" stroke="white" r={7} cx={10} cy={10} />
+				</svg>
+			</div>
+		</CSSTransition>
+	)
+}
+
+export { FavyconError }

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;
 }

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 (
 		<div className={styles.root}>
-			<ToolTitle>Favycon</ToolTitle>
+			<ToolTitle />
 			<Typography variant="largeBody" weight="medium" className={styles.firstParagraph}>
 				A small online tool to help you generate your favicon in all the sizes and formats you need.
 			</Typography>
@@ -55,13 +47,13 @@ const FavyconInfo = ({ imageIndex }: FavyconInfoProps) => {
 				add the favicons.
 			</Typography>
 			<hr />
-			<Typography variant="footer" weight="semiBold" color="gray">
+			<Typography variant="footer" weight="semiBold" color="gray" className={styles.footer}>
 				Created by{' '}
 				<button className={styles.peopleButton} onClick={() => setIsModalOpen(true)}>
 					{people.length} people
 				</button>{' '}
 				on their 2020’s worldwide quarantine. Background image from{' '}
-				<a href={unsplashImagesUrls[imageIndex]} target="_blank" rel="noopener noreferrer">
+				<a href="https://unsplash.com/photos/bBiuSdck8tU" target="_blank" rel="noopener noreferrer">
 					Unsplash
 				</a>
 				.
@@ -76,7 +68,8 @@ const FavyconInfo = ({ imageIndex }: FavyconInfoProps) => {
 				contentLabel="About Us">
 				<div className={styles.modalContainer}>
 					<div className={styles.modalHeader}>
-						<img src="/favicon.svg" alt="Favycon logo" className={styles.logo} />
+						{/* <img src="/favicon.svg" alt="Favycon logo" className={styles.logo} /> */}
+						<SvgFavycon className={styles.logo} />
 						<Typography variant="largeTitle" weight="bold" className={styles.title}>
 							Behind the curtains
 						</Typography>
@@ -116,6 +109,23 @@ const FavyconInfo = ({ imageIndex }: FavyconInfoProps) => {
 							</div>
 						))}
 					</div>
+					<hr className={styles.hr} />
+					<div className={classnames(styles.footer, styles.modalFooter)}>
+						<Typography variant="footer" weight="semiBold" color="gray">
+							Project on{' '}
+							<a
+								className={styles.repo}
+								href="https://github.com/ruisaraiva19/favycon"
+								target="_blank"
+								rel="noopener noreferrer">
+								GitHub
+							</a>
+							. Have feedback? Send it to{' '}
+							<a className={styles.contact} href="mailto:hello@favycon.app">
+								hello@favycon.app
+							</a>
+						</Typography>
+					</div>
 				</div>
 			</Modal>
 		</div>

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%);

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%;
 }
 

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 = () => {
 			<div className={styles.root}>
 				<div className={styles.container}>
 					<header className={styles.header}>
-						<div className={styles.item}>
-							<Link href="/">
-								<a href="/">
-									<SvgFavycon />
-								</a>
-							</Link>
-						</div>
 						<div className={styles.item}>
 							<DarkModeToggle />
 						</div>

components/seo/index.tsx

@@ -24,8 +24,6 @@ const SEO = ({ title, description }: SEOProps) => (
 		<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
 		<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
 		<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png" />
-		<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
-		<link rel="icon" type="image/x-icon" href="/favicon.ico" />
 		<meta name="msapplication-TileColor" content="#ffffff" />
 		<meta name="msapplication-TileImage" content="/favicon-144x144.png" />
 		<meta name="msapplication-config" content="/browserconfig.xml" />

components/svgs/svg-drop-zone.module.scss

@@ -6,5 +6,5 @@
 }
 
 :global(.dark-mode) .rect {
-	stroke: #5a5b66;
+	stroke: $off-white-dark;
 }

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;
+}

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<JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>> = (props) => {
 	const idPrefix = uniqueId('svg-')
 	return (
-		<svg width={48} height={48} viewBox="0 0 48 48" aria-labelledby={`${idPrefix}-title`} {...props}>
+		<svg width={64} height={64} viewBox="0 0 64 64" aria-labelledby={`${idPrefix}-title`} {...props}>
 			<title id={`${idPrefix}-title`}>Favycon logo</title>
-			<defs>
-				<linearGradient
-					id={`${idPrefix}-paint0_linear`}
-					x1={43.6252}
-					y1={9.02654}
-					x2={5.87483}
-					y2={37.4735}
-					gradientUnits="userSpaceOnUse">
-					<stop stopColor="#4B4D5A" />
-					<stop offset={1} stopColor="#191A1F" />
-				</linearGradient>
-				<linearGradient
-					id={`${idPrefix}-paint1_linear`}
-					x1={21.7849}
-					y1={12.1313}
-					x2={20.31}
-					y2={22.626}
-					gradientUnits="userSpaceOnUse">
-					<stop stopColor="#74EFB7" />
-					<stop offset={1} stopColor="#40DB81" />
-				</linearGradient>
-				<linearGradient
-					id={`${idPrefix}-paint2_linear`}
-					x1={29.417}
-					y1={22.2594}
-					x2={27.9421}
-					y2={32.7541}
-					gradientUnits="userSpaceOnUse">
-					<stop stopColor="#88DDE4" />
-					<stop offset={1} stopColor="#50B8C5" />
-				</linearGradient>
-				<linearGradient
-					id={`${idPrefix}-paint3_linear`}
-					x1={12}
-					y1={27}
-					x2={12}
-					y2={46.5}
-					gradientUnits="userSpaceOnUse">
-					<stop stopColor="#9C93F1" />
-					<stop offset={1} stopColor="#1A20FF" />
-				</linearGradient>
-			</defs>
-			<path d="M8.861 2.073l37.066 5.152-5.288 37.202-37.066-5.152L8.861 2.073z" fill="#EEE" />
 			<path
-				d="M43.625 9.027L10.527 4.375 5.875 37.474l33.099 4.651 4.651-33.098z"
-				fill={`url(#${idPrefix}-paint0_linear)`}
-				stroke="#000"
-				strokeWidth={1.08696}
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M13.1834 5.55412L42.8091 1.39074C47.5779 0.724999 49.3761 0.97341 51.2538 1.65903C53.1315 2.34464 54.6912 3.52708 55.8635 5.13679C57.0458 6.74649 57.781 8.40588 58.4466 13.1754L62.6093 42.8059C63.275 47.5754 63.0266 49.3739 62.3411 51.2519C61.6556 53.1299 60.4733 54.6899 58.8639 55.8624C57.2544 57.0448 55.5953 57.7801 50.8266 58.4459L21.2008 62.6093C16.4321 63.275 14.6339 63.0266 12.7562 62.341C10.8785 61.6554 9.3187 60.4729 8.14639 58.8632C6.96414 57.2535 6.22896 55.5941 5.56332 50.8246L1.39068 21.1941C0.725043 16.4246 0.973415 14.6261 1.65892 12.7481C2.34443 10.8701 3.52668 9.3101 5.13612 8.1376C6.75551 6.96509 8.41463 6.21986 13.1834 5.55412Z"
+				className={styles.background}
 			/>
 			<path
-				opacity={0.24}
-				d="M18.139 5.855l-.797-.112-4.548 32.293.797.112 4.548-32.293zM27.423 7.16l-.797-.112-4.549 32.293.797.111L27.423 7.16zM36.707 8.464l-.797-.112-4.549 32.293.797.112 4.549-32.293z"
-				fill="#fff"
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M13.8192 7.28306L42.6701 3.22899C46.644 2.67254 48.1442 2.88121 49.7039 3.45752C51.2637 4.03384 52.5652 5.00761 53.5487 6.35897C54.5323 7.70039 55.1482 9.08156 55.7046 13.0661L59.311 38.7419C59.9766 43.5114 59.7282 45.3099 59.0427 47.1879C58.3572 49.0659 57.175 50.6259 55.5655 51.7984C53.9561 52.9808 52.2969 53.7161 47.5282 54.3819L23.2474 57.7901C18.4787 58.4558 16.6804 58.2074 14.8028 57.5218C12.9251 56.8362 11.3653 55.6537 10.193 54.044C9.01073 52.4343 8.27555 50.7749 7.60991 46.0054L4.00355 20.3197C3.4472 16.3451 3.65583 14.8447 4.23206 13.2847C4.80828 11.7247 5.7819 10.423 7.13304 9.43927C8.46431 8.45556 9.84526 7.8395 13.8192 7.28306Z"
+				className={styles.foreground}
 			/>
 			<path
-				opacity={0.24}
-				d="M42.37 15.014l-32.289-4.528-.115.818 32.29 4.528.115-.818zM41.066 24.298L8.776 19.77l-.115.817 32.29 4.529.115-.818zM39.761 33.582l-32.29-4.528-.115.817 32.29 4.528.115-.817z"
-				fill="#fff"
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M40.3155 19.9322L20.7041 22.6846L19.7006 15.5502L46.4453 11.7942C47.0017 15.729 44.2596 19.3757 40.3155 19.9322Z"
+				className={styles.top}
 			/>
 			<path
-				d="M19.642 11.83l4.286.602c1.08.152 1.455.32 1.82.586.365.267.631.62.787 1.044.155.425.213.832.06 1.912l-.601 4.285c-.152 1.08-.32 1.455-.586 1.82-.267.365-.62.631-1.044.787-.425.155-.832.213-1.911.061l-4.286-.602c-1.08-.152-1.455-.32-1.82-.586a2.223 2.223 0 01-.787-1.044c-.155-.424-.213-.832-.061-1.911l.602-4.285c.152-1.08.32-1.456.586-1.82.266-.366.62-.632 1.044-.788.424-.155.832-.213 1.911-.06z"
-				fill={`url(#${idPrefix}-paint1_linear)`}
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M20.7041 22.6846L13.5708 23.6882C13.0145 19.7533 15.7565 16.1066 19.7006 15.5502L20.7041 22.6846Z"
+				className={styles.corner}
 			/>
 			<path
-				d="M29.417 22.26a5.299 5.299 0 11-1.475 10.494 5.299 5.299 0 011.475-10.495z"
-				fill={`url(#${idPrefix}-paint2_linear)`}
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M17.207 49.5528L13.5708 23.6882L20.7041 22.6846L23.3368 41.4148C23.8832 45.3496 21.1412 48.9963 17.207 49.5528Z"
+				className={styles.left}
 			/>
 			<path
-				d="M21.75 36.75c0-5.385-4.365-9.75-9.75-9.75s-9.75 4.365-9.75 9.75S6.615 46.5 12 46.5s9.75-4.365 9.75-9.75z"
-				fill={`url(#${idPrefix}-paint3_linear)`}
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M32.2384 35.761L29.6653 37.6191C29.3871 37.8178 28.9897 37.7582 28.7811 37.48C28.7016 37.3707 28.6619 37.2315 28.6619 37.0924L28.7612 33.9227C28.7712 33.714 28.6718 33.5153 28.5029 33.3961L25.9397 31.5181C25.6616 31.3094 25.602 30.9219 25.8006 30.6337C25.8801 30.5244 25.9993 30.4449 26.1285 30.4052L29.1785 29.5109C29.3772 29.4513 29.5362 29.3023 29.5958 29.1035L30.5893 26.0928C30.6985 25.7649 31.0562 25.586 31.384 25.6953C31.5132 25.7351 31.6324 25.8245 31.7119 25.9437L33.5002 28.567C33.6194 28.7359 33.8081 28.8452 34.0168 28.8452L37.1959 28.8551C37.5437 28.8551 37.8218 29.1433 37.8218 29.491C37.8218 29.6302 37.7722 29.7593 37.6927 29.8786L35.7455 32.3925C35.6163 32.5614 35.5766 32.7701 35.6461 32.9688L36.6098 35.9895C36.7191 36.3174 36.5303 36.6751 36.2025 36.7844C36.0733 36.8242 35.9243 36.8241 35.7951 36.7745L32.8047 35.7013C32.6259 35.6119 32.4073 35.6417 32.2384 35.761Z"
+				className={styles.star}
 			/>
-			<path
-				d="M12 27c5.385 0 9.75 4.365 9.75 9.75S17.385 46.5 12 46.5s-9.75-4.365-9.75-9.75S6.615 27 12 27zm0 1.5A8.25 8.25 0 1012 45a8.25 8.25 0 000-16.5z"
-				fill="#fff"
-				fillOpacity={0.32}
-			/>
-			<path fillRule="evenodd" clipRule="evenodd" d="M15 33v1.5h-3.75V36h3v1.5h-3v3h-1.5V33H15z" fill="#fff" />
 		</svg>
 	)
 }

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;
 	}
 }

components/svgs/svg-image-upload.tsx

@@ -16,8 +16,20 @@ const SvgImageUpload: React.FC<JSX.IntrinsicAttributes & React.SVGProps<SVGSVGEl
 	return (
 		<svg width={88} height={88} viewBox="0 0 88 88" aria-labelledby={`${idPrefix}-title`} {...props}>
 			<title id={`${idPrefix}-title`}>Image Upload</title>
-			<path className={classnames(styles.path, { [styles.active]: active })} d="M43 20H45V68H43z" />
-			<path className={classnames(styles.path, { [styles.active]: active })} d="M20 43H68V45H20z" />
+			<rect
+				x={43}
+				y={active ? 16 : 20}
+				width={2}
+				height={active ? 56 : 48}
+				className={classnames(styles.rect, { [styles.active]: active })}
+			/>
+			<rect
+				x={active ? 16 : 20}
+				y={43}
+				width={active ? 56 : 48}
+				height={2}
+				className={classnames(styles.rect, { [styles.active]: active })}
+			/>
 		</svg>
 	)
 }

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;

components/svgs/svg-sun.tsx

@@ -10,7 +10,7 @@ const SvgSun: React.FC<JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>>
 				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"
 			/>
 		</svg>
 	)

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;
+	}
 }

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 (
 		<div style={{ padding: 20 }}>
-			<ToolTitle>{body}</ToolTitle>
+			<ToolTitle />
 			<br />
 			<Button onClick={toggle}>Toggle Dark Mode</Button>
 		</div>

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 = () => (
 	<div className={styles.root}>
-		<Typography variant="h1" weight="bold">
-			{children}
+		<SvgFavycon />
+		<Typography variant="h1" weight="bold" color="black">
+			Favycon
 		</Typography>
-		<Typography variant="superscript" tag="span" weight="bold" color="gray">
-			TOOL
+		<Typography variant="superscript" tag="span" weight="bold">
+			APP
 		</Typography>
 	</div>
 )

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;

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",

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;

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."
 			/>
-			<main className={styles.container}>
-				<FavyconInfo imageIndex={backgroundId - 1} />
-				<FavyconWizard backgroundId={backgroundId} error={error} clearError={() => setError('')} showDndImage={!file}>
-					<DragAndDrop key={counter} onFile={setFile} onGenerate={onGenerate} onError={setError} />
-				</FavyconWizard>
+			<main className={styles.main}>
+				<div className={styles.container}>
+					<FavyconInfo />
+					<FavyconWizard showDndImage={!file}>
+						<DragAndDrop key={fileCounter} onFile={setFile} onGenerate={onGenerate} onError={onError} />
+					</FavyconWizard>
+				</div>
+				<FavyconError key={errorCounter} error={error} clearError={() => onError('')} />
 			</main>
 		</BaseLayout>
 	)

public/favicon.svg

@@ -1,33 +1,30 @@
-<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.86133 2.07298L45.927 7.22493L40.6387 44.427L3.57299 39.2751L8.86133 2.07298Z" fill="#EEEEEE"/>
-<path d="M43.6252 9.02654L10.5266 4.37483L5.87484 37.4735L38.9735 42.1252L43.6252 9.02654Z" fill="url(#paint0_linear)" stroke="black" stroke-width="1.08696"/>
-<path opacity="0.24" d="M18.139 5.85465L17.3419 5.74286L12.7935 38.0359L13.5906 38.1477L18.139 5.85465Z" fill="white"/>
-<path opacity="0.24" d="M27.4228 7.15941L26.6257 7.04762L22.0773 39.3406L22.8744 39.4524L27.4228 7.15941Z" fill="white"/>
-<path opacity="0.24" d="M36.7066 8.46414L35.9095 8.35236L31.361 40.6454L32.1581 40.7572L36.7066 8.46414Z" fill="white"/>
-<path opacity="0.24" d="M42.3706 15.0142L10.081 10.4862L9.96584 11.3037L42.2555 15.8317L42.3706 15.0142Z" fill="white"/>
-<path opacity="0.24" d="M41.0659 24.298L8.77625 19.77L8.66109 20.5875L40.9507 25.1155L41.0659 24.298Z" fill="white"/>
-<path opacity="0.24" d="M39.7612 33.5817L7.4715 29.0537L7.35634 29.8713L39.646 34.3993L39.7612 33.5817Z" fill="white"/>
-<path d="M19.6422 11.8302L23.9276 12.4324C25.0071 12.5842 25.3828 12.7516 25.7478 13.0181C26.1128 13.2847 26.379 13.6379 26.5347 14.0623C26.6903 14.4866 26.7476 14.8939 26.5959 15.9735L25.9937 20.2588C25.8419 21.3384 25.6745 21.714 25.408 22.079C25.1414 22.4441 24.7882 22.7103 24.3638 22.8659C23.9395 23.0215 23.5322 23.0789 22.4526 22.9271L18.1673 22.3249C17.0877 22.1731 16.7121 22.0057 16.3471 21.7392C15.9821 21.4726 15.7158 21.1194 15.5602 20.695C15.4046 20.2707 15.3472 19.8634 15.499 18.7839L16.1012 14.4985C16.253 13.419 16.4204 13.0433 16.6869 12.6783C16.9535 12.3133 17.3067 12.0471 17.7311 11.8914C18.1554 11.7358 18.5627 11.6785 19.6422 11.8302Z" fill="url(#paint1_linear)"/>
-<path d="M29.417 22.2594C32.315 22.6667 34.3342 25.3462 33.9269 28.2442C33.5196 31.1423 30.8401 33.1614 27.9421 32.7541C25.044 32.3468 23.0249 29.6673 23.4322 26.7693C23.8395 23.8713 26.519 21.8521 29.417 22.2594Z" fill="url(#paint2_linear)"/>
-<path d="M21.75 36.75C21.75 31.3652 17.3848 27 12 27C6.61522 27 2.25 31.3652 2.25 36.75C2.25 42.1348 6.61522 46.5 12 46.5C17.3848 46.5 21.75 42.1348 21.75 36.75Z" fill="url(#paint3_linear)"/>
-<path d="M12 27C17.3848 27 21.75 31.3652 21.75 36.75C21.75 42.1348 17.3848 46.5 12 46.5C6.61522 46.5 2.25 42.1348 2.25 36.75C2.25 31.3652 6.61522 27 12 27ZM12 28.5C7.44365 28.5 3.75 32.1937 3.75 36.75C3.75 41.3063 7.44365 45 12 45C16.5563 45 20.25 41.3063 20.25 36.75C20.25 32.1937 16.5563 28.5 12 28.5Z" fill="white" fill-opacity="0.32"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M15 33V34.5H11.25V36H14.25V37.5H11.25V40.5H9.75V33H15Z" fill="white"/>
-<defs>
-<linearGradient id="paint0_linear" x1="43.6252" y1="9.02654" x2="5.87483" y2="37.4735" gradientUnits="userSpaceOnUse">
-<stop stop-color="#4B4D5A"/>
-<stop offset="1" stop-color="#191A1F"/>
-</linearGradient>
-<linearGradient id="paint1_linear" x1="21.7849" y1="12.1313" x2="20.31" y2="22.626" gradientUnits="userSpaceOnUse">
-<stop stop-color="#74EFB7"/>
-<stop offset="1" stop-color="#40DB81"/>
-</linearGradient>
-<linearGradient id="paint2_linear" x1="29.417" y1="22.2594" x2="27.9421" y2="32.7541" gradientUnits="userSpaceOnUse">
-<stop stop-color="#88DDE4"/>
-<stop offset="1" stop-color="#50B8C5"/>
-</linearGradient>
-<linearGradient id="paint3_linear" x1="12" y1="27" x2="12" y2="46.5" gradientUnits="userSpaceOnUse">
-<stop stop-color="#9C93F1"/>
-<stop offset="1" stop-color="#1A20FF"/>
-</linearGradient>
-</defs>
-</svg>
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path id="favicon-bg" fill="#495c70" fill-rule="evenodd" clip-rule="evenodd" d="M13.1834 5.55412L42.8091 1.39074C47.5779 0.724999 49.3761 0.97341 51.2538 1.65903C53.1315 2.34464 54.6912 3.52708 55.8635 5.13679C57.0458 6.74649 57.781 8.40588 58.4466 13.1754L62.6093 42.8059C63.275 47.5754 63.0266 49.3739 62.3411 51.2519C61.6556 53.1299 60.4733 54.6899 58.8639 55.8624C57.2544 57.0448 55.5953 57.7801 50.8266 58.4459L21.2008 62.6093C16.4321 63.275 14.6339 63.0266 12.7562 62.341C10.8785 61.6554 9.3187 60.4729 8.14639 58.8632C6.96414 57.2535 6.22896 55.5941 5.56332 50.8246L1.39068 21.1941C0.725043 16.4246 0.973415 14.6261 1.65892 12.7481C2.34443 10.8701 3.52668 9.3101 5.13612 8.1376C6.75551 6.96509 8.41463 6.21986 13.1834 5.55412Z" />
+	<path id="favicon-fg" fill="#1e262f" fill-rule="evenodd" clip-rule="evenodd" d="M13.8192 7.28306L42.6701 3.22899C46.644 2.67254 48.1442 2.88121 49.7039 3.45752C51.2637 4.03384 52.5652 5.00761 53.5487 6.35897C54.5323 7.70039 55.1482 9.08156 55.7046 13.0661L59.311 38.7419C59.9766 43.5114 59.7282 45.3099 59.0427 47.1879C58.3572 49.0659 57.175 50.6259 55.5655 51.7984C53.9561 52.9808 52.2969 53.7161 47.5282 54.3819L23.2474 57.7901C18.4787 58.4558 16.6804 58.2074 14.8028 57.5218C12.9251 56.8362 11.3653 55.6537 10.193 54.044C9.01073 52.4343 8.27555 50.7749 7.60991 46.0054L4.00355 20.3197C3.4472 16.3451 3.65583 14.8447 4.23206 13.2847C4.80828 11.7247 5.7819 10.423 7.13304 9.43927C8.46431 8.45556 9.84526 7.8395 13.8192 7.28306Z" />
+	<path id="favicon-top" fill="#f6a044" fill-rule="evenodd" clip-rule="evenodd" d="M40.3155 19.9322L20.7041 22.6846L19.7006 15.5502L46.4453 11.7942C47.0017 15.729 44.2596 19.3757 40.3155 19.9322Z" />
+	<path id="favicon-corner" fill="#f9cdff" fill-rule="evenodd" clip-rule="evenodd" d="M20.7041 22.6846L13.5708 23.6882C13.0145 19.7533 15.7565 16.1066 19.7006 15.5502L20.7041 22.6846Z" />
+	<path id="favicon-left" fill="#728dff" fill-rule="evenodd" clip-rule="evenodd" d="M17.207 49.5528L13.5708 23.6882L20.7041 22.6846L23.3368 41.4148C23.8832 45.3496 21.1412 48.9963 17.207 49.5528Z" />
+	<path id="favicon-star" fill="#728dff" fill-rule="evenodd" clip-rule="evenodd" d="M32.2384 35.761L29.6653 37.6191C29.3871 37.8178 28.9897 37.7582 28.7811 37.48C28.7016 37.3707 28.6619 37.2315 28.6619 37.0924L28.7612 33.9227C28.7712 33.714 28.6718 33.5153 28.5029 33.3961L25.9397 31.5181C25.6616 31.3094 25.602 30.9219 25.8007 30.6337C25.8801 30.5244 25.9994 30.4449 26.1285 30.4052L29.1785 29.5109C29.3772 29.4513 29.5362 29.3023 29.5958 29.1035L30.5893 26.0928C30.6985 25.7649 31.0562 25.586 31.3841 25.6953C31.5132 25.7351 31.6324 25.8245 31.7119 25.9437L33.5002 28.567C33.6194 28.7359 33.8082 28.8452 34.0168 28.8452L37.1959 28.8551C37.5437 28.8551 37.8218 29.1433 37.8218 29.491C37.8218 29.6302 37.7722 29.7593 37.6927 29.8786L35.7455 32.3925C35.6163 32.5614 35.5766 32.7701 35.6461 32.9688L36.6098 35.9895C36.7191 36.3174 36.5303 36.6751 36.2025 36.7844C36.0733 36.8242 35.9243 36.8241 35.7951 36.7745L32.8047 35.7013C32.6259 35.6119 32.4073 35.6417 32.2384 35.761Z" />
+	<style>
+		@media (prefers-color-scheme: dark) {
+			#favicon-bg {
+				fill: #2E3A47;
+			}
+			#favicon-fg {
+				fill: #FFFFFF;
+			}
+			#favicon-top {
+				fill: #F6A044;
+			}
+			#favicon-corner {
+				fill: #493B39;
+			}
+			#favicon-left {
+				fill: #4C5ED5;
+			}
+			#favicon-star {
+				fill: #4C5ED5;
+			}
+		}
+  </style>
+</svg>

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);
+}

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 */

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;

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"