Merge pull request #50 from the-collab-lab/el-styles-reset-layout

Responsive layout/header/navbar styling

src/api/useAuth.jsx

@@ -2,19 +2,23 @@ import { useEffect, useState } from 'react';
 import { auth } from './config.js';
 import { GoogleAuthProvider, signInWithPopup } from 'firebase/auth';
 import { addUserToDatabase } from './firebase.js';
+import { FiLogIn, FiLogOut } from 'react-icons/fi';
 
 export const SignInButton = () => (
 	<button
+		className="btn-auth"
 		type="button"
 		onClick={() => signInWithPopup(auth, new GoogleAuthProvider())}
 	>
-		Sign In
+		<span className="text-md md:text-xl">Sign In</span>
+		<FiLogIn className="text-2xl" />
 	</button>
 );
 
 export const SignOutButton = () => (
-	<button type="button" onClick={() => auth.signOut()}>
-		Sign Out
+	<button className="btn-auth" type="button" onClick={() => auth.signOut()}>
+		<span className="text-md md:text-xl">Sign Out</span>
+		<FiLogOut className="text-2xl" />
 	</button>
 );
 

src/index.css

@@ -1,105 +1,69 @@
+@import url('https://fonts.googleapis.com/css2?family=Fredoka:[email protected]&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-:root {
-	--color-black: hsla(220, 13%, 18%, 1);
-	--color-gray-dark: hsla(220, 13%, 25%, 1);
-	--color-white: hsla(220, 13%, 98%, 1);
-	--color-gray-light: hsla(220, 13%, 94%, 1);
-	--color-emerald-green: hsla(168, 92%, 25%, 1);
-	--color-vermillion-green: hsla(168, 92%, 43%, 1);
-	--color-cobalt-blue: hsla(215, 100%, 34%, 1);
-	--color-pastel-blue: hsla(215, 100%, 73%, 1);
-	--color-red: hsl(0, 68%, 42%);
+@layer base {
+	html {
+		@apply text-blue-950 font-sans dark:bg-slate-900 dark:text-white;
+	}
 
-	--color-accent: var(--color-pastel-blue);
-	--color-bg: var(--color-black);
-	--color-border: hsla(220, 13%, 32%, 1);
-	--color-error: var(--color-red);
-	--color-text: var(--color-white);
+	a {
+		@apply cursor-pointer;
+	}
 
-	/**
- * Set the value of 1rem to 10px to make relative units
- * easier to work with.
- * (The default is 16px. 16 * 62.5% = 10)
- */
-	font-size: 62.5%;
-}
+	.Layout {
+		@apply flex flex-col;
+		height: 100dvh;
+	}
 
-@media screen and (prefers-color-scheme: light) {
-	:root {
-		--color-accent: var(--color-cobalt-blue);
-		--color-bg: var(--color-white);
-		--color-border: hsla(220, 13%, 78%, 1);
-		--color-text: var(--color-black);
+	.logo {
+		@apply text-2xl md:text-3xl flex flex-row items-center md:gap-2;
+		font-family: 'Gloria Hallelujah', sans-serif;
 	}
-}
 
-:root.theme-light {
-	--color-accent: var(--color-cobalt-blue);
-	--color-bg: var(--color-white);
-	--color-border: hsla(220, 13%, 78%, 1);
-	--color-text: var(--color-black);
-}
+	.logo img {
+		@apply h-[50px] md:h-[60px];
+	}
 
-*,
-*::after,
-*::before {
-	box-sizing: border-box;
-}
+	.btn-auth {
+		@apply rounded-[30px] hover:bg-yellow-300 p-3 inline-flex items-center gap-3;
+	}
+
+	.Layout-header,
+	.Nav {
+		@apply bg-yellow-200 dark:text-blue-950;
+	}
 
-body {
-	background-color: var(--color-bg);
-	color: var(--color-text);
-	font-family:
-		-apple-system,
-		BlinkMacSystemFont,
-		avenir next,
-		avenir,
-		segoe ui,
-		helvetica neue,
-		helvetica,
-		Ubuntu,
-		roboto,
-		noto,
-		arial,
-		sans-serif;
-	font-size: 1.8rem;
-	/** Make sure the app fills the height of the screen. */
-	height: 100dvh;
-	line-height: 1.4;
-	margin: 0;
+	.Layout-header {
+		@apply mb-6 md:mb-12 lg:mb-16;
+	}
 
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-}
+	.Header-container {
+		@apply container mx-auto flex justify-between items-center p-2;
+	}
 
-code {
-	--color-bg: var(--color-gray-dark);
-	--color-text: var(--color-accent);
+	.Layout-main {
+		@apply mx-auto p-2;
+		width: min(700px, 100%);
+	}
 
-	background-color: var(--color-bg);
-	border-radius: 4px;
-	color: var(--color-text);
-	display: inline-block;
-	font-family:
-		Menlo,
-		Consolas,
-		Monaco,
-		Liberation Mono,
-		Lucida Console,
-		monospace;
-	font-size: 0.9em;
-	padding: 2px 2px;
-}
+	.Nav {
+		@apply bottom-0 fixed w-full p-2 md:py-0;
+	}
 
-@media screen and (prefers-color-scheme: light) {
-	code {
-		--color-bg: var(--color-gray-light);
+	.Nav-container {
+		@apply container mx-auto flex flex-row justify-evenly;
 	}
-}
 
-:root.theme-light code {
-	--color-bg: var(--color-gray-light);
+	.Nav-link {
+		@apply flex flex-col lg:flex-row items-center justify-center gap-y-1 lg:gap-x-2 
+			leading-tight text-2xl p-3 lg:p-5 rounded-[30px] hover:bg-yellow-300 md:w-full lg:w-[250px];
+	}
+
+	.Nav-link.active {
+		@apply underline bg-yellow-400;
+	}
 }

src/indexOld.css

@@ -0,0 +1,101 @@
+:root {
+	--color-black: hsla(220, 13%, 18%, 1);
+	--color-gray-dark: hsla(220, 13%, 25%, 1);
+	--color-white: hsla(220, 13%, 98%, 1);
+	--color-gray-light: hsla(220, 13%, 94%, 1);
+	--color-emerald-green: hsla(168, 92%, 25%, 1);
+	--color-vermillion-green: hsla(168, 92%, 43%, 1);
+	--color-cobalt-blue: hsla(215, 100%, 34%, 1);
+	--color-pastel-blue: hsla(215, 100%, 73%, 1);
+	--color-red: hsl(0, 68%, 42%);
+
+	--color-accent: var(--color-pastel-blue);
+	--color-bg: var(--color-black);
+	--color-border: hsla(220, 13%, 32%, 1);
+	--color-error: var(--color-red);
+	--color-text: var(--color-white);
+
+	/**
+ * Set the value of 1rem to 10px to make relative units
+ * easier to work with.
+ * (The default is 16px. 16 * 62.5% = 10)
+ */
+	font-size: 62.5%;
+}
+
+@media screen and (prefers-color-scheme: light) {
+	:root {
+		--color-accent: var(--color-cobalt-blue);
+		--color-bg: var(--color-white);
+		--color-border: hsla(220, 13%, 78%, 1);
+		--color-text: var(--color-black);
+	}
+}
+
+:root.theme-light {
+	--color-accent: var(--color-cobalt-blue);
+	--color-bg: var(--color-white);
+	--color-border: hsla(220, 13%, 78%, 1);
+	--color-text: var(--color-black);
+}
+
+*,
+*::after,
+*::before {
+	box-sizing: border-box;
+}
+
+body {
+	background-color: var(--color-bg);
+	color: var(--color-text);
+	font-family:
+		-apple-system,
+		BlinkMacSystemFont,
+		avenir next,
+		avenir,
+		segoe ui,
+		helvetica neue,
+		helvetica,
+		Ubuntu,
+		roboto,
+		noto,
+		arial,
+		sans-serif;
+	font-size: 1.8rem;
+	/** Make sure the app fills the height of the screen. */
+	height: 100dvh;
+	line-height: 1.4;
+	margin: 0;
+
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+code {
+	--color-bg: var(--color-gray-dark);
+	--color-text: var(--color-accent);
+
+	background-color: var(--color-bg);
+	border-radius: 4px;
+	color: var(--color-text);
+	display: inline-block;
+	font-family:
+		Menlo,
+		Consolas,
+		Monaco,
+		Liberation Mono,
+		Lucida Console,
+		monospace;
+	font-size: 0.9em;
+	padding: 2px 2px;
+}
+
+@media screen and (prefers-color-scheme: light) {
+	code {
+		--color-bg: var(--color-gray-light);
+	}
+}
+
+:root.theme-light code {
+	--color-bg: var(--color-gray-light);
+}

src/views/Layout.jsx

@@ -1,50 +1,58 @@
 import { Outlet, NavLink, Link } from 'react-router-dom';
-import './Layout.css';
 import { SignInButton, SignOutButton, useAuth } from '../api/useAuth';
-import { FaShoppingCart } from 'react-icons/fa';
-import { GoHomeFill } from 'react-icons/go';
-import { FaListCheck } from 'react-icons/fa6';
-import { LuSettings2 } from 'react-icons/lu';
-import { TbInfoHexagonFilled } from 'react-icons/tb';
+
+import {
+	FaShoppingCart,
+	FaHome,
+	FaClipboardList,
+	FaShareAlt,
+	FaInfoCircle,
+} from 'react-icons/fa';
 
 export function Layout() {
 	const { user } = useAuth();
 	return (
 		<>
 			<div className="Layout">
 				<header className="Layout-header">
-					<Link to="/">
-						<h1>
-							{' '}
-							<FaShoppingCart /> Shop&apos;n Go
-						</h1>
-					</Link>
-					{!!user ? (
-						<SignOutButton></SignOutButton>
-					) : (
-						<SignInButton></SignInButton>
-					)}
+					<div className="Header-container">
+						<Link to="/">
+							<h1 className="logo">
+								{' '}
+								<img src="/img/plastic-bag.png" alt="" /> Shop&apos;n Go
+							</h1>
+						</Link>
+						{!!user ? (
+							<SignOutButton></SignOutButton>
+						) : (
+							<SignInButton></SignInButton>
+						)}
+					</div>
 				</header>
 				<main className="Layout-main">
 					<Outlet />
 				</main>
 				<nav className="Nav">
 					<div className="Nav-container">
 						<NavLink to="/" className="Nav-link">
-							<GoHomeFill /> Home
+							<FaHome />
+							<span className="hidden md:inline">Home</span>
 						</NavLink>
 						{user && (
 							<NavLink to="/list" className="Nav-link">
-								<FaListCheck /> List
+								<FaClipboardList />
+								<span className="hidden md:inline">List</span>
 							</NavLink>
 						)}
 						{user && (
 							<NavLink to="/manage-list" className="Nav-link">
-								<LuSettings2 /> Manage List
+								<FaShareAlt />
+								<span className="hidden md:inline">Manage List</span>
 							</NavLink>
 						)}
 						<NavLink to="/about" className="Nav-link">
-							<TbInfoHexagonFilled /> About
+							<FaInfoCircle />
+							<span className="hidden md:inline">About</span>
 						</NavLink>
 					</div>
 				</nav>

src/views/Layout.css → src/views/LayoutOld.css

@@ -71,9 +71,3 @@
 	text-decoration-thickness: 0.22em;
 	text-underline-offset: 0.1em;
 }
-
-header {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-}

tailwind.config.js

@@ -1,8 +1,14 @@
+import defaultTheme from 'tailwindcss/defaultTheme';
+
 /** @type {import('tailwindcss').Config} */
 export default {
 	content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
 	theme: {
-		extend: {},
+		extend: {
+			fontFamily: {
+				sans: ['Fredoka', ...defaultTheme.fontFamily.sans],
+			},
+		},
 	},
 	plugins: [],
 };