diff --git a/frontend/postcss.config.js b/frontend/postcss.config.cjs similarity index 57% rename from frontend/postcss.config.js rename to frontend/postcss.config.cjs index 14502dc..a7d1379 100644 --- a/frontend/postcss.config.js +++ b/frontend/postcss.config.cjs @@ -1,6 +1,5 @@ -export default { +module.exports = { plugins: { "@tailwindcss/postcss": {}, - autoprefixer: {}, }, } diff --git a/frontend/src/App.css b/frontend/src/App.css index c4e01ad..507e3cd 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -1,10 +1,58 @@ - /* Import Tailwind layers */ -@tailwind base; -@tailwind components; +@import "tailwindcss"; @tailwind utilities; -/* App-specific tweaks */ +/* Custom recipe app styles */ +@layer components{ .app-container { - @apply p-4; + @apply p-4 flex; } + +.sidebar { + @apply min-w-[16rem] bg-gray-50 p-4 w-1/3 border-r pr-4; +} + +.sidebar-title { + @apply text-blue-900 font-bold mb-2; +} + +.sidebar-link { + @apply block bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition +} + +.sidebar-item-text { + @apply font-semibold text-blue-400 +} + +.content-title{ + @apply text-xl font-black mb-16 text-blue-300 +} + +.main-view { + @apply w-2/3 pl-4; +} + +.recipe-title { + @apply text-2xl font-bold; +} + +.recipe-image { + @apply my-4 w-64; +} + +.section-heading { + @apply text-2xl font-bold; +} + +.primary-button { + @apply bg-blue-300 px-4 py-2 shadow-md rounded-lg hover:bg-blue-400 text-gray-600 +} + +.default-button{ + @apply bg-gray-300 px-4 py-2 shadow-md rounded-lg hover:bg-gray-400 text-gray-600 +} + +.input-field { + @apply border p-2 w-full mb-2; +} +} \ No newline at end of file diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index eb8fc37..d655c62 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -2,6 +2,7 @@ import { BrowserRouter as Router, Routes, Route } from "react-router-dom" import RecipeListView from "./components/RecipeListView" import RecipeDetailView from "./components/RecipeDetailView" import RecipeEditView from "./components/RecipeEditView" +import "./App.css" /** * Main application component. diff --git a/frontend/src/components/RecipeDetailView.tsx b/frontend/src/components/RecipeDetailView.tsx index 20d2ef6..527c7f8 100644 --- a/frontend/src/components/RecipeDetailView.tsx +++ b/frontend/src/components/RecipeDetailView.tsx @@ -16,7 +16,7 @@ export default function RecipeDetailView() { return (
{recipe.instructions}
{/* Action buttons */} -