Merge pull request #196 from agiledev-students-fall2023/user_story_#80

Minor changes on layout

.gitignore

@@ -40,7 +40,7 @@ Thumbs.db
 #############################
 
 # Lock file so we don't bloat the git log stats
-package-lock.json
+# package-lock.json
 
 # Logs
 logs

back-end/.env

@@ -1,9 +1,11 @@
 SESSION_SECRET='myKey123!'
 JWT_SECRET='myKey123!'
-CLIENT_URL="http://143.198.14.199:5173/"
+CLIENT_URL="http://192.168.1.159:5173/"
+
 
 MONGODB_DATA_API = "https://us-east-1.aws.data.mongodb-api.com/app/data-fzvrf/endpoint/data/v1"
 MONGODB_API_KEY = "fxgnbKaz0PmfQVDJUG631Qz98KqkisGoXvBGSjziqS6faj9oNBx96MUon32t8gDZ"
+MONGODB_URI = "mongodb+srv://yz5835:[email protected]/bakerdb"
 
 EMAIL_USER='[email protected]'
 EMAIL_PASS='Goodoldmap123'

back-end/src/app.mjs

@@ -49,11 +49,11 @@ app.use(cors(corsOptions));
 
 console.log(process.env.CLIENT_URL);
 // Connect to MongoDB
-// mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true })
-//   .then(() => {
-//     console.log('Connected to MongoDB...');
-//   })
-//   .catch(err => console.error('Could not connect to MongoDB...', err));
+mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true })
+  .then(() => {
+    console.log('Connected to MongoDB...');
+  })
+  .catch(err => console.error('Could not connect to MongoDB...', err));
 
 // session to auto-save user data (like id) when they login
 app.use(session({

front-end/src/pages/Authenticate/Login.jsx

@@ -107,7 +107,7 @@ const Login = () => {
             background-size: cover;
             background-position: center;
             background-repeat: no-repeat;
-            filter: blur(2px); /* Apply the blur effect */
+            filter: blur(0px); /* Apply the blur effect */
             z-index: -1; /* Ensure it's behind the content */
           }
         `}

front-end/src/pages/Authenticate/Register.jsx

@@ -47,7 +47,7 @@ const Register = () => {
             background-size: cover;
             background-position: center;
             background-repeat: no-repeat;
-            filter: blur(2px); /* Apply the blur effect */
+            filter: blur(0px); /* Apply the blur effect */
             z-index: -1; /* Ensure it's behind the content */
           }
         `}

front-end/src/pages/FavoriteList/FavoriteList.jsx

@@ -42,12 +42,12 @@ const FavoriteList = () => {
   return (
     <>
       <NavBar>
-        <div className="w-full text-center">
-          <h2>My Favorite Arts</h2>
+        <div className="mx-auto text-center">
+          <h2>My Favorite Arts 🎨</h2>
         </div>
       </NavBar>
-      <div className="max-w-[30rem] w-[80%] mx-auto flex flex-col">
-        <div className="text-center space-x-8 my-3">
+      <div className="max-w-[30rem] w-[80%] mx-auto flex flex-col ">
+        <div className="text-center space-x-8 my-4">
           <button
             className="bg-white hover:bg-beige3 hover:text-white transition duration-300 ease-in-out px-4 py-2 rounded"
             onClick={() => sortArts("title")}>
@@ -60,15 +60,15 @@ const FavoriteList = () => {
           </button>
         </div>
 
-
-        <div className='mt-5 overflow-scroll p-8 flex-row'>
+      <div className="flex justify-center items-center min-h-screen">
+        <div className=' overflow-scroll p-5 flex-row grid grid-cols-1 gap-4'>
           {arts.map((art) => (
-            <div key={art._id} onClick={() => handleArtItemClick(art)}>
+            <div key={art._id} onClick={() => handleArtItemClick(art)} className="w-full md:w-1/2 lg:w-1/3">
               <ArtItem art={art}/>
             </div>
           ))}
         </div>
-
+      </div>
       </div>
     </>
 

front-end/src/pages/MainMap/MapLayout.jsx

@@ -46,8 +46,8 @@ const MapLayout = () => {
   return (
     <>
     <div className="h-[calc(100vh-6rem)] flex flex-col relative">
-      <div className="h-[12rem]">
-        <nav className="fixed py-[2vh] px-[10%] w-full bg-beige2 flex flex-col justify-between">
+      <div className="h-[14rem]">
+        <nav className="fixed py-[5vh] px-[10%] w-full bg-beige1 flex flex-col justify-between ">
 
           <div className="relative w-full my-1">
             <input className={`w-full py-2 pl-4 pr-10 text-left border-solid border-2 border-navyBlue rounded-full placeholder:text-left placeholder:text-gray-400 bg-white`}