Feature/responsive navbar favorite

components/CardAlbum/index.jsx

@@ -1,15 +1,20 @@
 import styles from "./styles.module.scss";
 import Image from "next/image";
 
+
 import Link from "next/link";
 
 export default function CardAlbum({ allData, inputSearchValue }) {
+
+
+
   return (
 
     <div className={styles.all}>
       {allData &&
         allData
-          ?.filter(
+        .filter((el)=> el.users.includes(parseInt(localStorage.getItem("userId"))))
+          .filter(
             (el) =>
               el?.title
                 .toLowerCase()
@@ -24,22 +29,25 @@ export default function CardAlbum({ allData, inputSearchValue }) {
 
           .map((el) => (
             <div className={styles.CardAlbum} key={el.id}>
-
-              <Link href= {el.iam === 'album' ? `album/${el.id}` : `playlist/${el.id}`}  key={el.id}>
-                <a>
-                  <div className={styles.img_container}>
-                    <Image src={el?.cover} alt={el?.title} width={140}
-                        height={140}
-                        layout="responsive"/>
-                  </div>
-                  <div className={styles.info_container}>
-                    <h2>{el?.title}</h2>
-                    {/* <p className={styles.year}>{el?.year}</p> */}
-                  </div>
-                </a>
-              </Link>
+
+              <div className={styles.CardAlbum__container}>
+                <Link href= {el.iam === 'album' ? `album/${el.id}` : `playlist/${el.id}`}  key={el.id}>
+                  <a>
+                    <div className={styles.CardAlbum__container__img}>
+                      <Image src={el?.cover} alt={el?.title} width={140}
+                          height={140}
+                          />
+                    </div>
+                    <div className={styles.CardAlbum__container__info}>
+                      <h2>{el?.title}</h2>
+                      <p className={styles.year}>{el?.artist}</p>
+                    </div>
+                  </a>
+                </Link>
+              </div>   
+
             </div>
           ))}
     </div>
   );
-}
+}

components/CardAlbum/styles.module.scss

@@ -3,63 +3,63 @@
 .all {
         display: flex;
         flex-wrap: wrap;
-        gap: 10px;
-
-        .CardAlbum{
-        // border:1px solid rgba(0, 0, 0, 0.080);
-        // background-image: linear-gradient( to top right, red , yellow);        width: 170px;
-        border-radius: 10px;
-        padding: 1rem;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        transition: 0.2s ease-in;
-
-        width: 32%;
-
-
 
-        .img_container {
-        width: 140px;
-        height: 140px;
 
-        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.346);
-        border-radius: 10px;
+        .CardAlbum {
+            width: 20%;
+            padding: 10px;
+            margin-bottom: 3px;
+            border-radius: 10px;
+            transition: 0.2s ease-in;
 
-
 
-            img {
-                width: 100%;
-                height: 100%;
+            &__container {
                 border-radius: 10px;
+                padding: 1rem;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                height: 100%;
 
-            }
 
-        }
+                    &__img {
+                        width: 100%;
+                        height: auto;
+
+                        img {
+                            border-radius: 10px;
+                        }
+                    }
 
-        .info_container {
-            display: flex;
-            flex-direction: column;
-            width: 100%;
-            align-items: left;
-            align-content: flex-start;
-            text-align: start;
+
+                    &__info h2 {
 
-            h2 {
-                font-size: 1rem;
-                margin: 0.5rem 0 0.5rem 0;
+                        font-size: 1rem;
+                        margin: 0.5rem 0 0.5rem 0;
+
+                    }
+
+            }
+
+            @media all and (max-width: 991px) {
+                width: 33%;
             }
 
-            p {
-                margin: 0;
-                font-size: 0.9rem;
+            @media all and (max-width: 767px) {
+                width: 50%;
             }
+
+
         }
 
-    }
+
+
 
     .CardAlbum:hover  {
             transform: translateY(-5px);
             box-shadow: 0px 10px 20px 2px rgba(0, 0, 0, 0.20);
-          }    
+          } 
+
+
 }

components/FilterButtonAlbum/styles.module.scss

@@ -3,13 +3,16 @@
 .btn {
     // box-shadow: inset -5px -5px 9px rgba(255,255,255,0.45), inset 5px 5px 9px rgba(94,104,121,0.3);    background-color: rgb(226, 224, 222);
     border-radius: 20px;
-    height: 40px;
-    width: 15%;
+    padding: 10px 30px;
     text-align: center;
     background-color: transparent;
     border: 1.5px solid rgb(223, 223, 223);
     margin: 20px 8px 40px 5px;
-    cursor: pointer;   
+    cursor: pointer;
+
+    @media all and (max-width: 767px) {
+        padding: 5px 15px;
+    } 
 }
 
 

components/FilterButtonPlaylist/styles.module.scss

@@ -3,13 +3,16 @@
 .btn {
     // box-shadow: inset -5px -5px 9px rgba(255,255,255,0.45), inset 5px 5px 9px rgba(94,104,121,0.3);    background-color: rgb(226, 224, 222);
     border-radius: 20px;
-    height: 40px;
-    width: 15%;
+    padding: 10px 30px;
     text-align: center;
     background-color: transparent;
     border: 1.5px solid rgb(223, 223, 223);
     margin: 20px 8px 40px 5px;
-    cursor: pointer;  
+    cursor: pointer;
+
+    @media all and (max-width: 767px) {
+        padding: 5px 15px;
+    }
 }
 
 .selected {

components/InputLogin/index.jsx

@@ -18,7 +18,7 @@ const InputLogin = ({ setCredentials }) => {
   return (
 
       <form onSubmit={onSubmit} className={styles.form}>
-        <label for="email">Email</label>
+        <label htmlFor="email">Email</label>
         <input
           type="email"
           id="email"
@@ -27,7 +27,7 @@ const InputLogin = ({ setCredentials }) => {
           onChange={(e) => setInputMailValue(e.target.value)}
           required
         />
-        <label for="password">Password</label>
+        <label htmlFor="password">Password</label>
         <input
           type="password"
           id="password"

components/InputLogin/styles.module.scss

@@ -29,7 +29,7 @@
     input[type="email"],input[type="password"] {
         border-radius: 20px;
         height: 40px;
-
+        border: 1.5px solid rgb(223, 223, 223);
         background-color: transparent;
         font-family: 'Montserrat', sans-serif;
         padding-left: 1rem;

components/InputSearch/styles.module.scss

@@ -3,8 +3,12 @@
 .input_container {
 
     display: flex;
-    width: 100%;
+    max-width: 400px;
     justify-content: flex-start;
+
+    @media all and (max-width: 767px) {
+        max-width: 100%;
+    }
 
     input {
         border-radius: 20px 0 0 20px;
@@ -31,4 +35,7 @@
         color: $primary-color;
 
     }
+
+
+
 }

components/LayoutDefault/index.jsx

@@ -6,9 +6,8 @@ import ModalSignup from "../../components/ModalSignup";
 import {useState} from "react";
 import styles from "./styles.module.scss";
 
-const LayoutDefault = ({ children, credentials }) => {
+const LayoutDefault = ({ children }) => {
   function parloaLayout() {
-    console.log("sei in layout");
     setViewModalSignUp({
       visible: true,
     });
@@ -18,7 +17,7 @@ const LayoutDefault = ({ children, credentials }) => {
     visible: false,
   });
 
-  console.log('credenziali in layout default', credentials);
+
 
   return (
     <>
@@ -30,11 +29,14 @@ const LayoutDefault = ({ children, credentials }) => {
         <ModalSignup setViewModalSignUp={setViewModalSignUp} viewModalSignup={viewModalSignup} />
       </div>
 
-      <main className={styles.main}>{children}</main>
-
+      <main className={styles.main}>{children}
       <div className={styles.user}>
-        <UserLogged parloaLayout={parloaLayout} credentials={credentials}/>
+        <UserLogged parloaLayout={parloaLayout}/>
       </div>
+
+      </main>
+
+
 
       {/* <footer className={styles.footer}>
             <Footer />

components/LayoutDefault/styles.module.scss

@@ -24,8 +24,8 @@
 
   .user {
     position: fixed;
-    top: 0;
-    right: 0;
+    top: 20px;
+    right: 20px;
   }
 
 
@@ -46,6 +46,7 @@
         width: 100%;
         height: auto;
         padding: 10px 20px;
+        z-index: 1;
     }
 
     .main {

components/ModalSignup/index.jsx

@@ -1,40 +1,43 @@
 import { useState, useEffect } from "react";
 import styles from "./styles.module.scss";
-import { RiCloseCircleFill } from 'react-icons/ri';
+// import { RiCloseCircleFill } from 'react-icons/ri';
 // import { postUserCredentials } from '../../utils';
 import { useRouter } from "next/router";
 
 export default function ModalSignup({ viewModalSignup, setViewModalSignUp }) {
-
   const router = useRouter();
 
   const visible = viewModalSignup.visible || false;
 
   const classes = [styles.ModalSignup, visible ? styles.visible : ""];
 
-
-
   const closeModal = () => {
     setViewModalSignUp({
       visible: false,
-    })
-  }
+    });
+  };
 
   const signOut = () => {
-    // localStorage.clear();
-    localStorage.removeItem("token");
+    localStorage.clear();
+    // localStorage.removeItem("token");
 
-    router.push("/login")
-
+    router.push("/login");
   };
 
   return (
     <div className={classes.join(" ")}>
       <div className={styles.modal}>
-      <button className={styles.closemodal} onClick={()=> closeModal()}><RiCloseCircleFill/></button>
-        <p>Do you want to log out?</p>
-        <button onClick={signOut}>Yes</button>
+        <div className={styles.el}>
+          <p>Do you want to log out?</p>
+          <button className={styles.btn} onClick={signOut}>
+            Yes
+          </button>
+          <button className={styles.btn} onClick={() => closeModal()}>
+            {" "}
+            No{" "}
+          </button>
+        </div>
       </div>
     </div>
   );
-}
+}