From 24e2da86f0fbebea4e3aac62d3bfec46382321be Mon Sep 17 00:00:00 2001
From: Iyana <114933494+yayakixtenet@users.noreply.github.com>
Date: Fri, 23 Aug 2024 14:52:44 -0400
Subject: [PATCH 1/3] working on mobile styling

---
 frontend/src/components/compound/NavBar/NavBar.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/compound/NavBar/NavBar.tsx b/frontend/src/components/compound/NavBar/NavBar.tsx
index 78d27cd..1256a03 100644
--- a/frontend/src/components/compound/NavBar/NavBar.tsx
+++ b/frontend/src/components/compound/NavBar/NavBar.tsx
@@ -21,7 +21,7 @@ export default function NavBar() {
     <nav className="top-0 left-0 right-0 bg-primary">
       <div className="mx-auto px-4 py-2 flex justify-between items-center">
         {/* Directory NY logo */}
-        <div className="flex-shrink-0 ml-6">
+        <div className="flex-shrink-0 mx-1 sm:ml-6">
           <span className="text-xl font-bold font-serif">DirectoryNY</span>
         </div>
         <div className="flex items-center space-x-4">
@@ -29,15 +29,15 @@ export default function NavBar() {
             className="px-4 py-2 bg-gray-400 text-white rounded-full hover:bg-black"
             onClick={() => setShowHousingForm(true)}
           >
-            <FontAwesomeIcon icon={faHouse} className="mr-2" />
-            Help Me find housing
+            <FontAwesomeIcon icon={faHouse} className="sm:mr-2" />
+            <span className="hidden sm:inline">Help Me find housing</span>
           </button>
           <button
             className="px-4 py-2 bg-black text-white rounded-full hover:bg-green-600"
             onClick={() => setShowReferralForm(true)}
           >
-            <FontAwesomeIcon icon={faUserPlus} className="mr-2" />
-            Invite a friend
+            <FontAwesomeIcon icon={faUserPlus} className="sm:mr-2" />
+            <span className="hidden sm:inline">Invite a friend</span>
           </button>
           <UserDropdown />
         </div>

From e026a35ade415d3865aee31c73dcb8260b46734f Mon Sep 17 00:00:00 2001
From: Iyana <114933494+yayakixtenet@users.noreply.github.com>
Date: Fri, 23 Aug 2024 15:15:27 -0400
Subject: [PATCH 2/3] some mobile styling stuffs

---
 .../compound/Modal/SpaceListingModal.tsx      | 12 +++---
 .../compound/Modal/UserListingModal.tsx       | 43 +++++++++++--------
 .../src/components/compound/NavBar/NavBar.tsx |  4 +-
 3 files changed, 34 insertions(+), 25 deletions(-)

diff --git a/frontend/src/components/compound/Modal/SpaceListingModal.tsx b/frontend/src/components/compound/Modal/SpaceListingModal.tsx
index 01a6ea0..d86bf86 100644
--- a/frontend/src/components/compound/Modal/SpaceListingModal.tsx
+++ b/frontend/src/components/compound/Modal/SpaceListingModal.tsx
@@ -121,7 +121,7 @@ const SpaceListingModal: React.FC<SpaceListingModalProps> = ({
                     className="fixed inset-0 bg-white bg-opacity-85 transition-opacity data-[closed]:opacity-0 data-[enter]:duration-300 data-[leave]:duration-200 data-[enter]:ease-out data-[leave]:ease-in"
                 />
                 <div className="fixed inset-0 z-10 w-screen overflow-y-auto ">
-                    <div className="flex items-end justify-center p-4 text-center sm:items-center sm:p-0 h-screen">
+                    <div className="flex items-center justify-center p-4 text-center sm:items-center sm:p-0 h-screen">
                         <DialogPanel
                             transition
                             className="h-4/6 relative transform overflow-y-auto rounded-lg bg-white text-left shadow-xl transition-all data-[closed]:translate-y-4 data-[closed]:opacity-0 data-[enter]:duration-300 data-[leave]:duration-200 data-[enter]:ease-out data-[leave]:ease-in sm:my-8 sm:w-full sm:max-w-lg data-[closed]:sm:translate-y-0 data-[closed]:sm:scale-95 p-8 border border-gray-200"
@@ -186,7 +186,7 @@ const SpaceListingModal: React.FC<SpaceListingModalProps> = ({
                                 <section>
                                     <span>Room price</span>
                                     <div className="mb-4 flex flex-col gap-2 mt-2">
-                                        <label>
+                                        <label className="flex items-center gap-2">
                                             <input
                                                 type="radio"
                                                 name="priceRange"
@@ -196,7 +196,7 @@ const SpaceListingModal: React.FC<SpaceListingModalProps> = ({
                                             />
                                             {RoomPrice.LessThan1500}
                                         </label>
-                                        <label className="">
+                                        <label className="flex items-center gap-2">
                                             <input
                                                 type="radio"
                                                 name="priceRange"
@@ -206,7 +206,7 @@ const SpaceListingModal: React.FC<SpaceListingModalProps> = ({
                                             />
                                             {RoomPrice.Between1500And1999}
                                         </label>
-                                        <label className="">
+                                        <label className="flex items-center gap-2">
                                             <input
                                                 type="radio"
                                                 name="priceRange"
@@ -216,7 +216,7 @@ const SpaceListingModal: React.FC<SpaceListingModalProps> = ({
                                             />
                                             {RoomPrice.Between2000And2499}
                                         </label>
-                                        <label className="">
+                                        <label className="flex items-center gap-2">
                                             <input
                                                 type="radio"
                                                 name="priceRange"
@@ -226,7 +226,7 @@ const SpaceListingModal: React.FC<SpaceListingModalProps> = ({
                                             />
                                             {RoomPrice.Between2500And3000}
                                         </label>
-                                        <label className="">
+                                        <label className="flex items-center gap-2">
                                             <input
                                                 type="radio"
                                                 name="priceRange"
diff --git a/frontend/src/components/compound/Modal/UserListingModal.tsx b/frontend/src/components/compound/Modal/UserListingModal.tsx
index 8eab5bc..8152358 100644
--- a/frontend/src/components/compound/Modal/UserListingModal.tsx
+++ b/frontend/src/components/compound/Modal/UserListingModal.tsx
@@ -70,10 +70,10 @@ const UserListingModal: React.FC<UserListingModalProps> = ({
                     className="fixed inset-0 bg-white bg-opacity-85 transition-opacity data-[closed]:opacity-0 data-[enter]:duration-300 data-[leave]:duration-200 data-[enter]:ease-out data-[leave]:ease-in"
                 />
                 <div className="fixed inset-0 z-10 w-screen overflow-y-auto ">
-                    <div className="flex items-end justify-center p-4 text-center sm:items-center sm:p-0 h-screen">
+                    <div className="flex items-center justify-center p-4 text-center sm:items-center sm:p-0 h-screen">
                         <DialogPanel
                             transition
-                            className="border border-gray-200 h-4/6 relative transform overflow-y-auto rounded-lg bg-white text-left shadow-xl transition-all data-[closed]:translate-y-4 data-[closed]:opacity-0 data-[enter]:duration-300 data-[leave]:duration-200 data-[enter]:ease-out data-[leave]:ease-in sm:my-8 sm:w-full sm:max-w-lg data-[closed]:sm:translate-y-0 data-[closed]:sm:scale-95 p-8"
+                            className="h-4/6 relative transform overflow-y-auto rounded-lg bg-white text-left shadow-xl transition-all data-[closed]:translate-y-4 data-[closed]:opacity-0 data-[enter]:duration-300 data-[leave]:duration-200 data-[enter]:ease-out data-[leave]:ease-in sm:my-8 sm:w-full sm:max-w-lg data-[closed]:sm:translate-y-0 data-[closed]:sm:scale-95 p-8 border border-gray-200"
                         >
                             <form onSubmit={handleSubmit} className="flex flex-col text-xs">
                                 <div className="flex flex-col justify-center items-center ">
@@ -96,43 +96,46 @@ const UserListingModal: React.FC<UserListingModalProps> = ({
                                 </section>
                                 <section>
                                     <span>What type of housing do you want?</span>
-                                    <div className="mb-4 flex flex-col gap-2 mt-2">
-                                        <label>
+                                    <div className="mb-4 flex flex-col gap-2 mt-2 ">
+                                        <label className="flex flex-row">
                                             <input
                                                 type="radio"
                                                 name="leaselength"
                                                 value={LeaseLength.OneYear}
                                                 checked={formData.leaselength === LeaseLength.OneYear}
                                                 onChange={handleChange}
+                                                className="mr-2"
                                             />
-                                            {LeaseLength.OneYear}
+                                            <span >{LeaseLength.OneYear}</span>
                                         </label>
-                                        <label className="">
+                                        <label className="flex flex-row">
                                             <input
                                                 type="radio"
                                                 name="leaselength"
                                                 value={LeaseLength.ShortTerm}
                                                 checked={formData.leaselength === LeaseLength.ShortTerm}
                                                 onChange={handleChange}
+                                                className="mr-2"
                                             />
-                                            {LeaseLength.ShortTerm}
+                                            <span>{LeaseLength.ShortTerm}</span>
                                         </label>
                                     </div>
                                 </section>
                                 <section>
                                     <span>When do you want to move in?</span>
                                     <div className="mb-4 flex flex-col gap-2 mt-2">
-                                        <label>
+                                        <label className="flex flex-row">
                                             <input
                                                 name="moveInTime"
                                                 type="radio"
                                                 value={MovingTimeline.ASAP}
                                                 checked={formData.moveInTime === MovingTimeline.ASAP}
                                                 onChange={handleChange}
+                                                className="mr-2"
                                             />
                                             {MovingTimeline.ASAP}
                                         </label>
-                                        <label className="">
+                                        <label className="flex flex-row">
                                             <input
                                                 name="moveInTime"
                                                 type="radio"
@@ -141,10 +144,11 @@ const UserListingModal: React.FC<UserListingModalProps> = ({
                                                     formData.moveInTime === MovingTimeline.lessthan3
                                                 }
                                                 onChange={handleChange}
+                                                className="mr-2"
                                             />
                                             {MovingTimeline.lessthan3}
                                         </label>
-                                        <label className="">
+                                        <label className="flex flex-row">
                                             <input
                                                 name="moveInTime"
                                                 type="radio"
@@ -153,6 +157,7 @@ const UserListingModal: React.FC<UserListingModalProps> = ({
                                                     formData.moveInTime === MovingTimeline.threeplus
                                                 }
                                                 onChange={handleChange}
+                                                className="mr-2"
                                             />
                                             {MovingTimeline.threeplus}
                                         </label>
@@ -161,7 +166,7 @@ const UserListingModal: React.FC<UserListingModalProps> = ({
                                 <section>
                                     <span>How many housemates do you want to live with?</span>
                                     <div className="mb-4 flex flex-col gap-2 mt-2">
-                                        <label>
+                                        <label className="flex flex-row">
                                             <input
                                                 name="housematesCount"
                                                 type="radio"
@@ -170,10 +175,11 @@ const UserListingModal: React.FC<UserListingModalProps> = ({
                                                     formData.housematesCount === RoommateCount.onetwo
                                                 }
                                                 onChange={handleChange}
+                                                className="mr-2"
                                             />
                                             {RoommateCount.onetwo}
                                         </label>
-                                        <label className="">
+                                        <label className="flex flex-row">
                                             <input
                                                 name="housematesCount"
                                                 type="radio"
@@ -182,10 +188,11 @@ const UserListingModal: React.FC<UserListingModalProps> = ({
                                                     formData.housematesCount === RoommateCount.threefive
                                                 }
                                                 onChange={handleChange}
+                                                className="mr-2"
                                             />
                                             {RoommateCount.threefive}
                                         </label>
-                                        <label className="">
+                                        <label className="flex flex-row">
                                             <input
                                                 name="housematesCount"
                                                 type="radio"
@@ -194,10 +201,11 @@ const UserListingModal: React.FC<UserListingModalProps> = ({
                                                     formData.housematesCount === RoommateCount.sixtwelve
                                                 }
                                                 onChange={handleChange}
+                                                className="mr-2"
                                             />
                                             {RoommateCount.sixtwelve}
                                         </label>
-                                        <label className="">
+                                        <label className="flex flex-row">
                                             <input
                                                 name="housematesCount"
                                                 type="radio"
@@ -206,6 +214,7 @@ const UserListingModal: React.FC<UserListingModalProps> = ({
                                                     formData.housematesCount === RoommateCount.twelveplus
                                                 }
                                                 onChange={handleChange}
+                                                className="mr-2"
                                             />
                                             {RoommateCount.twelveplus}
                                         </label>
@@ -219,7 +228,7 @@ const UserListingModal: React.FC<UserListingModalProps> = ({
                                             name="website"
                                             value={formData.website || ""}
                                             onChange={handleChange}
-                                            className="border p-2 rounded mb-4 w-full text-xs"
+                                            className="border p-2 rounded mb-4 w-full text-xs mt-2"
                                             placeholder="gwern.net"
                                         />
                                     </div>
@@ -232,7 +241,7 @@ const UserListingModal: React.FC<UserListingModalProps> = ({
                                             name="phone"
                                             value={formData.phone || ""}
                                             onChange={handleChange}
-                                            className="border p-2 rounded mb-4 w-full text-xs"
+                                            className="border p-2 rounded mb-4 w-full text-xs mt-2"
                                             placeholder="123-456-7890"
                                         />
                                     </div>
@@ -245,7 +254,7 @@ const UserListingModal: React.FC<UserListingModalProps> = ({
                                             name="email"
                                             value={formData.email || ""}
                                             onChange={handleChange}
-                                            className="border p-2 rounded mb-4 w-full text-xs"
+                                            className="border p-2 rounded mb-4 w-full text-xs mt-2"
                                             placeholder="example@example.com"
                                         />
                                     </div>
diff --git a/frontend/src/components/compound/NavBar/NavBar.tsx b/frontend/src/components/compound/NavBar/NavBar.tsx
index e9b36a2..2032fd6 100644
--- a/frontend/src/components/compound/NavBar/NavBar.tsx
+++ b/frontend/src/components/compound/NavBar/NavBar.tsx
@@ -13,8 +13,8 @@ export default function NavBar() {
 
   const getLinkClass = (path: string) => {
     return location.pathname === path
-      ? "px-4 py-2 text-[#1d462f] bg-[#e7e9d8] border border-[#1d462f] rounded-md" // Active link style
-      : "px-4 py-2 text-[#1d462f] bg-transparent border border-[#1d462f] rounded-md hover:bg-[#e7e9d8]"; // Inactive link style
+      ? "text-[#1d462f] bg-[#e7e9d8] border border-[#1d462f] rounded-md px-2 py-1 sm:px-4 sm:py-2" // Active link style
+      : "text-[#1d462f] bg-transparent border border-[#1d462f] rounded-md hover:bg-[#e7e9d8] px-2 py-1 sm:px-4 sm:py-2"; // Inactive link style
   };
 
   return (

From a7edcaa2e06cf2c3adb80088ffdff7f01da6d580 Mon Sep 17 00:00:00 2001
From: Iyana <114933494+yayakixtenet@users.noreply.github.com>
Date: Fri, 23 Aug 2024 15:23:56 -0400
Subject: [PATCH 3/3] style homepage banner

---
 frontend/src/components/pages/UnprotectedHomepage.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/pages/UnprotectedHomepage.tsx b/frontend/src/components/pages/UnprotectedHomepage.tsx
index 9256c6a..106462a 100644
--- a/frontend/src/components/pages/UnprotectedHomepage.tsx
+++ b/frontend/src/components/pages/UnprotectedHomepage.tsx
@@ -21,13 +21,13 @@ const UnprotectedHomepage = () => {
                 <h1 className=" text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-center flex flex-col w-4/5 lg:w-3/4 xl:w-3/5">
                     <span >Find sublets, housemates, and coliving communities in the NYC Fractal Scene</span>
                 </h1>
-                <span className="text-center text-black text-md sm:text-lg lg:text-xl">A NY housing directory filled with people and houses we love</span>
+                <span className="text-center text-black text-md sm:text-lg lg:text-xl p-1">A NY housing directory filled with people and houses we love</span>
                 {/* <button onClick={() => navigate("/login/apply")} className="bg-white border-black border-[3px] text-black hover:bg-black/50 hover:text-white font-bold px-12 py-3 rounded-xl text-xl">Apply</button> */}
                 <span className="text-center text-gray-400 text-md sm:text-lg lg:text-xl">
                     <SignInButton />
                 </span>
 
-                <div className="flex text-center gap-2 md:gap-4 border border-gray-300 rounded-3xl p-4 md:mt-8 text-sm">
+                <div className="flex text-center gap-2 md:gap-4 border border-black rounded-3xl p-4 md:mt-8 text-sm m-4 bg-black text-white ">
                     <span><span className="text-white font-bold">1412</span> members of DirectorySF</span>
                     <span><span className="text-white font-bold">108</span> listings this month 🌈</span>
                 </div>