fix(favycon): fix background image, colors, and alignments (#34)

.storybook/styles.css

@@ -5,8 +5,9 @@
 }
 
 .sb-show-main.light-mode {
-	background: #fff;
+	background: #fafafa;
 }
+
 .sb-show-main.dark-mode {
 	background: #191a1f;
 }

components/base-layout/index.module.scss

@@ -3,14 +3,3 @@
 .root {
 	padding: 0;
 }
-
-.container {
-	max-width: 1440px;
-	padding: 20px;
-}
-
-.header {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-}

components/base-layout/index.tsx

@@ -1,9 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { DarkModeToggle } from 'components/dark-mode-toggle'
+import { Header } from 'components/header'
 
 import styles from './index.module.scss'
-import { Typography } from 'components/typography'
 
 type BaseLayoutProps = {
 	children: PropTypes.ReactNodeLike
@@ -12,13 +11,8 @@ type BaseLayoutProps = {
 const BaseLayout = ({ children }: BaseLayoutProps) => {
 	return (
 		<div className={styles.root}>
-			<div className={styles.container}>
-				<header className={styles.header}>
-					<Typography weight="bold">Menu</Typography>
-					<DarkModeToggle />
-				</header>
-			</div>
-			<main>{children}</main>
+			<Header />
+			{children}
 		</div>
 	)
 }

components/header/index.module.scss

@@ -0,0 +1,30 @@
+@import '../../styles/variables.scss';
+
+.root {
+	padding: 0;
+}
+
+.container {
+	max-width: 1440px;
+	height: 64px;
+	padding: 0 20px;
+}
+
+.header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	height: 100%;
+}
+
+.item {
+	background: $off-white;
+	border-radius: 16px;
+	box-shadow: 0 0 10px rgba($off-white, 0.5);
+	transition: all 0.2s ease;
+}
+
+.dark {
+	background: $dark-black;
+	box-shadow: 0 0 10px rgba($dark-black, 0.5);
+}

components/header/index.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import useDarkMode from 'use-dark-mode'
+import classnames from 'classnames'
+import { DarkModeToggle } from 'components/dark-mode-toggle'
+import { Typography } from 'components/typography'
+import { Sticky } from 'components/sticky'
+
+import styles from './index.module.scss'
+
+const Header = () => {
+	const { value: isDark } = useDarkMode(false)
+	const itemClassName = classnames(styles.item, { [styles.dark]: isDark })
+	return (
+		<Sticky>
+			<div className={styles.root}>
+				<div className={styles.container}>
+					<header className={styles.header}>
+						<div className={itemClassName}>
+							<Typography weight="bold">Menu</Typography>
+						</div>
+						<div className={itemClassName}>
+							<DarkModeToggle />
+						</div>
+					</header>
+				</div>
+			</div>
+		</Sticky>
+	)
+}
+
+export { Header }

components/sticky/index.module.scss

@@ -0,0 +1,14 @@
+@import '../../styles/variables.scss';
+
+.root {
+	position: relative;
+	width: 100%;
+}
+
+.sticky {
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 3;
+	width: 100%;
+}

components/sticky/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import styles from './index.module.scss'
+
+type StickyProps = {
+	children: PropTypes.ReactNodeLike
+}
+
+const Sticky = ({ children }: StickyProps) => {
+	return (
+		<div className={styles.root}>
+			<div className={styles.sticky}>{children}</div>
+		</div>
+	)
+}
+
+export { Sticky }

pages/index.module.scss

@@ -2,10 +2,11 @@
 
 .container {
 	display: flex;
-	align-items: flex-start;
+	align-items: center;
 	justify-content: space-between;
 	width: 100%;
 	max-width: 960px;
+	min-height: 100vh;
 	padding: 52px 20px;
 	margin: 0 auto;
 }
@@ -31,7 +32,7 @@
 	justify-content: center;
 	width: 100%;
 	max-width: 540px;
-	padding: 41px 0 38px;
+	padding: 41px 0 0;
 }
 
 .background {

pages/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import { NextPage } from 'next'
 import useDarkMode from 'use-dark-mode'
 import { LazyImage } from 'components/lazy-image'
@@ -13,14 +13,14 @@ import styles from './index.module.scss'
 const getRandomNumber = (min = 1, max = 3) => Math.floor(Math.random() * max) + min
 
 const unsplashImagesUrls = [
-	'https://unsplash.com/photos/F573ZRbKOEw',
-	'https://unsplash.com/photos/k0JNJRbrJAs',
-	'https://unsplash.com/photos/f9oQZOk9vnk',
+	'https://unsplash.com/photos/zKnQnyARggY',
+	'https://unsplash.com/photos/UQAQm_EpWR8',
+	'https://unsplash.com/photos/IXUM4cJynP0',
 ]
 
 const Home: NextPage = () => {
 	const { value: isDark } = useDarkMode(false)
-	const backgroundId = getRandomNumber()
+	const backgroundId = useMemo(() => getRandomNumber(), [])
 	const onDrop = (acceptedFiles: File[]) => {
 		console.log('acceptedFiles[0]', acceptedFiles[0])
 	}
@@ -41,7 +41,7 @@ const Home: NextPage = () => {
 						Just drag & drop an image and you will then get a downloadable file alongside some documentation on how
 						to add the favicons.
 					</Typography>
-					<hr className={styles.lastParagraph} />
+					<hr />
 					<Typography variant="footer" weight="semiBold" color="gray">
 						Created by <a href="/#">4 people</a> on their 2020’s worldwide quarantine. Background image from{' '}
 						<a href={unsplashImagesUrls[backgroundId - 1]} target="_blank" rel="noopener noreferrer">

styles/main.scss

@@ -18,7 +18,7 @@ body {
 	transition: background 0.2s ease;
 
 	&.light-mode {
-		background: $white;
+		background: $off-white;
 	}
 
 	&.dark-mode {
@@ -33,6 +33,13 @@ body {
 hr {
 	height: 1px;
 	margin: 16px 0;
-	background-color: $light-grey;
+	background: $light-grey;
 	border: none;
+	transition: background 0.2s ease;
+}
+
+.dark-mode {
+	hr {
+		background: $darker-grey;
+	}
 }