From 80690a4105108016619d765d11d4b6dbec9f89d2 Mon Sep 17 00:00:00 2001
From: Lara Alexander <lara.alexander@hotmail.com>
Date: Mon, 28 Aug 2023 15:33:42 -0400
Subject: [PATCH] Made the calendar page mobile-responsive

---
 client/src/features/calendar/MonthAndYear.js           |  6 +++---
 client/src/features/calendarHeader/CalendarHeader.js   | 10 +++++-----
 .../features/calendarHeader/components/HeaderButton.js |  6 +++---
 .../features/calendarHeader/components/TodayButton.js  |  4 ++--
 4 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/client/src/features/calendar/MonthAndYear.js b/client/src/features/calendar/MonthAndYear.js
index 51a85f35..fba6882b 100644
--- a/client/src/features/calendar/MonthAndYear.js
+++ b/client/src/features/calendar/MonthAndYear.js
@@ -11,7 +11,7 @@ const MonthAndYear = ({
       <div className="flex">
         <button onClick={handlePreviousMonth}>
           <svg
-            className="w-6 h-6"
+            className="w-6 h-6 max-[440px]:w-4 max-[440px]:h-4"
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
             viewBox="0 0 24 24"
@@ -27,7 +27,7 @@ const MonthAndYear = ({
         </button>
         <button data-cy="next-month" onClick={handleNextMonth}>
           <svg
-            className="w-6 h-6"
+            className="w-6 h-6 max-[440px]:w-4 max-[440px]:h-4"
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
             viewBox="0 0 24 24"
@@ -42,7 +42,7 @@ const MonthAndYear = ({
           </svg>
         </button>
       </div>
-      <h2 className="ml-2 w-[14ch] text-3xl font-bold leading-none">
+      <h2 className="max-[440px]:ml-1 ml-2 w-[14ch] max-[440px]:text-base max-[440px]:text-center sm:text-3xl text-xl font-bold leading-none">
         {month}, {year}
       </h2>
     </div>
diff --git a/client/src/features/calendarHeader/CalendarHeader.js b/client/src/features/calendarHeader/CalendarHeader.js
index ea734a22..86bc0633 100644
--- a/client/src/features/calendarHeader/CalendarHeader.js
+++ b/client/src/features/calendarHeader/CalendarHeader.js
@@ -30,8 +30,8 @@ function CalendarHeader({ date }) {
   };
 
   return (
-    <header className="flex items-center px-5 py-3 bg-white justify-between">
-      <section className="flex space-x-3">
+    <header className="flex items-center max-[440px]:px-2 px-5 py-3 bg-white lg:justify-between w-full justify-center lg:flex-nowrap flex-wrap  max-[440px]:gap-x-2 gap-x-6 lg:gap-x-4 overflow-hidden">
+      <section className="flex max-[440px]:gap-x-2 gap-x-6 lg:gap-x-4">
         <HeaderButton
           Icon={BsCalendarPlusFill}
           tooltipText="Add Event"
@@ -49,8 +49,8 @@ function CalendarHeader({ date }) {
           onClick={() => navigate("/")}
         />
       </section>
-      <section className="flex items-center space-x-3">
-        <img src={Logo} className="max-w-none" alt="Logo" />
+      <section className="flex items-center w-full order-first lg:w-min lg:space-x-3 lg:order-none justify-between mb-4 lg:mb-0">
+        <img src={Logo} className="max-w-none max-[380px]:w-9" alt="Logo" />
         <MonthAndYear
           month={date?.month}
           year={date?.year}
@@ -63,7 +63,7 @@ function CalendarHeader({ date }) {
           onClick={() => date.getCurrentMonth()}
         />
       </section>
-      <section className="flex space-x-3">
+      <section className="flex max-[440px]:gap-x-2 gap-x-6 lg:gap-x-4">
         <HeaderButton
           Icon={IoChatbubblesOutline}
           tooltipText="Feedback"
diff --git a/client/src/features/calendarHeader/components/HeaderButton.js b/client/src/features/calendarHeader/components/HeaderButton.js
index d9fe2d86..6fef0682 100644
--- a/client/src/features/calendarHeader/components/HeaderButton.js
+++ b/client/src/features/calendarHeader/components/HeaderButton.js
@@ -1,11 +1,11 @@
 function HeaderButton({ Icon, tooltipText, ...rest }) {
   return (
     <button
-      className="relative p-3 bg-[#F5E7DE] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)] rounded-lg group font-inconsolata font-bold"
+      className="p-2 sm:p-3 relative bg-[#F5E7DE] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)] rounded-lg group font-inconsolata font-bold"
       {...rest}
     >
-      <Icon className="w-8 h-8 text-[#C57756]" />
-      <span className="absolute -bottom-full left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 ease-in bg-[#F5CEB5BF] p-2 border border-black whitespace-nowrap rounded-md pointer-events-none">
+      <Icon className="max-[380px]:w-4 max-[380px]:h-4 w-6 h-6 sm:w-8 sm:h-8 text-[#C57756]" />
+      <span className="absolute -bottom-full left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 ease-in bg-[#F5CEB5BF] p-2 border border-black whitespace-nowrap rounded-md pointer-events-none z-10">
         {tooltipText}
       </span>
     </button>
diff --git a/client/src/features/calendarHeader/components/TodayButton.js b/client/src/features/calendarHeader/components/TodayButton.js
index 6ca28288..9060973d 100644
--- a/client/src/features/calendarHeader/components/TodayButton.js
+++ b/client/src/features/calendarHeader/components/TodayButton.js
@@ -1,10 +1,10 @@
 function TodayButton({ text, tooltipText, ...rest }) {
   return (
     <button
-      className="relative p-2 px-4 bg-teal-light shadow-[0_4px_4px_0_rgba(0,0,0,0.25)] rounded-lg font-inconsolata font-bold"
+      className="relative sm:p-2 sm:px-4 p-1 px-3 bg-teal-light shadow-[0_4px_4px_0_rgba(0,0,0,0.25)] rounded-lg font-inconsolata font-bold"
       {...rest}
     >
-      <span className="text-lg font-bold">{text}</span>
+      <span className="text-lg font-bold max-[440px]:text-sm">{text}</span>
       <span className="absolute -bottom-full left-1/2 -translate-x-1/2 translate-y-5 opacity-0 group-hover:opacity-100 transition-opacity duration-200 ease-in bg-teal-light p-2 border border-black whitespace-nowrap rounded-md pointer-events-none">
         {tooltipText}
       </span>