centralize the theming
This commit is contained in:
parent
30b28056de
commit
db8b20ee71
20 changed files with 183 additions and 114 deletions
|
|
@ -9,6 +9,7 @@
|
|||
|
||||
- Node.js & Express
|
||||
- PostgreSQL
|
||||
- Prisma
|
||||
|
||||
#### Containerization:
|
||||
|
||||
|
|
@ -18,4 +19,4 @@
|
|||
|
||||
- Tailwind CSS
|
||||
|
||||
You can find a production build of the app at https://recipe-app.fredzernia.com
|
||||
I have a production build of the app hosted in docker served with caddy on a vps running nixos that you can access here: https://recipe-app.fredzernia.com
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ WORKDIR /usr/src/app
|
|||
|
||||
COPY package*.json ./
|
||||
|
||||
RUN if [ "$NODE_ENV" = "dev" ]; then npm install; else npm install --only=production; fi
|
||||
RUN if [ "$NODE_ENV" = "dev" ]; then npm install; else npm install --omit=dev; fi
|
||||
|
||||
COPY . .
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
"version": "1.0.0",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"dev": "nodemon ./src/index.js",
|
||||
"dev": "nodemon ./src/index.ts",
|
||||
"production": "tsc && node ./dist/index.js",
|
||||
"demo": "tsc && node ./dist/index.js"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ WORKDIR /usr/src/app
|
|||
|
||||
COPY package*.json ./
|
||||
|
||||
RUN if [ "$NODE_ENV" = "dev" ]; then npm install; else npm install --only=production; fi
|
||||
RUN if [ "$NODE_ENV" = "dev" ]; then npm install; else npm install --omit=dev; fi
|
||||
|
||||
COPY . .
|
||||
|
||||
|
|
|
|||
20
frontend/package-lock.json
generated
20
frontend/package-lock.json
generated
|
|
@ -8,17 +8,17 @@
|
|||
"name": "frontend",
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"@types/node": "^24.2.0",
|
||||
"autoprefixer": "^10.4.21",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
"react-router-dom": "^7.6.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.29.0",
|
||||
"@types/node": "^24.2.0",
|
||||
"@types/react": "^19.1.8",
|
||||
"@types/react-dom": "^19.1.6",
|
||||
"@vitejs/plugin-react": "^4.5.2",
|
||||
"autoprefixer": "^10.4.21",
|
||||
"eslint": "^9.29.0",
|
||||
"eslint-plugin-react-hooks": "^5.2.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.20",
|
||||
|
|
@ -1469,6 +1469,7 @@
|
|||
"version": "24.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-24.2.0.tgz",
|
||||
"integrity": "sha512-3xyG3pMCq3oYCNg7/ZP+E1ooTaGB4cG8JWRsqqOYQdbWNY4zbaV0Ennrd7stjiJEFZCaybcIgpTjJWHRfBSIDw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"undici-types": "~7.10.0"
|
||||
|
|
@ -1893,6 +1894,7 @@
|
|||
"version": "10.4.21",
|
||||
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
|
||||
"integrity": "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
"type": "opencollective",
|
||||
|
|
@ -1974,6 +1976,7 @@
|
|||
"version": "4.25.1",
|
||||
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.25.1.tgz",
|
||||
"integrity": "sha512-KGj0KoOMXLpSNkkEI6Z6mShmQy0bc1I+T7K9N81k4WWMrfz+6fQ6es80B/YLAeRoKvjYE1YSHHOW1qe9xIVzHw==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
"type": "opencollective",
|
||||
|
|
@ -2026,6 +2029,7 @@
|
|||
"version": "1.0.30001727",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001727.tgz",
|
||||
"integrity": "sha512-pB68nIHmbN6L/4C6MH1DokyR3bYqFwjaSs/sWDHGj4CTcFtQUQMuJftVwWkXq7mNWOybD3KhUv3oWHoGxgP14Q==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
"type": "opencollective",
|
||||
|
|
@ -2235,6 +2239,7 @@
|
|||
"version": "1.5.180",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.180.tgz",
|
||||
"integrity": "sha512-ED+GEyEh3kYMwt2faNmgMB0b8O5qtATGgR4RmRsIp4T6p7B8vdMbIedYndnvZfsaXvSzegtpfqRMDNCjjiSduA==",
|
||||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/emoji-regex": {
|
||||
|
|
@ -2290,6 +2295,7 @@
|
|||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
|
||||
"integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
|
|
@ -2632,6 +2638,7 @@
|
|||
"version": "4.3.7",
|
||||
"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
|
||||
"integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": "*"
|
||||
|
|
@ -3135,6 +3142,7 @@
|
|||
"version": "3.3.11",
|
||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
|
||||
"integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
|
|
@ -3160,6 +3168,7 @@
|
|||
"version": "2.0.19",
|
||||
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
|
||||
"integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/normalize-path": {
|
||||
|
|
@ -3176,6 +3185,7 @@
|
|||
"version": "0.1.2",
|
||||
"resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
|
||||
"integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
|
|
@ -3326,6 +3336,7 @@
|
|||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
|
||||
"integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
|
||||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/picomatch": {
|
||||
|
|
@ -3365,6 +3376,7 @@
|
|||
"version": "8.5.6",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
|
||||
"integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
"type": "opencollective",
|
||||
|
|
@ -3507,6 +3519,7 @@
|
|||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
|
||||
"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/prelude-ls": {
|
||||
|
|
@ -3810,6 +3823,7 @@
|
|||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
|
||||
"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
|
||||
"dev": true,
|
||||
"license": "BSD-3-Clause",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
|
|
@ -4174,12 +4188,14 @@
|
|||
"version": "7.10.0",
|
||||
"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.10.0.tgz",
|
||||
"integrity": "sha512-t5Fy/nfn+14LuOc2KNYg75vZqClpAiqscVvMygNnlsHBFpSXdJaYtXMcdNLpl/Qvc3P2cB3s6lOV51nqsFq4ag==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/update-browserslist-db": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
|
||||
"integrity": "sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
"type": "opencollective",
|
||||
|
|
|
|||
|
|
@ -7,5 +7,5 @@
|
|||
}
|
||||
|
||||
.page-outer {
|
||||
@apply bg-amber-100 border border-amber-200 rounded-bl-lg rounded-br-lg p-6 md:p-8 lg:p-10 max-w-6xl mx-auto font-serif;
|
||||
@apply bg-[var(--color-primaryBg)] border border-[var(--color-primaryBorder)] rounded-bl-lg rounded-br-lg p-6 md:p-8 lg:p-10 max-w-6xl mx-auto font-serif;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ const AddBulkIngredients: React.FC<AddBulkIngredientsProps> = ({ ingredients, on
|
|||
|
||||
return (
|
||||
<div>
|
||||
<h3 className="text-xl font-bold">Ingredients:</h3>
|
||||
<h3 className="text-xl font-bold text-[var(--color-secondaryTextDark)]">Ingredients:</h3>
|
||||
<textarea
|
||||
rows={8}
|
||||
value={textValue}
|
||||
|
|
@ -43,7 +43,7 @@ const AddBulkIngredients: React.FC<AddBulkIngredientsProps> = ({ ingredients, on
|
|||
onKeyDown={handleKeyDown}
|
||||
onBlur={handleBlur}
|
||||
placeholder="Enter ingredients separated by new line"
|
||||
className="mb-4 p-2 border border-gray-300 rounded w-full"
|
||||
className="mb-4 p-2 border border-[var(--color-primaryBorder)] rounded w-full"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ const AddBulkSteps: React.FC<AddBulkStepsProps> = ({ steps, onChange }) => {
|
|||
|
||||
return (
|
||||
<div>
|
||||
<h3 className="text-xl font-bold">Steps:</h3>
|
||||
<h3 className="text-xl font-bold text-[var(--color-secondaryTextDark)]">Steps:</h3>
|
||||
<textarea
|
||||
rows={8}
|
||||
value={textValue}
|
||||
|
|
@ -55,7 +55,7 @@ const AddBulkSteps: React.FC<AddBulkStepsProps> = ({ steps, onChange }) => {
|
|||
onKeyDown={handleKeyDown}
|
||||
onBlur={handleBlur}
|
||||
placeholder="Enter steps separated by new line"
|
||||
className="mb-4 p-2 border border-gray-300 rounded w-full"
|
||||
className="mb-4 p-2 border border-[var(--color-primaryBorder)] rounded w-full"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -6,14 +6,14 @@ import TimeDisplay from "../components/TimeDisplay.tsx"
|
|||
function CookbookRecipeTile({ recipe }: { recipe: RecipeSmall }) {
|
||||
|
||||
return (
|
||||
<div className="recipe-card m-2 bg-amber-200 p-4 rounded shadow">
|
||||
<div className="recipe-card m-2 bg-[var(--color-secondaryBg)] p-4 rounded shadow">
|
||||
<div className="flex justify-between items-center recipe-name">
|
||||
<h3 className="font-bold text-xl"><Link to={`/recipe/${recipe.id}`} className="text-blue-500">{recipe.name}</Link></h3>
|
||||
<div className="ar-button bg-amber-600 text-white py-0 px-2 rounded m-2">
|
||||
<h3 className="font-bold text-xl"><Link to={`/recipe/${recipe.id}`} className="text-[var(--color-textLink)]">{recipe.name}</Link></h3>
|
||||
<div className="ar-button bg-[var(--color-buttonBg)] text-[var(--color-textLight)] py-0 px-2 rounded m-2">
|
||||
{recipe.cuisine}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex justify-between items-center text-[var(--color-textDark)]">
|
||||
⏰ <TimeDisplay minutes={recipe.prep_minutes + recipe.cook_minutes} />
|
||||
<StarRating rating={recipe.stars} onRatingChange={() => { }} />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,14 +11,14 @@ const DemoModal = ({ isOpen, onClose, closeModal }: DemoModalProps) => {
|
|||
|
||||
return (
|
||||
<div className={`z-50 modal-overlay fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center`} onClick={onClose}>
|
||||
<div className="modal-content bg-amber-200 p-12 rounded-md shadow-md" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="modal-content bg-[var(--color-primaryBg)] p-12 rounded-md shadow-md" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="modal-msg">
|
||||
<p>Thanks for checking out my app! Database write operations are disabled in demo mode.</p>
|
||||
<p><a className="text-blue-600" href="mailto:access@fredzernia.com">access@fredzernia.com</a> to request access to the production build</p>
|
||||
<p><a className="text-[var(--color-textLink)]" href="mailto:access@fredzernia.com">access@fredzernia.com</a> to request access to the production build</p>
|
||||
<p>Find out more about this app <Link to={'/about'} className="text-blue-600">here</Link></p>
|
||||
</div>
|
||||
<div className="modal-buttons">
|
||||
<button className="bg-amber-600 rounded-md m-4 pt-1 pb-1 pr-2 pl-2" onClick={closeModal}>OK</button>
|
||||
<button className="bg-[var(--color-buttonBg)] rounded-md m-4 pt-1 pb-1 pr-2 pl-2" onClick={closeModal}>OK</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,13 +11,13 @@ const Modal = ({ isOpen, onClose, message, confirmAction, cancelAction }: ModalP
|
|||
|
||||
return (
|
||||
<div className={`z-50 modal-overlay fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center`} onClick={onClose}>
|
||||
<div className="modal-content bg-amber-200 p-12 rounded-md shadow-md" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="modal-content bg-[var(--color-secondaryBg)] p-12 rounded-md shadow-md" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="modal-msg">
|
||||
<span aria-labelledby="message">{message}</span>
|
||||
</div>
|
||||
<div className="modal-buttons">
|
||||
<button className="bg-amber-600 rounded-md m-4 pt-1 pb-1 pr-2 pl-2" onClick={confirmAction}>Yes, Delete</button>
|
||||
<button className="bg-amber-600 rounded-md m-4 pt-1 pb-1 pr-2 pl-2" onClick={cancelAction}>Cancel</button>
|
||||
<button className="bg-[var(--color-buttonBg)] rounded-md m-4 pt-1 pb-1 pr-2 pl-2" onClick={confirmAction}>Yes, Delete</button>
|
||||
<button className="bg-[var(--color-buttonBg)] rounded-md m-4 pt-1 pb-1 pr-2 pl-2" onClick={cancelAction}>Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
import { useState, useEffect } from "react";
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
import { Link, useLocation } from "react-router-dom";
|
||||
import { getRecipes } from "../services/frontendApi.js";
|
||||
|
||||
const RecipeBookTabs = () => {
|
||||
const location = useLocation();
|
||||
const [lastViewedRecipeId, setLastViewedRecipeId] = useState<number | null>(null);
|
||||
const [lastViewedRecipeId, setLastViewedRecipeId] = useState<number | null>(
|
||||
null,
|
||||
);
|
||||
|
||||
const loadRandomRecipeId = async () => {
|
||||
try {
|
||||
|
|
@ -14,7 +16,7 @@ const RecipeBookTabs = () => {
|
|||
setLastViewedRecipeId(recipes[randomIndex].id);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading recipes:', error);
|
||||
console.error("Error loading recipes:", error);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -33,54 +35,61 @@ const RecipeBookTabs = () => {
|
|||
}
|
||||
}, []);
|
||||
|
||||
|
||||
const tabs = [
|
||||
{ id: '/', label: 'Cookbook', icon: '📚' },
|
||||
{ id: `/recipe/${lastViewedRecipeId}`, label: 'Recipe', icon: '🥗' },
|
||||
{ id: '/add-recipe', label: 'Add', icon: '➕' },
|
||||
{ id: '/about', label: 'About', icon: '🍽️' },
|
||||
{ id: "/", label: "Cookbook", icon: "📚" },
|
||||
{ id: `/recipe/${lastViewedRecipeId}`, label: "Recipe", icon: "🥗" },
|
||||
{ id: "/add-recipe", label: "Add", icon: "➕" },
|
||||
{ id: "/about", label: "About", icon: "🍽️" },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="bg-amber-50 h-16 flex-shrink-0 rounded-tl-lg rounded-tr-lg">
|
||||
<div className="bg-[var(--color-backdrop)] h-16 flex-shrink-0 rounded-tl-lg rounded-tr-lg">
|
||||
<div className="relative h-full">
|
||||
<div className="absolute bottom-0 left-0 right-0 h-0.5 bg-amber-200"></div>
|
||||
<div className="absolute bottom-0 left-0 right-0 h-0.5 bg-[var(--color-primaryBg)]"></div>
|
||||
|
||||
<div className="flex space-x-1 px-6 pt-4 h-full items-end justify-center">
|
||||
{tabs.map((tab) => {
|
||||
const isActive = location.pathname === tab.id || (location.pathname.startsWith(tab.id) && tab.id === "/recipe/");
|
||||
const isActive =
|
||||
location.pathname === tab.id ||
|
||||
(location.pathname.startsWith(tab.id) && tab.id === "/recipe/");
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={tab.id}
|
||||
to={tab.id}
|
||||
className={`
|
||||
relative px-3 py-2 md:px-6 md:py-3 rounded-t-lg font-bold text-sm transform text-amber-800
|
||||
relative px-3 py-2 md:px-6 md:py-3 rounded-t-lg font-bold text-sm transform
|
||||
${isActive
|
||||
? 'bg-amber-100 scale-105 z-10 border-t-2 border-amber-200'
|
||||
: 'bg-amber-200 hover:bg-amber-100 hover:text-amber-700 hover:scale-102 shadow-sm'
|
||||
? "bg-[var(--color-primaryBg)] scale-105 z-10 border-t-2 border-[var(--color-primaryBorder)] text-[var(--color-textDark)]"
|
||||
: "bg-[var(--color-secondaryBg)] hover:bg-[var(--color-secondaryBgHover)] text-[var(--color-textDark)] hover:scale-102 shadow-sm"
|
||||
}
|
||||
before:absolute before:bottom-0 before:left-0 before:right-0 before:h-0.5
|
||||
${isActive ? '' : ''}
|
||||
before:absolute before:bottom-0 before:left-0 before:right-0 before:h-0.5
|
||||
${isActive ? "" : ""}
|
||||
`}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<span className={`text-lg pr-2 ${window.innerWidth <= 640 ? 'hidden' : ''}`}>{tab.icon}</span>
|
||||
<span
|
||||
className={`text-lg pr-2 ${window.innerWidth <= 640 ? "hidden" : ""}`}
|
||||
>
|
||||
{tab.icon}
|
||||
</span>
|
||||
<span>{tab.label}</span>
|
||||
</div>
|
||||
|
||||
{
|
||||
isActive && (
|
||||
<>
|
||||
<div className={`absolute -left-2 bottom-0 w-2 h-2 bg-white ${location.pathname === '/' ? 'hidden' : ''}`}>
|
||||
<div className="absolute top-0 left-0 w-2 h-2 bg-amber-200 rounded-br-lg"></div>
|
||||
</div>
|
||||
<div className={`absolute -right-2 bottom-0 w-2 h-2 bg-white ${location.pathname === '/about' ? 'hidden' : ''}`}>
|
||||
<div className="absolute top-0 right-0 w-2 h-2 bg-amber-200 rounded-bl-lg"></div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
{isActive && (
|
||||
<>
|
||||
<div
|
||||
className={`absolute -left-2.5 bottom-0 w-2 h-2 bg-[var(--color-primaryBg)] ${location.pathname === "/" ? "hidden" : ""}`}
|
||||
>
|
||||
<div className="absolute top-0 left-0 w-2 h-2 bg-[var(--color-secondaryBg)] rounded-br-lg"></div>
|
||||
</div>
|
||||
<div
|
||||
className={`absolute -right-2.5 bottom-0 w-2 h-2 bg-[var(--color-primaryBg)] ${location.pathname === "/about" ? "hidden" : ""}`}
|
||||
>
|
||||
<div className="absolute top-0 right-0 w-2 h-2 bg-[var(--color-secondaryBg)] rounded-bl-lg"></div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
|
|
|
|||
21
frontend/src/css/colorTheme.css
Normal file
21
frontend/src/css/colorTheme.css
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--color-backdrop: #ffffff;
|
||||
--color-primaryBg: #fef3c7;
|
||||
--color-primaryBgHover: #fde68a;
|
||||
--color-primaryBorder: #fde68a;
|
||||
--color-secondaryBg: #fde68a;
|
||||
--color-secondaryBgHover: #fef3c7;
|
||||
--color-secondaryBorder: #0f087c;
|
||||
--color-buttonBg: #d97706;
|
||||
--color-buttonBgHover: #b45309;
|
||||
--color-textDark: #78350f;
|
||||
--color-secondaryTextDark: #2f2f2f;
|
||||
--color-textLight: #ffffff;
|
||||
--color-textLink: #3b82f6;
|
||||
}
|
||||
}
|
||||
|
|
@ -3,17 +3,17 @@ function About() {
|
|||
return (
|
||||
<div className="about page-outer">
|
||||
<div>
|
||||
<h2 className="text-xl">This app uses the following components:</h2>
|
||||
<h2 className="mt-4 font-bold text-xl">Frontend:</h2>
|
||||
<h2 className="text-xl text-[var(--color-secondaryTextDark)]">This app uses the following components:</h2>
|
||||
<h2 className="mt-4 font-bold text-xl text-[var(--color-secondaryTextDark)]">Frontend:</h2>
|
||||
<ul><li>React</li><li>TypeScript</li></ul>
|
||||
<h2 className="mt-4 font-bold text-xl">Backend:</h2>
|
||||
<ul><li>Node.js & Express</li><li>PostgreSQL</li></ul>
|
||||
<h2 className="mt-4 font-bold text-xl">Containerization:</h2>
|
||||
<h2 className="mt-4 font-bold text-xl text-[var(--color-secondaryTextDark)]">Backend:</h2>
|
||||
<ul><li>Node.js & Express</li><li>PostgreSQL</li><li>Prisma</li></ul>
|
||||
<h2 className="mt-4 font-bold text-xl text-[var(--color-secondaryTextDark)]">Containerization:</h2>
|
||||
<ul><li>Docker</li></ul>
|
||||
<h2 className="mt-4 font-bold text-xl">Styling/UI:</h2>
|
||||
<h2 className="mt-4 font-bold text-xl text-[var(--color-secondaryTextDark)]">Styling/UI:</h2>
|
||||
<ul><li>Tailwind CSS</li></ul>
|
||||
<p className="mt-4">More about me <a className="text-blue-600" target="_blank" href="https://fredzernia.com">here</a> |
|
||||
Code for this app <a className="text-blue-600" target="_blank" href="https://forgejo.fredzernia.com/fred/recipe_app">here</a></p>
|
||||
<p className="mt-4 text-[var(--color-secondaryTextDark)]">More about me <a className="text-[var(--color-textLink)]" target="_blank" href="https://fredzernia.com">here</a> |
|
||||
Code for this app <a className="text-[var(--color-textLink)]" target="_blank" href="https://forgejo.fredzernia.com/fred/recipe_app">here</a></p>
|
||||
</div>
|
||||
</div >
|
||||
)
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import AddBulkIngredients from "../components/AddBulkIngredients.tsx"
|
|||
import AddBulkSteps from "../components/AddBulkSteps.tsx"
|
||||
import StarRating from "../components/StarRating.tsx"
|
||||
import DemoModal from '../components/DemoModal.tsx'
|
||||
import '../css/colorTheme.css';
|
||||
|
||||
interface Step {
|
||||
step_number: number;
|
||||
|
|
@ -65,7 +66,7 @@ function AddRecipe() {
|
|||
<input
|
||||
type="text"
|
||||
placeholder="Title"
|
||||
className="recipe-name mb-4 p-2 border border-gray-300 rounded w-full"
|
||||
className="recipe-name mb-4 p-2 border border-[var(--color-primaryBorder)] rounded w-full"
|
||||
value={recipeName}
|
||||
maxLength={35}
|
||||
onChange={(e) => setRecipeName(e.target.value)}
|
||||
|
|
@ -73,7 +74,7 @@ function AddRecipe() {
|
|||
<input
|
||||
type="text"
|
||||
placeholder="Cuisine"
|
||||
className="recipe-cusine mb-4 p-2 border border-gray-300 rounded w-full"
|
||||
className="recipe-cusine mb-4 p-2 border border-[var(--color-primaryBorder)] rounded w-full"
|
||||
value={recipeCuisine}
|
||||
maxLength={15}
|
||||
onChange={(e) => setRecipeCuisine(e.target.value)}
|
||||
|
|
@ -81,32 +82,32 @@ function AddRecipe() {
|
|||
<input
|
||||
type="text"
|
||||
placeholder="Author"
|
||||
className="recipe-cusine mb-4 p-2 border border-gray-300 rounded w-full"
|
||||
className="recipe-cusine mb-4 p-2 border border-[var(--color-primaryBorder)] rounded w-full"
|
||||
value={author}
|
||||
onChange={(e) => setAuthor(e.target.value)}
|
||||
/>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div>
|
||||
<label htmlFor="prepTime" className="mr-2 font-bold">Prep Time:</label>
|
||||
<label htmlFor="prepTime" className="mr-2 font-bold text-[var(--color-secondaryTextDark)]">Prep Time:</label>
|
||||
<input
|
||||
type="number"
|
||||
placeholder="prep time in minutes"
|
||||
className="recipe-cusine p-2 border border-gray-300 rounded w-24"
|
||||
className="recipe-cusine p-2 border border-[var(--color-primaryBorder)] rounded w-24"
|
||||
value={prepMinutes}
|
||||
onChange={(e) => setPrepMinutes(parseInt(e.target.value))}
|
||||
/>
|
||||
<span className="ml-2">minutes</span>
|
||||
<span className="ml-2 text-[var(--color-secondaryTextDark)]">minutes</span>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="cookTime" className="mr-2 font-bold">Cook Time:</label>
|
||||
<label htmlFor="cookTime" className="mr-2 font-bold text-[var(--color-secondaryTextDark)]">Cook Time:</label>
|
||||
<input
|
||||
type="number"
|
||||
placeholder="cook time in minutes"
|
||||
className="recipe-cusine p-2 border border-gray-300 rounded w-24"
|
||||
className="recipe-cusine p-2 border border-[var(--color-primaryBorder)] rounded w-24"
|
||||
value={cookMinutes}
|
||||
onChange={(e) => setCookMinutes(parseInt(e.target.value))}
|
||||
/>
|
||||
<span className="ml-2">minutes</span>
|
||||
<span className="ml-2 text-[var(--color-secondaryTextDark)]">minutes</span>
|
||||
</div>
|
||||
<div>
|
||||
<StarRating rating={stars} onRatingChange={(newRating: number) => setStars(newRating)} />
|
||||
|
|
@ -142,7 +143,7 @@ function AddRecipe() {
|
|||
</li>
|
||||
))}
|
||||
</ul>*/}
|
||||
<button type="submit" className="ar-button bg-amber-600 text-white py-2 px-4 rounded hover:bg-amber-700">
|
||||
<button type="submit" className="ar-button bg-[var(--color-buttonBg)] text-[var(--color-textLight)] py-2 px-4 rounded hover:bg-[var(--color-buttonBgHover)]">
|
||||
submit
|
||||
</button>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import { useState, useEffect } from "react";
|
||||
import CookbookRecipeTile from "../components/CookbookRecipeTile.tsx"
|
||||
import CookbookRecipeTile from "../components/CookbookRecipeTile.tsx";
|
||||
import { getRecipes } from "../services/frontendApi.js";
|
||||
import { type RecipeSmall } from "../types/Recipe.ts"
|
||||
|
||||
import { type RecipeSmall } from "../types/Recipe.ts";
|
||||
import '../css/colorTheme.css'
|
||||
|
||||
function AllRecipes() {
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
|
|
@ -18,13 +18,16 @@ function AllRecipes() {
|
|||
try {
|
||||
const recipes = await getRecipes();
|
||||
setRecipes(recipes);
|
||||
if (process.env.NODE_ENV === 'dev') {
|
||||
console.log(recipes)
|
||||
if (process.env.NODE_ENV === "dev") {
|
||||
console.log(recipes);
|
||||
}
|
||||
const uniqueCuisines: string[] = recipes.length > 0
|
||||
? Array.from(new Set(recipes.map((recipe: RecipeSmall) => recipe.cuisine)))
|
||||
: [];
|
||||
setCuisines(uniqueCuisines)
|
||||
const uniqueCuisines: string[] =
|
||||
recipes.length > 0
|
||||
? Array.from(
|
||||
new Set(recipes.map((recipe: RecipeSmall) => recipe.cuisine)),
|
||||
)
|
||||
: [];
|
||||
setCuisines(uniqueCuisines);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
setError("Failed to load recipes...");
|
||||
|
|
@ -37,38 +40,51 @@ function AllRecipes() {
|
|||
}
|
||||
}, [shouldFetchRecipes]);
|
||||
|
||||
const filteredRecipes = selectedCuisine ? recipes.filter(recipe => recipe.cuisine === selectedCuisine) : recipes;
|
||||
const filteredRecipes = selectedCuisine
|
||||
? recipes.filter((recipe) => recipe.cuisine === selectedCuisine)
|
||||
: recipes;
|
||||
|
||||
return (
|
||||
<div className="add-recipe-card bg-amber-100 border border-amber-200 rounded-bl-lg rounded-br-lg p-6 md:p-8 lg:p-10 max-w-6xl mx-auto font-serif">
|
||||
<h1 className="text-center text-3xl sm:text-4xl md:text-5xl font-bold mb-6 text-amber-800">Recipe Index</h1>
|
||||
<div className="add-recipe-card bg-[var(--color-primaryBg)] border border-[var(--color-primaryBorder)] rounded-bl-lg rounded-br-lg p-6 md:p-8 lg:p-10 max-w-6xl mx-auto font-serif">
|
||||
<h1 className="text-center text-3xl sm:text-4xl md:text-5xl font-bold mb-6 text-[var(--color-textDark)]">
|
||||
Recipe Index
|
||||
</h1>
|
||||
<div className="cuisines-buttons flex flex-wrap justify-center">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="search"
|
||||
className="recipe-name mb-4 p-2 border border-gray-300 rounded w-full"
|
||||
className="recipe-name mb-4 p-2 border border-[var(--color-primaryBorder)] rounded w-full"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
/>
|
||||
{cuisines.map((cuisine) => (
|
||||
<button
|
||||
key={cuisine}
|
||||
className={`ar-button bg-amber-600 text-white py-2 px-4 rounded hover:bg-amber-700 m-2 ${selectedCuisine === cuisine ? 'selected bg-amber-800' : ''}`}
|
||||
onClick={() => setSelectedCuisine((prevState => prevState === cuisine ? "" : cuisine))}
|
||||
className={`ar-button bg-[var(--color-buttonBg)] text-[var(--color-textLight)] py-2 px-4 rounded hover:bg-[var(--color-buttonBgHover)] m-2 ${selectedCuisine === cuisine ? "selected bg-[var(--color-buttonBgHover)]" : ""}`}
|
||||
onClick={() =>
|
||||
setSelectedCuisine((prevState) =>
|
||||
prevState === cuisine ? "" : cuisine,
|
||||
)
|
||||
}
|
||||
>
|
||||
{cuisine}
|
||||
</button>
|
||||
))}
|
||||
</div> {error && <div className="error-message">{error}</div>}
|
||||
</div>{" "}
|
||||
{error && <div className="error-message">{error}</div>}
|
||||
{loading ? (
|
||||
<div className="loading">Loading...</div>
|
||||
) : (
|
||||
<div className="recipe-outer bg-amber-100 p-4 md:p-8 lg:p-12">
|
||||
<div className="recipe-outer bg-[var(--color-primaryBg)] p-4 md:p-8 lg:p-12">
|
||||
<div className="recipes-grid grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
|
||||
{filteredRecipes.map((recipe) => (
|
||||
recipe.name.toLowerCase().includes(searchQuery.toLowerCase()) &&
|
||||
<CookbookRecipeTile recipe={recipe} key={recipe.id} />
|
||||
))}
|
||||
{filteredRecipes.map(
|
||||
(recipe) =>
|
||||
recipe.name
|
||||
.toLowerCase()
|
||||
.includes(searchQuery.toLowerCase()) && (
|
||||
<CookbookRecipeTile recipe={recipe} key={recipe.id} />
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -76,4 +92,4 @@ function AllRecipes() {
|
|||
);
|
||||
}
|
||||
|
||||
export default AllRecipes
|
||||
export default AllRecipes;
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ function RecipeIngredients() {
|
|||
{loading ? (
|
||||
<div className="loading">Loading...</div>
|
||||
) : (
|
||||
<div className="recipe-outer bg-amber-100 p-4 md:p-8 lg:p-12">
|
||||
<div className="recipe-outer bg-[var(--color-primaryBg)] p-4 md:p-8 lg:p-12">
|
||||
<div className="recipes-grid grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
|
||||
{recipeIngredients.map((ing, idx) => (
|
||||
<li key={idx}>{ing}</li>
|
||||
|
|
|
|||
|
|
@ -101,34 +101,34 @@ function RecipePage() {
|
|||
<div className="m-2">
|
||||
<Link
|
||||
to="/"
|
||||
className="ar-button bg-amber-600 text-white py-2 px-4 rounded hover:bg-amber-700"
|
||||
className="ar-button bg-[var(--color-buttonBg)] text-[var(--color-textLight)] py-2 px-4 rounded hover:bg-[var(--color-buttonBgHover)]"
|
||||
>
|
||||
Return to Cookbook
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="border-b-2 border-amber-300 pb-4">
|
||||
<div className="border-b-2 border-[var(--color-primaryBorder)] pb-4">
|
||||
<div className="recipe-card">
|
||||
<div className="flex relative justify-between">
|
||||
<button
|
||||
onClick={() => {}}
|
||||
onClick={() => { }}
|
||||
className="invisible ar-button py-1 px-1 rounded self-start"
|
||||
>
|
||||
🗑️
|
||||
</button>
|
||||
<h3 className="text-center max-w-lg px-4 text-2xl lg:text-3xl font-bold text-amber-900">
|
||||
<h3 className="text-center max-w-lg px-4 text-2xl lg:text-3xl font-bold text-[var(--color-textDark)]">
|
||||
{recipe.details.name}
|
||||
</h3>
|
||||
<button
|
||||
onClick={openModal}
|
||||
className="ar-button bg-amber-500 text-white py-1 px-1 rounded hover:bg-amber-600 self-start"
|
||||
className="ar-button bg-[var(--color-buttonBg)] text-[var(--color-textLight)] py-1 px-1 rounded hover:bg-[var(--color-buttonBgHover)] self-start"
|
||||
>
|
||||
🗑️
|
||||
</button>
|
||||
</div>
|
||||
<div className="mt-1">
|
||||
<p className="text-amber-700 italic text-lg">
|
||||
<p className="text-[var(--color-textDark)] italic text-lg">
|
||||
{recipe.details.cuisine}
|
||||
</p>
|
||||
<p>
|
||||
|
|
@ -140,22 +140,22 @@ function RecipePage() {
|
|||
</div>
|
||||
|
||||
<div className="grid lg:grid-cols-2 gap-6 mb-6">
|
||||
<div className="bg-white rounded-lg p-4 shadow-sm border border-amber-100">
|
||||
<h4 className="text-xl font-semibold text-amber-800 mb-3 flex items-center">
|
||||
<div className="bg-[var(--color-backdrop)] rounded-lg p-4 shadow-sm border border-[var(--color-primaryBorder)]">
|
||||
<h4 className="text-xl font-semibold text-[var(--color-textDark)] mb-3 flex items-center">
|
||||
Ingredients:
|
||||
</h4>
|
||||
<ul className="space-y-2">
|
||||
{recipe.ingredients.map((ingredient: string, index) => (
|
||||
<li key={index} className="text-gray-700 flex items-start">
|
||||
<span className="w-1.5 h-1.5 bg-amber-400 rounded-full mt-2 mr-3 flex-shrink-0"></span>
|
||||
<li key={index} className="text-[var(--color-secondaryTextDark)] flex items-start">
|
||||
<span className="w-1.5 h-1.5 bg-[var(--color-buttonBg)] rounded-full mt-2 mr-3 flex-shrink-0"></span>
|
||||
<span className="font-medium text-left">{ingredient}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg p-4 shadow-sm border border-amber-100">
|
||||
<h4 className="text-xl font-semibold text-amber-800 mb-3 flex items-center">
|
||||
<div className="bg-[var(--color-backdrop)] rounded-lg p-4 shadow-sm border border-[var(--color-primaryBorder)]">
|
||||
<h4 className="text-xl font-semibold text-[var(--color-textDark)] mb-3 flex items-center">
|
||||
Instructions:
|
||||
</h4>
|
||||
<ol className="space-y-3">
|
||||
|
|
@ -163,9 +163,9 @@ function RecipePage() {
|
|||
Object.keys(recipe.steps || {}).map((stepNumber) => (
|
||||
<li
|
||||
key={stepNumber}
|
||||
className="text-gray-700 flex items-start"
|
||||
className="text-[var(--color-secondaryTextDark)] flex items-start"
|
||||
>
|
||||
<span className="bg-amber-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold mr-3 mt-0.5 flex-shrink-0">
|
||||
<span className="bg-[var(--color-buttonBg)] text-[var(--color-textLight)] rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold mr-3 mt-0.5 flex-shrink-0">
|
||||
{recipe.steps[parseInt(stepNumber)].step_number}
|
||||
</span>
|
||||
<span className="leading-relaxed text-left">
|
||||
|
|
@ -177,8 +177,8 @@ function RecipePage() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t-2 border-amber-300 pt-4">
|
||||
<div className="flex justify-between items-center text-sm text-amber-600">
|
||||
<div className="border-t-2 border-[var(--color-primaryBorder)] pt-4">
|
||||
<div className="flex justify-between items-center text-sm text-[var(--color-textDark)]">
|
||||
{isWebSource ? (
|
||||
<span>Source: {recipe.details.author}</span>
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ function RecipeSteps() {
|
|||
{loading ? (
|
||||
<div className="loading">Loading...</div>
|
||||
) : (
|
||||
<div className="recipe-outer bg-amber-100 p-4 md:p-8 lg:p-12">
|
||||
<div className="recipe-outer bg-[var(--color-primaryBg)] p-4 md:p-8 lg:p-12">
|
||||
<div className="recipes-grid grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
|
||||
{recipeSteps.map(step => (
|
||||
<li key={step.id}>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,17 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: [
|
||||
"./index.html",
|
||||
"./src/**/*.{js,ts,jsx,tsx}",
|
||||
],
|
||||
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primaryBg: "#fff8dc",
|
||||
secondaryBg: "#87a96b",
|
||||
buttonBg: "#d2691e",
|
||||
darkText: "#2f2f2f",
|
||||
primaryTextColor: "#87a96b",
|
||||
},
|
||||
},
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue