fixed login btn

frontend/src/components/Home/UpcomingCarousel/Item.jsx

@@ -0,0 +1,64 @@
+
+import "../../../styles/UpcomingCarousel.scoped.scss";
+import { Link } from "react-router-dom";
+
+
+
+const Item = ({item,index }) => {
+
+
+  //convert date to 'Month Year' string..
+  let convertDate = (start_date) => {
+    let dateObj = new Date(start_date);
+
+    let month = dateObj.toLocaleString("en-US", { month: "long" });
+    let year = dateObj.getFullYear();
+
+    return `${month} ${year}`;
+  };
+
+    return (
+
+        <>
+
+              <Link
+                to="/detailspage"
+                state={{ id: item.anime_id, anime: true }}
+                key={item.anime_id}
+              >
+
+
+
+                <div
+                  className="item flex flex-col justify-start items-stretch "
+                  key={index}
+
+
+                >
+
+                  {/* image */}
+                  {/* to scale it well you need to put in <div> contaiener. remove width and height and put ' object-fit: contain;' and on <div> put 'overflow: hidden;'*/}
+                  <div className="item_div">
+                    <img src={item.image} alt={item.title} />
+                  </div>
+                  <div className="line"> </div>
+
+                  <div className="inner flex flex-col gap-2 justify-start items-start ml-2 mt-2 md:ml-4 md:mt-4">
+                    <h1>{item.title}</h1>
+                    <p>Season {item.seasons}</p>
+                  </div>
+
+                  <p className="release_date md:mt-16 mb-4 mt-4  md:mt-26 mb:mb-8 ml-2 md:ml-4  ">
+                    {convertDate(item.start_date)}{" "}
+                  </p>
+                </div>
+              </Link>
+
+        </>
+    )
+
+
+}
+
+
+export {Item}

frontend/src/components/Home/UpcomingCarousel.jsx → frontend/src/components/Home/UpcomingCarousel/UpcomingCarousel.jsx

@@ -1,12 +1,18 @@
-import "../../styles/UpcomingCarousel.scoped.scss";
-import { Link } from "react-router-dom";
+import "../../../styles/UpcomingCarousel.scoped.scss";
 import { useEffect } from "react";
+import { Link } from "react-router-dom";
 import ScrollCarousel from "scroll-carousel";
-import { anime_data } from "../../data";
+import { anime_data } from "../../../data";
+import { Item } from "./Item";
 
 var top10UpcomingAnime;
 
 export const UpcomingCarousel = () => {
+
+
+
+
+
   useEffect(() => {
     let main = document.querySelector(".main");
 
@@ -21,16 +27,6 @@ export const UpcomingCarousel = () => {
     });
   }, []);
 
-  //convert date to 'Month Year' string..
-  let convertDate = (start_date) => {
-    let dateObj = new Date(start_date);
-
-    let month = dateObj.toLocaleString("en-US", { month: "long" });
-    let year = dateObj.getFullYear();
-
-    return `${month} ${year}`;
-  };
-
   // Sort the anime_data array based on start_date in descending order
   // this way, we get most recent by start_date, elements. and put them in other list, which shows latest 10 by start_date
   const sortedAnimeData = anime_data.sort((a, b) => {
@@ -42,11 +38,14 @@ export const UpcomingCarousel = () => {
   // this way, we get most recent by start_date, elements. and put them in other list, which shows latest 10 by start_date
   top10UpcomingAnime = sortedAnimeData.slice(0, 10);
 
+  var item = {};
+
   return (
     <>
       <div className="line"> </div>
 
       <div className="main flex flex-col 	">
+
         {/* this is just container for showing title and then carousel */}
         <div className="small_header ml-4 md:ml-6 lg:ml-10  mt-6 ">
           {/* check index.css, for global use, vertical rectangle.. */}
@@ -56,54 +55,27 @@ export const UpcomingCarousel = () => {
             <p>Season - fall 2023</p>
           </div>
         </div>
-        <div className="carousel-container">
-          {/* container for items*/}
-
-          <div className="flex  flex-row gap-3 justify-center mt-2">
-            {/* show items (render from object) dynamically render items */}
-
-            {/*only prop that will be passed is 'anime_id'. because on DetailedPage, it will be fetched again from database for all info. And 'anime_id' because this if for 'upcoming animes'. it can be manga as well .. just say to include it if needed */}
 
 
+
 
-
+        {/* carousel container (for carousel) */}
+        <div className="carousel-container">
 
+
+          {/* container for items*/}
+          <div className="flex  flex-row gap-3 justify-center mt-2">
             {top10UpcomingAnime.map((item, index) => (
-              <Link
-                to="/detailspage"
-                state={{ id: item.anime_id, anime: true }}
-                key={item.anime_id}
-              >
-
-
-
-                <div
-                  className="item flex flex-col justify-start items-stretch "
-                  key={index}
-
-
-                >
-
-                  {/* image */}
-                  {/* to scale it well you need to put in <div> contaiener. remove width and height and put ' object-fit: contain;' and on <div> put 'overflow: hidden;'*/}
-                  <div className="item_div">
-                    <img src={item.image} alt={item.title} />
-                  </div>
-                  <div className="line"> </div>
-
-                  <div className="inner flex flex-col gap-2 justify-start items-start ml-2 mt-2 md:ml-4 md:mt-4">
-                    <h1>{item.title}</h1>
-                    <p>Season {item.seasons}</p>
-                  </div>
-
-                  <p className="release_date md:mt-16 mb-4 mt-4  md:mt-26 mb:mb-8 ml-2 md:ml-4  ">
-                    {convertDate(item.start_date)}{" "}
-                  </p>
-                </div>
-              </Link>
+              <Item item={item} index={index} />
             ))}
           </div>
+
+
+
         </div>
+
+
+
       </div>
     </>
   );

frontend/src/pages/Home.jsx

@@ -1,5 +1,5 @@
 import { PopularCarousel } from "../components/Home/PopularCarousel/PopularCarousel";
-import { UpcomingCarousel } from "../components/Home/UpcomingCarousel";
+import { UpcomingCarousel } from "../components/Home/UpcomingCarousel/UpcomingCarousel";
 import { BrowseHome } from "../components/Home/BrowseHome/BrowseHome";
 
 const Home = () => {

frontend/src/pages/Login.jsx

@@ -58,7 +58,10 @@ const Login = () => {
       <div className="container">
         <div className="forms-container">
           <div className="signin-signup">
+
+
             <form action="#" className="sign-in-form" onSubmit={loginUser}>
+
               <h2 className="title">Sign in</h2>
               <div className="input-field">
                 <i className="fas fa-user"></i>
@@ -81,7 +84,7 @@ const Login = () => {
                 />
               </div>
 
-              <Button sx={{color: "white"}} type="submit" className="btn solid"  variant="text" value="Login" onClick={loginUser} >Login</Button>
+              <Button sx={{color: "white"}} type="submit" className="btn solid pc"  variant="text" value="Login"  >Login</Button>
 
 
               <p className="social-text">Or Sign in with social platforms</p>
@@ -132,7 +135,14 @@ const Login = () => {
                   autoComplete="new-password"
                 />
               </div>
-              <Button sx={{color: "white"}} type="submit" className="btn"  variant="text" value="Sign up" >Sign up</Button>
+
+
+
+
+              <Button  sx={{color: "white"}} type="submit" className="btn pc"  variant="text" value="Sign up" >Sign up</Button>
+
+
+
               <p className="social-text">Or Sign up with social platforms</p>
               <div className="social-media">
                 <a href="#" className="social-icon">

frontend/src/styles/login.scoped.scss

@@ -428,4 +428,5 @@ form.sign-in-form {
     bottom: 28%;
     left: 50%;
   }
-}
+}
+