From 1d7c230d8609b0e8f65c61c995342eabdc218070 Mon Sep 17 00:00:00 2001
From: Piotr Matyjasik <matyjasik.piotr@wp.pl>
Date: Mon, 20 Mar 2023 18:39:39 +0100
Subject: [PATCH] Fix/mobile view (#94)

Co-authored-by: Ryczko <konradryczko1@gmail.com>
---
 src/layout/BurgerMenu/BurgerMenu.tsx     |  2 +-
 src/layout/GithubCorner/GithubCorner.tsx |  2 +-
 src/layout/Logo/Logo.tsx                 |  2 +-
 src/layout/Navigation/Navigation.tsx     | 11 +++++++++--
 src/layout/PageLayout.tsx                |  2 +-
 src/pages/index.tsx                      |  2 +-
 src/shared/components/Header/Header.tsx  |  2 +-
 tailwind.config.js                       |  3 +++
 8 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/layout/BurgerMenu/BurgerMenu.tsx b/src/layout/BurgerMenu/BurgerMenu.tsx
index d3e1b53f..aef12d4a 100644
--- a/src/layout/BurgerMenu/BurgerMenu.tsx
+++ b/src/layout/BurgerMenu/BurgerMenu.tsx
@@ -16,7 +16,7 @@ const BurgerMenu = ({ isOpen, children }: BurgerMenuProps) => {
       initial="closed"
       variants={variants}
       id="burger_menu"
-      className="flex fixed top-20 left-0 z-10 flex-col justify-center items-center pb-2 w-screen bg-zinc-100 shadow-md lg:hidden"
+      className="flex fixed top-[70px] left-0 z-10 flex-col justify-center items-center py-2 w-screen bg-zinc-100 shadow-md lg:hidden"
     >
       {children}
     </motion.div>
diff --git a/src/layout/GithubCorner/GithubCorner.tsx b/src/layout/GithubCorner/GithubCorner.tsx
index 57abbb1c..e9c1afbd 100644
--- a/src/layout/GithubCorner/GithubCorner.tsx
+++ b/src/layout/GithubCorner/GithubCorner.tsx
@@ -3,7 +3,7 @@ export default function GithubCorner() {
     <a
       href="https://github.com/Ryczko/Employee-pulse"
       target="_blank"
-      className="github-corner"
+      className="hidden small-sm:block github-corner"
       aria-label="View source on GitHub"
       rel="noreferrer"
     >
diff --git a/src/layout/Logo/Logo.tsx b/src/layout/Logo/Logo.tsx
index fc271663..6abbf550 100644
--- a/src/layout/Logo/Logo.tsx
+++ b/src/layout/Logo/Logo.tsx
@@ -11,7 +11,7 @@ function Logo({ classNames = '' }: LogoProps) {
       <a
         href={'/'}
         className={clsx(
-          'block ml-14 font-serif text-2xl text-zinc-600 translate-y-[-2px] md:ml-11',
+          'block font-serif text-2xl text-zinc-600 translate-y-[-2px] md:ml-11 small-sm:ml-14',
           classNames
         )}
       >
diff --git a/src/layout/Navigation/Navigation.tsx b/src/layout/Navigation/Navigation.tsx
index 94bc6aa3..42386862 100644
--- a/src/layout/Navigation/Navigation.tsx
+++ b/src/layout/Navigation/Navigation.tsx
@@ -35,7 +35,11 @@ function Navigation() {
     <nav className="flex fixed z-10 items-center  w-full h-[70px] bg-zinc-100 border-b border-neutral-200">
       <GithubCorner />
 
-      <div className="flex grow justify-between items-center px-4 md:px-8">
+      <div
+        className={`flex grow ${
+          user ? 'justify-between' : 'justify-center small-sm:justify-between'
+        } items-center px-4 md:px-8`}
+      >
         <Logo />
         {!loading && user ? (
           <div className="flex md:space-x-4">
@@ -122,7 +126,10 @@ function Navigation() {
           </div>
         ) : (
           <Link href={'/login'} passHref>
-            <ButtonLink variant={ButtonVariant.OUTLINE_PRIMARY}>
+            <ButtonLink
+              className="hidden px-4 sm:px-6 small-sm:block"
+              variant={ButtonVariant.OUTLINE_PRIMARY}
+            >
               Sign In
             </ButtonLink>
           </Link>
diff --git a/src/layout/PageLayout.tsx b/src/layout/PageLayout.tsx
index 78a81d56..b5176f69 100644
--- a/src/layout/PageLayout.tsx
+++ b/src/layout/PageLayout.tsx
@@ -19,7 +19,7 @@ function PageLayout({ children }: PageLayoutProps) {
     <>
       <AnimatePresence>{loading && <GlobalLoader />}</AnimatePresence>
       <Navigation />
-      <div className="overflow-hidden px-6 pt-32 m-auto min-h-screen sm:px-4">
+      <div className="overflow-hidden px-6 pt-24 m-auto mb-8 min-h-full sm:px-4 md:pt-32">
         <Background />
         <AnimatePresence exitBeforeEnter initial={false}>
           <Fragment key={router.asPath}>{children}</Fragment>
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 9ab10301..d8ce7c2b 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -18,7 +18,7 @@ function IndexPage() {
       <div className="flex overflow-hidden flex-col">
         <section className="relative">
           <div className="px-4 mx-auto max-w-6xl sm:px-6">
-            <div className="pt-32 pb-12 md:pt-40 md:pb-20">
+            <div className="pt-28 pb-12 md:pt-40 md:pb-20 md:32">
               <div className="pb-12 text-center md:pb-16">
                 <h1 className="mb-4 text-4xl font-extrabold tracking-tighter md:text-6xl leading-tighter">
                   How are you&nbsp;
diff --git a/src/shared/components/Header/Header.tsx b/src/shared/components/Header/Header.tsx
index 5e6c90f0..0eb0ad55 100644
--- a/src/shared/components/Header/Header.tsx
+++ b/src/shared/components/Header/Header.tsx
@@ -4,7 +4,7 @@ interface HeaderProps {
 
 export default function Header({ children }: HeaderProps) {
   return (
-    <h1 className="pb-8 mx-auto max-w-4xl text-3xl font-bold text-center md:text-4xl">
+    <h1 className="pb-8 mx-auto max-w-4xl text-2xl font-bold text-center md:text-4xl">
       {children}
     </h1>
   );
diff --git a/tailwind.config.js b/tailwind.config.js
index 0ccef55a..b661bb9c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,6 +9,9 @@ module.exports = {
         display: ['Montserrat', 'system-ui', 'sans-serif'],
         body: ['Montserrat', 'system-ui', 'sans-serif'],
       },
+      screens: {
+        'small-sm': '370px',
+      },
     },
   },
   plugins: [],