refactor components and css b00tc4mp#407

staff/belen-ivars/project/app/src/apunts.css

@@ -0,0 +1,54 @@
+EXEMPLE LLISTA TAILWIND CSS
+
+<ul role="list" class="marker:text-sky-400 list-disc pl-5 space-y-3 text-slate-500">
+  <li>5 cups chopped Porcini mushrooms</li>
+  <li>1/2 cup of olive oil</li>
+  <li>3lb of celery</li>
+</ul>
+
+EXEMPLE INPUT BÚSQUEDA
+<label class="relative block">
+  <span class="sr-only">Search</span>
+  <span class="absolute inset-y-0 left-0 flex items-center pl-2">
+    <svg class="h-5 w-5 fill-slate-300" viewBox="0 0 20 20"><!-- ... --></svg>
+  </span>
+  <input class="placeholder:italic placeholder:text-slate-400 block bg-white w-full border border-slate-300 rounded-md py-2 pl-9 pr-3 shadow-sm focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1 sm:text-sm" placeholder="Search for anything..." type="text" name="search"/>
+</label>
+
+ECEMPLE PRIMERA LLETRA GRAN 
+
+<p class="first-line:uppercase first-line:tracking-widest
+  first-letter:text-7xl first-letter:font-bold first-letter:text-slate-900
+  first-letter:mr-3 first-letter:float-left
+">
+  Well, let me tell you something, funny boy. Y'know that little stamp, the one
+  that says "New York Public Library"? Well that may not mean anything to you,
+  but that means a lot to me. One whole hell of a lot.
+</p>
+
+EXEMPLE AMPLIAR TEXT
+<div class="max-w-lg mx-auto p-8">
+  <details class="open:bg-white dark:open:bg-slate-900 open:ring-1 open:ring-black/5 dark:open:ring-white/10 open:shadow-lg p-6 rounded-lg" open>
+    <summary class="text-sm leading-6 text-slate-900 dark:text-white font-semibold select-none">
+      Why do they call it Ovaltine?
+    </summary>
+    <div class="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-400">
+      <p>The mug is round. The jar is round. They should call it Roundtine.</p>
+    </div>
+  </details>
+</div>
+
+EXEMPLE TRIAR OPCIONS
+
+<fieldset>
+  <legend>Published status</legend>
+
+  <input id="draft" class="peer/draft" type="radio" name="status" checked />
+  <label for="draft" class="peer-checked/draft:text-sky-500">Draft</label>
+
+  <input id="published" class="peer/published" type="radio" name="status" />
+  <label for="published" class="peer-checked/published:text-sky-500">Published</label>
+
+  <div class="hidden peer-checked/draft:block">Drafts are only visible to administrators.</div>
+  <div class="hidden peer-checked/published:block">Your post will be publicly visible on your site.</div>
+</fieldset>

staff/belen-ivars/project/app/src/components/FavsButton.jsx

@@ -13,7 +13,7 @@ export default function Favs() {
 
 	return <div>
 
-		<Button onClick={handleFavRecipesClick}>💛</Button>
+		<Button className="button-header" onClick={handleFavRecipesClick}>💛</Button>
 
 
 	</div>

staff/belen-ivars/project/app/src/components/FullHeader.jsx

@@ -1,6 +1,6 @@
 import FavsButton from "./FavsButton"
 import TopProfileImage from "./TopProfileImage"
-import ProfileButton from "./ProfileButton"
+import LogoutButton from "./LogoutButton"
 import Search from "./Search"
 
 export default function FullHeader({ name, email }) {
@@ -9,7 +9,7 @@ export default function FullHeader({ name, email }) {
 		<TopProfileImage email={email} name={name} />
 
 		<FavsButton />
-		<ProfileButton />
+		<LogoutButton />
 
 		{/* <Search /> */}
 

staff/belen-ivars/project/app/src/components/ProfileButton.jsx → staff/belen-ivars/project/app/src/components/LogoutButton.jsx

@@ -2,7 +2,7 @@ import { Button } from "../library"
 import logic from "../logic"
 import { useNavigate } from 'react-router-dom'
 
-function ProfileButton() {
+function LogoutButton() {
 	const navigate = useNavigate()
 
 	const handleLogoutClick = () => {
@@ -18,10 +18,10 @@ function ProfileButton() {
 
 	return <>
 
-		<Button onClick={handleLogoutClick}>Logout</Button>
+		<Button className="button-header" onClick={handleLogoutClick}>Logout</Button>
 	</>
 }
 
 
 
-export default ProfileButton
+export default LogoutButton

staff/belen-ivars/project/app/src/components/Recipe.jsx

@@ -54,14 +54,16 @@ function Recipe(props) {
 
 	return <article className="recipe">
 
-		<h2> {props.recipe.title}</h2>
-		<img className="recipe-image" src={props.recipe.image} />
-		<p>{props.recipe.description}</p>
+		<Container className="container-recipe">
+			<h2 className="recipe-title"> {props.recipe.title}</h2>
+			<img className="recipe-image" src={props.recipe.image} />
+			<p>{props.recipe.description}</p>
+		</Container>
 
-		{/* Ací estic configurant el botó d'edició*/}
-
-		{session.sessionUserId === props.recipe.author && view === null && <Button onClick={handleDeleteClick}>🗑️</Button>}
-		{session.sessionUserId === props.recipe.author && view === null && <Button className="edit-recipe" onClick={() => setView('edit')}>Edit</Button>}
+		<div>
+			{session.sessionUserId === props.recipe.author && view === null && <Button onClick={handleDeleteClick}>🗑️</Button>}
+			{session.sessionUserId === props.recipe.author && view === null && <Button className="edit-recipe" onClick={() => setView('edit')}>Edit</Button>}
+		</div>
 
 		{view === 'edit' && <Button onClick={() => setView(null)}>Cancel</Button>}
 
@@ -73,9 +75,6 @@ function Recipe(props) {
 
 		</Form>}
 
-
-
-
 	</article>
 }
 

staff/belen-ivars/project/app/src/components/Search.jsx

@@ -1,15 +1,9 @@
 import SearchForm from "./SearchForm"
-import DietFilter from "./DietFilter"
-import ComplexityLevelFilter from "./ComplexityLevelFilter"
-import TimeFilter from "./TimeFilter"
 import MethodFilter from "./MethodFilter"
 
 export default function Search(props) {
 	return <>
 		<SearchForm />
-		<DietFilter />
-		<ComplexityLevelFilter />
-		<TimeFilter />
 		<MethodFilter />
 	</>
 }

staff/belen-ivars/project/app/src/components/SearchForm.jsx

@@ -12,9 +12,10 @@ export default function Searcher(props) {
 	}
 
 	return <Form onSubmit={handleSubmit}>
-		<Field id="search-elements" placeholder="Search..." value={term} />
+		<Field id="search-elements" placeholder="Search..." className="search" value={term} />
 
 		<Button type="submit">🔍</Button>
 
 	</Form>
-}
+}
+

staff/belen-ivars/project/app/src/components/SlimHeader.jsx

@@ -1,11 +1,11 @@
 import FavsButton from "./FavsButton"
-import ProfileButton from "./ProfileButton"
+import LogoutButton from "./LogoutButton"
 
 export default function FullHeader({ name, email }) {
 	return <>
 		<FavsButton />
 
-		<ProfileButton />
+		<LogoutButton />
 
 	</>
 }

staff/belen-ivars/project/app/src/components/TopProfileImage.jsx

@@ -10,8 +10,9 @@ export default function TopProfileImage({ name, email }) {
 		navigate('/profile')
 	}
 
-	return <Link onClick={handleProfileClick}>
+	return <Link className="link-profile" onClick={handleProfileClick}>
 		<Gravatar email={email} /> {name}
 	</Link>
+
 }
 

staff/belen-ivars/project/app/src/components/index.js

@@ -1,5 +1,5 @@
 import Recipes from './Recipes'
-import ProfileButton from './ProfileButton'
+import LogoutButton from './LogoutButton'
 import NewRecipeForm from './NewRecipeForm'
 import ComplexityLevelFilter from './ComplexityLevelFilter'
 import DietFilter from './DietFilter'
@@ -13,7 +13,7 @@ import Recipe from './Recipe'
 
 export {
 	Recipes,
-	ProfileButton,
+	LogoutButton,
 	NewRecipeForm,
 	ComplexityLevelFilter,
 	DietFilter,

staff/belen-ivars/project/app/src/index.css

@@ -1,3 +1,11 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+
 .form {
   @apply flex flex-col max-w-[240px] gap-[5px];
 }
@@ -14,12 +22,28 @@
   @apply border-[1px] border-solid border-black p-[5px] bg-white rounded-[5px] font-bold cursor-[pointer];
 }
 
-.button-menu {
-  @apply self-start;
+.button-header {
+  @apply border-[1px] border-solid border-black p-[5px] rounded-[10px] font-bold cursor-[pointer] bg-amber-100 hover:bg-amber-200 active:bg-amber-300 focus:outline-none focus:ring focus:ring-orange-700;
+}
+
+.button-new-recipe {
+  @apply border-[1px] border-solid border-black p-[5px] bg-white rounded-full font-bold size-20 text-4xl justify-items-center cursor-[pointer] focus:ring;
+}
+
+.button-search {
+  @apply border-[1px] border-solid border-black p-[5px] bg-white rounded-full font-bold size-20 text-4xl justify-items-center cursor-[pointer]  ;
 }
 
 .link {
-  @apply decoration-[none] text-black visited:text-black before:content-["[_"] after:content-["_]"];
+  @apply decoration-[none] text-black visited:text-black;
+}
+
+.link-profile {
+  @apply decoration-[none] flex flex-col items-center text-black visited:text-black text-base hover:text-xl;
+}
+
+.link-header {
+  @apply text-black text-base hover:text-xl overline decoration-wavy decoration-sky-500 ;
 }
 
 .container {
@@ -30,41 +54,50 @@
   @apply flex-row justify-center;
 }
 
+.container-recipe {
+@apply text-balance;
+}
+
 /* custom */
 
 .header {
 
-  @apply flex items-center justify-between p-[.5rem] bg-white hover:bg-indigo-100 border-b-[.3rem] border-black;
+  @apply flex items-center justify-around p-[.5rem] bg-white border-b-[.3rem] border-black;
 }
 
-.new-post {
-  @apply p-[none] bg-purple-100;
+.new-recipe {
+  @apply p-[none];
 }
 
-.post {
-  @apply flex flex-col items-center m-[.7rem] border-[.3rem] border-solid border-black p-[1rem] bg-[#F2EDF8] max-w-[350px] max-h-[350px];
+.recipe {
+  @apply flex flex-col items-center m-[.7rem] shadow-2xl p-[1rem] bg-[#F2EDF8] max-w-[600px] max-h-[600px];
 }
 
-.post-image {
-  @apply max-w-[220px] max-h-[220px] border-double border-[1rem] border-red-500/25
+.recipe-image {
+  @apply max-w-[220px] max-h-[220px] bg-white border-double border-[1rem] border-red-500/25 shadow-lg float-left;
 }
 
-.post-actions {
-  @apply flex justify-between gap-[.5rem]
+.recipe-actions {
+  @apply flex justify-between gap-[.5rem];
 }
 
-.posts {
-  @apply mb-[3rem] md:grid md:grid-cols-2 lg:grid-cols-3 bg-gradient-to-r from-[#8C1B8C] to-[#26C2C7];
+.recipe-title {
+  @apply font-bold text-2xl;
 }
 
-.footer {
-  @apply bg-white flex flex-col justify-center items-center fixed bottom-0 w-full min-h-[3rem] border-t-[.3rem] border-solid border-black
+.recipes {
+  @apply flex flex-col items-center mb-[3rem] md:grid md:grid-cols-2 lg:grid-cols-3 bg-gradient-to-r from-zinc-400/50 to-rose-700/50;
 }
 
-.footer-menu {
-  @apply flex flex-row justify-around w-full
+.search {
+  @apply placeholder:italic placeholder:text-slate-400 block bg-white w-full border border-slate-300 rounded-md py-2 pl-9 pr-3 shadow-sm focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1 ;
 }
 
+.footer {
+  @apply bg-transparent flex items-center justify-between fixed bottom-0 w-full min-h-[3rem] ;
+}
+
+}
 
 .Feedback {
 @apply fixed top-0 w-full box-border;
@@ -87,5 +120,5 @@
 }
 
 .Feedback--fatal {
-@apply bg-[red] text-white;
-}
+@apply bg-[red] text-black;
+}

staff/belen-ivars/project/app/src/library/Button.jsx

@@ -1,5 +1,5 @@
-function Button({ type, onClick, children }) {
-	return <button className="button" type={type} onClick={onClick}>{children}</button>
+function Button({ type, onClick, children, className }) {
+	return <button className={`button ${className ? className : ''}`} type={type} onClick={onClick}>{children}</button>
 }
 
 export default Button

staff/belen-ivars/project/app/src/library/Link.jsx

@@ -1,5 +1,5 @@
 function Link(props) {
-	return <a className="link" href="" onClick={props.onClick}>{props.children}</a>
+	return <a className={`link ${props.className ? props.className : ''}`} href="" onClick={props.onClick}>{props.children}</a>
 }
 
 export default Link