Skip to content

Add Hover to Buttons and Animation #16

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wesleylwu merged 4 commits into from
Nov 20, 2025
Merged

Add Hover to Buttons and Animation #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ea4b64e
add text animation to landing
wesleylwu Nov 19, 2025
f65bc99
add cursor-pointer
wesleylwu Nov 19, 2025
55ce54c
small change
wesleylwu Nov 19, 2025
6dbe693
add animation to recipe, history, and inventory pages
wesleylwu Nov 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 79 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
"@supabase/supabase-js": "^2.76.1",
"@tanstack/react-query": "5.69.0",
"lucide-react": "0.484.0",
"motion": "^12.23.24",
"next": "15.2.4",
"react": "19.0.0",
"react-dom": "19.0.0"
Expand Down
20 changes: 15 additions & 5 deletions src/app/history/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
import { useEffect, useState } from "react";
import { getMealHistory, deleteMeal } from "@/database/api/meals";
import { MealWithRecipe } from "@/types/database";
import { motion } from "motion/react";

const HistoryPage = () => {
const [mealsList, setMealsList] = useState<MealWithRecipe[]>([]);
Expand Down Expand Up @@ -59,7 +60,13 @@ const HistoryPage = () => {
</p>
</div>
) : (
<div className="flex flex-col gap-4">
<motion.div
initial={{ opacity: 0, y: -10 }}
whileInView={{ opacity: 1, y: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.5 }}
className="flex flex-col gap-4"
>
{mealsList.map((mealItem) => {
const mealDate = new Date(mealItem.eaten_at);
const formattedDate = mealDate.toLocaleDateString("en-US", {
Expand All @@ -71,8 +78,11 @@ const HistoryPage = () => {
});

return (
<div
<motion.div
key={mealItem.id}
initial={{ opacity: 0, y: 8 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.25 }}
className="border-cookcraft-olive bg-cookcraft-white rounded-2xl border-3 p-6"
>
<div className="flex items-start justify-between">
Expand All @@ -96,15 +106,15 @@ const HistoryPage = () => {
</div>
<button
onClick={() => handleDeleteMeal(mealItem.id)}
className="text-cookcraft-red hover:text-cookcraft-yellow rounded-2xl border-3 px-4 py-2 font-bold transition-colors"
className="text-cookcraft-red hover:text-cookcraft-yellow cursor-pointer rounded-2xl border-3 px-4 py-2 font-bold transition-colors"
>
Delete
</button>
</div>
</div>
</motion.div>
);
})}
</div>
</motion.div>
)}
</div>
</div>
Expand Down
32 changes: 22 additions & 10 deletions src/app/inventory/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
} from "@/database/api/ingredients";
import { Ingredient } from "@/types/database";
import { INGREDIENT_CATEGORIES, UNITS } from "@/types/database";
import { motion } from "motion/react";

const InventoryPage = () => {
const [ingredients, setIngredients] = useState<Ingredient[]>([]);
Expand Down Expand Up @@ -143,17 +144,24 @@ const InventoryPage = () => {
</h1>
<button
onClick={() => setShowForm(!showForm)}
className="bg-cookcraft-red hover:bg-cookcraft-yellow rounded-2xl px-6 py-3 text-lg font-bold text-white transition-colors"
className="bg-cookcraft-red hover:bg-cookcraft-yellow cursor-pointer rounded-2xl px-6 py-3 text-lg font-bold text-white transition-colors"
>
{showForm ? "Cancel" : "Add Ingredient"}
</button>
</div>

{showForm && (
<div className="border-cookcraft-olive bg-cookcraft-white mb-8 rounded-2xl border-3 p-6">
<motion.div
initial={{ opacity: 0, y: -10 }}
whileInView={{ opacity: 1, y: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.5 }}
className="border-cookcraft-olive bg-cookcraft-white mb-8 rounded-2xl border-3 p-6"
>
<h2 className="text-cookcraft-olive mb-4 text-2xl font-bold">
{editingId ? "Edit Ingredient" : "Add Ingredient"}
</h2>

<form onSubmit={handleSubmit} className="flex flex-col gap-4">
<div>
<label className="text-cookcraft-olive text-sm font-medium">
Expand Down Expand Up @@ -246,20 +254,20 @@ const InventoryPage = () => {
<div className="flex gap-4">
<button
type="submit"
className="bg-cookcraft-red hover:bg-cookcraft-yellow flex-1 rounded-2xl p-3 text-lg font-bold text-white transition-colors"
className="bg-cookcraft-red hover:bg-cookcraft-yellow flex-1 cursor-pointer rounded-2xl p-3 text-lg font-bold text-white transition-colors"
>
{editingId ? "Update" : "Add"}
</button>
<button
type="button"
onClick={resetForm}
className="border-cookcraft-olive text-cookcraft-olive hover:bg-cookcraft-white flex-1 rounded-2xl border-3 p-3 text-lg font-bold transition-colors"
className="border-cookcraft-olive text-cookcraft-olive hover:bg-cookcraft-green flex-1 cursor-pointer rounded-2xl border-3 p-3 text-lg font-bold transition-colors"
>
Cancel
</button>
</div>
</form>
</div>
</motion.div>
)}

<div className="mb-6 flex gap-4">
Expand All @@ -273,7 +281,7 @@ const InventoryPage = () => {
<select
value={filterCategory}
onChange={(e) => setFilterCategory(e.target.value)}
className="border-cookcraft-olive rounded-2xl border-3 p-3"
className="border-cookcraft-olive hover:border-cookcraft-red cursor-pointer rounded-2xl border-3 p-3"
>
<option value="">All Categories</option>
{INGREDIENT_CATEGORIES.map((cat) => (
Expand Down Expand Up @@ -307,8 +315,12 @@ const InventoryPage = () => {
{items.map((ingredient) => {
const isExpanded = expandedId === ingredient.id;
return (
<div
<motion.div
key={ingredient.id}
initial={{ opacity: 0, y: -10 }}
whileInView={{ opacity: 1, y: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.5 }}
className="border-cookcraft-olive bg-cookcraft-white rounded-2xl border-3 p-4"
>
<div
Expand All @@ -334,13 +346,13 @@ const InventoryPage = () => {
<div className="mt-4 flex gap-2">
<button
onClick={() => handleQuickAdd(ingredient)}
className="bg-cookcraft-green hover:bg-cookcraft-yellow flex-1 rounded-2xl p-2 text-sm font-bold text-white transition-colors"
className="bg-cookcraft-green hover:bg-cookcraft-yellow flex-1 cursor-pointer rounded-2xl p-2 text-sm font-bold text-white transition-colors"
>
+1
</button>
<button
onClick={() => handleEdit(ingredient)}
className="text-cookcraft-red hover:text-cookcraft-yellow flex-1 rounded-2xl border-3 p-2 text-sm font-bold transition-colors"
className="text-cookcraft-red hover:text-cookcraft-yellow flex-1 cursor-pointer rounded-2xl border-3 p-2 text-sm font-bold transition-colors"
>
Edit
</button>
Expand All @@ -356,7 +368,7 @@ const InventoryPage = () => {
</button>
</div>
)}
</div>
</motion.div>
);
})}
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/app/login/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ const LoginPage = () => {
<button
type="submit"
disabled={loading}
className="bg-cookcraft-red hover:bg-cookcraft-yellow disabled:bg-cookcraft-green mt-2 rounded-2xl p-4 text-lg font-bold text-white transition-colors disabled:cursor-not-allowed"
className="bg-cookcraft-red hover:bg-cookcraft-yellow disabled:bg-cookcraft-green mt-2 cursor-pointer rounded-2xl p-4 text-lg font-bold text-white transition-colors disabled:cursor-not-allowed"
>
{loading ? "Sending Magic Link..." : "Send Magic Link"}
</button>
Expand Down
4 changes: 2 additions & 2 deletions src/app/profile/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,7 +176,7 @@ const ProfilePage = () => {
{!isEditing && (
<button
onClick={() => setIsEditing(true)}
className="text-cookcraft-red hover:text-cookcraft-yellow font-medium"
className="text-cookcraft-red hover:text-cookcraft-yellow cursor-pointer font-medium"
>
Edit
</button>
Expand Down Expand Up @@ -381,7 +381,7 @@ const ProfilePage = () => {
<div className="border-cookcraft-olive mt-8 border-t-2 pt-6">
<button
onClick={handleUserSignOut}
className="bg-cookcraft-red hover:bg-cookcraft-yellow w-full rounded-2xl p-4 text-lg font-bold text-white transition-colors"
className="bg-cookcraft-red hover:bg-cookcraft-yellow w-full cursor-pointer rounded-2xl p-4 text-lg font-bold text-white transition-colors"
>
Sign Out
</button>
Expand Down
Loading
Loading