Merge branch 'develop'

Author: ruisaraiva19

components/drag-and-drop/index.module.scss

@@ -571,6 +571,7 @@
 	max-width: 730px;
 	height: 100%;
 	margin: 0 auto;
+	touch-action: none;
 
 	@include breakpoint-md {
 		padding-top: 20px;

components/drag-and-drop/index.tsx

@@ -4,7 +4,7 @@ import React, { useState, useEffect, useCallback, useRef } from 'react'
 import classnames from 'classnames'
 import { useDropzone, FileRejection } from 'react-dropzone'
 import { CSSTransition } from 'react-transition-group'
-import { useDrag } from 'react-use-gesture'
+import { useDrag } from '@use-gesture/react'
 import { headTemplate } from 'utils/favicon'
 import { isTouchCapable } from 'utils/device'
 import { Typography } from 'components/typography'

components/favycon-info/index.module.scss

@@ -163,6 +163,7 @@
 	max-width: 572px;
 	padding: 0 16px;
 	margin: 0 auto;
+	touch-action: none;
 	background: $white;
 
 	@include breakpoint-md {

components/favycon-info/index.tsx

@@ -1,10 +1,10 @@
 import dynamic from 'next/dynamic'
+import Image from 'next/image'
 import React, { useState, useRef } from 'react'
 import classnames from 'classnames'
-import { useDrag } from 'react-use-gesture'
+import { useDrag } from '@use-gesture/react'
 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 { SvgGithub } from 'components/svgs/svg-github'
 
@@ -13,6 +13,10 @@ import { SvgFavycon } from 'components/svgs/svg-favycon'
 import { Button } from 'components/button'
 import { isTouchCapable } from 'utils/device'
 
+import augustoLopes from '../../public/images/people/augusto-lopes.png'
+import ruiSaraiva from '../../public/images/people/rui-saraiva.png'
+import miguelTeixeira from '../../public/images/people/miguel-teixeira.png'
+
 const Modal = dynamic(() => import('react-modal'))
 
 const people = [
@@ -21,21 +25,21 @@ const people = [
 		name: 'Augusto Lopes',
 		role: 'Product Designer',
 		social: 'twitter',
-		placeholderHash: 'UrLqFOIUS$-o_Nt6NGRkEkt7M{RjM{NHMxof',
+		photo: augustoLopes,
 	},
 	{
 		screenName: 'ruisaraiva19',
 		name: 'Rui Saraiva',
 		role: 'Full-Stack Developer',
 		social: 'twitter',
-		placeholderHash: 'UNMQLqof_LWU?FRkkqt605fk9cjZbaWBt8of',
+		photo: ruiSaraiva,
 	},
 	{
 		screenName: 'miguellteixeira',
 		name: 'Miguel Teixeira',
 		role: 'Full-Stack Developer',
 		social: 'github',
-		placeholderHash: 'UcI~*]o0uPXS?wWAMxog8_kCQ,e-tmbIVsjF',
+		photo: miguelTeixeira,
 	},
 ]
 
@@ -141,13 +145,13 @@ const FavyconInfo = ({
 							{people.map((person) => (
 								<div key={person.screenName} className={styles.person}>
 									<div className={styles.personAvatar}>
-										<LazyImage
-											src={`/images/people/${person.screenName}@1x.png`}
-											srcRetina={`/images/people/${person.screenName}@2x.png`}
+										<Image
+											src={person.photo}
 											alt={person.name}
-											aspectRatio="56/56"
-											placeholderHash={person.placeholderHash}
-											rounded
+											width={56}
+											height={56}
+											placeholder="blur"
+											layout="intrinsic"
 										/>
 									</div>
 									<div>

components/favycon-wizard/index.module.scss

@@ -52,12 +52,18 @@
 }
 
 .mobileBackground {
+	position: relative;
+	width: 100%;
+	height: 100vh;
+
 	@include breakpoint-md-up {
 		display: none;
 	}
 }
 
 .desktopBackground {
+	position: relative;
+
 	@include breakpoint-md {
 		display: none;
 	}

components/favycon-wizard/index.tsx

@@ -1,42 +1,50 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
-import { LazyImage } from 'components/lazy-image'
+import Image from 'next/image'
 
 import styles from './index.module.scss'
+import unsplashImageMobile from '../../public/images/unsplash-vertical.jpg'
+import unsplashImageDesktop from '../../public/images/unsplash-horizontal.jpg'
+import dndLight from '../../public/images/dnd-light.png'
+import dndDark from '../../public/images/dnd-dark.png'
 
 type FavyconWizardProps = {
 	children: PropTypes.ReactNodeLike
 	showDndImage: boolean
 }
 
 const unsplashImageProps = (isMobile: boolean) => ({
-	src: `/images/unsplash${isMobile ? '-vertical' : ''}@1x.jpg`,
-	srcRetina: `/images/unsplash${isMobile ? '-vertical' : ''}@2x.jpg`,
-	placeholderHash: isMobile ? 'UT0Lxlh2ghgMeSeoe@fkflf5e.e:e.e.f6fk' : 'Un0V-,h2g#gMe,f8f9fif8f6f6f8f6f7fQfQ',
-	alt: 'Unsplash',
-	aspectRatio: isMobile ? '614/768' : '540/354',
-	stretch: isMobile,
+	src: isMobile ? unsplashImageMobile : unsplashImageDesktop,
+	width: isMobile ? undefined : 540,
+	height: isMobile ? undefined : 354,
 })
 
 const dndImageProps = (isDark: boolean) => ({
-	src: `/images/dnd-${isDark ? 'dark' : 'light'}@1x.png`,
-	srcRetina: `/images/dnd-${isDark ? 'dark' : 'light'}@2x.png`,
-	alt: 'Drag and drop here!',
-	aspectRatio: '185/109',
+	src: isDark ? dndDark : dndLight,
+	width: 185,
+	height: 109,
 })
 
 const FavyconWizardComponent = ({ children, showDndImage }: FavyconWizardProps) => {
 	return (
 		<div className={styles.root}>
 			<div className={styles.background}>
-				<LazyImage className={styles.mobileBackground} {...unsplashImageProps(true)} />
-				<LazyImage className={styles.desktopBackground} {...unsplashImageProps(false)} />
+				<div className={styles.mobileBackground}>
+					<Image alt="Unsplash image" placeholder="blur" layout="fill" {...unsplashImageProps(true)} />
+				</div>
+				<div className={styles.desktopBackground}>
+					<Image alt="Unsplash image" placeholder="blur" layout="intrinsic" {...unsplashImageProps(false)} />
+				</div>
 			</div>
 			{children}
 			<div className={classnames(styles.image, { [styles.hide]: !showDndImage })}>
-				<LazyImage {...dndImageProps(false)} className={styles.imageLight} />
-				<LazyImage {...dndImageProps(true)} className={styles.imageDark} />
+				<div className={styles.imageLight}>
+					<Image alt="Drag and drop here!" {...dndImageProps(false)} layout="intrinsic" />
+				</div>
+				<div className={styles.imageDark}>
+					<Image alt="Drag and drop here!" {...dndImageProps(true)} layout="intrinsic" />
+				</div>
 			</div>
 		</div>
 	)

components/lazy-image/index.module.scss

@@ -1,3 +1,7 @@
 module.exports = {
 	poweredByHeader: false,
+	images: {
+		deviceSizes: [375, 750, 1125],
+		imageSizes: [56, 112, 185, 370, 370, 375, 540, 740, 750, 1080],
+	},
 }

components/lazy-image/index.tsx

@@ -43,25 +43,22 @@
 	},
 	"dependencies": {
 		"@fiahfy/ico-convert": "0.0.12",
+		"@use-gesture/react": "10.2.0",
 		"adm-zip": "0.5.9",
 		"blurhash": "1.1.4",
 		"classnames": "2.3.1",
 		"multer": "1.4.3",
 		"next": "12.0.6",
 		"nprogress": "0.2.0",
-		"object-fit-images": "3.2.4",
 		"prismjs": "1.25.0",
 		"prop-types": "15.7.2",
 		"react": "17.0.2",
-		"react-blurhash": "0.1.3",
 		"react-clipboard.js": "2.0.16",
 		"react-dom": "17.0.2",
 		"react-dropzone": "11.4.2",
-		"react-lazy-images": "1.1.0",
 		"react-modal": "3.14.4",
 		"react-transition-group": "4.4.2",
-		"react-use": "17.3.1",
-		"react-use-gesture": "7.0.16"
+		"react-use": "17.3.1"
 	},
 	"devDependencies": {
 		"@babel/core": "7.16.0",
@@ -88,7 +85,6 @@
 		"@types/multer": "1.4.7",
 		"@types/node": "16.11.11",
 		"@types/nprogress": "0.2.0",
-		"@types/object-fit-images": "3.2.2",
 		"@types/prismjs": "1.16.6",
 		"@types/react": "17.0.37",
 		"@types/react-modal": "3.13.1",